Folder restructure (#6304)

* Remove ui/app/keychains/

* Remove ui/app/img/ (unused images)

* Move conversion-util to helpers/utils/

* Move token-util to helpers/utils/

* Move /helpers/*.js inside /helpers/utils/

* Move util tests inside /helpers/utils/

* Renameand move confirm-transaction/util.js to helpers/utils/

* Move higher-order-components to helpers/higher-order-components/

* Move infura-conversion.json to helpers/constants/

* Move all utility functions to helpers/utils/

* Move pages directory to top-level

* Move all constants to helpers/constants/

* Move metametrics inside helpers/

* Move app and root inside pages/

* Move routes inside helpers/

* Re-organize ducks/

* Move reducers to ducks/

* Move selectors inside selectors/

* Move test out of test folder

* Move action, reducer, store inside store/

* Move ui components inside ui/

* Move UI components inside ui/

* Move connected components inside components/app/

* Move i18n-helper inside helpers/

* Fix unit tests

* Fix unit test

* Move pages components

* Rename routes component

* Move reducers to ducks/index

* Fix bad path in unit test

957 files changed, 37218 insertions, 37539 deletions

diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js
deleted file mode 100644
index 795bd7ce6..000000000
--- a/ui/app/accounts/new-account/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const PropTypes = require('prop-types')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getCurrentViewContext } = require('../../selectors')
-const classnames = require('classnames')
-
-const NewAccountCreateForm = require('./create-form')
-const NewAccountImportForm = require('../import')
-
-function mapStateToProps (state) {
-  return {
-    displayedForm: getCurrentViewContext(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    displayForm: form => dispatch(actions.setNewAccountForm(form)),
-    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    showExportPrivateKeyModal: () => {
-      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-    },
-    hideModal: () => dispatch(actions.hideModal()),
-    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
-  }
-}
-
-inherits(AccountDetailsModal, Component)
-function AccountDetailsModal (props) {
-  Component.call(this)
-
-  this.state = {
-    displayedForm: props.displayedForm,
-  }
-}
-
-AccountDetailsModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
-
-
-AccountDetailsModal.prototype.render = function () {
-  const { displayedForm, displayForm } = this.props
-
-  return h('div.new-account', {}, [
-
-    h('div.new-account__header', [
-
-      h('div.new-account__title', this.context.t('newAccount')),
-
-      h('div.new-account__tabs', [
-
-        h('div.new-account__tabs__tab', {
-          className: classnames('new-account__tabs__tab', {
-            'new-account__tabs__selected': displayedForm === 'CREATE',
-            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
-          }),
-          onClick: () => displayForm('CREATE'),
-        }, this.context.t('createDen')),
-
-        h('div.new-account__tabs__tab', {
-          className: classnames('new-account__tabs__tab', {
-            'new-account__tabs__selected': displayedForm === 'IMPORT',
-            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
-          }),
-          onClick: () => displayForm('IMPORT'),
-        }, this.context.t('import')),
-
-      ]),
-
-    ]),
-
-    h('div.new-account__form', [
-
-      displayedForm === 'CREATE'
-        ? h(NewAccountCreateForm)
-        : h(NewAccountImportForm),
-
-    ]),
-
-  ])
-}
diff --git a/ui/app/actions.js b/ui/app/actions.js
deleted file mode 100644
index d8363eba6..000000000
--- a/ui/app/actions.js
+++ /dev/null
@@ -1,2761 +0,0 @@
-const abi = require('human-standard-token-abi')
-const pify = require('pify')
-const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
-const { getTokenAddressFromTokenObject } = require('./util')
-const {
-  calcTokenBalance,
-  estimateGas,
-} = require('./components/send/send.utils')
-const ethUtil = require('ethereumjs-util')
-const { fetchLocale } = require('../i18n-helper')
-const log = require('loglevel')
-const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
-const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
-const gasDuck = require('./ducks/gas.duck')
-const WebcamUtils = require('../lib/webcam-utils')
-
-var actions = {
-  _setBackgroundConnection: _setBackgroundConnection,
-
-  GO_HOME: 'GO_HOME',
-  goHome: goHome,
-  // modal state
-  MODAL_OPEN: 'UI_MODAL_OPEN',
-  MODAL_CLOSE: 'UI_MODAL_CLOSE',
-  showModal: showModal,
-  hideModal: hideModal,
-  // sidebar state
-  SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
-  SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
-  showSidebar: showSidebar,
-  hideSidebar: hideSidebar,
-  // sidebar state
-  ALERT_OPEN: 'UI_ALERT_OPEN',
-  ALERT_CLOSE: 'UI_ALERT_CLOSE',
-  showAlert: showAlert,
-  hideAlert: hideAlert,
-  QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED',
-  qrCodeDetected,
-  // network dropdown open
-  NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
-  NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
-  showNetworkDropdown: showNetworkDropdown,
-  hideNetworkDropdown: hideNetworkDropdown,
-  // menu state/
-  getNetworkStatus: 'getNetworkStatus',
-  // transition state
-  TRANSITION_FORWARD: 'TRANSITION_FORWARD',
-  TRANSITION_BACKWARD: 'TRANSITION_BACKWARD',
-  transitionForward,
-  transitionBackward,
-  // remote state
-  UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
-  updateMetamaskState: updateMetamaskState,
-  // notices
-  MARK_NOTICE_READ: 'MARK_NOTICE_READ',
-  markNoticeRead: markNoticeRead,
-  SHOW_NOTICE: 'SHOW_NOTICE',
-  showNotice: showNotice,
-  CLEAR_NOTICES: 'CLEAR_NOTICES',
-  clearNotices: clearNotices,
-  markAccountsFound,
-  // intialize screen
-  CREATE_NEW_VAULT_IN_PROGRESS: 'CREATE_NEW_VAULT_IN_PROGRESS',
-  SHOW_CREATE_VAULT: 'SHOW_CREATE_VAULT',
-  SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
-  fetchInfoToSync,
-  FORGOT_PASSWORD: 'FORGOT_PASSWORD',
-  forgotPassword: forgotPassword,
-  markPasswordForgotten,
-  unMarkPasswordForgotten,
-  SHOW_INIT_MENU: 'SHOW_INIT_MENU',
-  SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED',
-  SHOW_INFO_PAGE: 'SHOW_INFO_PAGE',
-  SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE',
-  SHOW_NEW_ACCOUNT_PAGE: 'SHOW_NEW_ACCOUNT_PAGE',
-  SET_NEW_ACCOUNT_FORM: 'SET_NEW_ACCOUNT_FORM',
-  unlockMetamask: unlockMetamask,
-  unlockFailed: unlockFailed,
-  unlockSucceeded,
-  showCreateVault: showCreateVault,
-  showRestoreVault: showRestoreVault,
-  showInitializeMenu: showInitializeMenu,
-  showImportPage,
-  showNewAccountPage,
-  setNewAccountForm,
-  createNewVaultAndKeychain: createNewVaultAndKeychain,
-  createNewVaultAndRestore: createNewVaultAndRestore,
-  createNewVaultInProgress: createNewVaultInProgress,
-  createNewVaultAndGetSeedPhrase,
-  unlockAndGetSeedPhrase,
-  addNewKeyring,
-  importNewAccount,
-  addNewAccount,
-  connectHardware,
-  checkHardwareStatus,
-  forgetDevice,
-  unlockHardwareWalletAccount,
-  NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
-  navigateToNewAccountScreen,
-  resetAccount,
-  removeAccount,
-  showNewVaultSeed: showNewVaultSeed,
-  showInfoPage: showInfoPage,
-  CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
-  closeWelcomeScreen,
-  // seed recovery actions
-  REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
-  revealSeedConfirmation: revealSeedConfirmation,
-  requestRevealSeed: requestRevealSeed,
-  requestRevealSeedWords,
-  // unlock screen
-  UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
-  UNLOCK_FAILED: 'UNLOCK_FAILED',
-  UNLOCK_SUCCEEDED: 'UNLOCK_SUCCEEDED',
-  UNLOCK_METAMASK: 'UNLOCK_METAMASK',
-  LOCK_METAMASK: 'LOCK_METAMASK',
-  tryUnlockMetamask: tryUnlockMetamask,
-  lockMetamask: lockMetamask,
-  unlockInProgress: unlockInProgress,
-  // error handling
-  displayWarning: displayWarning,
-  DISPLAY_WARNING: 'DISPLAY_WARNING',
-  HIDE_WARNING: 'HIDE_WARNING',
-  hideWarning: hideWarning,
-  // accounts screen
-  SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
-  SET_SELECTED_TOKEN: 'SET_SELECTED_TOKEN',
-  setSelectedToken,
-  SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
-  SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
-  SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
-  SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
-  SET_CURRENT_FIAT: 'SET_CURRENT_FIAT',
-  showQrScanner,
-  setCurrentCurrency,
-  setCurrentAccountTab,
-  // account detail screen
-  SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
-  showSendPage: showSendPage,
-  SHOW_SEND_TOKEN_PAGE: 'SHOW_SEND_TOKEN_PAGE',
-  showSendTokenPage,
-  ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK',
-  addToAddressBook: addToAddressBook,
-  REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
-  requestExportAccount: requestExportAccount,
-  EXPORT_ACCOUNT: 'EXPORT_ACCOUNT',
-  exportAccount: exportAccount,
-  SHOW_PRIVATE_KEY: 'SHOW_PRIVATE_KEY',
-  showPrivateKey: showPrivateKey,
-  exportAccountComplete,
-  SET_ACCOUNT_LABEL: 'SET_ACCOUNT_LABEL',
-  setAccountLabel,
-  updateNetworkNonce,
-  SET_NETWORK_NONCE: 'SET_NETWORK_NONCE',
-  // tx conf screen
-  COMPLETED_TX: 'COMPLETED_TX',
-  TRANSACTION_ERROR: 'TRANSACTION_ERROR',
-  NEXT_TX: 'NEXT_TX',
-  PREVIOUS_TX: 'PREV_TX',
-  EDIT_TX: 'EDIT_TX',
-  signMsg: signMsg,
-  cancelMsg: cancelMsg,
-  signPersonalMsg,
-  cancelPersonalMsg,
-  signTypedMsg,
-  cancelTypedMsg,
-  sendTx: sendTx,
-  signTx: signTx,
-  signTokenTx: signTokenTx,
-  updateTransaction,
-  updateAndApproveTx,
-  cancelTx: cancelTx,
-  cancelTxs,
-  completedTx: completedTx,
-  txError: txError,
-  nextTx: nextTx,
-  editTx,
-  previousTx: previousTx,
-  cancelAllTx: cancelAllTx,
-  viewPendingTx: viewPendingTx,
-  VIEW_PENDING_TX: 'VIEW_PENDING_TX',
-  updateTransactionParams,
-  UPDATE_TRANSACTION_PARAMS: 'UPDATE_TRANSACTION_PARAMS',
-  // send screen
-  UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
-  UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
-  UPDATE_GAS_TOTAL: 'UPDATE_GAS_TOTAL',
-  UPDATE_SEND_FROM: 'UPDATE_SEND_FROM',
-  UPDATE_SEND_HEX_DATA: 'UPDATE_SEND_HEX_DATA',
-  UPDATE_SEND_TOKEN_BALANCE: 'UPDATE_SEND_TOKEN_BALANCE',
-  UPDATE_SEND_TO: 'UPDATE_SEND_TO',
-  UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT',
-  UPDATE_SEND_MEMO: 'UPDATE_SEND_MEMO',
-  UPDATE_SEND_ERRORS: 'UPDATE_SEND_ERRORS',
-  UPDATE_SEND_WARNINGS: 'UPDATE_SEND_WARNINGS',
-  UPDATE_MAX_MODE: 'UPDATE_MAX_MODE',
-  UPDATE_SEND: 'UPDATE_SEND',
-  CLEAR_SEND: 'CLEAR_SEND',
-  OPEN_FROM_DROPDOWN: 'OPEN_FROM_DROPDOWN',
-  CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN',
-  GAS_LOADING_STARTED: 'GAS_LOADING_STARTED',
-  GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED',
-  setGasLimit,
-  setGasPrice,
-  updateGasData,
-  setGasTotal,
-  setSendTokenBalance,
-  updateSendTokenBalance,
-  updateSendHexData,
-  updateSendTo,
-  updateSendAmount,
-  updateSendMemo,
-  setMaxModeTo,
-  updateSend,
-  updateSendErrors,
-  updateSendWarnings,
-  clearSend,
-  setSelectedAddress,
-  gasLoadingStarted,
-  gasLoadingFinished,
-  // app messages
-  confirmSeedWords: confirmSeedWords,
-  showAccountDetail: showAccountDetail,
-  BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL',
-  backToAccountDetail: backToAccountDetail,
-  showAccountsPage: showAccountsPage,
-  showConfTxPage: showConfTxPage,
-  // config screen
-  SHOW_CONFIG_PAGE: 'SHOW_CONFIG_PAGE',
-  SET_RPC_TARGET: 'SET_RPC_TARGET',
-  SET_DEFAULT_RPC_TARGET: 'SET_DEFAULT_RPC_TARGET',
-  SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
-  SET_PREVIOUS_PROVIDER: 'SET_PREVIOUS_PROVIDER',
-  showConfigPage,
-  SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
-  SHOW_ADD_SUGGESTED_TOKEN_PAGE: 'SHOW_ADD_SUGGESTED_TOKEN_PAGE',
-  showAddTokenPage,
-  showAddSuggestedTokenPage,
-  addToken,
-  addTokens,
-  removeToken,
-  updateTokens,
-  removeSuggestedTokens,
-  addKnownMethodData,
-  UPDATE_TOKENS: 'UPDATE_TOKENS',
-  updateAndSetCustomRpc: updateAndSetCustomRpc,
-  setRpcTarget: setRpcTarget,
-  delRpcTarget: delRpcTarget,
-  setProviderType: setProviderType,
-  SET_HARDWARE_WALLET_DEFAULT_HD_PATH: 'SET_HARDWARE_WALLET_DEFAULT_HD_PATH',
-  setHardwareWalletDefaultHdPath,
-  updateProviderType,
-  // loading overlay
-  SHOW_LOADING: 'SHOW_LOADING_INDICATION',
-  HIDE_LOADING: 'HIDE_LOADING_INDICATION',
-  showLoadingIndication: showLoadingIndication,
-  hideLoadingIndication: hideLoadingIndication,
-  // buy Eth with coinbase
-  onboardingBuyEthView,
-  ONBOARDING_BUY_ETH_VIEW: 'ONBOARDING_BUY_ETH_VIEW',
-  BUY_ETH: 'BUY_ETH',
-  buyEth: buyEth,
-  buyEthView: buyEthView,
-  buyWithShapeShift,
-  BUY_ETH_VIEW: 'BUY_ETH_VIEW',
-  COINBASE_SUBVIEW: 'COINBASE_SUBVIEW',
-  coinBaseSubview: coinBaseSubview,
-  SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW',
-  shapeShiftSubview: shapeShiftSubview,
-  PAIR_UPDATE: 'PAIR_UPDATE',
-  pairUpdate: pairUpdate,
-  coinShiftRquest: coinShiftRquest,
-  SHOW_SUB_LOADING_INDICATION: 'SHOW_SUB_LOADING_INDICATION',
-  showSubLoadingIndication: showSubLoadingIndication,
-  HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
-  hideSubLoadingIndication: hideSubLoadingIndication,
-// QR STUFF:
-  SHOW_QR: 'SHOW_QR',
-  showQrView: showQrView,
-  reshowQrCode: reshowQrCode,
-  SHOW_QR_VIEW: 'SHOW_QR_VIEW',
-// FORGOT PASSWORD:
-  BACK_TO_INIT_MENU: 'BACK_TO_INIT_MENU',
-  goBackToInitView: goBackToInitView,
-  RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS',
-  BACK_TO_UNLOCK_VIEW: 'BACK_TO_UNLOCK_VIEW',
-  backToUnlockView: backToUnlockView,
-  // SHOWING KEYCHAIN
-  SHOW_NEW_KEYCHAIN: 'SHOW_NEW_KEYCHAIN',
-  showNewKeychain: showNewKeychain,
-
-  callBackgroundThenUpdate,
-  forceUpdateMetamaskState,
-
-  TOGGLE_ACCOUNT_MENU: 'TOGGLE_ACCOUNT_MENU',
-  toggleAccountMenu,
-
-  useEtherscanProvider,
-
-  SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
-  setUseBlockie,
-
-  SET_PARTICIPATE_IN_METAMETRICS: 'SET_PARTICIPATE_IN_METAMETRICS',
-  SET_METAMETRICS_SEND_COUNT: 'SET_METAMETRICS_SEND_COUNT',
-  setParticipateInMetaMetrics,
-  setMetaMetricsSendCount,
-
-  // locale
-  SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE',
-  SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES',
-  setCurrentLocale,
-  updateCurrentLocale,
-  setLocaleMessages,
-  //
-  // Feature Flags
-  setFeatureFlag,
-  updateFeatureFlags,
-  UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
-
-  // Preferences
-  setPreference,
-  updatePreferences,
-  UPDATE_PREFERENCES: 'UPDATE_PREFERENCES',
-  setUseNativeCurrencyAsPrimaryCurrencyPreference,
-  setShowFiatConversionOnTestnetsPreference,
-
-  // Migration of users to new UI
-  setCompletedUiMigration,
-  completeUiMigration,
-  COMPLETE_UI_MIGRATION: 'COMPLETE_UI_MIGRATION',
-
-  // Onboarding
-  setCompletedOnboarding,
-  completeOnboarding,
-  COMPLETE_ONBOARDING: 'COMPLETE_ONBOARDING',
-
-  setMouseUserState,
-  SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE',
-
-  // Network
-  updateNetworkEndpointType,
-  UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE',
-
-  retryTransaction,
-  SET_PENDING_TOKENS: 'SET_PENDING_TOKENS',
-  CLEAR_PENDING_TOKENS: 'CLEAR_PENDING_TOKENS',
-  setPendingTokens,
-  clearPendingTokens,
-
-  createCancelTransaction,
-  createSpeedUpTransaction,
-
-  approveProviderRequest,
-  rejectProviderRequest,
-  clearApprovedOrigins,
-
-  setFirstTimeFlowType,
-  SET_FIRST_TIME_FLOW_TYPE: 'SET_FIRST_TIME_FLOW_TYPE',
-}
-
-module.exports = actions
-
-var background = null
-function _setBackgroundConnection (backgroundConnection) {
-  background = backgroundConnection
-}
-
-function goHome () {
-  return {
-    type: actions.GO_HOME,
-  }
-}
-
-// async actions
-
-function tryUnlockMetamask (password) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    dispatch(actions.unlockInProgress())
-    log.debug(`background.submitPassword`)
-
-    return new Promise((resolve, reject) => {
-      background.submitPassword(password, error => {
-        if (error) {
-          return reject(error)
-        }
-
-        resolve()
-      })
-    })
-      .then(() => {
-        dispatch(actions.unlockSucceeded())
-        return forceUpdateMetamaskState(dispatch)
-      })
-      .then(() => {
-        return new Promise((resolve, reject) => {
-          background.verifySeedPhrase(err => {
-            if (err) {
-              dispatch(actions.displayWarning(err.message))
-              return reject(err)
-            }
-
-            resolve()
-          })
-        })
-      })
-      .then(() => {
-        dispatch(actions.transitionForward())
-        dispatch(actions.hideLoadingIndication())
-      })
-      .catch(err => {
-        dispatch(actions.unlockFailed(err.message))
-        dispatch(actions.hideLoadingIndication())
-        return Promise.reject(err)
-      })
-  }
-}
-
-function transitionForward () {
-  return {
-    type: this.TRANSITION_FORWARD,
-  }
-}
-
-function transitionBackward () {
-  return {
-    type: this.TRANSITION_BACKWARD,
-  }
-}
-
-function confirmSeedWords () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.clearSeedWordCache`)
-    return new Promise((resolve, reject) => {
-      background.clearSeedWordCache((err, account) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.info('Seed word cache cleared. ' + account)
-        dispatch(actions.showAccountsPage())
-        resolve(account)
-      })
-    })
-  }
-}
-
-function createNewVaultAndRestore (password, seed) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.createNewVaultAndRestore`)
-
-    return new Promise((resolve, reject) => {
-      background.clearSeedWordCache((err) => {
-        if (err) {
-          return reject(err)
-        }
-
-        background.createNewVaultAndRestore(password, seed, (err) => {
-          if (err) {
-            return reject(err)
-          }
-
-          resolve()
-        })
-      })
-    })
-      .then(() => dispatch(actions.unMarkPasswordForgotten()))
-      .then(() => {
-        dispatch(actions.showAccountsPage())
-        dispatch(actions.hideLoadingIndication())
-      })
-      .catch(err => {
-        dispatch(actions.displayWarning(err.message))
-        dispatch(actions.hideLoadingIndication())
-        return Promise.reject(err)
-      })
-  }
-}
-
-function createNewVaultAndKeychain (password) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.createNewVaultAndKeychain`)
-
-    return new Promise((resolve, reject) => {
-      background.createNewVaultAndKeychain(password, err => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.debug(`background.placeSeedWords`)
-
-        background.placeSeedWords((err) => {
-          if (err) {
-            dispatch(actions.displayWarning(err.message))
-            return reject(err)
-          }
-
-          resolve()
-        })
-      })
-    })
-      .then(() => forceUpdateMetamaskState(dispatch))
-      .then(() => dispatch(actions.hideLoadingIndication()))
-      .catch(() => dispatch(actions.hideLoadingIndication()))
-  }
-}
-
-function createNewVaultAndGetSeedPhrase (password) {
-  return async dispatch => {
-    dispatch(actions.showLoadingIndication())
-
-    try {
-      await createNewVault(password)
-      const seedWords = await verifySeedPhrase()
-      dispatch(actions.hideLoadingIndication())
-      return seedWords
-    } catch (error) {
-      dispatch(actions.hideLoadingIndication())
-      dispatch(actions.displayWarning(error.message))
-      throw new Error(error.message)
-    }
-  }
-}
-
-function unlockAndGetSeedPhrase (password) {
-  return async dispatch => {
-    dispatch(actions.showLoadingIndication())
-
-    try {
-      await submitPassword(password)
-      const seedWords = await verifySeedPhrase()
-      await forceUpdateMetamaskState(dispatch)
-      dispatch(actions.hideLoadingIndication())
-      return seedWords
-    } catch (error) {
-      dispatch(actions.hideLoadingIndication())
-      dispatch(actions.displayWarning(error.message))
-      throw new Error(error.message)
-    }
-  }
-}
-
-function revealSeedConfirmation () {
-  return {
-    type: this.REVEAL_SEED_CONFIRMATION,
-  }
-}
-
-function submitPassword (password) {
-  return new Promise((resolve, reject) => {
-    background.submitPassword(password, error => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve()
-    })
-  })
-}
-
-function createNewVault (password) {
-  return new Promise((resolve, reject) => {
-    background.createNewVaultAndKeychain(password, error => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve(true)
-    })
-  })
-}
-
-function verifyPassword (password) {
-  return new Promise((resolve, reject) => {
-    background.submitPassword(password, error => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve(true)
-    })
-  })
-}
-
-function verifySeedPhrase () {
-  return new Promise((resolve, reject) => {
-    background.verifySeedPhrase((error, seedWords) => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve(seedWords)
-    })
-  })
-}
-
-function requestRevealSeed (password) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.submitPassword`)
-    return new Promise((resolve, reject) => {
-      background.submitPassword(password, err => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.debug(`background.placeSeedWords`)
-        background.placeSeedWords((err, result) => {
-          if (err) {
-            dispatch(actions.displayWarning(err.message))
-            return reject(err)
-          }
-
-          dispatch(actions.showNewVaultSeed(result))
-          dispatch(actions.hideLoadingIndication())
-          resolve()
-        })
-      })
-    })
-  }
-}
-
-function requestRevealSeedWords (password) {
-  return async dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.submitPassword`)
-
-    try {
-      await verifyPassword(password)
-      const seedWords = await verifySeedPhrase()
-      dispatch(actions.hideLoadingIndication())
-      return seedWords
-    } catch (error) {
-      dispatch(actions.hideLoadingIndication())
-      dispatch(actions.displayWarning(error.message))
-      throw new Error(error.message)
-    }
-  }
-}
-
-function fetchInfoToSync () {
-  return dispatch => {
-    log.debug(`background.fetchInfoToSync`)
-    return new Promise((resolve, reject) => {
-      background.fetchInfoToSync((err, result) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-        resolve(result)
-      })
-    })
-  }
-}
-
-function resetAccount () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      background.resetAccount((err, account) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.info('Transaction history reset for ' + account)
-        dispatch(actions.showAccountsPage())
-        resolve(account)
-      })
-    })
-  }
-}
-
-function removeAccount (address) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      background.removeAccount(address, (err, account) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.info('Account removed: ' + account)
-        dispatch(actions.showAccountsPage())
-        resolve()
-      })
-    })
-  }
-}
-
-function addNewKeyring (type, opts) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.addNewKeyring`)
-    background.addNewKeyring(type, opts, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) return dispatch(actions.displayWarning(err.message))
-      dispatch(actions.showAccountsPage())
-    })
-  }
-}
-
-function importNewAccount (strategy, args) {
-  return async (dispatch) => {
-    let newState
-    dispatch(actions.showLoadingIndication('This may take a while, please be patient.'))
-    try {
-      log.debug(`background.importAccountWithStrategy`)
-      await pify(background.importAccountWithStrategy).call(background, strategy, args)
-      log.debug(`background.getState`)
-      newState = await pify(background.getState).call(background)
-    } catch (err) {
-      dispatch(actions.hideLoadingIndication())
-      dispatch(actions.displayWarning(err.message))
-      throw err
-    }
-    dispatch(actions.hideLoadingIndication())
-    dispatch(actions.updateMetamaskState(newState))
-    if (newState.selectedAddress) {
-      dispatch({
-        type: actions.SHOW_ACCOUNT_DETAIL,
-        value: newState.selectedAddress,
-      })
-    }
-    return newState
-  }
-}
-
-function navigateToNewAccountScreen () {
-  return {
-    type: this.NEW_ACCOUNT_SCREEN,
-  }
-}
-
-function addNewAccount () {
-  log.debug(`background.addNewAccount`)
-  return (dispatch, getState) => {
-    const oldIdentities = getState().metamask.identities
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.addNewAccount((err, { identities: newIdentities}) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-        const newAccountAddress = Object.keys(newIdentities).find(address => !oldIdentities[address])
-
-        dispatch(actions.hideLoadingIndication())
-
-        forceUpdateMetamaskState(dispatch)
-        return resolve(newAccountAddress)
-      })
-    })
-  }
-}
-
-function checkHardwareStatus (deviceName, hdPath) {
-  log.debug(`background.checkHardwareStatus`, deviceName, hdPath)
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.checkHardwareStatus(deviceName, hdPath, (err, unlocked) => {
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.hideLoadingIndication())
-
-        forceUpdateMetamaskState(dispatch)
-        return resolve(unlocked)
-      })
-    })
-  }
-}
-
-function forgetDevice (deviceName) {
-  log.debug(`background.forgetDevice`, deviceName)
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.forgetDevice(deviceName, (err, response) => {
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.hideLoadingIndication())
-
-        forceUpdateMetamaskState(dispatch)
-        return resolve()
-      })
-    })
-  }
-}
-
-function connectHardware (deviceName, page, hdPath) {
-  log.debug(`background.connectHardware`, deviceName, page, hdPath)
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.connectHardware(deviceName, page, hdPath, (err, accounts) => {
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.hideLoadingIndication())
-
-        forceUpdateMetamaskState(dispatch)
-        return resolve(accounts)
-      })
-    })
-  }
-}
-
-function unlockHardwareWalletAccount (index, deviceName, hdPath) {
-  log.debug(`background.unlockHardwareWalletAccount`, index, deviceName, hdPath)
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.unlockHardwareWalletAccount(index, deviceName, hdPath, (err, accounts) => {
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.hideLoadingIndication())
-        return resolve()
-      })
-    })
-  }
-}
-
-function showInfoPage () {
-  return {
-    type: actions.SHOW_INFO_PAGE,
-  }
-}
-
-function showQrScanner (ROUTE) {
-  return (dispatch, getState) => {
-    return WebcamUtils.checkStatus()
-    .then(status => {
-      if (!status.environmentReady) {
-         // We need to switch to fullscreen mode to ask for permission
-         global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
-      } else {
-        dispatch(actions.showModal({
-          name: 'QR_SCANNER',
-        }))
-      }
-    }).catch(e => {
-      dispatch(actions.showModal({
-        name: 'QR_SCANNER',
-        error: true,
-        errorType: e.type,
-      }))
-    })
-  }
-}
-
-function setCurrentCurrency (currencyCode) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.setCurrentCurrency`)
-    background.setCurrentCurrency(currencyCode, (err, data) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        log.error(err.stack)
-        return dispatch(actions.displayWarning(err.message))
-      }
-      dispatch({
-        type: actions.SET_CURRENT_FIAT,
-        value: {
-          currentCurrency: data.currentCurrency,
-          conversionRate: data.conversionRate,
-          conversionDate: data.conversionDate,
-        },
-      })
-    })
-  }
-}
-
-function signMsg (msgData) {
-  log.debug('action - signMsg')
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      log.debug(`actions calling background.signMessage`)
-      background.signMessage(msgData, (err, newState) => {
-        log.debug('signMessage called back')
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function signPersonalMsg (msgData) {
-  log.debug('action - signPersonalMsg')
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      log.debug(`actions calling background.signPersonalMessage`)
-      background.signPersonalMessage(msgData, (err, newState) => {
-        log.debug('signPersonalMessage called back')
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function signTypedMsg (msgData) {
-  log.debug('action - signTypedMsg')
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      log.debug(`actions calling background.signTypedMessage`)
-      background.signTypedMessage(msgData, (err, newState) => {
-        log.debug('signTypedMessage called back')
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          log.error(err)
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function signTx (txData) {
-  return (dispatch) => {
-    global.ethQuery.sendTransaction(txData, (err, data) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-    })
-    dispatch(actions.showConfTxPage({}))
-  }
-}
-
-function setGasLimit (gasLimit) {
-  return {
-    type: actions.UPDATE_GAS_LIMIT,
-    value: gasLimit,
-  }
-}
-
-function setGasPrice (gasPrice) {
-  return {
-    type: actions.UPDATE_GAS_PRICE,
-    value: gasPrice,
-  }
-}
-
-function setGasTotal (gasTotal) {
-  return {
-    type: actions.UPDATE_GAS_TOTAL,
-    value: gasTotal,
-  }
-}
-
-function updateGasData ({
-  gasPrice,
-  blockGasLimit,
-  recentBlocks,
-  selectedAddress,
-  selectedToken,
-  to,
-  value,
-  data,
-}) {
-  return (dispatch) => {
-    dispatch(actions.gasLoadingStarted())
-    return estimateGas({
-      estimateGasMethod: background.estimateGas,
-      blockGasLimit,
-      selectedAddress,
-      selectedToken,
-      to,
-      value,
-      estimateGasPrice: gasPrice,
-      data,
-    })
-    .then(gas => {
-      dispatch(actions.setGasLimit(gas))
-      dispatch(gasDuck.setCustomGasLimit(gas))
-      dispatch(updateSendErrors({ gasLoadingError: null }))
-      dispatch(actions.gasLoadingFinished())
-    })
-    .catch(err => {
-      log.error(err)
-      dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
-      dispatch(actions.gasLoadingFinished())
-    })
-  }
-}
-
-function gasLoadingStarted () {
-  return {
-    type: actions.GAS_LOADING_STARTED,
-  }
-}
-
-function gasLoadingFinished () {
-  return {
-    type: actions.GAS_LOADING_FINISHED,
-  }
-}
-
-function updateSendTokenBalance ({
-  selectedToken,
-  tokenContract,
-  address,
-}) {
-  return (dispatch) => {
-    const tokenBalancePromise = tokenContract
-      ? tokenContract.balanceOf(address)
-      : Promise.resolve()
-    return tokenBalancePromise
-      .then(usersToken => {
-        if (usersToken) {
-          const newTokenBalance = calcTokenBalance({ selectedToken, usersToken })
-          dispatch(setSendTokenBalance(newTokenBalance))
-        }
-      })
-      .catch(err => {
-        log.error(err)
-        updateSendErrors({ tokenBalance: 'tokenBalanceError' })
-      })
-  }
-}
-
-function updateSendErrors (errorObject) {
-  return {
-    type: actions.UPDATE_SEND_ERRORS,
-    value: errorObject,
-  }
-}
-
-function updateSendWarnings (warningObject) {
-  return {
-    type: actions.UPDATE_SEND_WARNINGS,
-    value: warningObject,
-  }
-}
-
-function setSendTokenBalance (tokenBalance) {
-  return {
-    type: actions.UPDATE_SEND_TOKEN_BALANCE,
-    value: tokenBalance,
-  }
-}
-
-function updateSendHexData (value) {
-  return {
-    type: actions.UPDATE_SEND_HEX_DATA,
-    value,
-  }
-}
-
-function updateSendTo (to, nickname = '') {
-  return {
-    type: actions.UPDATE_SEND_TO,
-    value: { to, nickname },
-  }
-}
-
-function updateSendAmount (amount) {
-  return {
-    type: actions.UPDATE_SEND_AMOUNT,
-    value: amount,
-  }
-}
-
-function updateSendMemo (memo) {
-  return {
-    type: actions.UPDATE_SEND_MEMO,
-    value: memo,
-  }
-}
-
-function setMaxModeTo (bool) {
-  return {
-    type: actions.UPDATE_MAX_MODE,
-    value: bool,
-  }
-}
-
-function updateSend (newSend) {
-  return {
-    type: actions.UPDATE_SEND,
-    value: newSend,
-  }
-}
-
-function clearSend () {
-  return {
-    type: actions.CLEAR_SEND,
-  }
-}
-
-
-function sendTx (txData) {
-  log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
-  return (dispatch, getState) => {
-    log.debug(`actions calling background.approveTransaction`)
-    background.approveTransaction(txData.id, (err) => {
-      if (err) {
-        dispatch(actions.txError(err))
-        return log.error(err.message)
-      }
-      dispatch(actions.completedTx(txData.id))
-
-      if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-        !hasUnconfirmedTransactions(getState())) {
-        return global.platform.closeCurrentWindow()
-      }
-    })
-  }
-}
-
-function signTokenTx (tokenAddress, toAddress, amount, txData) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    const token = global.eth.contract(abi).at(tokenAddress)
-    token.transfer(toAddress, ethUtil.addHexPrefix(amount), txData)
-      .catch(err => {
-        dispatch(actions.hideLoadingIndication())
-        dispatch(actions.displayWarning(err.message))
-      })
-    dispatch(actions.showConfTxPage({}))
-  }
-}
-
-function updateTransaction (txData) {
-  log.info('actions: updateTx: ' + JSON.stringify(txData))
-  return dispatch => {
-    log.debug(`actions calling background.updateTx`)
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      background.updateTransaction(txData, (err) => {
-        dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
-        if (err) {
-          dispatch(actions.txError(err))
-          dispatch(actions.goHome())
-          log.error(err.message)
-          return reject(err)
-        }
-
-        resolve(txData)
-      })
-    })
-    .then(() => updateMetamaskStateFromBackground())
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => {
-        dispatch(actions.showConfTxPage({ id: txData.id }))
-        dispatch(actions.hideLoadingIndication())
-        return txData
-      })
-  }
-}
-
-function updateAndApproveTx (txData) {
-  log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
-  return (dispatch, getState) => {
-    log.debug(`actions calling background.updateAndApproveTx`)
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      background.updateAndApproveTransaction(txData, err => {
-        dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
-        dispatch(actions.clearSend())
-
-        if (err) {
-          dispatch(actions.txError(err))
-          dispatch(actions.goHome())
-          log.error(err.message)
-          reject(err)
-        }
-
-        resolve(txData)
-      })
-    })
-      .then(() => updateMetamaskStateFromBackground())
-      .then(newState => dispatch(actions.updateMetamaskState(newState)))
-      .then(() => {
-        dispatch(actions.clearSend())
-        dispatch(actions.completedTx(txData.id))
-        dispatch(actions.hideLoadingIndication())
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return txData
-      })
-      .catch((err) => {
-        dispatch(actions.hideLoadingIndication())
-        return Promise.reject(err)
-      })
-  }
-}
-
-function completedTx (id) {
-  return {
-    type: actions.COMPLETED_TX,
-    value: id,
-  }
-}
-
-function updateTransactionParams (id, txParams) {
-  return {
-    type: actions.UPDATE_TRANSACTION_PARAMS,
-    id,
-    value: txParams,
-  }
-}
-
-function txError (err) {
-  return {
-    type: actions.TRANSACTION_ERROR,
-    message: err.message,
-  }
-}
-
-function cancelMsg (msgData) {
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      log.debug(`background.cancelMessage`)
-      background.cancelMessage(msgData.id, (err, newState) => {
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(msgData.id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function cancelPersonalMsg (msgData) {
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      const id = msgData.id
-      background.cancelPersonalMessage(id, (err, newState) => {
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function cancelTypedMsg (msgData) {
-  return (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      const id = msgData.id
-      background.cancelTypedMessage(id, (err, newState) => {
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          return reject(err)
-        }
-
-        dispatch(actions.completedTx(id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return resolve(msgData)
-      })
-    })
-  }
-}
-
-function cancelTx (txData) {
-  return (dispatch, getState) => {
-    log.debug(`background.cancelTransaction`)
-    dispatch(actions.showLoadingIndication())
-
-    return new Promise((resolve, reject) => {
-      background.cancelTransaction(txData.id, err => {
-        if (err) {
-          return reject(err)
-        }
-
-        resolve()
-      })
-    })
-      .then(() => updateMetamaskStateFromBackground())
-      .then(newState => dispatch(actions.updateMetamaskState(newState)))
-      .then(() => {
-        dispatch(actions.clearSend())
-        dispatch(actions.completedTx(txData.id))
-        dispatch(actions.hideLoadingIndication())
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
-
-        return txData
-      })
-  }
-}
-
-/**
- * Cancels all of the given transactions
- * @param {Array<object>} txDataList a list of tx data objects
- * @return {function(*): Promise<void>}
- */
-function cancelTxs (txDataList) {
-  return async (dispatch, getState) => {
-    dispatch(actions.showLoadingIndication())
-    const txIds = txDataList.map(({id}) => id)
-    const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
-      background.cancelTransaction(id, (err) => {
-        if (err) {
-          return reject(err)
-        }
-
-        resolve()
-      })
-    }))
-
-    await Promise.all(cancellations)
-    const newState = await updateMetamaskStateFromBackground()
-    dispatch(actions.updateMetamaskState(newState))
-    dispatch(actions.clearSend())
-
-    txIds.forEach((id) => {
-      dispatch(actions.completedTx(id))
-    })
-
-    dispatch(actions.hideLoadingIndication())
-
-    if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-      return global.platform.closeCurrentWindow()
-    }
-  }
-}
-
-/**
- * @deprecated
- * @param {Array<object>} txsData
- * @return {Function}
- */
-function cancelAllTx (txsData) {
-  return (dispatch) => {
-    txsData.forEach((txData, i) => {
-      background.cancelTransaction(txData.id, () => {
-        dispatch(actions.completedTx(txData.id))
-        i === txsData.length - 1 ? dispatch(actions.goHome()) : null
-      })
-    })
-  }
-}
-//
-// initialize screen
-//
-
-function showCreateVault () {
-  return {
-    type: actions.SHOW_CREATE_VAULT,
-  }
-}
-
-function showRestoreVault () {
-  return {
-    type: actions.SHOW_RESTORE_VAULT,
-  }
-}
-
-function markPasswordForgotten () {
-  return (dispatch) => {
-    return background.markPasswordForgotten(() => {
-      dispatch(actions.hideLoadingIndication())
-      dispatch(actions.forgotPassword())
-      forceUpdateMetamaskState(dispatch)
-    })
-  }
-}
-
-function unMarkPasswordForgotten () {
-  return dispatch => {
-    return new Promise(resolve => {
-      background.unMarkPasswordForgotten(() => {
-        dispatch(actions.forgotPassword(false))
-        resolve()
-      })
-    })
-      .then(() => forceUpdateMetamaskState(dispatch))
-  }
-}
-
-function forgotPassword (forgotPasswordState = true) {
-  return {
-    type: actions.FORGOT_PASSWORD,
-    value: forgotPasswordState,
-  }
-}
-
-function showInitializeMenu () {
-  return {
-    type: actions.SHOW_INIT_MENU,
-  }
-}
-
-function showImportPage () {
-  return {
-    type: actions.SHOW_IMPORT_PAGE,
-  }
-}
-
-function showNewAccountPage (formToSelect) {
-  return {
-    type: actions.SHOW_NEW_ACCOUNT_PAGE,
-    formToSelect,
-  }
-}
-
-function setNewAccountForm (formToSelect) {
-  return {
-    type: actions.SET_NEW_ACCOUNT_FORM,
-    formToSelect,
-  }
-}
-
-function createNewVaultInProgress () {
-  return {
-    type: actions.CREATE_NEW_VAULT_IN_PROGRESS,
-  }
-}
-
-function showNewVaultSeed (seed) {
-  return {
-    type: actions.SHOW_NEW_VAULT_SEED,
-    value: seed,
-  }
-}
-
-function closeWelcomeScreen () {
-  return {
-    type: actions.CLOSE_WELCOME_SCREEN,
-  }
-}
-
-function backToUnlockView () {
-  return {
-    type: actions.BACK_TO_UNLOCK_VIEW,
-  }
-}
-
-function showNewKeychain () {
-  return {
-    type: actions.SHOW_NEW_KEYCHAIN,
-  }
-}
-
-//
-// unlock screen
-//
-
-function unlockInProgress () {
-  return {
-    type: actions.UNLOCK_IN_PROGRESS,
-  }
-}
-
-function unlockFailed (message) {
-  return {
-    type: actions.UNLOCK_FAILED,
-    value: message,
-  }
-}
-
-function unlockSucceeded (message) {
-  return {
-    type: actions.UNLOCK_SUCCEEDED,
-    value: message,
-  }
-}
-
-function unlockMetamask (account) {
-  return {
-    type: actions.UNLOCK_METAMASK,
-    value: account,
-  }
-}
-
-function updateMetamaskState (newState) {
-  return {
-    type: actions.UPDATE_METAMASK_STATE,
-    value: newState,
-  }
-}
-
-const backgroundSetLocked = () => {
-  return new Promise((resolve, reject) => {
-    background.setLocked(error => {
-      if (error) {
-        return reject(error)
-      }
-      resolve()
-    })
-  })
-}
-
-const updateMetamaskStateFromBackground = () => {
-  log.debug(`background.getState`)
-
-  return new Promise((resolve, reject) => {
-    background.getState((error, newState) => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve(newState)
-    })
-  })
-}
-
-function lockMetamask () {
-  log.debug(`background.setLocked`)
-
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-
-    return backgroundSetLocked()
-      .then(() => updateMetamaskStateFromBackground())
-      .catch(error => {
-        dispatch(actions.displayWarning(error.message))
-        return Promise.reject(error)
-      })
-      .then(newState => {
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch(actions.hideLoadingIndication())
-        dispatch({ type: actions.LOCK_METAMASK })
-      })
-      .catch(() => {
-        dispatch(actions.hideLoadingIndication())
-        dispatch({ type: actions.LOCK_METAMASK })
-      })
-  }
-}
-
-function setCurrentAccountTab (newTabName) {
-  log.debug(`background.setCurrentAccountTab: ${newTabName}`)
-  return callBackgroundThenUpdateNoSpinner(background.setCurrentAccountTab, newTabName)
-}
-
-function setSelectedToken (tokenAddress) {
-  return {
-    type: actions.SET_SELECTED_TOKEN,
-    value: tokenAddress || null,
-  }
-}
-
-function setSelectedAddress (address) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.setSelectedAddress`)
-    background.setSelectedAddress(address, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-    })
-  }
-}
-
-function showAccountDetail (address) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.setSelectedAddress`)
-    background.setSelectedAddress(address, (err, tokens) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      dispatch(updateTokens(tokens))
-      dispatch({
-        type: actions.SHOW_ACCOUNT_DETAIL,
-        value: address,
-      })
-      dispatch(actions.setSelectedToken())
-    })
-  }
-}
-
-function backToAccountDetail (address) {
-  return {
-    type: actions.BACK_TO_ACCOUNT_DETAIL,
-    value: address,
-  }
-}
-
-function showAccountsPage () {
-  return {
-    type: actions.SHOW_ACCOUNTS_PAGE,
-  }
-}
-
-function showConfTxPage ({transForward = true, id}) {
-  return {
-    type: actions.SHOW_CONF_TX_PAGE,
-    transForward,
-    id,
-  }
-}
-
-function nextTx () {
-  return {
-    type: actions.NEXT_TX,
-  }
-}
-
-function viewPendingTx (txId) {
-  return {
-    type: actions.VIEW_PENDING_TX,
-    value: txId,
-  }
-}
-
-function previousTx () {
-  return {
-    type: actions.PREVIOUS_TX,
-  }
-}
-
-function editTx (txId) {
-  return {
-    type: actions.EDIT_TX,
-    value: txId,
-  }
-}
-
-function showConfigPage (transitionForward = true) {
-  return {
-    type: actions.SHOW_CONFIG_PAGE,
-    value: transitionForward,
-  }
-}
-
-function showAddTokenPage (transitionForward = true) {
-  return {
-    type: actions.SHOW_ADD_TOKEN_PAGE,
-    value: transitionForward,
-  }
-}
-
-function showAddSuggestedTokenPage (transitionForward = true) {
-  return {
-    type: actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE,
-    value: transitionForward,
-  }
-}
-
-function addToken (address, symbol, decimals, image) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.addToken(address, symbol, decimals, image, (err, tokens) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-        dispatch(actions.updateTokens(tokens))
-        resolve(tokens)
-      })
-    })
-  }
-}
-
-function removeToken (address) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.removeToken(address, (err, tokens) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-        dispatch(actions.updateTokens(tokens))
-        resolve(tokens)
-      })
-    })
-  }
-}
-
-function addTokens (tokens) {
-  return dispatch => {
-    if (Array.isArray(tokens)) {
-      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens[0])))
-      return Promise.all(tokens.map(({ address, symbol, decimals }) => (
-        dispatch(addToken(address, symbol, decimals))
-      )))
-    } else {
-      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens)))
-      return Promise.all(
-        Object
-        .entries(tokens)
-        .map(([_, { address, symbol, decimals }]) => (
-          dispatch(addToken(address, symbol, decimals))
-        ))
-      )
-    }
-  }
-}
-
-function removeSuggestedTokens () {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.removeSuggestedTokens((err, suggestedTokens) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-        }
-        dispatch(actions.clearPendingTokens())
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-          return global.platform.closeCurrentWindow()
-        }
-        resolve(suggestedTokens)
-      })
-    })
-    .then(() => updateMetamaskStateFromBackground())
-    .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
-  }
-}
-
-function addKnownMethodData (fourBytePrefix, methodData) {
-  return (dispatch) => {
-    background.addKnownMethodData(fourBytePrefix, methodData)
-  }
-}
-
-function updateTokens (newTokens) {
-  return {
-    type: actions.UPDATE_TOKENS,
-    newTokens,
-  }
-}
-
-function clearPendingTokens () {
-  return {
-    type: actions.CLEAR_PENDING_TOKENS,
-  }
-}
-
-function goBackToInitView () {
-  return {
-    type: actions.BACK_TO_INIT_MENU,
-  }
-}
-
-//
-// notice
-//
-
-function markNoticeRead (notice) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.markNoticeRead`)
-    return new Promise((resolve, reject) => {
-      background.markNoticeRead(notice, (err, notice) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        if (notice) {
-          dispatch(actions.showNotice(notice))
-          resolve(true)
-        } else {
-          dispatch(actions.clearNotices())
-          resolve(false)
-        }
-      })
-    })
-  }
-}
-
-function showNotice (notice) {
-  return {
-    type: actions.SHOW_NOTICE,
-    value: notice,
-  }
-}
-
-function clearNotices () {
-  return {
-    type: actions.CLEAR_NOTICES,
-  }
-}
-
-function markAccountsFound () {
-  log.debug(`background.markAccountsFound`)
-  return callBackgroundThenUpdate(background.markAccountsFound)
-}
-
-function retryTransaction (txId, gasPrice) {
-  log.debug(`background.retryTransaction`)
-  let newTxId
-
-  return dispatch => {
-    return new Promise((resolve, reject) => {
-      background.retryTransaction(txId, gasPrice, (err, newState) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-
-        const { selectedAddressTxList } = newState
-        const { id } = selectedAddressTxList[selectedAddressTxList.length - 1]
-        newTxId = id
-        resolve(newState)
-      })
-    })
-      .then(newState => dispatch(actions.updateMetamaskState(newState)))
-      .then(() => newTxId)
-  }
-}
-
-function createCancelTransaction (txId, customGasPrice) {
-  log.debug('background.cancelTransaction')
-  let newTxId
-
-  return dispatch => {
-    return new Promise((resolve, reject) => {
-      background.createCancelTransaction(txId, customGasPrice, (err, newState) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-
-        const { selectedAddressTxList } = newState
-        const { id } = selectedAddressTxList[selectedAddressTxList.length - 1]
-        newTxId = id
-        resolve(newState)
-      })
-    })
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => newTxId)
-  }
-}
-
-function createSpeedUpTransaction (txId, customGasPrice) {
-  log.debug('background.createSpeedUpTransaction')
-  let newTx
-
-  return dispatch => {
-    return new Promise((resolve, reject) => {
-      background.createSpeedUpTransaction(txId, customGasPrice, (err, newState) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-
-        const { selectedAddressTxList } = newState
-        newTx = selectedAddressTxList[selectedAddressTxList.length - 1]
-        resolve(newState)
-      })
-    })
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => newTx)
-  }
-}
-
-//
-// config
-//
-
-function setProviderType (type) {
-  return (dispatch, getState) => {
-    const { type: currentProviderType } = getState().metamask.provider
-    log.debug(`background.setProviderType`, type)
-    background.setProviderType(type, (err, result) => {
-      if (err) {
-        log.error(err)
-        return dispatch(actions.displayWarning('Had a problem changing networks!'))
-      }
-      dispatch(setPreviousProvider(currentProviderType))
-      dispatch(actions.updateProviderType(type))
-      dispatch(actions.setSelectedToken())
-    })
-
-  }
-}
-
-function updateProviderType (type) {
-  return {
-    type: actions.SET_PROVIDER_TYPE,
-    value: type,
-  }
-}
-
-function setPreviousProvider (type) {
-  return {
-    type: actions.SET_PREVIOUS_PROVIDER,
-    value: type,
-  }
-}
-
-function updateAndSetCustomRpc (newRpc, chainId, ticker = 'ETH', nickname) {
-  return (dispatch) => {
-    log.debug(`background.updateAndSetCustomRpc: ${newRpc} ${chainId} ${ticker} ${nickname}`)
-    background.updateAndSetCustomRpc(newRpc, chainId, ticker, nickname || newRpc, (err, result) => {
-      if (err) {
-        log.error(err)
-        return dispatch(actions.displayWarning('Had a problem changing networks!'))
-      }
-      dispatch({
-        type: actions.SET_RPC_TARGET,
-        value: newRpc,
-      })
-    })
-  }
-}
-
-function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname) {
-  return (dispatch) => {
-    log.debug(`background.setRpcTarget: ${newRpc} ${chainId} ${ticker} ${nickname}`)
-    background.setCustomRpc(newRpc, chainId, ticker, nickname || newRpc, (err, result) => {
-      if (err) {
-        log.error(err)
-        return dispatch(actions.displayWarning('Had a problem changing networks!'))
-      }
-      dispatch(actions.setSelectedToken())
-    })
-  }
-}
-
-function delRpcTarget (oldRpc) {
-  return (dispatch) => {
-    log.debug(`background.delRpcTarget: ${oldRpc}`)
-    background.delCustomRpc(oldRpc, (err, result) => {
-      if (err) {
-        log.error(err)
-        return dispatch(self.displayWarning('Had a problem removing network!'))
-      }
-      dispatch(actions.setSelectedToken())
-    })
-  }
-}
-
-// Calls the addressBookController to add a new address.
-function addToAddressBook (recipient, nickname = '') {
-  log.debug(`background.addToAddressBook`)
-  return (dispatch) => {
-    background.setAddressBook(recipient, nickname, (err, result) => {
-      if (err) {
-        log.error(err)
-        return dispatch(self.displayWarning('Address book failed to update'))
-      }
-    })
-  }
-}
-
-function useEtherscanProvider () {
-  log.debug(`background.useEtherscanProvider`)
-  background.useEtherscanProvider()
-  return {
-    type: actions.USE_ETHERSCAN_PROVIDER,
-  }
-}
-
-function showNetworkDropdown () {
-  return {
-    type: actions.NETWORK_DROPDOWN_OPEN,
-  }
-}
-
-function hideNetworkDropdown () {
-  return {
-    type: actions.NETWORK_DROPDOWN_CLOSE,
-  }
-}
-
-
-function showModal (payload) {
-  return {
-    type: actions.MODAL_OPEN,
-    payload,
-  }
-}
-
-function hideModal (payload) {
-  return {
-    type: actions.MODAL_CLOSE,
-    payload,
-  }
-}
-
-function showSidebar ({ transitionName, type, props }) {
-  return {
-    type: actions.SIDEBAR_OPEN,
-    value: {
-      transitionName,
-      type,
-      props,
-    },
-  }
-}
-
-function hideSidebar () {
-  return {
-    type: actions.SIDEBAR_CLOSE,
-  }
-}
-
-function showAlert (msg) {
-  return {
-    type: actions.ALERT_OPEN,
-    value: msg,
-  }
-}
-
-function hideAlert () {
-  return {
-    type: actions.ALERT_CLOSE,
-  }
-}
-
-/**
- * This action will receive two types of values via qrCodeData
- * an object with the following structure {type, values}
- * or null (used to clear the previous value)
- */
-function qrCodeDetected (qrCodeData) {
-  return {
-    type: actions.QR_CODE_DETECTED,
-    value: qrCodeData,
-  }
-}
-
-function showLoadingIndication (message) {
-  return {
-    type: actions.SHOW_LOADING,
-    value: message,
-  }
-}
-
-function setHardwareWalletDefaultHdPath ({ device, path }) {
-    return {
-      type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH,
-      value: {device, path},
-    }
-}
-
-function hideLoadingIndication () {
-  return {
-    type: actions.HIDE_LOADING,
-  }
-}
-
-function showSubLoadingIndication () {
-  return {
-    type: actions.SHOW_SUB_LOADING_INDICATION,
-  }
-}
-
-function hideSubLoadingIndication () {
-  return {
-    type: actions.HIDE_SUB_LOADING_INDICATION,
-  }
-}
-
-function displayWarning (text) {
-  return {
-    type: actions.DISPLAY_WARNING,
-    value: text,
-  }
-}
-
-function hideWarning () {
-  return {
-    type: actions.HIDE_WARNING,
-  }
-}
-
-function requestExportAccount () {
-  return {
-    type: actions.REQUEST_ACCOUNT_EXPORT,
-  }
-}
-
-function exportAccount (password, address) {
-  var self = this
-
-  return function (dispatch) {
-    dispatch(self.showLoadingIndication())
-
-    log.debug(`background.submitPassword`)
-    return new Promise((resolve, reject) => {
-      background.submitPassword(password, function (err) {
-        if (err) {
-          log.error('Error in submiting password.')
-          dispatch(self.hideLoadingIndication())
-          dispatch(self.displayWarning('Incorrect Password.'))
-          return reject(err)
-        }
-        log.debug(`background.exportAccount`)
-        return background.exportAccount(address, function (err, result) {
-          dispatch(self.hideLoadingIndication())
-
-          if (err) {
-            log.error(err)
-            dispatch(self.displayWarning('Had a problem exporting the account.'))
-            return reject(err)
-          }
-
-          // dispatch(self.exportAccountComplete())
-          dispatch(self.showPrivateKey(result))
-
-          return resolve(result)
-        })
-      })
-    })
-  }
-}
-
-function exportAccountComplete () {
-  return {
-    type: actions.EXPORT_ACCOUNT,
-  }
-}
-
-function showPrivateKey (key) {
-  return {
-    type: actions.SHOW_PRIVATE_KEY,
-    value: key,
-  }
-}
-
-function setAccountLabel (account, label) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.setAccountLabel`)
-
-    return new Promise((resolve, reject) => {
-      background.setAccountLabel(account, label, (err) => {
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          reject(err)
-        }
-
-        dispatch({
-          type: actions.SET_ACCOUNT_LABEL,
-          value: { account, label },
-        })
-
-        resolve(account)
-      })
-    })
-  }
-}
-
-function showSendPage () {
-  return {
-    type: actions.SHOW_SEND_PAGE,
-  }
-}
-
-function showSendTokenPage () {
-  return {
-    type: actions.SHOW_SEND_TOKEN_PAGE,
-  }
-}
-
-function buyEth (opts) {
-  return (dispatch) => {
-    const url = getBuyEthUrl(opts)
-    global.platform.openWindow({ url })
-    dispatch({
-      type: actions.BUY_ETH,
-    })
-  }
-}
-
-function onboardingBuyEthView (address) {
-  return {
-    type: actions.ONBOARDING_BUY_ETH_VIEW,
-    value: address,
-  }
-}
-
-function buyEthView (address) {
-  return {
-    type: actions.BUY_ETH_VIEW,
-    value: address,
-  }
-}
-
-function coinBaseSubview () {
-  return {
-    type: actions.COINBASE_SUBVIEW,
-  }
-}
-
-function pairUpdate (coin) {
-  return (dispatch) => {
-    dispatch(actions.showSubLoadingIndication())
-    dispatch(actions.hideWarning())
-    shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
-      dispatch(actions.hideSubLoadingIndication())
-      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
-      dispatch({
-        type: actions.PAIR_UPDATE,
-        value: {
-          marketinfo: mktResponse,
-        },
-      })
-    })
-  }
-}
-
-function shapeShiftSubview (network) {
-  var pair = 'btc_eth'
-  return (dispatch) => {
-    dispatch(actions.showSubLoadingIndication())
-    shapeShiftRequest('marketinfo', {pair}, (mktResponse) => {
-      shapeShiftRequest('getcoins', {}, (response) => {
-        dispatch(actions.hideSubLoadingIndication())
-        if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
-        dispatch({
-          type: actions.SHAPESHIFT_SUBVIEW,
-          value: {
-            marketinfo: mktResponse,
-            coinOptions: response,
-          },
-        })
-      })
-    })
-  }
-}
-
-function coinShiftRquest (data, marketData) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
-      dispatch(actions.hideLoadingIndication())
-      if (response.error) return dispatch(actions.displayWarning(response.error))
-      var message = `
-        Deposit your ${response.depositType} to the address below:`
-      log.debug(`background.createShapeShiftTx`)
-      background.createShapeShiftTx(response.deposit, response.depositType)
-      dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
-    })
-  }
-}
-
-function buyWithShapeShift (data) {
-  return dispatch => new Promise((resolve, reject) => {
-    shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
-      if (response.error) {
-        return reject(response.error)
-      }
-      background.createShapeShiftTx(response.deposit, response.depositType)
-      return resolve(response)
-    })
-  })
-}
-
-function showQrView (data, message) {
-  return {
-    type: actions.SHOW_QR_VIEW,
-    value: {
-      message: message,
-      data: data,
-    },
-  }
-}
-function reshowQrCode (data, coin) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
-      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
-
-      var message = [
-        `Deposit your ${coin} to the address below:`,
-        `Deposit Limit: ${mktResponse.limit}`,
-        `Deposit Minimum:${mktResponse.minimum}`,
-      ]
-
-      dispatch(actions.hideLoadingIndication())
-      return dispatch(actions.showQrView(data, message))
-      // return dispatch(actions.showModal({
-      //   name: 'SHAPESHIFT_DEPOSIT_TX',
-      //   Qr: { data, message },
-      // }))
-    })
-  }
-}
-
-function shapeShiftRequest (query, options, cb) {
-  var queryResponse, method
-  !options ? options = {} : null
-  options.method ? method = options.method : method = 'GET'
-
-  var requestListner = function (request) {
-    try {
-      queryResponse = JSON.parse(this.responseText)
-      cb ? cb(queryResponse) : null
-      return queryResponse
-    } catch (e) {
-      cb ? cb({error: e}) : null
-      return e
-    }
-  }
-
-  var shapShiftReq = new XMLHttpRequest()
-  shapShiftReq.addEventListener('load', requestListner)
-  shapShiftReq.open(method, `https://shapeshift.io/${query}/${options.pair ? options.pair : ''}`, true)
-
-  if (options.method === 'POST') {
-    var jsonObj = JSON.stringify(options.data)
-    shapShiftReq.setRequestHeader('Content-Type', 'application/json')
-    return shapShiftReq.send(jsonObj)
-  } else {
-    return shapShiftReq.send()
-  }
-}
-
-function setFeatureFlag (feature, activated, notificationType) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-        dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
-        notificationType && dispatch(actions.showModal({ name: notificationType }))
-        resolve(updatedFeatureFlags)
-      })
-    })
-  }
-}
-
-function updateFeatureFlags (updatedFeatureFlags) {
-  return {
-    type: actions.UPDATE_FEATURE_FLAGS,
-    value: updatedFeatureFlags,
-  }
-}
-
-function setPreference (preference, value) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.setPreference(preference, value, (err, updatedPreferences) => {
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.updatePreferences(updatedPreferences))
-        resolve(updatedPreferences)
-      })
-    })
-  }
-}
-
-function updatePreferences (value) {
-  return {
-    type: actions.UPDATE_PREFERENCES,
-    value,
-  }
-}
-
-function setUseNativeCurrencyAsPrimaryCurrencyPreference (value) {
-  return setPreference('useNativeCurrencyAsPrimaryCurrency', value)
-}
-
-function setShowFiatConversionOnTestnetsPreference (value) {
-  return setPreference('showFiatInTestnets', value)
-}
-
-function setCompletedOnboarding () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.completeOnboarding(err => {
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completeOnboarding())
-        resolve()
-      })
-    })
-  }
-}
-
-function completeOnboarding () {
-  return {
-    type: actions.COMPLETE_ONBOARDING,
-  }
-}
-
-function setCompletedUiMigration () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.completeUiMigration(err => {
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completeUiMigration())
-        resolve()
-      })
-    })
-  }
-}
-
-function completeUiMigration () {
-  return {
-    type: actions.COMPLETE_UI_MIGRATION,
-  }
-}
-
-function setNetworkNonce (networkNonce) {
-  return {
-    type: actions.SET_NETWORK_NONCE,
-    value: networkNonce,
-  }
-}
-
-function updateNetworkNonce (address) {
-  return (dispatch) => {
-    return new Promise((resolve, reject) => {
-      global.ethQuery.getTransactionCount(address, (err, data) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-        dispatch(setNetworkNonce(data))
-        resolve(data)
-      })
-    })
-  }
-}
-
-function setMouseUserState (isMouseUser) {
-  return {
-    type: actions.SET_MOUSE_USER_STATE,
-    value: isMouseUser,
-  }
-}
-
-// Call Background Then Update
-//
-// A function generator for a common pattern wherein:
-// We show loading indication.
-// We call a background method.
-// We hide loading indication.
-// If it errored, we show a warning.
-// If it didn't, we update the state.
-function callBackgroundThenUpdateNoSpinner (method, ...args) {
-  return (dispatch) => {
-    method.call(background, ...args, (err) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      forceUpdateMetamaskState(dispatch)
-    })
-  }
-}
-
-function callBackgroundThenUpdate (method, ...args) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    method.call(background, ...args, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      forceUpdateMetamaskState(dispatch)
-    })
-  }
-}
-
-function forceUpdateMetamaskState (dispatch) {
-  log.debug(`background.getState`)
-  return new Promise((resolve, reject) => {
-    background.getState((err, newState) => {
-      if (err) {
-        dispatch(actions.displayWarning(err.message))
-        return reject(err)
-      }
-
-      dispatch(actions.updateMetamaskState(newState))
-      resolve(newState)
-    })
-  })
-}
-
-function toggleAccountMenu () {
-  return {
-    type: actions.TOGGLE_ACCOUNT_MENU,
-  }
-}
-
-function setParticipateInMetaMetrics (val) {
-  return (dispatch) => {
-    log.debug(`background.setParticipateInMetaMetrics`)
-    return new Promise((resolve, reject) => {
-      background.setParticipateInMetaMetrics(val, (err, metaMetricsId) => {
-        log.debug(err)
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch({
-          type: actions.SET_PARTICIPATE_IN_METAMETRICS,
-          value: val,
-        })
-
-        resolve([val, metaMetricsId])
-      })
-    })
-  }
-}
-
-function setMetaMetricsSendCount (val) {
-  return (dispatch) => {
-    log.debug(`background.setMetaMetricsSendCount`)
-    return new Promise((resolve, reject) => {
-      background.setMetaMetricsSendCount(val, (err) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch({
-          type: actions.SET_METAMETRICS_SEND_COUNT,
-          value: val,
-        })
-
-        resolve(val)
-      })
-    })
-  }
-}
-
-function setUseBlockie (val) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.setUseBlockie`)
-    background.setUseBlockie(val, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-    })
-    dispatch({
-      type: actions.SET_USE_BLOCKIE,
-      value: val,
-    })
-  }
-}
-
-function updateCurrentLocale (key) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication())
-    return fetchLocale(key)
-      .then((localeMessages) => {
-        log.debug(`background.setCurrentLocale`)
-        background.setCurrentLocale(key, (err) => {
-          dispatch(actions.hideLoadingIndication())
-          if (err) {
-            return dispatch(actions.displayWarning(err.message))
-          }
-          dispatch(actions.setCurrentLocale(key))
-          dispatch(actions.setLocaleMessages(localeMessages))
-        })
-      })
-  }
-}
-
-function setCurrentLocale (key) {
-  return {
-    type: actions.SET_CURRENT_LOCALE,
-    value: key,
-  }
-}
-
-function setLocaleMessages (localeMessages) {
-  return {
-    type: actions.SET_LOCALE_MESSAGES,
-    value: localeMessages,
-  }
-}
-
-function updateNetworkEndpointType (networkEndpointType) {
-  return {
-    type: actions.UPDATE_NETWORK_ENDPOINT_TYPE,
-    value: networkEndpointType,
-  }
-}
-
-function setPendingTokens (pendingTokens) {
-  const { customToken = {}, selectedTokens = {} } = pendingTokens
-  const { address, symbol, decimals } = customToken
-  const tokens = address && symbol && decimals
-    ? { ...selectedTokens, [address]: { ...customToken, isCustom: true } }
-    : selectedTokens
-
-  return {
-    type: actions.SET_PENDING_TOKENS,
-    payload: tokens,
-  }
-}
-
-function approveProviderRequest (tabID) {
-  return (dispatch) => {
-    background.approveProviderRequest(tabID)
-  }
-}
-
-function rejectProviderRequest (tabID) {
-  return (dispatch) => {
-    background.rejectProviderRequest(tabID)
-  }
-}
-
-function clearApprovedOrigins () {
-  return (dispatch) => {
-    background.clearApprovedOrigins()
-  }
-}
-
-function setFirstTimeFlowType (type) {
-  return (dispatch) => {
-    log.debug(`background.setFirstTimeFlowType`)
-    background.setFirstTimeFlowType(type, (err) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-    })
-    dispatch({
-      type: actions.SET_FIRST_TIME_FLOW_TYPE,
-      value: type,
-    })
-  }
-}
diff --git a/ui/app/app.js b/ui/app/app.js
deleted file mode 100644
index efec4e49a..000000000
--- a/ui/app/app.js
+++ /dev/null
@@ -1,441 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { Route, Switch, withRouter, matchPath } from 'react-router-dom'
-import { compose } from 'recompose'
-import actions from './actions'
-import log from 'loglevel'
-import { getMetaMaskAccounts, getNetworkIdentifier } from './selectors'
-
-// init
-import FirstTimeFlow from './components/pages/first-time-flow'
-// accounts
-const SendTransactionScreen = require('./components/send/send.container')
-const ConfirmTransaction = require('./components/pages/confirm-transaction')
-
-// slideout menu
-const Sidebar = require('./components/sidebars').default
-const { WALLET_VIEW_SIDEBAR } = require('./components/sidebars/sidebar.constants')
-
-// other views
-import Home from './components/pages/home'
-import Settings from './components/pages/settings'
-import Authenticated from './higher-order-components/authenticated'
-import Initialized from './higher-order-components/initialized'
-import Lock from './components/pages/lock'
-import UiMigrationAnnouncement from './components/ui-migration-annoucement'
-const RestoreVaultPage = require('./components/pages/keychains/restore-vault').default
-const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
-const MobileSyncPage = require('./components/pages/mobile-sync')
-const AddTokenPage = require('./components/pages/add-token')
-const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
-const ConfirmAddSuggestedTokenPage = require('./components/pages/confirm-add-suggested-token')
-const CreateAccountPage = require('./components/pages/create-account')
-const NoticeScreen = require('./components/pages/notice')
-
-const Loading = require('./components/loading-screen')
-const LoadingNetwork = require('./components/loading-network-screen').default
-const NetworkDropdown = require('./components/dropdowns/network-dropdown')
-import AccountMenu from './components/account-menu'
-
-// Global Modals
-const Modal = require('./components/modals/index').Modal
-// Global Alert
-const Alert = require('./components/alert')
-
-import AppHeader from './components/app-header'
-import UnlockPage from './components/pages/unlock-page'
-
-import {
-  submittedPendingTransactionsSelector,
-} from './selectors/transactions'
-
-// Routes
-import {
-  DEFAULT_ROUTE,
-  LOCK_ROUTE,
-  UNLOCK_ROUTE,
-  SETTINGS_ROUTE,
-  REVEAL_SEED_ROUTE,
-  MOBILE_SYNC_ROUTE,
-  RESTORE_VAULT_ROUTE,
-  ADD_TOKEN_ROUTE,
-  CONFIRM_ADD_TOKEN_ROUTE,
-  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
-  NEW_ACCOUNT_ROUTE,
-  SEND_ROUTE,
-  CONFIRM_TRANSACTION_ROUTE,
-  INITIALIZE_ROUTE,
-  INITIALIZE_UNLOCK_ROUTE,
-  NOTICE_ROUTE,
-} from './routes'
-
-// enums
-import {
-  ENVIRONMENT_TYPE_NOTIFICATION,
-  ENVIRONMENT_TYPE_POPUP,
-} from '../../app/scripts/lib/enums'
-
-class App extends Component {
-  componentWillMount () {
-    const { currentCurrency, setCurrentCurrencyToUSD } = this.props
-
-    if (!currentCurrency) {
-      setCurrentCurrencyToUSD()
-    }
-
-    this.props.history.listen((locationObj, action) => {
-      if (action === 'PUSH') {
-        const url = `&url=${encodeURIComponent('http://www.metamask.io/metametrics' + locationObj.pathname)}`
-        this.context.metricsEvent({}, {
-          currentPath: '',
-          pathname: locationObj.pathname,
-          url,
-          pageOpts: {
-            hideDimensions: true,
-          },
-        })
-      }
-    })
-  }
-
-  renderRoutes () {
-    return (
-      <Switch>
-        <Route path={LOCK_ROUTE} component={Lock} exact />
-        <Route path={INITIALIZE_ROUTE} component={FirstTimeFlow} />
-        <Initialized path={UNLOCK_ROUTE} component={UnlockPage} exact />
-        <Initialized path={RESTORE_VAULT_ROUTE} component={RestoreVaultPage} exact />
-        <Authenticated path={REVEAL_SEED_ROUTE} component={RevealSeedConfirmation} exact />
-        <Authenticated path={MOBILE_SYNC_ROUTE} component={MobileSyncPage} exact />
-        <Authenticated path={SETTINGS_ROUTE} component={Settings} />
-        <Authenticated path={NOTICE_ROUTE} component={NoticeScreen} exact />
-        <Authenticated path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransaction} />
-        <Authenticated path={SEND_ROUTE} component={SendTransactionScreen} exact />
-        <Authenticated path={ADD_TOKEN_ROUTE} component={AddTokenPage} exact />
-        <Authenticated path={CONFIRM_ADD_TOKEN_ROUTE} component={ConfirmAddTokenPage} exact />
-        <Authenticated path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE} component={ConfirmAddSuggestedTokenPage} exact />
-        <Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
-        <Authenticated path={DEFAULT_ROUTE} component={Home} exact />
-      </Switch>
-    )
-  }
-
-  onInitializationUnlockPage () {
-    const { location } = this.props
-    return Boolean(matchPath(location.pathname, { path: INITIALIZE_UNLOCK_ROUTE, exact: true }))
-  }
-
-  onConfirmPage () {
-    const { location } = this.props
-    return Boolean(matchPath(location.pathname, { path: CONFIRM_TRANSACTION_ROUTE, exact: false }))
-  }
-
-  hasProviderRequests () {
-    const { providerRequests } = this.props
-    return Array.isArray(providerRequests) && providerRequests.length > 0
-  }
-
-  hideAppHeader () {
-    const { location } = this.props
-
-    const isInitializing = Boolean(matchPath(location.pathname, {
-      path: INITIALIZE_ROUTE, exact: false,
-    }))
-
-    if (isInitializing && !this.onInitializationUnlockPage()) {
-      return true
-    }
-
-    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-      return true
-    }
-
-    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP) {
-      return this.onConfirmPage() || this.hasProviderRequests()
-    }
-  }
-
-  render () {
-    const {
-      isLoading,
-      alertMessage,
-      loadingMessage,
-      network,
-      provider,
-      frequentRpcListDetail,
-      currentView,
-      setMouseUserState,
-      sidebar,
-      submittedPendingTransactions,
-    } = this.props
-    const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
-    const loadMessage = loadingMessage || isLoadingNetwork ?
-      this.getConnectingLabel(loadingMessage) : null
-    log.debug('Main ui render function')
-
-    const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR
-      ? () => {
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Wallet Sidebar',
-            name: 'Closed Sidebare Via Overlay',
-          },
-        })
-      }
-      : null
-
-    const {
-      isOpen: sidebarIsOpen,
-      transitionName: sidebarTransitionName,
-      type: sidebarType,
-      props,
-    } = sidebar
-    const { transaction: sidebarTransaction } = props || {}
-
-    return (
-      <div
-        className="app"
-        onClick={() => setMouseUserState(true)}
-        onKeyDown={e => {
-          if (e.keyCode === 9) {
-            setMouseUserState(false)
-          }
-        }}
-      >
-        <UiMigrationAnnouncement />
-        <Modal />
-        <Alert
-          visible={this.props.alertOpen}
-          msg={alertMessage}
-        />
-        {
-          !this.hideAppHeader() && (
-            <AppHeader
-              hideNetworkIndicator={this.onInitializationUnlockPage()}
-              disabled={this.onConfirmPage()}
-            />
-          )
-        }
-        <Sidebar
-          sidebarOpen={sidebarIsOpen}
-          sidebarShouldClose={sidebarTransaction && !submittedPendingTransactions.find(({ id }) => id === sidebarTransaction.id)}
-          hideSidebar={this.props.hideSidebar}
-          transitionName={sidebarTransitionName}
-          type={sidebarType}
-          sidebarProps={sidebar.props}
-          onOverlayClose={sidebarOnOverlayClose}
-        />
-        <NetworkDropdown
-          provider={provider}
-          frequentRpcListDetail={frequentRpcListDetail}
-        />
-        <AccountMenu />
-        <div className="main-container-wrapper">
-          { isLoading && <Loading loadingMessage={loadMessage} /> }
-          { !isLoading && isLoadingNetwork && <LoadingNetwork /> }
-          { this.renderRoutes() }
-        </div>
-      </div>
-    )
-  }
-
-  toggleMetamaskActive () {
-    if (!this.props.isUnlocked) {
-      // currently inactive: redirect to password box
-      var passwordBox = document.querySelector('input[type=password]')
-      if (!passwordBox) return
-      passwordBox.focus()
-    } else {
-      // currently active: deactivate
-      this.props.dispatch(actions.lockMetamask(false))
-    }
-  }
-
-  getConnectingLabel = function (loadingMessage) {
-    if (loadingMessage) {
-      return loadingMessage
-    }
-    const { provider, providerId } = this.props
-    const providerName = provider.type
-
-    let name
-
-    if (providerName === 'mainnet') {
-      name = this.context.t('connectingToMainnet')
-    } else if (providerName === 'ropsten') {
-      name = this.context.t('connectingToRopsten')
-    } else if (providerName === 'kovan') {
-      name = this.context.t('connectingToKovan')
-    } else if (providerName === 'rinkeby') {
-      name = this.context.t('connectingToRinkeby')
-    } else {
-      name = this.context.t('connectingTo', [providerId])
-    }
-
-    return name
-  }
-
-  getNetworkName () {
-    const { provider } = this.props
-    const providerName = provider.type
-
-    let name
-
-    if (providerName === 'mainnet') {
-      name = this.context.t('mainnet')
-    } else if (providerName === 'ropsten') {
-      name = this.context.t('ropsten')
-    } else if (providerName === 'kovan') {
-      name = this.context.t('kovan')
-    } else if (providerName === 'rinkeby') {
-      name = this.context.t('rinkeby')
-    } else {
-      name = this.context.t('unknownNetwork')
-    }
-
-    return name
-  }
-}
-
-App.propTypes = {
-  currentCurrency: PropTypes.string,
-  setCurrentCurrencyToUSD: PropTypes.func,
-  isLoading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  alertMessage: PropTypes.string,
-  network: PropTypes.string,
-  provider: PropTypes.object,
-  frequentRpcListDetail: PropTypes.array,
-  currentView: PropTypes.object,
-  sidebar: PropTypes.object,
-  alertOpen: PropTypes.bool,
-  hideSidebar: PropTypes.func,
-  isOnboarding: PropTypes.bool,
-  isUnlocked: PropTypes.bool,
-  networkDropdownOpen: PropTypes.bool,
-  showNetworkDropdown: PropTypes.func,
-  hideNetworkDropdown: PropTypes.func,
-  history: PropTypes.object,
-  location: PropTypes.object,
-  dispatch: PropTypes.func,
-  toggleAccountMenu: PropTypes.func,
-  selectedAddress: PropTypes.string,
-  noActiveNotices: PropTypes.bool,
-  lostAccounts: PropTypes.array,
-  isInitialized: PropTypes.bool,
-  forgottenPassword: PropTypes.bool,
-  activeAddress: PropTypes.string,
-  unapprovedTxs: PropTypes.object,
-  seedWords: PropTypes.string,
-  submittedPendingTransactions: PropTypes.array,
-  unapprovedMsgCount: PropTypes.number,
-  unapprovedPersonalMsgCount: PropTypes.number,
-  unapprovedTypedMessagesCount: PropTypes.number,
-  welcomeScreenSeen: PropTypes.bool,
-  isPopup: PropTypes.bool,
-  isMouseUser: PropTypes.bool,
-  setMouseUserState: PropTypes.func,
-  t: PropTypes.func,
-  providerId: PropTypes.string,
-  providerRequests: PropTypes.array,
-}
-
-function mapStateToProps (state) {
-  const { appState, metamask } = state
-  const {
-    networkDropdownOpen,
-    sidebar,
-    alertOpen,
-    alertMessage,
-    isLoading,
-    loadingMessage,
-  } = appState
-
-  const accounts = getMetaMaskAccounts(state)
-
-  const {
-    identities,
-    address,
-    keyrings,
-    isInitialized,
-    noActiveNotices,
-    seedWords,
-    unapprovedTxs,
-    nextUnreadNotice,
-    lostAccounts,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    providerRequests,
-  } = metamask
-  const selected = address || Object.keys(accounts)[0]
-
-  return {
-    // state from plugin
-    networkDropdownOpen,
-    sidebar,
-    alertOpen,
-    alertMessage,
-    isLoading,
-    loadingMessage,
-    noActiveNotices,
-    isInitialized,
-    isUnlocked: state.metamask.isUnlocked,
-    selectedAddress: state.metamask.selectedAddress,
-    currentView: state.appState.currentView,
-    activeAddress: state.appState.activeAddress,
-    transForward: state.appState.transForward,
-    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
-    isPopup: state.metamask.isPopup,
-    seedWords: state.metamask.seedWords,
-    submittedPendingTransactions: submittedPendingTransactionsSelector(state),
-    unapprovedTxs,
-    unapprovedMsgs: state.metamask.unapprovedMsgs,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    menuOpen: state.appState.menuOpen,
-    network: state.metamask.network,
-    provider: state.metamask.provider,
-    forgottenPassword: state.appState.forgottenPassword,
-    nextUnreadNotice,
-    lostAccounts,
-    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
-    currentCurrency: state.metamask.currentCurrency,
-    isMouseUser: state.appState.isMouseUser,
-    isRevealingSeedWords: state.metamask.isRevealingSeedWords,
-    Qr: state.appState.Qr,
-    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
-    providerId: getNetworkIdentifier(state),
-
-    // state needed to get account dropdown temporarily rendering from app bar
-    identities,
-    selected,
-    keyrings,
-    providerRequests,
-  }
-}
-
-function mapDispatchToProps (dispatch, ownProps) {
-  return {
-    dispatch,
-    hideSidebar: () => dispatch(actions.hideSidebar()),
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
-    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
-    setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
-    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
-    setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
-  }
-}
-
-App.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(App)
diff --git a/ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js
deleted file mode 100644
index 8a171d0c6..000000000
--- a/ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import AccountListItem from '../send/account-list-item/account-list-item.component'
-
-export default class AccountDropdownMini extends PureComponent {
-  static propTypes = {
-    accounts: PropTypes.array.isRequired,
-    closeDropdown: PropTypes.func,
-    disabled: PropTypes.bool,
-    dropdownOpen: PropTypes.bool,
-    onSelect: PropTypes.func,
-    openDropdown: PropTypes.func,
-    selectedAccount: PropTypes.object.isRequired,
-  }
-
-  static defaultProps = {
-    closeDropdown: () => {},
-    disabled: false,
-    dropdownOpen: false,
-    onSelect: () => {},
-    openDropdown: () => {},
-  }
-
-  getListItemIcon (currentAccount, selectedAccount) {
-    return currentAccount.address === selectedAccount.address && (
-      <i
-        className="fa fa-check fa-lg"
-        style={{ color: '#02c9b1' }}
-      />
-    )
-  }
-
-  renderDropdown () {
-    const { accounts, selectedAccount, closeDropdown, onSelect } = this.props
-
-    return (
-      <div>
-        <div
-          className="account-dropdown-mini__close-area"
-          onClick={closeDropdown}
-        />
-        <div className="account-dropdown-mini__list">
-          {
-            accounts.map(account => (
-              <AccountListItem
-                key={account.address}
-                account={account}
-                displayBalance={false}
-                displayAddress={false}
-                handleClick={() => {
-                  onSelect(account)
-                  closeDropdown()
-                }}
-                icon={this.getListItemIcon(account, selectedAccount)}
-              />
-            ))
-          }
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props
-
-    return (
-      <div className="account-dropdown-mini">
-        <AccountListItem
-          account={selectedAccount}
-          handleClick={() => !disabled && openDropdown()}
-          displayBalance={false}
-          displayAddress={false}
-          icon={
-            !disabled && <i
-              className="fa fa-caret-down fa-lg"
-              style={{ color: '#dedede' }}
-            />
-          }
-        />
-        { !disabled && dropdownOpen && this.renderDropdown() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
deleted file mode 100644
index abd2f7c75..000000000
--- a/ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import AccountDropdownMini from '../account-dropdown-mini.component'
-import AccountListItem from '../../send/account-list-item/account-list-item.component'
-
-describe('AccountDropdownMini', () => {
-  it('should render an account with an icon', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 1)
-    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
-    assert.equal(accountListItemProps.account.address, '0x1')
-    const iconProps = accountListItemProps.icon.props
-    assert.equal(iconProps.className, 'fa fa-caret-down fa-lg')
-  })
-
-  it('should render a list of accounts', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-        dropdownOpen={true}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 4)
-  })
-
-  it('should render a single account when disabled', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-        dropdownOpen={false}
-        disabled={true}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 1)
-    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
-    assert.equal(accountListItemProps.account.address, '0x1')
-    assert.equal(accountListItemProps.icon, false)
-  })
-})
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
deleted file mode 100644
index b05ba219c..000000000
--- a/ui/app/components/account-dropdowns.js
+++ /dev/null
@@ -1,338 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const actions = require('../actions')
-const genAccountLink = require('etherscan-link').createAccountLink
-const connect = require('react-redux').connect
-const Dropdown = require('./dropdown').Dropdown
-const DropdownMenuItem = require('./dropdown').DropdownMenuItem
-const copyToClipboard = require('copy-to-clipboard')
-const { checksumAddress } = require('../util')
-
-import Identicon from './identicon'
-
-class AccountDropdowns extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      accountSelectorActive: false,
-      optionsMenuActive: false,
-    }
-    this.accountSelectorToggleClassName = 'accounts-selector'
-    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
-  }
-
-  renderAccounts () {
-    const { identities, selected, keyrings } = this.props
-
-    return Object.keys(identities).map((key, index) => {
-      const identity = identities[key]
-      const isSelected = identity.address === selected
-
-      const simpleAddress = identity.address.substring(2).toLowerCase()
-
-      const keyring = keyrings.find((kr) => {
-        return kr.accounts.includes(simpleAddress) ||
-          kr.accounts.includes(identity.address)
-      })
-
-      return h(
-        DropdownMenuItem,
-        {
-          closeMenu: () => {},
-          onClick: () => {
-            this.props.actions.showAccountDetail(identity.address)
-          },
-          style: {
-            marginTop: index === 0 ? '5px' : '',
-            fontSize: '24px',
-          },
-        },
-        [
-          h(
-            Identicon,
-            {
-              address: identity.address,
-              diameter: 32,
-              style: {
-                marginLeft: '10px',
-              },
-            },
-          ),
-          this.indicateIfLoose(keyring),
-          h('span', {
-            style: {
-              marginLeft: '20px',
-              fontSize: '24px',
-              maxWidth: '145px',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          }, identity.name || ''),
-          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-        ]
-      )
-    })
-  }
-
-  indicateIfLoose (keyring) {
-    try { // Sometimes keyrings aren't loaded yet:
-      const type = keyring.type
-      const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
-    } catch (e) { return }
-  }
-
-  renderAccountSelector () {
-    const { actions } = this.props
-    const { accountSelectorActive } = this.state
-
-    return h(
-      Dropdown,
-      {
-        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
-        style: {
-          marginLeft: '-238px',
-          marginTop: '38px',
-          minWidth: '180px',
-          overflowY: 'auto',
-          maxHeight: '300px',
-          width: '300px',
-        },
-        innerStyle: {
-          padding: '8px 25px',
-        },
-        isOpen: accountSelectorActive,
-        onClickOutside: (event) => {
-          const { classList } = event.target
-          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
-          if (accountSelectorActive && isNotToggleElement) {
-            this.setState({ accountSelectorActive: false })
-          }
-        },
-      },
-      [
-        ...this.renderAccounts(),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => actions.addNewAccount(),
-          },
-          [
-            h(
-              Identicon,
-              {
-                style: {
-                  marginLeft: '10px',
-                },
-                diameter: 32,
-              },
-            ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
-          ],
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => actions.showImportPage(),
-          },
-          [
-            h(
-              Identicon,
-              {
-                style: {
-                  marginLeft: '10px',
-                },
-                diameter: 32,
-              },
-            ),
-            h('span', {
-              style: {
-                marginLeft: '20px',
-                fontSize: '24px',
-                marginBottom: '5px',
-              },
-            }, this.context.t('importAccount')),
-          ]
-        ),
-      ]
-    )
-  }
-
-  renderAccountOptions () {
-    const { actions } = this.props
-    const { optionsMenuActive } = this.state
-
-    return h(
-      Dropdown,
-      {
-        style: {
-          marginLeft: '-215px',
-          minWidth: '180px',
-        },
-        isOpen: optionsMenuActive,
-        onClickOutside: (event) => {
-          const { classList } = event.target
-          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
-          if (optionsMenuActive && isNotToggleElement) {
-            this.setState({ optionsMenuActive: false })
-          }
-        },
-      },
-      [
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected, network } = this.props
-              const url = genAccountLink(selected, network)
-              global.platform.openWindow({ url })
-            },
-          },
-          this.context.t('etherscanView'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected, identities } = this.props
-              var identity = identities[selected]
-              actions.showQrView(selected, identity ? identity.name : '')
-            },
-          },
-          this.context.t('showQRCode'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected } = this.props
-              copyToClipboard(checksumAddress(selected))
-            },
-          },
-          this.context.t('copyAddress'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              actions.requestAccountExport()
-            },
-          },
-          this.context.t('exportPrivateKey'),
-        ),
-      ]
-    )
-  }
-
-  render () {
-    const { metricsEvent } = this.context
-    const { style, enableAccountsSelector, enableAccountOptions } = this.props
-    const { optionsMenuActive, accountSelectorActive } = this.state
-
-    return h(
-      'span',
-      {
-        style: style,
-      },
-      [
-        enableAccountsSelector && h(
-          // 'i.fa.fa-angle-down',
-          'div.cursor-pointer.color-orange.accounts-selector',
-          {
-            style: {
-              // fontSize: '1.8em',
-              background: 'url(images/switch_acc.svg) white center center no-repeat',
-              height: '25px',
-              width: '25px',
-              transform: 'scale(0.75)',
-              marginRight: '3px',
-            },
-            onClick: (event) => {
-              event.stopPropagation()
-              this.setState({
-                accountSelectorActive: !accountSelectorActive,
-                optionsMenuActive: false,
-              })
-            },
-          },
-          this.renderAccountSelector(),
-        ),
-        enableAccountOptions && h(
-          'i.fa.fa-ellipsis-h',
-          {
-            style: {
-              marginRight: '0.5em',
-              fontSize: '1.8em',
-            },
-            onClick: (event) => {
-              metricsEvent({
-                eventOpts: {
-                  category: 'Accounts',
-                  action: 'userClick',
-                  name: 'accountsOpenedMenu',
-                },
-                pageOpts: {
-                  section: 'header',
-                  component: 'accountDropdownIcon',
-                },
-              })
-              event.stopPropagation()
-              this.setState({
-                accountSelectorActive: false,
-                optionsMenuActive: !optionsMenuActive,
-              })
-            },
-          },
-          this.renderAccountOptions()
-        ),
-      ]
-    )
-  }
-}
-
-AccountDropdowns.defaultProps = {
-  enableAccountsSelector: false,
-  enableAccountOptions: false,
-}
-
-AccountDropdowns.propTypes = {
-  identities: PropTypes.objectOf(PropTypes.object),
-  selected: PropTypes.string,
-  keyrings: PropTypes.array,
-  actions: PropTypes.objectOf(PropTypes.func),
-  network: PropTypes.string,
-  style: PropTypes.object,
-  enableAccountOptions: PropTypes.bool,
-  enableAccountsSelector: PropTypes.bool,
-    t: PropTypes.func,
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    actions: {
-      showConfigPage: () => dispatch(actions.showConfigPage()),
-      requestAccountExport: () => dispatch(actions.requestExportAccount()),
-      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
-      addNewAccount: () => dispatch(actions.addNewAccount()),
-      showImportPage: () => dispatch(actions.showImportPage()),
-      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    },
-  }
-}
-
-AccountDropdowns.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = {
-  AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
-}
diff --git a/ui/app/components/account-menu/account-menu.component.js b/ui/app/components/account-menu/account-menu.component.js
deleted file mode 100644
index f7c962874..000000000
--- a/ui/app/components/account-menu/account-menu.component.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import debounce from 'lodash.debounce'
-import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../app/scripts/lib/util'
-import Tooltip from '../tooltip'
-import Identicon from '../identicon'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { PRIMARY } from '../../constants/common'
-import {
-  SETTINGS_ROUTE,
-  INFO_ROUTE,
-  NEW_ACCOUNT_ROUTE,
-  IMPORT_ACCOUNT_ROUTE,
-  CONNECT_HARDWARE_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../routes'
-
-export default class AccountMenu extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    accounts: PropTypes.object,
-    history: PropTypes.object,
-    identities: PropTypes.object,
-    isAccountMenuOpen: PropTypes.bool,
-    prevIsAccountMenuOpen: PropTypes.bool,
-    keyrings: PropTypes.array,
-    lockMetamask: PropTypes.func,
-    selectedAddress: PropTypes.string,
-    showAccountDetail: PropTypes.func,
-    showRemoveAccountConfirmationModal: PropTypes.func,
-    toggleAccountMenu: PropTypes.func,
-  }
-
-  state = {
-    atAccountListBottom: false,
-  }
-
-  componentDidUpdate (prevProps) {
-    const { prevIsAccountMenuOpen } = prevProps
-    const { isAccountMenuOpen } = this.props
-
-    if (!prevIsAccountMenuOpen && isAccountMenuOpen) {
-      this.setAtAccountListBottom()
-    }
-  }
-
-  renderAccounts () {
-    const {
-      identities,
-      accounts,
-      selectedAddress,
-      keyrings,
-      showAccountDetail,
-    } = this.props
-
-    const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), [])
-
-    return accountOrder.filter(address => !!identities[address]).map(address => {
-      const identity = identities[address]
-      const isSelected = identity.address === selectedAddress
-
-      const balanceValue = accounts[address] ? accounts[address].balance : ''
-      const simpleAddress = identity.address.substring(2).toLowerCase()
-
-      const keyring = keyrings.find(kr => {
-        return kr.accounts.includes(simpleAddress) || kr.accounts.includes(identity.address)
-      })
-
-      return (
-        <div
-          className="account-menu__account menu__item--clickable"
-          onClick={() => {
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Main Menu',
-                name: 'Switched Account',
-              },
-            })
-            showAccountDetail(identity.address)
-          }}
-          key={identity.address}
-        >
-          <div className="account-menu__check-mark">
-            { isSelected && <div className="account-menu__check-mark-icon" /> }
-          </div>
-          <Identicon
-            address={identity.address}
-            diameter={24}
-          />
-          <div className="account-menu__account-info">
-            <div className="account-menu__name">
-              { identity.name || '' }
-            </div>
-            <UserPreferencedCurrencyDisplay
-              className="account-menu__balance"
-              value={balanceValue}
-              type={PRIMARY}
-            />
-          </div>
-          { this.renderKeyringType(keyring) }
-          { this.renderRemoveAccount(keyring, identity) }
-        </div>
-      )
-    })
-  }
-
-  renderRemoveAccount (keyring, identity) {
-    const { t } = this.context
-    // Any account that's not from the HD wallet Keyring can be removed
-    const { type } = keyring
-    const isRemovable = type !== 'HD Key Tree'
-
-    return isRemovable && (
-      <Tooltip
-        title={t('removeAccount')}
-        position="bottom"
-      >
-        <a
-          className="remove-account-icon"
-          onClick={e => this.removeAccount(e, identity)}
-        />
-      </Tooltip>
-    )
-  }
-
-  removeAccount (e, identity) {
-    e.preventDefault()
-    e.stopPropagation()
-    const { showRemoveAccountConfirmationModal } = this.props
-    showRemoveAccountConfirmationModal(identity)
-  }
-
-  renderKeyringType (keyring) {
-    const { t } = this.context
-
-    // Sometimes keyrings aren't loaded yet
-    if (!keyring) {
-      return null
-    }
-
-    const { type } = keyring
-    let label
-
-    switch (type) {
-      case 'Trezor Hardware':
-      case 'Ledger Hardware':
-        label = t('hardware')
-        break
-      case 'Simple Key Pair':
-        label = t('imported')
-        break
-    }
-
-    return label && (
-      <div className="keyring-label allcaps">
-        { label }
-      </div>
-    )
-  }
-
-  setAtAccountListBottom = () => {
-    const target = document.querySelector('.account-menu__accounts')
-    const { scrollTop, offsetHeight, scrollHeight } = target
-    const atAccountListBottom = scrollTop + offsetHeight >= scrollHeight
-    this.setState({ atAccountListBottom })
-  }
-
-  onScroll = debounce(this.setAtAccountListBottom, 25)
-
-  handleScrollDown = e => {
-    e.stopPropagation()
-    const target = document.querySelector('.account-menu__accounts')
-    const { scrollHeight } = target
-    target.scroll({ left: 0, top: scrollHeight, behavior: 'smooth' })
-    this.setAtAccountListBottom()
-  }
-
-  renderScrollButton () {
-    const { accounts } = this.props
-    const { atAccountListBottom } = this.state
-
-    return !atAccountListBottom && Object.keys(accounts).length > 3 && (
-      <div
-        className="account-menu__scroll-button"
-        onClick={this.handleScrollDown}
-      >
-        <img
-          src="./images/icons/down-arrow.svg"
-          width={28}
-          height={28}
-        />
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-    const {
-      isAccountMenuOpen,
-      toggleAccountMenu,
-      lockMetamask,
-      history,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    return (
-      <Menu
-        className="account-menu"
-        isShowing={isAccountMenuOpen}
-      >
-        <CloseArea onClick={toggleAccountMenu} />
-        <Item className="account-menu__header">
-          { t('myAccounts') }
-          <button
-            className="account-menu__logout-button"
-            onClick={() => {
-              lockMetamask()
-              history.push(DEFAULT_ROUTE)
-            }}
-          >
-            { t('logout') }
-          </button>
-        </Item>
-        <Divider />
-        <div className="account-menu__accounts-container">
-          <div
-            className="account-menu__accounts"
-            onScroll={this.onScroll}
-          >
-            { this.renderAccounts() }
-          </div>
-          { this.renderScrollButton() }
-        </div>
-        <Divider />
-        <Item
-          onClick={() => {
-            toggleAccountMenu()
-            metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Main Menu',
-                name: 'Clicked Create Account',
-              },
-            })
-            history.push(NEW_ACCOUNT_ROUTE)
-          }}
-          icon={
-            <img
-              className="account-menu__item-icon"
-              src="images/plus-btn-white.svg"
-            />
-          }
-          text={t('createAccount')}
-        />
-        <Item
-          onClick={() => {
-            toggleAccountMenu()
-            metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Main Menu',
-                name: 'Clicked Import Account',
-              },
-            })
-            history.push(IMPORT_ACCOUNT_ROUTE)
-          }}
-          icon={
-            <img
-              className="account-menu__item-icon"
-              src="images/import-account.svg"
-            />
-          }
-          text={t('importAccount')}
-        />
-        <Item
-          onClick={() => {
-            toggleAccountMenu()
-            metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Main Menu',
-                name: 'Clicked Connect Hardware',
-              },
-            })
-            if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-              global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE)
-            } else {
-              history.push(CONNECT_HARDWARE_ROUTE)
-            }
-          }}
-          icon={
-            <img
-              className="account-menu__item-icon"
-              src="images/connect-icon.svg"
-            />
-          }
-          text={t('connectHardwareWallet')}
-        />
-        <Divider />
-        <Item
-          onClick={() => {
-            toggleAccountMenu()
-            history.push(INFO_ROUTE)
-          }}
-          icon={
-            <img src="images/mm-info-icon.svg" />
-          }
-          text={t('infoHelp')}
-        />
-        <Item
-          onClick={() => {
-            toggleAccountMenu()
-            history.push(SETTINGS_ROUTE)
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Main Menu',
-                name: 'Opened Settings',
-              },
-            })
-          }}
-          icon={
-            <img
-              className="account-menu__item-icon"
-              src="images/settings.svg"
-            />
-          }
-          text={t('settings')}
-        />
-      </Menu>
-    )
-  }
-}
diff --git a/ui/app/components/account-menu/account-menu.container.js b/ui/app/components/account-menu/account-menu.container.js
deleted file mode 100644
index 93246ec72..000000000
--- a/ui/app/components/account-menu/account-menu.container.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
-import {
-  toggleAccountMenu,
-  showAccountDetail,
-  hideSidebar,
-  lockMetamask,
-  hideWarning,
-  showConfigPage,
-  showInfoPage,
-  showModal,
-} from '../../actions'
-import { getMetaMaskAccounts } from '../../selectors'
-import AccountMenu from './account-menu.component'
-
-function mapStateToProps (state) {
-  const { metamask: { selectedAddress, isAccountMenuOpen, keyrings, identities } } = state
-
-  return {
-    selectedAddress,
-    isAccountMenuOpen,
-    keyrings,
-    identities,
-    accounts: getMetaMaskAccounts(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    toggleAccountMenu: () => dispatch(toggleAccountMenu()),
-    showAccountDetail: address => {
-      dispatch(showAccountDetail(address))
-      dispatch(hideSidebar())
-      dispatch(toggleAccountMenu())
-    },
-    lockMetamask: () => {
-      dispatch(lockMetamask())
-      dispatch(hideWarning())
-      dispatch(hideSidebar())
-      dispatch(toggleAccountMenu())
-    },
-    showConfigPage: () => {
-      dispatch(showConfigPage())
-      dispatch(hideSidebar())
-      dispatch(toggleAccountMenu())
-    },
-    showInfoPage: () => {
-      dispatch(showInfoPage())
-      dispatch(hideSidebar())
-      dispatch(toggleAccountMenu())
-    },
-    showRemoveAccountConfirmationModal: identity => {
-      return dispatch(showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
-    },
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(AccountMenu)
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
deleted file mode 100644
index a379ed3ac..000000000
--- a/ui/app/components/account-panel.js
+++ /dev/null
@@ -1,86 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-import Identicon from './identicon'
-const formatBalance = require('../util').formatBalance
-const addressSummary = require('../util').addressSummary
-
-module.exports = AccountPanel
-
-
-inherits(AccountPanel, Component)
-function AccountPanel () {
-  Component.call(this)
-}
-
-AccountPanel.prototype.render = function () {
-  var state = this.props
-  var identity = state.identity || {}
-  var account = state.account || {}
-  var isFauceting = state.isFauceting
-
-  var panelState = {
-    key: `accountPanel${identity.address}`,
-    identiconKey: identity.address,
-    identiconLabel: identity.name || '',
-    attributes: [
-      {
-        key: 'ADDRESS',
-        value: addressSummary(identity.address),
-      },
-      balanceOrFaucetingIndication(account, isFauceting),
-    ],
-  }
-
-  return (
-
-    h('.identity-panel.flex-row.flex-space-between', {
-      style: {
-        flex: '1 0 auto',
-        cursor: panelState.onClick ? 'pointer' : undefined,
-      },
-      onClick: panelState.onClick,
-    }, [
-
-      // account identicon
-      h('.identicon-wrapper.flex-column.select-none', [
-        h(Identicon, {
-          address: panelState.identiconKey,
-          imageify: state.imageifyIdenticons,
-        }),
-        h('span.font-small', panelState.identiconLabel.substring(0, 7) + '...'),
-      ]),
-
-      // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
-        panelState.attributes.map((attr) => {
-          return h('.flex-row.flex-space-between', {
-            key: '' + Math.round(Math.random() * 1000000),
-          }, [
-            h('label.font-small.no-select', attr.key),
-            h('span.font-small', attr.value),
-          ])
-        }),
-      ]),
-
-    ])
-
-  )
-}
-
-function balanceOrFaucetingIndication (account, isFauceting) {
-  // Temporarily deactivating isFauceting indication
-  // because it shows fauceting for empty restored accounts.
-  if (/* isFauceting*/ false) {
-    return {
-      key: 'Account is auto-funding.',
-      value: 'Please wait.',
-    }
-  } else {
-    return {
-      key: 'BALANCE',
-      value: formatBalance(account.balance),
-    }
-  }
-}
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
deleted file mode 100644
index 14f8b9f30..000000000
--- a/ui/app/components/app-header/app-header.component.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Identicon from '../identicon'
-import { DEFAULT_ROUTE } from '../../routes'
-const NetworkIndicator = require('../network')
-
-export default class AppHeader extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    network: PropTypes.string,
-    provider: PropTypes.object,
-    networkDropdownOpen: PropTypes.bool,
-    showNetworkDropdown: PropTypes.func,
-    hideNetworkDropdown: PropTypes.func,
-    toggleAccountMenu: PropTypes.func,
-    selectedAddress: PropTypes.string,
-    isUnlocked: PropTypes.bool,
-    hideNetworkIndicator: PropTypes.bool,
-    disabled: PropTypes.bool,
-    isAccountMenuOpen: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  handleNetworkIndicatorClick (event) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props
-
-    if (networkDropdownOpen === false) {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Navigation',
-          action: 'Home',
-          name: 'Opened Network Menu',
-        },
-      })
-      showNetworkDropdown()
-    } else {
-      hideNetworkDropdown()
-    }
-  }
-
-  renderAccountMenu () {
-    const { isUnlocked, toggleAccountMenu, selectedAddress, disabled, isAccountMenuOpen } = this.props
-
-    return isUnlocked && (
-      <div
-        className={classnames('account-menu__icon', {
-          'account-menu__icon--disabled': disabled,
-        })}
-        onClick={() => {
-          if (!disabled) {
-            !isAccountMenuOpen && this.context.metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Home',
-                name: 'Opened Main Menu',
-              },
-            })
-            toggleAccountMenu()
-          }
-        }}
-      >
-        <Identicon
-          address={selectedAddress}
-          diameter={32}
-        />
-      </div>
-    )
-  }
-
-  render () {
-    const {
-      history,
-      network,
-      provider,
-      isUnlocked,
-      hideNetworkIndicator,
-      disabled,
-    } = this.props
-
-    return (
-      <div
-        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
-        <div className="app-header__contents">
-          <div
-            className="app-header__logo-container"
-            onClick={() => history.push(DEFAULT_ROUTE)}
-          >
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
-            />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
-            />
-          </div>
-          <div className="app-header__account-menu-container">
-            {
-              !hideNetworkIndicator && (
-                <div className="app-header__network-component-wrapper">
-                  <NetworkIndicator
-                    network={network}
-                    provider={provider}
-                    onClick={event => this.handleNetworkIndicatorClick(event)}
-                    disabled={disabled}
-                  />
-                </div>
-              )
-            }
-            { this.renderAccountMenu() }
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/app-header/app-header.container.js b/ui/app/components/app-header/app-header.container.js
deleted file mode 100644
index 1abc2afeb..000000000
--- a/ui/app/components/app-header/app-header.container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-
-import AppHeader from './app-header.component'
-const actions = require('../../actions')
-
-const mapStateToProps = state => {
-  const { appState, metamask } = state
-  const { networkDropdownOpen } = appState
-  const {
-    network,
-    provider,
-    selectedAddress,
-    isUnlocked,
-    isAccountMenuOpen,
-  } = metamask
-
-  return {
-    networkDropdownOpen,
-    network,
-    provider,
-    selectedAddress,
-    isUnlocked,
-    isAccountMenuOpen,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
-    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
-    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(AppHeader)
diff --git a/ui/app/components/app/account-dropdowns.js b/ui/app/components/app/account-dropdowns.js
new file mode 100644
index 000000000..e02d17e54
--- /dev/null
+++ b/ui/app/components/app/account-dropdowns.js
@@ -0,0 +1,338 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const actions = require('../../store/actions')
+const genAccountLink = require('etherscan-link').createAccountLink
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+const copyToClipboard = require('copy-to-clipboard')
+const { checksumAddress } = require('../../helpers/utils/util')
+
+import Identicon from '../ui/identicon'
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    this.accountSelectorToggleClassName = 'accounts-selector'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, selected, keyrings } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: {
+            marginTop: index === 0 ? '5px' : '',
+            fontSize: '24px',
+          },
+        },
+        [
+          h(
+            Identicon,
+            {
+              address: identity.address,
+              diameter: 32,
+              style: {
+                marginLeft: '10px',
+              },
+            },
+          ),
+          this.indicateIfLoose(keyring),
+          h('span', {
+            style: {
+              marginLeft: '20px',
+              fontSize: '24px',
+              maxWidth: '145px',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            },
+          }, identity.name || ''),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+        ]
+      )
+    })
+  }
+
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
+    } catch (e) { return }
+  }
+
+  renderAccountSelector () {
+    const { actions } = this.props
+    const { accountSelectorActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
+        style: {
+          marginLeft: '-238px',
+          marginTop: '38px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle: {
+          padding: '8px 25px',
+        },
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.addNewAccount(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showImportPage(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                fontSize: '24px',
+                marginBottom: '5px',
+              },
+            }, this.context.t('importAccount')),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions } = this.props
+    const { optionsMenuActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        style: {
+          marginLeft: '-215px',
+          minWidth: '180px',
+        },
+        isOpen: optionsMenuActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+          },
+          this.context.t('etherscanView'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, identities } = this.props
+              var identity = identities[selected]
+              actions.showQrView(selected, identity ? identity.name : '')
+            },
+          },
+          this.context.t('showQRCode'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              copyToClipboard(checksumAddress(selected))
+            },
+          },
+          this.context.t('copyAddress'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.requestAccountExport()
+            },
+          },
+          this.context.t('exportPrivateKey'),
+        ),
+      ]
+    )
+  }
+
+  render () {
+    const { metricsEvent } = this.context
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          // 'i.fa.fa-angle-down',
+          'div.cursor-pointer.color-orange.accounts-selector',
+          {
+            style: {
+              // fontSize: '1.8em',
+              background: 'url(images/switch_acc.svg) white center center no-repeat',
+              height: '25px',
+              width: '25px',
+              transform: 'scale(0.75)',
+              marginRight: '3px',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              marginRight: '0.5em',
+              fontSize: '1.8em',
+            },
+            onClick: (event) => {
+              metricsEvent({
+                eventOpts: {
+                  category: 'Accounts',
+                  action: 'userClick',
+                  name: 'accountsOpenedMenu',
+                },
+                pageOpts: {
+                  section: 'header',
+                  component: 'accountDropdownIcon',
+                },
+              })
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
+  actions: PropTypes.objectOf(PropTypes.func),
+  network: PropTypes.string,
+  style: PropTypes.object,
+  enableAccountOptions: PropTypes.bool,
+  enableAccountsSelector: PropTypes.bool,
+    t: PropTypes.func,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      requestAccountExport: () => dispatch(actions.requestExportAccount()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = {
+  AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
+}
diff --git a/ui/app/components/app/account-menu/account-menu.component.js b/ui/app/components/app/account-menu/account-menu.component.js
new file mode 100644
index 000000000..972ea492e
--- /dev/null
+++ b/ui/app/components/app/account-menu/account-menu.component.js
@@ -0,0 +1,340 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import debounce from 'lodash.debounce'
+import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import Tooltip from '../../ui/tooltip'
+import Identicon from '../../ui/identicon'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import { PRIMARY } from '../../../helpers/constants/common'
+import {
+  SETTINGS_ROUTE,
+  INFO_ROUTE,
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  CONNECT_HARDWARE_ROUTE,
+  DEFAULT_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class AccountMenu extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object,
+    history: PropTypes.object,
+    identities: PropTypes.object,
+    isAccountMenuOpen: PropTypes.bool,
+    prevIsAccountMenuOpen: PropTypes.bool,
+    keyrings: PropTypes.array,
+    lockMetamask: PropTypes.func,
+    selectedAddress: PropTypes.string,
+    showAccountDetail: PropTypes.func,
+    showRemoveAccountConfirmationModal: PropTypes.func,
+    toggleAccountMenu: PropTypes.func,
+  }
+
+  state = {
+    atAccountListBottom: false,
+  }
+
+  componentDidUpdate (prevProps) {
+    const { prevIsAccountMenuOpen } = prevProps
+    const { isAccountMenuOpen } = this.props
+
+    if (!prevIsAccountMenuOpen && isAccountMenuOpen) {
+      this.setAtAccountListBottom()
+    }
+  }
+
+  renderAccounts () {
+    const {
+      identities,
+      accounts,
+      selectedAddress,
+      keyrings,
+      showAccountDetail,
+    } = this.props
+
+    const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), [])
+
+    return accountOrder.filter(address => !!identities[address]).map(address => {
+      const identity = identities[address]
+      const isSelected = identity.address === selectedAddress
+
+      const balanceValue = accounts[address] ? accounts[address].balance : ''
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find(kr => {
+        return kr.accounts.includes(simpleAddress) || kr.accounts.includes(identity.address)
+      })
+
+      return (
+        <div
+          className="account-menu__account menu__item--clickable"
+          onClick={() => {
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Main Menu',
+                name: 'Switched Account',
+              },
+            })
+            showAccountDetail(identity.address)
+          }}
+          key={identity.address}
+        >
+          <div className="account-menu__check-mark">
+            { isSelected && <div className="account-menu__check-mark-icon" /> }
+          </div>
+          <Identicon
+            address={identity.address}
+            diameter={24}
+          />
+          <div className="account-menu__account-info">
+            <div className="account-menu__name">
+              { identity.name || '' }
+            </div>
+            <UserPreferencedCurrencyDisplay
+              className="account-menu__balance"
+              value={balanceValue}
+              type={PRIMARY}
+            />
+          </div>
+          { this.renderKeyringType(keyring) }
+          { this.renderRemoveAccount(keyring, identity) }
+        </div>
+      )
+    })
+  }
+
+  renderRemoveAccount (keyring, identity) {
+    const { t } = this.context
+    // Any account that's not from the HD wallet Keyring can be removed
+    const { type } = keyring
+    const isRemovable = type !== 'HD Key Tree'
+
+    return isRemovable && (
+      <Tooltip
+        title={t('removeAccount')}
+        position="bottom"
+      >
+        <a
+          className="remove-account-icon"
+          onClick={e => this.removeAccount(e, identity)}
+        />
+      </Tooltip>
+    )
+  }
+
+  removeAccount (e, identity) {
+    e.preventDefault()
+    e.stopPropagation()
+    const { showRemoveAccountConfirmationModal } = this.props
+    showRemoveAccountConfirmationModal(identity)
+  }
+
+  renderKeyringType (keyring) {
+    const { t } = this.context
+
+    // Sometimes keyrings aren't loaded yet
+    if (!keyring) {
+      return null
+    }
+
+    const { type } = keyring
+    let label
+
+    switch (type) {
+      case 'Trezor Hardware':
+      case 'Ledger Hardware':
+        label = t('hardware')
+        break
+      case 'Simple Key Pair':
+        label = t('imported')
+        break
+    }
+
+    return label && (
+      <div className="keyring-label allcaps">
+        { label }
+      </div>
+    )
+  }
+
+  setAtAccountListBottom = () => {
+    const target = document.querySelector('.account-menu__accounts')
+    const { scrollTop, offsetHeight, scrollHeight } = target
+    const atAccountListBottom = scrollTop + offsetHeight >= scrollHeight
+    this.setState({ atAccountListBottom })
+  }
+
+  onScroll = debounce(this.setAtAccountListBottom, 25)
+
+  handleScrollDown = e => {
+    e.stopPropagation()
+    const target = document.querySelector('.account-menu__accounts')
+    const { scrollHeight } = target
+    target.scroll({ left: 0, top: scrollHeight, behavior: 'smooth' })
+    this.setAtAccountListBottom()
+  }
+
+  renderScrollButton () {
+    const { accounts } = this.props
+    const { atAccountListBottom } = this.state
+
+    return !atAccountListBottom && Object.keys(accounts).length > 3 && (
+      <div
+        className="account-menu__scroll-button"
+        onClick={this.handleScrollDown}
+      >
+        <img
+          src="./images/icons/down-arrow.svg"
+          width={28}
+          height={28}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const {
+      isAccountMenuOpen,
+      toggleAccountMenu,
+      lockMetamask,
+      history,
+    } = this.props
+    const { metricsEvent } = this.context
+
+    return (
+      <Menu
+        className="account-menu"
+        isShowing={isAccountMenuOpen}
+      >
+        <CloseArea onClick={toggleAccountMenu} />
+        <Item className="account-menu__header">
+          { t('myAccounts') }
+          <button
+            className="account-menu__logout-button"
+            onClick={() => {
+              lockMetamask()
+              history.push(DEFAULT_ROUTE)
+            }}
+          >
+            { t('logout') }
+          </button>
+        </Item>
+        <Divider />
+        <div className="account-menu__accounts-container">
+          <div
+            className="account-menu__accounts"
+            onScroll={this.onScroll}
+          >
+            { this.renderAccounts() }
+          </div>
+          { this.renderScrollButton() }
+        </div>
+        <Divider />
+        <Item
+          onClick={() => {
+            toggleAccountMenu()
+            metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Main Menu',
+                name: 'Clicked Create Account',
+              },
+            })
+            history.push(NEW_ACCOUNT_ROUTE)
+          }}
+          icon={
+            <img
+              className="account-menu__item-icon"
+              src="images/plus-btn-white.svg"
+            />
+          }
+          text={t('createAccount')}
+        />
+        <Item
+          onClick={() => {
+            toggleAccountMenu()
+            metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Main Menu',
+                name: 'Clicked Import Account',
+              },
+            })
+            history.push(IMPORT_ACCOUNT_ROUTE)
+          }}
+          icon={
+            <img
+              className="account-menu__item-icon"
+              src="images/import-account.svg"
+            />
+          }
+          text={t('importAccount')}
+        />
+        <Item
+          onClick={() => {
+            toggleAccountMenu()
+            metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Main Menu',
+                name: 'Clicked Connect Hardware',
+              },
+            })
+            if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+              global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE)
+            } else {
+              history.push(CONNECT_HARDWARE_ROUTE)
+            }
+          }}
+          icon={
+            <img
+              className="account-menu__item-icon"
+              src="images/connect-icon.svg"
+            />
+          }
+          text={t('connectHardwareWallet')}
+        />
+        <Divider />
+        <Item
+          onClick={() => {
+            toggleAccountMenu()
+            history.push(INFO_ROUTE)
+          }}
+          icon={
+            <img src="images/mm-info-icon.svg" />
+          }
+          text={t('infoHelp')}
+        />
+        <Item
+          onClick={() => {
+            toggleAccountMenu()
+            history.push(SETTINGS_ROUTE)
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Main Menu',
+                name: 'Opened Settings',
+              },
+            })
+          }}
+          icon={
+            <img
+              className="account-menu__item-icon"
+              src="images/settings.svg"
+            />
+          }
+          text={t('settings')}
+        />
+      </Menu>
+    )
+  }
+}
diff --git a/ui/app/components/app/account-menu/account-menu.container.js b/ui/app/components/app/account-menu/account-menu.container.js
new file mode 100644
index 000000000..ae2e28e76
--- /dev/null
+++ b/ui/app/components/app/account-menu/account-menu.container.js
@@ -0,0 +1,62 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import {
+  toggleAccountMenu,
+  showAccountDetail,
+  hideSidebar,
+  lockMetamask,
+  hideWarning,
+  showConfigPage,
+  showInfoPage,
+  showModal,
+} from '../../../store/actions'
+import { getMetaMaskAccounts } from '../../../selectors/selectors'
+import AccountMenu from './account-menu.component'
+
+function mapStateToProps (state) {
+  const { metamask: { selectedAddress, isAccountMenuOpen, keyrings, identities } } = state
+
+  return {
+    selectedAddress,
+    isAccountMenuOpen,
+    keyrings,
+    identities,
+    accounts: getMetaMaskAccounts(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toggleAccountMenu: () => dispatch(toggleAccountMenu()),
+    showAccountDetail: address => {
+      dispatch(showAccountDetail(address))
+      dispatch(hideSidebar())
+      dispatch(toggleAccountMenu())
+    },
+    lockMetamask: () => {
+      dispatch(lockMetamask())
+      dispatch(hideWarning())
+      dispatch(hideSidebar())
+      dispatch(toggleAccountMenu())
+    },
+    showConfigPage: () => {
+      dispatch(showConfigPage())
+      dispatch(hideSidebar())
+      dispatch(toggleAccountMenu())
+    },
+    showInfoPage: () => {
+      dispatch(showInfoPage())
+      dispatch(hideSidebar())
+      dispatch(toggleAccountMenu())
+    },
+    showRemoveAccountConfirmationModal: identity => {
+      return dispatch(showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AccountMenu)
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/app/account-menu/index.js
index b2b4e4c6f..b2b4e4c6f 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/app/account-menu/index.js
diff --git a/ui/app/components/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss
index 9a61bf887..9a61bf887 100644
--- a/ui/app/components/account-menu/index.scss
+++ b/ui/app/components/app/account-menu/index.scss
diff --git a/ui/app/components/app/account-panel.js b/ui/app/components/app/account-panel.js
new file mode 100644
index 000000000..79882f34a
--- /dev/null
+++ b/ui/app/components/app/account-panel.js
@@ -0,0 +1,86 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+import Identicon from '../ui/identicon'
+const formatBalance = require('../../helpers/utils/util').formatBalance
+const addressSummary = require('../../helpers/utils/util').addressSummary
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel () {
+  Component.call(this)
+}
+
+AccountPanel.prototype.render = function () {
+  var state = this.props
+  var identity = state.identity || {}
+  var account = state.account || {}
+  var isFauceting = state.isFauceting
+
+  var panelState = {
+    key: `accountPanel${identity.address}`,
+    identiconKey: identity.address,
+    identiconLabel: identity.name || '',
+    attributes: [
+      {
+        key: 'ADDRESS',
+        value: addressSummary(identity.address),
+      },
+      balanceOrFaucetingIndication(account, isFauceting),
+    ],
+  }
+
+  return (
+
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+        cursor: panelState.onClick ? 'pointer' : undefined,
+      },
+      onClick: panelState.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h(Identicon, {
+          address: panelState.identiconKey,
+          imageify: state.imageifyIdenticons,
+        }),
+        h('span.font-small', panelState.identiconLabel.substring(0, 7) + '...'),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        panelState.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small.no-select', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+    ])
+
+  )
+}
+
+function balanceOrFaucetingIndication (account, isFauceting) {
+  // Temporarily deactivating isFauceting indication
+  // because it shows fauceting for empty restored accounts.
+  if (/* isFauceting*/ false) {
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
+  } else {
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance),
+    }
+  }
+}
diff --git a/ui/app/components/add-token-button/add-token-button.component.js b/ui/app/components/app/add-token-button/add-token-button.component.js
index 10887aed8..10887aed8 100644
--- a/ui/app/components/add-token-button/add-token-button.component.js
+++ b/ui/app/components/app/add-token-button/add-token-button.component.js
diff --git a/ui/app/components/add-token-button/index.js b/ui/app/components/app/add-token-button/index.js
index 15c4fe6ca..15c4fe6ca 100644
--- a/ui/app/components/add-token-button/index.js
+++ b/ui/app/components/app/add-token-button/index.js
diff --git a/ui/app/components/add-token-button/index.scss b/ui/app/components/app/add-token-button/index.scss
index 39f404716..39f404716 100644
--- a/ui/app/components/add-token-button/index.scss
+++ b/ui/app/components/app/add-token-button/index.scss
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
new file mode 100644
index 000000000..343e0daab
--- /dev/null
+++ b/ui/app/components/app/app-header/app-header.component.js
@@ -0,0 +1,127 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../ui/identicon'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+const NetworkIndicator = require('../network')
+
+export default class AppHeader extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    network: PropTypes.string,
+    provider: PropTypes.object,
+    networkDropdownOpen: PropTypes.bool,
+    showNetworkDropdown: PropTypes.func,
+    hideNetworkDropdown: PropTypes.func,
+    toggleAccountMenu: PropTypes.func,
+    selectedAddress: PropTypes.string,
+    isUnlocked: PropTypes.bool,
+    hideNetworkIndicator: PropTypes.bool,
+    disabled: PropTypes.bool,
+    isAccountMenuOpen: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  handleNetworkIndicatorClick (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props
+
+    if (networkDropdownOpen === false) {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Navigation',
+          action: 'Home',
+          name: 'Opened Network Menu',
+        },
+      })
+      showNetworkDropdown()
+    } else {
+      hideNetworkDropdown()
+    }
+  }
+
+  renderAccountMenu () {
+    const { isUnlocked, toggleAccountMenu, selectedAddress, disabled, isAccountMenuOpen } = this.props
+
+    return isUnlocked && (
+      <div
+        className={classnames('account-menu__icon', {
+          'account-menu__icon--disabled': disabled,
+        })}
+        onClick={() => {
+          if (!disabled) {
+            !isAccountMenuOpen && this.context.metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Home',
+                name: 'Opened Main Menu',
+              },
+            })
+            toggleAccountMenu()
+          }
+        }}
+      >
+        <Identicon
+          address={selectedAddress}
+          diameter={32}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      history,
+      network,
+      provider,
+      isUnlocked,
+      hideNetworkIndicator,
+      disabled,
+    } = this.props
+
+    return (
+      <div
+        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
+        <div className="app-header__contents">
+          <div
+            className="app-header__logo-container"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          >
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+              src="/images/logo/metamask-logo-horizontal.svg"
+              height={30}
+            />
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--icon"
+              src="/images/logo/metamask-fox.svg"
+              height={42}
+              width={42}
+            />
+          </div>
+          <div className="app-header__account-menu-container">
+            {
+              !hideNetworkIndicator && (
+                <div className="app-header__network-component-wrapper">
+                  <NetworkIndicator
+                    network={network}
+                    provider={provider}
+                    onClick={event => this.handleNetworkIndicatorClick(event)}
+                    disabled={disabled}
+                  />
+                </div>
+              )
+            }
+            { this.renderAccountMenu() }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/app-header/app-header.container.js b/ui/app/components/app/app-header/app-header.container.js
new file mode 100644
index 000000000..b67338245
--- /dev/null
+++ b/ui/app/components/app/app-header/app-header.container.js
@@ -0,0 +1,40 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+
+import AppHeader from './app-header.component'
+const actions = require('../../../store/actions')
+
+const mapStateToProps = state => {
+  const { appState, metamask } = state
+  const { networkDropdownOpen } = appState
+  const {
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+    isAccountMenuOpen,
+  } = metamask
+
+  return {
+    networkDropdownOpen,
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+    isAccountMenuOpen,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AppHeader)
diff --git a/ui/app/components/app-header/index.js b/ui/app/components/app/app-header/index.js
index 6de2f9c78..6de2f9c78 100644
--- a/ui/app/components/app-header/index.js
+++ b/ui/app/components/app/app-header/index.js
diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index 325844af5..325844af5 100644
--- a/ui/app/components/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/app/bn-as-decimal-input.js
index 9a033f893..9a033f893 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/app/bn-as-decimal-input.js
diff --git a/ui/app/components/app/coinbase-form.js b/ui/app/components/app/coinbase-form.js
new file mode 100644
index 000000000..24d287604
--- /dev/null
+++ b/ui/app/components/app/coinbase-form.js
@@ -0,0 +1,69 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../store/actions')
+
+CoinbaseForm.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps)(CoinbaseForm)
+
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+inherits(CoinbaseForm, Component)
+
+function CoinbaseForm () {
+  Component.call(this)
+}
+
+CoinbaseForm.prototype.render = function () {
+  var props = this.props
+
+  return h('.flex-column', {
+    style: {
+      marginTop: '35px',
+      padding: '25px',
+      width: '100%',
+    },
+  }, [
+    h('.flex-row', {
+      style: {
+        justifyContent: 'space-around',
+        margin: '33px',
+        marginTop: '0px',
+      },
+    }, [
+      h('button.btn-green', {
+        onClick: this.toCoinbase.bind(this),
+      }, this.context.t('continueToCoinbase')),
+
+      h('button.btn-red', {
+        onClick: () => props.dispatch(actions.goHome()),
+      }, this.context.t('cancel')),
+    ]),
+  ])
+}
+
+CoinbaseForm.prototype.toCoinbase = function () {
+  const props = this.props
+  const address = props.buyView.buyAddress
+  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+}
+
+CoinbaseForm.prototype.renderLoading = function () {
+  return h('img', {
+    style: {
+      width: '27px',
+      marginRight: '-27px',
+    },
+    src: 'images/loading.svg',
+  })
+}
diff --git a/ui/app/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/app/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
new file mode 100644
index 000000000..18571eccb
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common'
+
+const ConfirmDetailRow = props => {
+  const {
+    label,
+    primaryText,
+    secondaryText,
+    onHeaderClick,
+    primaryValueTextColor,
+    headerText,
+    headerTextClassName,
+    value,
+  } = props
+
+  return (
+    <div className="confirm-detail-row">
+      <div className="confirm-detail-row__label">
+        { label }
+      </div>
+      <div className="confirm-detail-row__details">
+        <div
+          className={classnames('confirm-detail-row__header-text', headerTextClassName)}
+          onClick={() => onHeaderClick && onHeaderClick()}
+        >
+          { headerText }
+        </div>
+        {
+          primaryText
+            ? (
+              <div
+                className="confirm-detail-row__primary"
+                style={{ color: primaryValueTextColor }}
+              >
+                { primaryText }
+              </div>
+            ) : (
+              <UserPreferencedCurrencyDisplay
+                className="confirm-detail-row__primary"
+                type={PRIMARY}
+                value={value}
+                showEthLogo
+                ethLogoHeight="18"
+                style={{ color: primaryValueTextColor }}
+                hideLabel
+              />
+            )
+        }
+        {
+          secondaryText
+            ? (
+              <div className="confirm-detail-row__secondary">
+                { secondaryText }
+              </div>
+            ) : (
+              <UserPreferencedCurrencyDisplay
+                className="confirm-detail-row__secondary"
+                type={SECONDARY}
+                value={value}
+                showEthLogo
+                hideLabel
+              />
+            )
+        }
+      </div>
+    </div>
+  )
+}
+
+ConfirmDetailRow.propTypes = {
+  headerText: PropTypes.string,
+  headerTextClassName: PropTypes.string,
+  label: PropTypes.string,
+  onHeaderClick: PropTypes.func,
+  primaryValueTextColor: PropTypes.string,
+  primaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  secondaryText: PropTypes.string,
+  value: PropTypes.string,
+}
+
+export default ConfirmDetailRow
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.js b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.js
index 056afff04..056afff04 100644
--- a/ui/app/components/confirm-page-container/confirm-detail-row/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.js
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss
index 1672ef8c6..1672ef8c6 100644
--- a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
index c8507985d..c8507985d 100644
--- a/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
new file mode 100644
index 000000000..8a5f90c76
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -0,0 +1,110 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { Tabs, Tab } from '../../../ui/tabs'
+import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.'
+import ErrorMessage from '../../../ui/error-message'
+
+export default class ConfirmPageContainerContent extends Component {
+  static propTypes = {
+    action: PropTypes.string,
+    dataComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    errorKey: PropTypes.string,
+    errorMessage: PropTypes.string,
+    hideSubtitle: PropTypes.bool,
+    identiconAddress: PropTypes.string,
+    nonce: PropTypes.string,
+    assetImage: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    subtitleComponent: PropTypes.node,
+    summaryComponent: PropTypes.node,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    titleComponent: PropTypes.node,
+    warning: PropTypes.string,
+  }
+
+  renderContent () {
+    const { detailsComponent, dataComponent } = this.props
+
+    if (detailsComponent && dataComponent) {
+      return this.renderTabs()
+    } else {
+      return detailsComponent || dataComponent
+    }
+  }
+
+  renderTabs () {
+    const { detailsComponent, dataComponent } = this.props
+
+    return (
+      <Tabs>
+        <Tab name="Details">
+          { detailsComponent }
+        </Tab>
+        <Tab name="Data">
+          { dataComponent }
+        </Tab>
+      </Tabs>
+    )
+  }
+
+  render () {
+    const {
+      action,
+      errorKey,
+      errorMessage,
+      title,
+      titleComponent,
+      subtitle,
+      subtitleComponent,
+      hideSubtitle,
+      identiconAddress,
+      nonce,
+      assetImage,
+      summaryComponent,
+      detailsComponent,
+      dataComponent,
+      warning,
+    } = this.props
+
+    return (
+      <div className="confirm-page-container-content">
+        {
+          warning && (
+            <ConfirmPageContainerWarning warning={warning} />
+          )
+        }
+        {
+          summaryComponent || (
+            <ConfirmPageContainerSummary
+              className={classnames({
+                'confirm-page-container-summary--border': !detailsComponent || !dataComponent,
+              })}
+              action={action}
+              title={title}
+              titleComponent={titleComponent}
+              subtitle={subtitle}
+              subtitleComponent={subtitleComponent}
+              hideSubtitle={hideSubtitle}
+              identiconAddress={identiconAddress}
+              nonce={nonce}
+              assetImage={assetImage}
+            />
+          )
+        }
+        { this.renderContent() }
+        {
+          (errorKey || errorMessage) && (
+            <div className="confirm-page-container-content__error-container">
+              <ErrorMessage
+                errorMessage={errorMessage}
+                errorKey={errorKey}
+              />
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
new file mode 100644
index 000000000..0cc4d8262
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../../../ui/identicon'
+
+const ConfirmPageContainerSummary = props => {
+  const {
+    action,
+    title,
+    titleComponent,
+    subtitle,
+    subtitleComponent,
+    hideSubtitle,
+    className,
+    identiconAddress,
+    nonce,
+    assetImage,
+  } = props
+
+  return (
+    <div className={classnames('confirm-page-container-summary', className)}>
+      <div className="confirm-page-container-summary__action-row">
+        <div className="confirm-page-container-summary__action">
+          { action }
+        </div>
+        {
+          nonce && (
+            <div className="confirm-page-container-summary__nonce">
+              { `#${nonce}` }
+            </div>
+          )
+        }
+      </div>
+      <div className="confirm-page-container-summary__title">
+        {
+          identiconAddress && (
+            <Identicon
+              className="confirm-page-container-summary__identicon"
+              diameter={36}
+              address={identiconAddress}
+              image={assetImage}
+            />
+          )
+        }
+        <div className="confirm-page-container-summary__title-text">
+          { titleComponent || title }
+        </div>
+      </div>
+      {
+        hideSubtitle || <div className="confirm-page-container-summary__subtitle">
+          { subtitleComponent || subtitle }
+        </div>
+      }
+    </div>
+  )
+}
+
+ConfirmPageContainerSummary.propTypes = {
+  action: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  titleComponent: PropTypes.node,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  subtitleComponent: PropTypes.node,
+  hideSubtitle: PropTypes.bool,
+  className: PropTypes.string,
+  identiconAddress: PropTypes.string,
+  nonce: PropTypes.string,
+  assetImage: PropTypes.string,
+}
+
+export default ConfirmPageContainerSummary
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js
index ed1b28cf2..ed1b28cf2 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
index 7f0f5d37a..7f0f5d37a 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
index 79901c8fc..79901c8fc 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js
index 6e48bd144..6e48bd144 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
index 50545a1a2..50545a1a2 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.js
index 4dfd89d92..4dfd89d92 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.js
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
new file mode 100644
index 000000000..602a46848
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
@@ -0,0 +1,68 @@
+@import 'confirm-page-container-warning/index';
+
+@import 'confirm-page-container-summary/index';
+
+.confirm-page-container-content {
+  overflow-y: auto;
+  flex: 1;
+
+  &__error-container {
+    padding: 0 16px 16px 16px;
+  }
+
+  &__details {
+    box-sizing: border-box;
+    padding: 0 24px;
+  }
+
+  &__data {
+   padding: 16px;
+   color: $oslo-gray;
+  }
+
+  &__data-box {
+    background-color: #f9fafa;
+    padding: 12px;
+    font-size: .75rem;
+    margin-bottom: 16px;
+    word-wrap: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+
+    &-label {
+      text-transform: uppercase;
+      padding: 8px 0 12px;
+      font-size: 12px;
+    }
+  }
+
+  &__data-field {
+    display: flex;
+    flex-direction: row;
+
+    &-label {
+      font-weight: 500;
+      padding-right: 16px;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
+  }
+
+  &__gas-fee {
+    border-bottom: 1px solid $geyser;
+
+    .advanced-gas-inputs__gas-edit-rows {
+      margin-bottom: 16px;
+    }
+  }
+
+  &__function-type {
+    font-size: .875rem;
+    font-weight: 500;
+    text-transform: capitalize;
+    color: $black;
+    padding-left: 5px;
+  }
+}
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
new file mode 100644
index 000000000..84ca40da5
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_NOTIFICATION,
+} from '../../../../../../app/scripts/lib/enums'
+import NetworkDisplay from '../../network-display'
+
+export default class ConfirmPageContainer extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    showEdit: PropTypes.bool,
+    onEdit: PropTypes.func,
+    children: PropTypes.node,
+  }
+
+  renderTop () {
+    const { onEdit, showEdit } = this.props
+    const windowType = window.METAMASK_UI_TYPE
+    const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+      windowType !== ENVIRONMENT_TYPE_POPUP
+
+    if (!showEdit && isFullScreen) {
+      return null
+    }
+
+    return (
+      <div className="confirm-page-container-header__row">
+        <div
+          className="confirm-page-container-header__back-button-container"
+          style={{
+            visibility: showEdit ? 'initial' : 'hidden',
+          }}
+        >
+          <img
+            src="/images/caret-left.svg"
+          />
+          <span
+            className="confirm-page-container-header__back-button"
+            onClick={() => onEdit()}
+          >
+            { this.context.t('edit') }
+          </span>
+        </div>
+        { !isFullScreen && <NetworkDisplay /> }
+      </div>
+    )
+  }
+
+  render () {
+    const { children } = this.props
+
+    return (
+      <div className="confirm-page-container-header">
+        { this.renderTop() }
+        { children }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.js b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.js
index 71feb6931..71feb6931 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-header/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss
index be77edbdf..be77edbdf 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index 8327f997b..8327f997b 100755
--- a/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.js
index d97c1b447..d97c1b447 100755
--- a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.js
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
index 0cf184c60..0cf184c60 100755
--- a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
new file mode 100644
index 000000000..326e4f83e
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SenderToRecipient from '../../ui/sender-to-recipient'
+import { PageContainerFooter } from '../../ui/page-container'
+import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation } from '.'
+
+export default class ConfirmPageContainer extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    // Header
+    action: PropTypes.string,
+    hideSubtitle: PropTypes.bool,
+    onEdit: PropTypes.func,
+    showEdit: PropTypes.bool,
+    subtitle: PropTypes.string,
+    subtitleComponent: PropTypes.node,
+    title: PropTypes.string,
+    titleComponent: PropTypes.node,
+    // Sender to Recipient
+    fromAddress: PropTypes.string,
+    fromName: PropTypes.string,
+    toAddress: PropTypes.string,
+    toName: PropTypes.string,
+    // Content
+    contentComponent: PropTypes.node,
+    errorKey: PropTypes.string,
+    errorMessage: PropTypes.string,
+    fiatTransactionAmount: PropTypes.string,
+    fiatTransactionFee: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    ethTransactionAmount: PropTypes.string,
+    ethTransactionFee: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    onEditGas: PropTypes.func,
+    dataComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    identiconAddress: PropTypes.string,
+    nonce: PropTypes.string,
+    assetImage: PropTypes.string,
+    summaryComponent: PropTypes.node,
+    warning: PropTypes.string,
+    unapprovedTxCount: PropTypes.number,
+    // Navigation
+    totalTx: PropTypes.number,
+    positionOfCurrentTx: PropTypes.number,
+    nextTxId: PropTypes.string,
+    prevTxId: PropTypes.string,
+    showNavigation: PropTypes.bool,
+    onNextTx: PropTypes.func,
+    firstTx: PropTypes.string,
+    lastTx: PropTypes.string,
+    ofText: PropTypes.string,
+    requestsWaitingText: PropTypes.string,
+    // Footer
+    onCancelAll: PropTypes.func,
+    onCancel: PropTypes.func,
+    onSubmit: PropTypes.func,
+    disabled: PropTypes.bool,
+  }
+
+  render () {
+    const {
+      showEdit,
+      onEdit,
+      fromName,
+      fromAddress,
+      toName,
+      toAddress,
+      disabled,
+      errorKey,
+      errorMessage,
+      contentComponent,
+      action,
+      title,
+      titleComponent,
+      subtitle,
+      subtitleComponent,
+      hideSubtitle,
+      summaryComponent,
+      detailsComponent,
+      dataComponent,
+      onCancelAll,
+      onCancel,
+      onSubmit,
+      identiconAddress,
+      nonce,
+      unapprovedTxCount,
+      assetImage,
+      warning,
+      totalTx,
+      positionOfCurrentTx,
+      nextTxId,
+      prevTxId,
+      showNavigation,
+      onNextTx,
+      firstTx,
+      lastTx,
+      ofText,
+      requestsWaitingText,
+    } = this.props
+    const renderAssetImage = contentComponent || (!contentComponent && !identiconAddress)
+
+    return (
+      <div className="page-container">
+        <ConfirmPageContainerNavigation
+            totalTx={totalTx}
+            positionOfCurrentTx={positionOfCurrentTx}
+            nextTxId={nextTxId}
+            prevTxId={prevTxId}
+            showNavigation={showNavigation}
+            onNextTx={(txId) => onNextTx(txId)}
+            firstTx={firstTx}
+            lastTx={lastTx}
+            ofText={ofText}
+            requestsWaitingText={requestsWaitingText}
+        />
+        <ConfirmPageContainerHeader
+          showEdit={showEdit}
+          onEdit={() => onEdit()}
+        >
+          <SenderToRecipient
+            senderName={fromName}
+            senderAddress={fromAddress}
+            recipientName={toName}
+            recipientAddress={toAddress}
+            assetImage={renderAssetImage ? assetImage : undefined}
+          />
+        </ConfirmPageContainerHeader>
+        {
+          contentComponent || (
+            <ConfirmPageContainerContent
+              action={action}
+              title={title}
+              titleComponent={titleComponent}
+              subtitle={subtitle}
+              subtitleComponent={subtitleComponent}
+              hideSubtitle={hideSubtitle}
+              summaryComponent={summaryComponent}
+              detailsComponent={detailsComponent}
+              dataComponent={dataComponent}
+              errorMessage={errorMessage}
+              errorKey={errorKey}
+              identiconAddress={identiconAddress}
+              nonce={nonce}
+              assetImage={assetImage}
+              warning={warning}
+            />
+          )
+        }
+        <PageContainerFooter
+          onCancel={() => onCancel()}
+          cancelText={this.context.t('reject')}
+          onSubmit={() => onSubmit()}
+          submitText={this.context.t('confirm')}
+          submitButtonType="confirm"
+          disabled={disabled}
+        >
+          {unapprovedTxCount > 1 && (
+            <a onClick={() => onCancelAll()}>
+              {this.context.t('rejectTxsN', [unapprovedTxCount])}
+            </a>
+          )}
+        </PageContainerFooter>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/confirm-page-container/index.js b/ui/app/components/app/confirm-page-container/index.js
index 28b17614e..28b17614e 100644
--- a/ui/app/components/confirm-page-container/index.js
+++ b/ui/app/components/app/confirm-page-container/index.js
diff --git a/ui/app/components/app/confirm-page-container/index.scss b/ui/app/components/app/confirm-page-container/index.scss
new file mode 100644
index 000000000..c0277eff5
--- /dev/null
+++ b/ui/app/components/app/confirm-page-container/index.scss
@@ -0,0 +1,7 @@
+@import 'confirm-page-container-content/index';
+
+@import 'confirm-page-container-header/index';
+
+@import 'confirm-detail-row/index';
+
+@import 'confirm-page-container-navigation/index';
diff --git a/ui/app/components/app/copyable.js b/ui/app/components/app/copyable.js
new file mode 100644
index 000000000..6869d674d
--- /dev/null
+++ b/ui/app/components/app/copyable.js
@@ -0,0 +1,53 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const Tooltip = require('../ui/tooltip')
+const copyToClipboard = require('copy-to-clipboard')
+const connect = require('react-redux').connect
+
+Copyable.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(Copyable)
+
+
+inherits(Copyable, Component)
+function Copyable () {
+  Component.call(this)
+  this.state = {
+    copied: false,
+  }
+}
+
+Copyable.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+  const { value, children } = props
+  const { copied } = state
+
+  return h(Tooltip, {
+    title: copied ? this.context.t('copiedExclamation') : this.context.t('copy'),
+    position: 'bottom',
+  }, h('span', {
+    style: {
+      cursor: 'pointer',
+    },
+    onClick: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      copyToClipboard(value)
+      this.debounceRestore()
+    },
+  }, children))
+}
+
+Copyable.prototype.debounceRestore = function () {
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+}
diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/app/customize-gas-modal/gas-modal-card.js
index 23754d819..23754d819 100644
--- a/ui/app/components/customize-gas-modal/gas-modal-card.js
+++ b/ui/app/components/app/customize-gas-modal/gas-modal-card.js
diff --git a/ui/app/components/customize-gas-modal/gas-slider.js b/ui/app/components/app/customize-gas-modal/gas-slider.js
index 69fd6f985..69fd6f985 100644
--- a/ui/app/components/customize-gas-modal/gas-slider.js
+++ b/ui/app/components/app/customize-gas-modal/gas-slider.js
diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js
new file mode 100644
index 000000000..dca77bb00
--- /dev/null
+++ b/ui/app/components/app/customize-gas-modal/index.js
@@ -0,0 +1,396 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const BigNumber = require('bignumber.js')
+const actions = require('../../../store/actions')
+const GasModalCard = require('./gas-modal-card')
+import Button from '../../ui/button'
+
+const ethUtil = require('ethereumjs-util')
+
+import {
+  updateSendErrors,
+} from '../../../ducks/send/send.duck'
+
+const {
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_PRICE_GWEI,
+} = require('../send/send.constants')
+
+const {
+  isBalanceSufficient,
+} = require('../send/send.utils')
+
+const {
+  conversionUtil,
+  multiplyCurrencies,
+  conversionGreaterThan,
+  conversionMax,
+  subtractCurrencies,
+} = require('../../../helpers/utils/conversion-util')
+
+const {
+  getGasIsLoading,
+  getForceGasMin,
+  conversionRateSelector,
+  getSendAmount,
+  getSelectedToken,
+  getSendFrom,
+  getCurrentAccountWithSendEtherInfo,
+  getSelectedTokenToFiatRate,
+  getSendMaxModeState,
+} = require('../../../selectors/selectors')
+
+const {
+  getGasPrice,
+  getGasLimit,
+} = require('../send/send.selectors')
+
+function mapStateToProps (state) {
+  const selectedToken = getSelectedToken(state)
+  const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
+  const conversionRate = conversionRateSelector(state)
+
+  return {
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
+    gasIsLoading: getGasIsLoading(state),
+    forceGasMin: getForceGasMin(state),
+    conversionRate,
+    amount: getSendAmount(state),
+    maxModeOn: getSendMaxModeState(state),
+    balance: currentAccount.balance,
+    primaryCurrency: selectedToken && selectedToken.symbol,
+    selectedToken,
+    amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    setGasPrice: newGasPrice => dispatch(actions.setGasPrice(newGasPrice)),
+    setGasLimit: newGasLimit => dispatch(actions.setGasLimit(newGasLimit)),
+    setGasTotal: newGasTotal => dispatch(actions.setGasTotal(newGasTotal)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendErrors: error => dispatch(updateSendErrors(error)),
+  }
+}
+
+function getFreshState (props) {
+  const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
+  const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  return {
+    gasPrice,
+    gasLimit,
+    gasTotal,
+    error: null,
+    priceSigZeros: '',
+    priceSigDec: '',
+  }
+}
+
+inherits(CustomizeGasModal, Component)
+function CustomizeGasModal (props) {
+  Component.call(this)
+
+  const originalState = getFreshState(props)
+  this.state = {
+    ...originalState,
+    originalState,
+  }
+}
+
+CustomizeGasModal.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
+
+CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) {
+  const currentState = getFreshState(this.props)
+  const {
+    gasPrice: currentGasPrice,
+    gasLimit: currentGasLimit,
+  } = currentState
+  const newState = getFreshState(nextProps)
+  const {
+    gasPrice: newGasPrice,
+    gasLimit: newGasLimit,
+    gasTotal: newGasTotal,
+  } = newState
+  const gasPriceChanged = currentGasPrice !== newGasPrice
+  const gasLimitChanged = currentGasLimit !== newGasLimit
+
+  if (gasPriceChanged) {
+    this.setState({
+      gasPrice: newGasPrice,
+      gasTotal: newGasTotal,
+      priceSigZeros: '',
+      priceSigDec: '',
+    })
+  }
+  if (gasLimitChanged) {
+    this.setState({ gasLimit: newGasLimit, gasTotal: newGasTotal })
+  }
+  if (gasLimitChanged || gasPriceChanged) {
+    this.validate({ gasLimit: newGasLimit, gasTotal: newGasTotal })
+  }
+}
+
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
+  const { metricsEvent } = this.context
+  const {
+    setGasPrice,
+    setGasLimit,
+    hideModal,
+    setGasTotal,
+    maxModeOn,
+    selectedToken,
+    balance,
+    updateSendAmount,
+    updateSendErrors,
+  } = this.props
+  const {
+    originalState,
+  } = this.state
+
+  if (maxModeOn && !selectedToken) {
+    const maxAmount = subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+    updateSendAmount(maxAmount)
+  }
+
+  metricsEvent({
+    eventOpts: {
+      category: 'Activation',
+      action: 'userCloses',
+      name: 'closeCustomizeGas',
+    },
+    pageOpts: {
+      section: 'customizeGasModal',
+      component: 'customizeGasSaveButton',
+    },
+    customVariables: {
+      gasPriceChange: (new BigNumber(ethUtil.addHexPrefix(gasPrice))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasPrice))).toString(10),
+      gasLimitChange: (new BigNumber(ethUtil.addHexPrefix(gasLimit))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasLimit))).toString(10),
+    },
+  })
+
+  setGasPrice(ethUtil.addHexPrefix(gasPrice))
+  setGasLimit(ethUtil.addHexPrefix(gasLimit))
+  setGasTotal(ethUtil.addHexPrefix(gasTotal))
+  updateSendErrors({ insufficientFunds: false })
+  hideModal()
+}
+
+CustomizeGasModal.prototype.revert = function () {
+  this.setState(this.state.originalState)
+}
+
+CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
+  const {
+    amount,
+    balance,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+    maxModeOn,
+  } = this.props
+
+  let error = null
+
+  const balanceIsSufficient = isBalanceSufficient({
+    amount: selectedToken || maxModeOn ? '0' : amount,
+    gasTotal,
+    balance,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+  })
+
+  if (!balanceIsSufficient) {
+    error = this.context.t('balanceIsInsufficientGas')
+  }
+
+  const gasLimitTooLow = gasLimit && conversionGreaterThan(
+    {
+      value: MIN_GAS_LIMIT_DEC,
+      fromNumericBase: 'dec',
+      conversionRate,
+    },
+    {
+      value: gasLimit,
+      fromNumericBase: 'hex',
+    },
+  )
+
+  if (gasLimitTooLow) {
+    error = this.context.t('gasLimitTooLow')
+  }
+
+  this.setState({ error })
+  return error
+}
+
+CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
+  const { gasPrice } = this.state
+
+  const gasLimit = conversionUtil(newGasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  })
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal, gasLimit })
+
+  this.setState({ gasTotal, gasLimit })
+}
+
+CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
+  const { gasLimit } = this.state
+  const sigZeros = String(newGasPrice).match(/^\d+[.]\d*?(0+)$/)
+  const sigDec = String(newGasPrice).match(/^\d+([.])0*$/)
+
+  this.setState({
+    priceSigZeros: sigZeros && sigZeros[1] || '',
+    priceSigDec: sigDec && sigDec[1] || '',
+  })
+
+  const gasPrice = conversionUtil(newGasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  })
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal })
+
+  this.setState({ gasTotal, gasPrice })
+}
+
+CustomizeGasModal.prototype.render = function () {
+  const { hideModal, forceGasMin, gasIsLoading } = this.props
+  const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
+
+  let convertedGasPrice = conversionUtil(gasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+
+  convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
+
+  let newGasPrice = gasPrice
+  if (forceGasMin) {
+    const convertedMinPrice = conversionUtil(forceGasMin, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+    })
+    convertedGasPrice = conversionMax(
+      { value: convertedMinPrice, fromNumericBase: 'dec' },
+      { value: convertedGasPrice, fromNumericBase: 'dec' }
+    )
+    newGasPrice = conversionMax(
+      { value: gasPrice, fromNumericBase: 'hex' },
+      { value: forceGasMin, fromNumericBase: 'hex' }
+    )
+  }
+
+  const convertedGasLimit = conversionUtil(gasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+
+  return !gasIsLoading && h('div.send-v2__customize-gas', {}, [
+    h('div.send-v2__customize-gas__content', {
+    }, [
+      h('div.send-v2__customize-gas__header', {}, [
+
+        h('div.send-v2__customize-gas__title', this.context.t('customGas')),
+
+        h('div.send-v2__customize-gas__close', {
+          onClick: hideModal,
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__body', {}, [
+
+        h(GasModalCard, {
+          value: convertedGasPrice,
+          min: forceGasMin || MIN_GAS_PRICE_GWEI,
+          step: 1,
+          onChange: value => this.convertAndSetGasPrice(value),
+          title: this.context.t('gasPrice'),
+          copy: this.context.t('gasPriceCalculation'),
+          gasIsLoading,
+        }),
+
+        h(GasModalCard, {
+          value: convertedGasLimit,
+          min: 1,
+          step: 1,
+          onChange: value => this.convertAndSetGasLimit(value),
+          title: this.context.t('gasLimit'),
+          copy: this.context.t('gasLimitCalculation'),
+          gasIsLoading,
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__footer', {}, [
+
+        error && h('div.send-v2__customize-gas__error-message', [
+          error,
+        ]),
+
+        h('div.send-v2__customize-gas__revert', {
+          onClick: () => this.revert(),
+        }, [this.context.t('revert')]),
+
+        h('div.send-v2__customize-gas__buttons', [
+          h(Button, {
+            type: 'default',
+            className: 'send-v2__customize-gas__cancel',
+            onClick: this.props.hideModal,
+          }, [this.context.t('cancel')]),
+          h(Button, {
+            type: 'primary',
+            className: 'send-v2__customize-gas__save',
+            onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
+            disabled: error,
+          }, [this.context.t('save')]),
+        ]),
+
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
new file mode 100644
index 000000000..3d4598946
--- /dev/null
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -0,0 +1,131 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getSelectedIdentity } = require('../../../selectors/selectors')
+const genAccountLink = require('../../../../lib/account-link.js')
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+AccountDetailsDropdown.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+    network: state.metamask.network,
+    keyrings: state.metamask.keyrings,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    viewOnEtherscan: (address, network) => {
+      global.platform.openWindow({ url: genAccountLink(address, network) })
+    },
+    showRemoveAccountConfirmationModal: (identity) => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
+    },
+  }
+}
+
+inherits(AccountDetailsDropdown, Component)
+function AccountDetailsDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+AccountDetailsDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+AccountDetailsDropdown.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    keyrings,
+    showAccountDetailModal,
+    viewOnEtherscan,
+    showRemoveAccountConfirmationModal } = this.props
+
+  const address = selectedIdentity.address
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(address)
+  })
+
+  const isRemovable = keyring.type !== 'HD Key Tree'
+
+  return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
+    h(CloseArea, {
+      onClick: this.onClose,
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Account Options',
+            name: 'Clicked Expand View',
+          },
+        })
+        global.platform.openExtensionInBrowser()
+        this.props.onClose()
+      },
+      text: this.context.t('expandView'),
+      icon: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showAccountDetailModal()
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Account Options',
+            name: 'Viewed Account Details',
+          },
+        })
+        this.props.onClose()
+      },
+      text: this.context.t('accountDetails'),
+      icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Account Options',
+            name: 'Clicked View on Etherscan',
+          },
+        })
+        viewOnEtherscan(address, network)
+        this.props.onClose()
+      },
+      text: this.context.t('viewOnEtherscan'),
+      icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
+    }),
+    isRemovable ? h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showRemoveAccountConfirmationModal(selectedIdentity)
+        this.props.onClose()
+      },
+      text: this.context.t('removeAccount'),
+      icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }),
+    }) : null,
+  ])
+}
diff --git a/ui/app/components/app/dropdowns/components/account-dropdowns.js b/ui/app/components/app/dropdowns/components/account-dropdowns.js
new file mode 100644
index 000000000..c603a9a9f
--- /dev/null
+++ b/ui/app/components/app/dropdowns/components/account-dropdowns.js
@@ -0,0 +1,473 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const actions = require('../../../../store/actions')
+const genAccountLink = require('../../../../../lib/account-link.js')
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+import Identicon from '../../../ui/identicon'
+const { checksumAddress } = require('../../../../helpers/utils/util')
+const copyToClipboard = require('copy-to-clipboard')
+const { formatBalance } = require('../../../../helpers/utils/util')
+
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    // Used for orangeaccount selector icon
+    // this.accountSelectorToggleClassName = 'accounts-selector'
+    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, accounts, selected, menuItemStyles, actions, keyrings, ticker } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      const balanceValue = accounts[key].balance
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, true, ticker) : '...'
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: Object.assign(
+            {
+              marginTop: index === 0 ? '5px' : '',
+              fontSize: '24px',
+              width: '260px',
+            },
+            menuItemStyles,
+          ),
+        },
+        [
+          h('div.flex-row.flex-center', {}, [
+
+            h('span', {
+              style: {
+                flex: '1 1 0',
+                minWidth: '20px',
+                minHeight: '30px',
+              },
+            }, [
+              h('span', {
+                style: {
+                  flex: '1 1 auto',
+                  fontSize: '14px',
+                },
+              }, isSelected ? h('i.fa.fa-check') : null),
+            ]),
+
+            h(
+              Identicon,
+              {
+                address: identity.address,
+                diameter: 24,
+                style: {
+                  flex: '1 1 auto',
+                  marginLeft: '10px',
+                },
+              },
+            ),
+
+            h('span.flex-column', {
+              style: {
+                flex: '10 10 auto',
+                width: '175px',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                marginLeft: '10px',
+                position: 'relative',
+              },
+            }, [
+              this.indicateIfLoose(keyring),
+              h('span.account-dropdown-name', {
+                style: {
+                  fontSize: '18px',
+                  maxWidth: '145px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                },
+              }, identity.name || ''),
+
+              h('span.account-dropdown-balance', {
+                style: {
+                  fontSize: '14px',
+                  fontFamily: 'Avenir',
+                  fontWeight: 500,
+                },
+              }, formattedBalance),
+            ]),
+
+            h('span', {
+              style: {
+                flex: '3 3 auto',
+              },
+            }, [
+              h('span.account-dropdown-edit-button.allcaps', {
+                style: {
+                  fontSize: '16px',
+                },
+                onClick: () => {
+                  actions.showEditAccountModal(identity)
+                },
+              }, [
+                this.context.t('edit'),
+              ]),
+            ]),
+
+          ]),
+        ]
+      )
+    })
+  }
+
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
+    } catch (e) { return }
+  }
+
+  renderAccountSelector () {
+    const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
+    const { accountSelectorActive, menuItemStyles } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: {
+          marginLeft: '-185px',
+          marginTop: '50px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle,
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+            onClick: () => actions.showNewAccountPageCreateForm(),
+          },
+          [
+            h(
+              'i.fa.fa-plus.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '14px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, this.context.t('createAccount')),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {
+              if (sidebarOpen) {
+                actions.hideSidebar()
+              }
+            },
+            onClick: () => actions.showNewAccountPageImportForm(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          [
+            h(
+              'i.fa.fa-download.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                marginBottom: '5px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, this.context.t('importAccount')),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
+    const { optionsMenuActive, menuItemStyles } = this.state
+    const dropdownMenuItemStyle = {
+      fontFamily: 'DIN OT',
+      fontSize: 16,
+      lineHeight: '24px',
+      padding: '8px',
+    }
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: Object.assign(
+          {
+            marginLeft: '-10px',
+            position: 'absolute',
+            width: '29vh', // affects both mobile and laptop views
+          },
+          dropdownWrapperStyle,
+        ),
+        isOpen: optionsMenuActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              this.props.actions.showAccountDetailModal()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          this.context.t('accountDetails'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          this.context.t('etherscanView'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              copyToClipboard(checksumAddress(selected))
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          this.context.t('copyAddress'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          this.context.t('exportPrivateKey'),
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.hideSidebar()
+              actions.showAddTokenPage()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          this.context.t('addToken'),
+        ),
+
+      ]
+    )
+  }
+
+  render () {
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          'i.fa.fa-angle-down',
+          {
+            style: {
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              fontSize: '135%',
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
+  accounts: PropTypes.object,
+  menuItemStyles: PropTypes.object,
+  actions: PropTypes.object,
+  // actions.showAccountDetail: ,
+  useCssTransition: PropTypes.bool,
+  innerStyle: PropTypes.object,
+  sidebarOpen: PropTypes.bool,
+  dropdownWrapperStyle: PropTypes.string,
+  // actions.showAccountDetailModal: ,
+  network: PropTypes.number,
+  // actions.showExportPrivateKeyModal: ,
+  style: PropTypes.object,
+  ticker: PropTypes.string,
+  enableAccountsSelector: PropTypes.bool,
+  enableAccountOption: PropTypes.bool,
+  enableAccountOptions: PropTypes.bool,
+    t: PropTypes.func,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      hideSidebar: () => dispatch(actions.hideSidebar()),
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      showAccountDetailModal: () => {
+        dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+      },
+      showEditAccountModal: (identity) => {
+        dispatch(actions.showModal({
+          name: 'EDIT_ACCOUNT_NAME',
+          identity,
+        }))
+      },
+      showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })),
+      showExportPrivateKeyModal: () => {
+        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+      },
+      showAddTokenPage: () => {
+        dispatch(actions.showAddTokenPage())
+      },
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    ticker: state.metamask.ticker,
+    keyrings: state.metamask.keyrings,
+    sidebarOpen: state.appState.sidebar.isOpen,
+  }
+}
+
+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
+
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/app/dropdowns/components/dropdown.js
index 149f063a7..149f063a7 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/app/dropdowns/components/dropdown.js
diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js
index f6d8a139e..f6d8a139e 100644
--- a/ui/app/components/dropdowns/components/menu.js
+++ b/ui/app/components/app/dropdowns/components/menu.js
diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/app/dropdowns/components/network-dropdown-icon.js
index d4a2c2ff7..d4a2c2ff7 100644
--- a/ui/app/components/dropdowns/components/network-dropdown-icon.js
+++ b/ui/app/components/app/dropdowns/components/network-dropdown-icon.js
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/app/dropdowns/index.js
index 605507058..605507058 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/app/dropdowns/index.js
diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
new file mode 100644
index 000000000..fcc7a8681
--- /dev/null
+++ b/ui/app/components/app/dropdowns/network-dropdown.js
@@ -0,0 +1,378 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const actions = require('../../../store/actions')
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+const { SETTINGS_ROUTE } = require('../../../helpers/constants/routes')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
+
+function mapStateToProps (state) {
+  return {
+    provider: state.metamask.provider,
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+    network: state.metamask.network,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: type => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target, network, ticker, nickname) => {
+      dispatch(actions.setRpcTarget(target, network, ticker, nickname))
+    },
+    delRpcTarget: (target) => {
+      dispatch(actions.delRpcTarget(target))
+    },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+NetworkDropdown.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(NetworkDropdown)
+
+
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcListDetail = props.frequentRpcListDetail
+  const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontSize: '16px',
+    lineHeight: '20px',
+    padding: '12px 0',
+  }
+
+  return h(Dropdown, {
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+      if (notToggleElementIndex === -1) {
+        this.props.hideNetworkDropdown()
+      }
+    },
+    containerClassName: 'network-droppo',
+    zIndex: 55,
+    style: {
+      position: 'absolute',
+      top: '58px',
+      width: '309px',
+      zIndex: '55px',
+    },
+    innerStyle: {
+      padding: '18px 8px',
+    },
+  }, [
+
+    h('div.network-dropdown-header', {}, [
+      h('div.network-dropdown-title', {}, this.context.t('networks')),
+
+      h('div.network-dropdown-divider'),
+
+      h('div.network-dropdown-content',
+        {},
+        this.context.t('defaultNetwork')
+      ),
+    ]),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('mainnet'),
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
+      },
+      [
+        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#29B6AF', // $java
+          isSelected: providerType === 'mainnet',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('mainnet')),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('ropsten'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#ff4a8d', // $wild-strawberry
+          isSelected: providerType === 'ropsten',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('ropsten')),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('kovan'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#7057ff', // $cornflower-blue
+          isSelected: providerType === 'kovan',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('kovan')),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('rinkeby'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#f6c343', // $saffron
+          isSelected: providerType === 'rinkeby',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('rinkeby')),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('localhost'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: providerType === 'localhost',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('localhost')),
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcListDetail, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.history.push(SETTINGS_ROUTE),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'custom',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('customRPC')),
+      ]
+    ),
+
+  ])
+}
+
+NetworkDropdown.prototype.handleClick = function (newProviderType) {
+  const { provider: { type: providerType }, setProviderType } = this.props
+  const { metricsEvent } = this.context
+
+  metricsEvent({
+    eventOpts: {
+      category: 'Navigation',
+      action: 'Home',
+      name: 'Switched Networks',
+    },
+    customVariables: {
+      fromNetwork: providerType,
+      toNetwork: newProviderType,
+    },
+  })
+  setProviderType(newProviderType)
+}
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = this.context.t('mainnet')
+  } else if (providerName === 'ropsten') {
+    name = this.context.t('ropsten')
+  } else if (providerName === 'kovan') {
+    name = this.context.t('kovan')
+  } else if (providerName === 'rinkeby') {
+    name = this.context.t('rinkeby')
+  } else {
+    name = provider.nickname || this.context.t('unknownNetwork')
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
+  const props = this.props
+  const reversedRpcListDetail = rpcListDetail.slice().reverse()
+
+  return reversedRpcListDetail.map((entry) => {
+    const rpc = entry.rpcUrl
+    const ticker = entry.ticker || 'ETH'
+    const nickname = entry.nickname || ''
+    const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
+
+    if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
+      return null
+    } else {
+      const chainId = entry.chainId
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc, chainId, ticker, nickname),
+          style: {
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
+        },
+        [
+          currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
+            },
+          }, nickname || rpc),
+          h('i.fa.fa-times.delete',
+          {
+            onClick: (e) => {
+              e.stopPropagation()
+              props.delRpcTarget(rpc)
+            },
+          }),
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type, ticker, nickname } = provider
+  const props = this.props
+  const network = props.network
+
+  if (type !== 'rpc') return null
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.setRpcTarget(rpcTarget, network, ticker, nickname),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          style: {
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
+        },
+        [
+          h('i.fa.fa-check'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: '#ffffff',
+            },
+          }, nickname || rpcTarget),
+        ]
+      )
+  }
+}
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/app/dropdowns/simple-dropdown.js
index bba088ed1..bba088ed1 100644
--- a/ui/app/components/dropdowns/simple-dropdown.js
+++ b/ui/app/components/app/dropdowns/simple-dropdown.js
diff --git a/ui/app/components/dropdowns/tests/dropdown.test.js b/ui/app/components/app/dropdowns/tests/dropdown.test.js
index 2b026589a..2b026589a 100644
--- a/ui/app/components/dropdowns/tests/dropdown.test.js
+++ b/ui/app/components/app/dropdowns/tests/dropdown.test.js
diff --git a/ui/app/components/dropdowns/tests/menu.test.js b/ui/app/components/app/dropdowns/tests/menu.test.js
index 9f5f13f00..9f5f13f00 100644
--- a/ui/app/components/dropdowns/tests/menu.test.js
+++ b/ui/app/components/app/dropdowns/tests/menu.test.js
diff --git a/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js b/ui/app/components/app/dropdowns/tests/network-dropdown-icon.test.js
index 67b192c11..67b192c11 100644
--- a/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
+++ b/ui/app/components/app/dropdowns/tests/network-dropdown-icon.test.js
diff --git a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js
new file mode 100644
index 000000000..91e7899a7
--- /dev/null
+++ b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import assert from 'assert'
+import { createMockStore } from 'redux-test-utils'
+import { mountWithRouter } from '../../../../../../test/lib/render-helpers'
+import NetworkDropdown from '../network-dropdown'
+import { DropdownMenuItem } from '../components/dropdown'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown', () => {
+  let wrapper
+
+  describe('NetworkDropdown in appState in false', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          type: 'test',
+        },
+      },
+      appState: {
+        networkDropdown: false,
+      },
+    }
+
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store} />
+      )
+    })
+
+    it('checks for network droppo class', () => {
+      assert.equal(wrapper.find('.network-droppo').length, 1)
+    })
+
+    it('renders only one child when networkDropdown is false in state', () => {
+      assert.equal(wrapper.children().length, 1)
+    })
+
+  })
+
+  describe('NetworkDropdown in appState is true', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          'type': 'test',
+        },
+        frequentRpcListDetail: [
+          { rpcUrl: 'http://localhost:7545' },
+        ],
+      },
+      appState: {
+        'networkDropdownOpen': true,
+      },
+    }
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store}/>,
+      )
+    })
+
+    it('renders 7 DropDownMenuItems ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).length, 7)
+    })
+
+    it('checks background color for first NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main Ethereum Network Teal
+    })
+
+    it('checks background color for second NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(1).prop('backgroundColor'), '#ff4a8d') // Ropsten Red
+    })
+
+    it('checks background color for third NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(2).prop('backgroundColor'), '#7057ff') // Kovan Purple
+    })
+
+    it('checks background color for fourth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow
+    })
+
+    it('checks background color for fifth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+    it('checks dropdown for frequestRPCList from  state ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
+    })
+
+    it('checks background color for sixth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+  })
+})
diff --git a/ui/app/components/app/dropdowns/token-menu-dropdown.js b/ui/app/components/app/dropdowns/token-menu-dropdown.js
new file mode 100644
index 000000000..e2730aea2
--- /dev/null
+++ b/ui/app/components/app/dropdowns/token-menu-dropdown.js
@@ -0,0 +1,68 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const genAccountLink = require('etherscan-link').createAccountLink
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+TokenMenuDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenMenuDropdown)
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showHideTokenConfirmationModal: (token) => {
+      dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
+    },
+  }
+}
+
+
+inherits(TokenMenuDropdown, Component)
+function TokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+TokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+TokenMenuDropdown.prototype.render = function () {
+  const { showHideTokenConfirmationModal } = this.props
+
+  return h(Menu, { className: 'token-menu-dropdown', isShowing: true }, [
+    h(CloseArea, {
+      onClick: this.onClose,
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showHideTokenConfirmationModal(this.props.token)
+        this.props.onClose()
+      },
+      text: this.context.t('hideToken'),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        const url = genAccountLink(this.props.token.address, this.props.network)
+        global.platform.openWindow({ url })
+        this.props.onClose()
+      },
+      text: this.context.t('viewOnEtherscan'),
+    }),
+  ])
+}
diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js
new file mode 100644
index 000000000..274058a1b
--- /dev/null
+++ b/ui/app/components/app/ens-input.js
@@ -0,0 +1,181 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const extend = require('xtend')
+const debounce = require('debounce')
+const copyToClipboard = require('copy-to-clipboard')
+const ENS = require('ethjs-ens')
+const networkMap = require('ethjs-ens/lib/network-map.json')
+const ensRE = /.+\..+$/
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
+const connect = require('react-redux').connect
+const ToAutoComplete = require('./send/to-autocomplete').default
+const log = require('loglevel')
+const { isValidENSAddress } = require('../../helpers/utils/util')
+
+EnsInput.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(EnsInput)
+
+
+inherits(EnsInput, Component)
+function EnsInput () {
+  Component.call(this)
+}
+
+EnsInput.prototype.onChange = function (recipient) {
+
+  const network = this.props.network
+  const networkHasEnsSupport = getNetworkEnsSupport(network)
+
+  this.props.onChange({ toAddress: recipient })
+
+  if (!networkHasEnsSupport) return
+
+  if (recipient.match(ensRE) === null) {
+    return this.setState({
+      loadingEns: false,
+      ensResolution: null,
+      ensFailure: null,
+      toError: null,
+    })
+  }
+
+  this.setState({
+    loadingEns: true,
+  })
+  this.checkName(recipient)
+}
+
+EnsInput.prototype.render = function () {
+  const props = this.props
+  const opts = extend(props, {
+    list: 'addresses',
+    onChange: this.onChange.bind(this),
+    qrScanner: true,
+  })
+  return h('div', {
+    style: { width: '100%', position: 'relative' },
+  }, [
+    h(ToAutoComplete, { ...opts }),
+    this.ensIcon(),
+  ])
+}
+
+EnsInput.prototype.componentDidMount = function () {
+  const network = this.props.network
+  const networkHasEnsSupport = getNetworkEnsSupport(network)
+  this.setState({ ensResolution: ZERO_ADDRESS })
+
+  if (networkHasEnsSupport) {
+    const provider = global.ethereumProvider
+    this.ens = new ENS({ provider, network })
+    this.checkName = debounce(this.lookupEnsName.bind(this), 200)
+  }
+}
+
+EnsInput.prototype.lookupEnsName = function (recipient) {
+  const { ensResolution } = this.state
+
+  log.info(`ENS attempting to resolve name: ${recipient}`)
+  this.ens.lookup(recipient.trim())
+  .then((address) => {
+    if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
+    if (address !== ensResolution) {
+      this.setState({
+        loadingEns: false,
+        ensResolution: address,
+        nickname: recipient.trim(),
+        hoverText: address + '\n' + this.context.t('clickCopy'),
+        ensFailure: false,
+        toError: null,
+      })
+    }
+  })
+  .catch((reason) => {
+    const setStateObj = {
+      loadingEns: false,
+      ensResolution: recipient,
+      ensFailure: true,
+      toError: null,
+    }
+    if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') {
+      setStateObj.hoverText = this.context.t('ensNameNotFound')
+      setStateObj.toError = 'ensNameNotFound'
+      setStateObj.ensFailure = false
+    } else {
+      log.error(reason)
+      setStateObj.hoverText = reason.message
+    }
+
+    return this.setState(setStateObj)
+  })
+}
+
+EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+  const state = this.state || {}
+  const ensResolution = state.ensResolution
+  // If an address is sent without a nickname, meaning not from ENS or from
+  // the user's own accounts, a default of a one-space string is used.
+  const nickname = state.nickname || ' '
+  if (prevProps.network !== this.props.network) {
+    const provider = global.ethereumProvider
+    this.ens = new ENS({ provider, network: this.props.network })
+    this.onChange(ensResolution)
+  }
+  if (prevState && ensResolution && this.props.onChange &&
+      ensResolution !== prevState.ensResolution) {
+    this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning })
+  }
+}
+
+EnsInput.prototype.ensIcon = function (recipient) {
+  const { hoverText } = this.state || {}
+  return h('span.#ensIcon', {
+    title: hoverText,
+    style: {
+      position: 'absolute',
+      top: '16px',
+      left: '-25px',
+    },
+  }, this.ensIconContents(recipient))
+}
+
+EnsInput.prototype.ensIconContents = function (recipient) {
+  const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS }
+
+  if (toError) return
+
+  if (loadingEns) {
+    return h('img', {
+      src: 'images/loading.svg',
+      style: {
+        width: '30px',
+        height: '30px',
+        transform: 'translateY(-6px)',
+      },
+    })
+  }
+
+  if (ensFailure) {
+    return h('i.fa.fa-warning.fa-lg.warning')
+  }
+
+  if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
+    return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
+      style: { color: 'green' },
+      onClick: (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        copyToClipboard(ensResolution)
+      },
+    })
+  }
+}
+
+function getNetworkEnsSupport (network) {
+  return Boolean(networkMap[network])
+}
diff --git a/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
index 95894140c..95894140c 100644
--- a/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
new file mode 100644
index 000000000..90fef1a1b
--- /dev/null
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import { showModal } from '../../../../store/actions'
+import {
+  decGWEIToHexWEI,
+  decimalToHex,
+  hexWEIToDecGWEI,
+} from '../../../../helpers/utils/conversions.util'
+import AdvancedGasInputs from './advanced-gas-inputs.component'
+
+function convertGasPriceForInputs (gasPriceInHexWEI) {
+  return Number(hexWEIToDecGWEI(gasPriceInHexWEI))
+}
+
+function convertGasLimitForInputs (gasLimitInHexWEI) {
+  return parseInt(gasLimitInHexWEI, 16)
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showGasPriceInfoModal: modalName => dispatch(showModal({ name: 'GAS_PRICE_INFO_MODAL' })),
+    showGasLimitInfoModal: modalName => dispatch(showModal({ name: 'GAS_LIMIT_INFO_MODAL' })),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const {customGasPrice, customGasLimit, updateCustomGasPrice, updateCustomGasLimit} = ownProps
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    customGasPrice: convertGasPriceForInputs(customGasPrice),
+    customGasLimit: convertGasLimitForInputs(customGasLimit),
+    updateCustomGasPrice: (price) => updateCustomGasPrice(decGWEIToHexWEI(price)),
+    updateCustomGasLimit: (limit) => updateCustomGasLimit(decimalToHex(limit)),
+  }
+}
+
+export default connect(null, mapDispatchToProps, mergeProps)(AdvancedGasInputs)
diff --git a/ui/app/components/gas-customization/advanced-gas-inputs/index.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.js
index bd8abaa3e..bd8abaa3e 100644
--- a/ui/app/components/gas-customization/advanced-gas-inputs/index.js
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.js
diff --git a/ui/app/components/gas-customization/advanced-gas-inputs/index.scss b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss
index 50953cbe5..50953cbe5 100644
--- a/ui/app/components/gas-customization/advanced-gas-inputs/index.scss
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
new file mode 100644
index 000000000..7fbf8f0bd
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -0,0 +1,219 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Loading from '../../../../ui/loading-screen'
+import GasPriceChart from '../../gas-price-chart'
+import debounce from 'lodash.debounce'
+
+export default class AdvancedTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    gasEstimatesLoading: PropTypes.bool,
+    millisecondsRemaining: PropTypes.number,
+    transactionFee: PropTypes.string,
+    timeRemaining: PropTypes.string,
+    gasChartProps: PropTypes.object,
+    insufficientBalance: PropTypes.bool,
+    customPriceIsSafe: PropTypes.bool,
+    isSpeedUp: PropTypes.bool,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.debouncedGasLimitReset = debounce((dVal) => {
+      if (dVal < 21000) {
+        props.updateCustomGasLimit(21000)
+      }
+    }, 1000, { trailing: true })
+    this.onChangeGasLimit = (val) => {
+      props.updateCustomGasLimit(val)
+      this.debouncedGasLimitReset(val)
+    }
+  }
+
+  gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) {
+    const { t } = this.context
+    let errorText
+    let errorType
+    let isInError = true
+
+
+    if (insufficientBalance) {
+      errorText = t('insufficientBalance')
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) {
+      errorText = t('zeroGasPriceOnSpeedUpError')
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && !customPriceIsSafe) {
+      errorText = t('gasPriceExtremelyLow')
+      errorType = 'warning'
+    } else {
+      isInError = false
+    }
+
+    return {
+      isInError,
+      errorText,
+      errorType,
+    }
+  }
+
+  gasInput ({ labelKey, value, onChange, insufficientBalance, showGWEI, customPriceIsSafe, isSpeedUp }) {
+    const {
+      isInError,
+      errorText,
+      errorType,
+    } = this.gasInputError({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value })
+
+    return (
+      <div className="advanced-tab__gas-edit-row__input-wrapper">
+        <input
+          className={classnames('advanced-tab__gas-edit-row__input', {
+            'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
+            'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
+          })}
+          type="number"
+          value={value}
+          onChange={event => onChange(Number(event.target.value))}
+        />
+        <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
+          'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
+          'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
+        })}>
+          <div
+            className="advanced-tab__gas-edit-row__input-arrows__i-wrap"
+            onClick={() => onChange(value + 1)}
+          >
+            <i className="fa fa-sm fa-angle-up" />
+          </div>
+          <div
+            className="advanced-tab__gas-edit-row__input-arrows__i-wrap"
+            onClick={() => onChange(Math.max(value - 1, 0))}
+          >
+            <i className="fa fa-sm fa-angle-down" />
+          </div>
+        </div>
+        { isInError
+          ? <div className={`advanced-tab__gas-edit-row__${errorType}-text`}>
+              { errorText }
+            </div>
+          : null }
+      </div>
+    )
+  }
+
+  infoButton (onClick) {
+    return <i className="fa fa-info-circle" onClick={onClick} />
+  }
+
+  renderDataSummary (transactionFee, timeRemaining) {
+    return (
+      <div className="advanced-tab__transaction-data-summary">
+        <div className="advanced-tab__transaction-data-summary__titles">
+          <span>{ this.context.t('newTransactionFee') }</span>
+          <span>~{ this.context.t('transactionTime') }</span>
+        </div>
+        <div className="advanced-tab__transaction-data-summary__container">
+          <div className="advanced-tab__transaction-data-summary__fee">
+            {transactionFee}
+          </div>
+          <div className="time-remaining">{timeRemaining}</div>
+        </div>
+      </div>
+    )
+  }
+
+  renderGasEditRow (gasInputArgs) {
+    return (
+      <div className="advanced-tab__gas-edit-row">
+        <div className="advanced-tab__gas-edit-row__label">
+          { this.context.t(gasInputArgs.labelKey) }
+          { this.infoButton(() => {}) }
+        </div>
+        { this.gasInput(gasInputArgs) }
+      </div>
+    )
+  }
+
+  renderGasEditRows ({
+    customGasPrice,
+    updateCustomGasPrice,
+    customGasLimit,
+    updateCustomGasLimit,
+    insufficientBalance,
+    customPriceIsSafe,
+    isSpeedUp,
+  }) {
+    return (
+      <div className="advanced-tab__gas-edit-rows">
+        { this.renderGasEditRow({
+          labelKey: 'gasPrice',
+          value: customGasPrice,
+          onChange: updateCustomGasPrice,
+          insufficientBalance,
+          customPriceIsSafe,
+          showGWEI: true,
+          isSpeedUp,
+        }) }
+        { this.renderGasEditRow({
+          labelKey: 'gasLimit',
+          value: customGasLimit,
+          onChange: this.onChangeGasLimit,
+          insufficientBalance,
+          customPriceIsSafe,
+        }) }
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const {
+      updateCustomGasPrice,
+      updateCustomGasLimit,
+      timeRemaining,
+      customGasPrice,
+      customGasLimit,
+      insufficientBalance,
+      gasChartProps,
+      gasEstimatesLoading,
+      customPriceIsSafe,
+      isSpeedUp,
+      transactionFee,
+    } = this.props
+
+    return (
+      <div className="advanced-tab">
+        { this.renderDataSummary(transactionFee, timeRemaining) }
+        <div className="advanced-tab__fee-chart">
+          { this.renderGasEditRows({
+            customGasPrice,
+            updateCustomGasPrice,
+            customGasLimit,
+            updateCustomGasLimit,
+            insufficientBalance,
+            customPriceIsSafe,
+            isSpeedUp,
+          }) }
+          <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
+          {!gasEstimatesLoading
+            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+            : <Loading />
+          }
+          <div className="advanced-tab__fee-chart__speed-buttons">
+            <span>{ t('slower') }</span>
+            <span>{ t('faster') }</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
index 492037f25..492037f25 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 53cb84791..53cb84791 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
new file mode 100644
index 000000000..a6b81d2ce
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -0,0 +1,364 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import AdvancedTabContent from '../advanced-tab-content.component.js'
+
+import GasPriceChart from '../../../gas-price-chart'
+import Loading from '../../../../../ui/loading-screen'
+
+const propsMethodSpies = {
+  updateCustomGasPrice: sinon.spy(),
+  updateCustomGasLimit: sinon.spy(),
+}
+
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
+sinon.spy(AdvancedTabContent.prototype, 'gasInput')
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRows')
+sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
+sinon.spy(AdvancedTabContent.prototype, 'gasInputError')
+
+describe('AdvancedTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<AdvancedTabContent
+      updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
+      updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
+      customGasPrice={11}
+      customGasLimit={23456}
+      timeRemaining={21500}
+      transactionFee={'$0.25'}
+      insufficientBalance={false}
+      customPriceIsSafe={true}
+      isSpeedUp={false}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.updateCustomGasPrice.resetHistory()
+    propsMethodSpies.updateCustomGasLimit.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+    AdvancedTabContent.prototype.gasInput.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRows.resetHistory()
+    AdvancedTabContent.prototype.renderDataSummary.resetHistory()
+  })
+
+  describe('render()', () => {
+    it('should render the advanced-tab root node', () => {
+      assert(wrapper.hasClass('advanced-tab'))
+    })
+
+    it('should render the expected four children of the advanced-tab div', () => {
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(GasPriceChart))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
+    it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
+      wrapper.setProps({ gasEstimatesLoading: true })
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(Loading))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
+    it('should call renderDataSummary with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
+      assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
+    })
+
+    it('should call renderGasEditRows with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
+      assert.deepEqual(renderGasEditRowArgs, [{
+        customGasPrice: 11,
+        customGasLimit: 23456,
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
+        updateCustomGasLimit: propsMethodSpies.updateCustomGasLimit,
+        isSpeedUp: false,
+      }])
+    })
+  })
+
+  describe('renderDataSummary()', () => {
+    let dataSummary
+
+    beforeEach(() => {
+      dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining'))
+    })
+
+    it('should render the transaction-data-summary root node', () => {
+      assert(dataSummary.hasClass('advanced-tab__transaction-data-summary'))
+    })
+
+    it('should render titles of the data', () => {
+      const titlesNode = dataSummary.children().at(0)
+      assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles'))
+      assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee')
+      assert.equal(titlesNode.children().at(1).text(), '~transactionTime')
+    })
+
+    it('should render the data', () => {
+      const dataNode = dataSummary.children().at(1)
+      assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
+      assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
+      assert(dataNode.children().at(1).hasClass('time-remaining'))
+      assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining')
+    })
+  })
+
+  describe('renderGasEditRow()', () => {
+    let gasEditRow
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.gasInput.resetHistory()
+      gasEditRow = shallow(wrapper.instance().renderGasEditRow({
+        labelKey: 'mockLabelKey',
+        someArg: 'argA',
+      }))
+    })
+
+    it('should render the gas-edit-row root node', () => {
+      assert(gasEditRow.hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should render a label and an input', () => {
+      const gasEditRowChildren = gasEditRow.children()
+      assert.equal(gasEditRowChildren.length, 2)
+      assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label'))
+      assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render the label key and info button', () => {
+      const gasRowLabelChildren = gasEditRow.children().at(0).children()
+      assert.equal(gasRowLabelChildren.length, 2)
+      assert(gasRowLabelChildren.at(0), 'mockLabelKey')
+      assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle'))
+    })
+
+    it('should call this.gasInput with the correct args', () => {
+      const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args
+      assert.deepEqual(gasInputSpyArgs[0], [ { labelKey: 'mockLabelKey', someArg: 'argA' } ])
+    })
+  })
+
+  describe('renderGasEditRows()', () => {
+    let gasEditRows
+    let tempOnChangeGasLimit
+
+    beforeEach(() => {
+      tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit
+      wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit'
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasEditRows = shallow(wrapper.instance().renderGasEditRows(
+        'mockGasPrice',
+        () => 'mockUpdateCustomGasPriceReturn',
+        'mockGasLimit',
+        () => 'mockUpdateCustomGasLimitReturn',
+        false
+      ))
+    })
+
+    afterEach(() => {
+      wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit
+    })
+
+    it('should render the gas-edit-rows root node', () => {
+      assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
+    })
+
+    it('should render two rows', () => {
+      const gasEditRowsChildren = gasEditRows.children()
+      assert.equal(gasEditRowsChildren.length, 2)
+      assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row'))
+      assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should call this.renderGasEditRow twice, with the expected args', () => {
+      const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
+      assert.equal(renderGasEditRowSpyArgs.length, 2)
+      assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [{
+        labelKey: 'gasPrice',
+        value: 'mockGasLimit',
+        onChange: () => 'mockOnChangeGasLimit',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        showGWEI: true,
+      }].map(String))
+      assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [{
+        labelKey: 'gasPrice',
+        value: 'mockGasPrice',
+        onChange: () => 'mockUpdateCustomGasPriceReturn',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        showGWEI: true,
+      }].map(String))
+    })
+  })
+
+  describe('infoButton()', () => {
+    let infoButton
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn'))
+    })
+
+    it('should render the i element', () => {
+      assert(infoButton.hasClass('fa-info-circle'))
+    })
+
+    it('should pass the onClick argument to the i tag onClick prop', () => {
+      assert(infoButton.props().onClick(), 'mockOnClickReturn')
+    })
+  })
+
+  describe('gasInput()', () => {
+    let gasInput
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      AdvancedTabContent.prototype.gasInputError.resetHistory()
+      gasInput = shallow(wrapper.instance().gasInput({
+        labelKey: 'gasPrice',
+        value: 321,
+        onChange: value => value + 7,
+        insufficientBalance: false,
+        showGWEI: true,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+      }))
+    })
+
+    it('should render the input-wrapper root node', () => {
+      assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render two children, including an input', () => {
+      assert.equal(gasInput.children().length, 2)
+      assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
+    })
+
+    it('should call the passed onChange method with the value of the input onChange event', () => {
+      const inputOnChange = gasInput.find('input').props().onChange
+      assert.equal(inputOnChange({ target: { value: 8} }), 15)
+    })
+
+    it('should have two input arrows', () => {
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.length, 1)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.length, 1)
+    })
+
+    it('should call onChange with the value incremented decremented when its onchange method is called', () => {
+      const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0)
+      assert.equal(upArrow.props().onClick(), 329)
+      const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1)
+      assert.equal(downArrow.props().onClick(), 327)
+    })
+
+    it('should call gasInputError with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.gasInputError.callCount, 1)
+      const gasInputErrorArgs = AdvancedTabContent.prototype.gasInputError.getCall(0).args
+      assert.deepEqual(gasInputErrorArgs, [{
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        value: 321,
+        isSpeedUp: false,
+      }])
+    })
+  })
+
+  describe('gasInputError()', () => {
+    let gasInputError
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasInputError = wrapper.instance().gasInputError({
+        labelKey: '',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+      })
+    })
+
+    it('should return an insufficientBalance error', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: true,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+        value: 1,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'insufficientBalance',
+        errorType: 'error',
+      })
+    })
+
+    it('should return a zero gas on retry error', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: false,
+        isSpeedUp: true,
+        value: 0,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'zeroGasPriceOnSpeedUpError',
+        errorType: 'error',
+      })
+    })
+
+    it('should return a low gas warning', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: false,
+        isSpeedUp: false,
+        value: 1,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'gasPriceExtremelyLow',
+        errorType: 'warning',
+      })
+    })
+
+    it('should return isInError false if there is no error', () => {
+      gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        value: 1,
+      })
+      assert.equal(gasInputError.isInError, false)
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
index 61b681e1a..61b681e1a 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
index e2115af7f..e2115af7f 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
new file mode 100644
index 000000000..17f0345d5
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../../../lib/shallow-with-context'
+import TimeRemaining from '../time-remaining.component.js'
+
+describe('TimeRemaining Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<TimeRemaining
+      milliseconds={495000}
+    />)
+  })
+
+  describe('render()', () => {
+    it('should render the time-remaining root node', () => {
+      assert(wrapper.hasClass('time-remaining'))
+    })
+
+    it('should render minutes and seconds numbers and labels', () => {
+      const timeRemainingChildren = wrapper.children()
+      assert.equal(timeRemainingChildren.length, 4)
+      assert.equal(timeRemainingChildren.at(0).text(), 8)
+      assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
+      assert.equal(timeRemainingChildren.at(2).text(), 15)
+      assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
index 826d41f9c..826d41f9c 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
index cf43e0acb..cf43e0acb 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
new file mode 100644
index 000000000..5f3925fa5
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Loading from '../../../../ui/loading-screen'
+import GasPriceButtonGroup from '../../gas-price-button-group'
+
+export default class BasicTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    gasPriceButtonGroupProps: PropTypes.object,
+  }
+
+  render () {
+    const { t } = this.context
+    const { gasPriceButtonGroupProps } = this.props
+
+    return (
+      <div className="basic-tab-content">
+        <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
+        <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
+        {!gasPriceButtonGroupProps.loading
+            ? <GasPriceButtonGroup
+              className="gas-price-button-group--alt"
+              showCheck={true}
+              {...gasPriceButtonGroupProps}
+            />
+            : <Loading />
+        }
+        <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.js
index 078d50fce..078d50fce 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.js
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
index e34e4e328..e34e4e328 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
new file mode 100644
index 000000000..0989ac677
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../../lib/shallow-with-context'
+import BasicTabContent from '../basic-tab-content.component'
+
+import GasPriceButtonGroup from '../../../gas-price-button-group'
+import Loading from '../../../../../ui/loading-screen'
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
+  noButtonActiveByDefault: true,
+  showCheck: true,
+}
+
+describe('BasicTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<BasicTabContent
+      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+    />)
+  })
+
+  describe('render', () => {
+    it('should have a title', () => {
+      assert(wrapper.find('.basic-tab-content').childAt(0).hasClass('basic-tab-content__title'))
+    })
+
+    it('should render a GasPriceButtonGroup compenent', () => {
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
+    })
+
+    it('should pass correct props to GasPriceButtonGroup', () => {
+      const {
+        buttonDataLoading,
+        className,
+        gasButtonInfo,
+        handleGasPriceSelection,
+        noButtonActiveByDefault,
+        showCheck,
+      } = wrapper.find(GasPriceButtonGroup).props()
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
+      assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading)
+      assert.equal(className, mockGasPriceButtonGroupProps.className)
+      assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault)
+      assert.equal(showCheck, mockGasPriceButtonGroupProps.showCheck)
+      assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo)
+      assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection))
+    })
+
+    it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => {
+      wrapper.setProps({
+        gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true },
+      })
+
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 0)
+      assert.equal(wrapper.find(Loading).length, 1)
+    })
+  })
+})
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
new file mode 100644
index 000000000..76edbc334
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainer from '../../../ui/page-container'
+import { Tabs, Tab } from '../../../ui/tabs'
+import AdvancedTabContent from './advanced-tab-content'
+import BasicTabContent from './basic-tab-content'
+
+export default class GasModalPageContainer extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideModal: PropTypes.func,
+    hideBasic: PropTypes.bool,
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    fetchBasicGasAndTimeEstimates: PropTypes.func,
+    fetchGasEstimates: PropTypes.func,
+    gasPriceButtonGroupProps: PropTypes.object,
+    infoRowProps: PropTypes.shape({
+      originalTotalFiat: PropTypes.string,
+      originalTotalEth: PropTypes.string,
+      newTotalFiat: PropTypes.string,
+      newTotalEth: PropTypes.string,
+    }),
+    onSubmit: PropTypes.func,
+    customModalGasPriceInHex: PropTypes.string,
+    customModalGasLimitInHex: PropTypes.string,
+    cancelAndClose: PropTypes.func,
+    transactionFee: PropTypes.string,
+    blockTime: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    customPriceIsSafe: PropTypes.bool,
+    isSpeedUp: PropTypes.bool,
+    disableSave: PropTypes.bool,
+  }
+
+  state = {}
+
+  componentDidMount () {
+    const promise = this.props.hideBasic
+      ? Promise.resolve(this.props.blockTime)
+      : this.props.fetchBasicGasAndTimeEstimates()
+          .then(basicEstimates => basicEstimates.blockTime)
+
+    promise
+      .then(blockTime => {
+        this.props.fetchGasEstimates(blockTime)
+      })
+  }
+
+  renderBasicTabContent (gasPriceButtonGroupProps) {
+    return (
+      <BasicTabContent
+        gasPriceButtonGroupProps={gasPriceButtonGroupProps}
+      />
+    )
+  }
+
+  renderAdvancedTabContent ({
+    convertThenUpdateCustomGasPrice,
+    convertThenUpdateCustomGasLimit,
+    customGasPrice,
+    customGasLimit,
+    newTotalFiat,
+    gasChartProps,
+    currentTimeEstimate,
+    insufficientBalance,
+    gasEstimatesLoading,
+    customPriceIsSafe,
+    isSpeedUp,
+    transactionFee,
+  }) {
+    return (
+      <AdvancedTabContent
+        updateCustomGasPrice={convertThenUpdateCustomGasPrice}
+        updateCustomGasLimit={convertThenUpdateCustomGasLimit}
+        customGasPrice={customGasPrice}
+        customGasLimit={customGasLimit}
+        timeRemaining={currentTimeEstimate}
+        transactionFee={transactionFee}
+        totalFee={newTotalFiat}
+        gasChartProps={gasChartProps}
+        insufficientBalance={insufficientBalance}
+        gasEstimatesLoading={gasEstimatesLoading}
+        customPriceIsSafe={customPriceIsSafe}
+        isSpeedUp={isSpeedUp}
+      />
+    )
+  }
+
+  renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) {
+    return (
+      <div className="gas-modal-content__info-row-wrapper">
+        <div className="gas-modal-content__info-row">
+          <div className="gas-modal-content__info-row__send-info">
+            <span className="gas-modal-content__info-row__send-info__label">{this.context.t('sendAmount')}</span>
+            <span className="gas-modal-content__info-row__send-info__value">{sendAmount}</span>
+          </div>
+          <div className="gas-modal-content__info-row__transaction-info">
+            <span className={'gas-modal-content__info-row__transaction-info__label'}>{this.context.t('transactionFee')}</span>
+            <span className="gas-modal-content__info-row__transaction-info__value">{transactionFee}</span>
+          </div>
+          <div className="gas-modal-content__info-row__total-info">
+            <span className="gas-modal-content__info-row__total-info__label">{this.context.t('newTotal')}</span>
+            <span className="gas-modal-content__info-row__total-info__value">{newTotalEth}</span>
+          </div>
+          <div className="gas-modal-content__info-row__fiat-total-info">
+            <span className="gas-modal-content__info-row__fiat-total-info__value">{newTotalFiat}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderTabs ({
+    originalTotalFiat,
+    originalTotalEth,
+    newTotalFiat,
+    newTotalEth,
+    sendAmount,
+    transactionFee,
+  },
+  {
+    gasPriceButtonGroupProps,
+    hideBasic,
+    ...advancedTabProps
+  }) {
+    let tabsToRender = [
+      { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
+      { name: 'advanced', content: this.renderAdvancedTabContent({ transactionFee, ...advancedTabProps }) },
+    ]
+
+    if (hideBasic) {
+      tabsToRender = tabsToRender.slice(1)
+    }
+
+    return (
+      <Tabs>
+        {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
+            <div className="gas-modal-content">
+              { content }
+              { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
+            </div>
+          </Tab>
+        )}
+      </Tabs>
+    )
+  }
+
+  render () {
+    const {
+      cancelAndClose,
+      infoRowProps,
+      onSubmit,
+      customModalGasPriceInHex,
+      customModalGasLimitInHex,
+      disableSave,
+      ...tabProps
+    } = this.props
+
+    return (
+      <div className="gas-modal-page-container">
+        <PageContainer
+          title={this.context.t('customGas')}
+          subtitle={this.context.t('customGasSubTitle')}
+          tabsComponent={this.renderTabs(infoRowProps, tabProps)}
+          disabled={disableSave}
+          onCancel={() => cancelAndClose()}
+          onClose={() => cancelAndClose()}
+          onSubmit={() => {
+            onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
+          }}
+          submitText={this.context.t('save')}
+          headerCloseText={'Close'}
+          hideCancel={true}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
new file mode 100644
index 000000000..cbc1e3e96
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -0,0 +1,291 @@
+import { connect } from 'react-redux'
+import { pipe, partialRight } from 'ramda'
+import GasModalPageContainer from './gas-modal-page-container.component'
+import {
+  hideModal,
+  setGasLimit,
+  setGasPrice,
+  createSpeedUpTransaction,
+  hideSidebar,
+} from '../../../../store/actions'
+import {
+  setCustomGasPrice,
+  setCustomGasLimit,
+  resetCustomData,
+  setCustomTimeEstimate,
+  fetchGasEstimates,
+  fetchBasicGasAndTimeEstimates,
+} from '../../../../ducks/gas/gas.duck'
+import {
+  hideGasButtonGroup,
+} from '../../../../ducks/send/send.duck'
+import {
+  updateGasAndCalculate,
+} from '../../../../ducks/confirm-transaction/confirm-transaction.duck'
+import {
+  getCurrentCurrency,
+  conversionRateSelector as getConversionRate,
+  getSelectedToken,
+  getCurrentEthBalance,
+} from '../../../../selectors/selectors.js'
+import {
+  formatTimeEstimate,
+  getFastPriceEstimateInHexWEI,
+  getBasicGasEstimateLoadingStatus,
+  getGasEstimatesLoadingStatus,
+  getCustomGasLimit,
+  getCustomGasPrice,
+  getDefaultActiveButtonIndex,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getRenderableBasicEstimateData,
+  getBasicGasEstimateBlockTime,
+  isCustomPriceSafe,
+} from '../../../../selectors/custom-gas'
+import {
+  submittedPendingTransactionsSelector,
+} from '../../../../selectors/transactions'
+import {
+  formatCurrency,
+} from '../../../../helpers/utils/confirm-tx.util'
+import {
+  addHexWEIsToDec,
+  decEthToConvertedCurrency as ethTotalToConvertedCurrency,
+  decGWEIToHexWEI,
+  hexWEIToDecGWEI,
+} from '../../../../helpers/utils/conversions.util'
+import {
+  formatETHFee,
+} from '../../../../helpers/utils/formatters'
+import {
+  calcGasTotal,
+  isBalanceSufficient,
+} from '../../send/send.utils'
+import { addHexPrefix } from 'ethereumjs-util'
+import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
+import {getIsMainnet, preferencesSelector} from '../../../../selectors/selectors'
+
+const mapStateToProps = (state, ownProps) => {
+  const { transaction = {} } = ownProps
+  const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
+  const gasEstimatesLoading = getGasEstimatesLoadingStatus(state)
+
+  const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
+  const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
+  const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
+  const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
+
+  const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
+
+  const gasButtonInfo = getRenderableBasicEstimateData(state, customModalGasLimitInHex)
+
+  const currentCurrency = getCurrentCurrency(state)
+  const conversionRate = getConversionRate(state)
+
+  const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
+
+  const hideBasic = state.appState.modal.modalState.props.hideBasic
+
+  const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
+
+  const gasPrices = getEstimatedGasPrices(state)
+  const estimatedTimes = getEstimatedGasTimes(state)
+  const balance = getCurrentEthBalance(state)
+
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+  const showFiat = Boolean(isMainnet || showFiatInTestnets)
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount: value,
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+
+  return {
+    hideBasic,
+    isConfirm: isConfirm(state),
+    customModalGasPriceInHex,
+    customModalGasLimitInHex,
+    customGasPrice,
+    customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
+    newTotalFiat,
+    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
+    blockTime: getBasicGasEstimateBlockTime(state),
+    customPriceIsSafe: isCustomPriceSafe(state),
+    gasPriceButtonGroupProps: {
+      buttonDataLoading,
+      defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
+      gasButtonInfo,
+    },
+    gasChartProps: {
+      currentPrice: customGasPrice,
+      gasPrices,
+      estimatedTimes,
+      gasPricesMax: gasPrices[gasPrices.length - 1],
+      estimatedTimesMax: estimatedTimes[0],
+    },
+    infoRowProps: {
+      originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
+      originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
+      newTotalFiat: showFiat ? newTotalFiat : '',
+      newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
+      transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
+      sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
+    },
+    isSpeedUp: transaction.status === 'submitted',
+    txId: transaction.id,
+    insufficientBalance,
+    gasEstimatesLoading,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
+
+  return {
+    cancelAndClose: () => {
+      dispatch(resetCustomData())
+      dispatch(hideModal())
+    },
+    hideModal: () => dispatch(hideModal()),
+    updateCustomGasPrice,
+    convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
+    convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
+    setGasData: (newLimit, newPrice) => {
+      dispatch(setGasLimit(newLimit))
+      dispatch(setGasPrice(newPrice))
+    },
+    updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
+      updateCustomGasPrice(gasPrice)
+      dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))))
+      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
+    },
+    createSpeedUpTransaction: (txId, gasPrice) => {
+      return dispatch(createSpeedUpTransaction(txId, gasPrice))
+    },
+    hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
+    setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)),
+    hideSidebar: () => dispatch(hideSidebar()),
+    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
+    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { gasPriceButtonGroupProps, isConfirm, txId, isSpeedUp, insufficientBalance, customGasPrice } = stateProps
+  const {
+    updateCustomGasPrice: dispatchUpdateCustomGasPrice,
+    hideGasButtonGroup: dispatchHideGasButtonGroup,
+    setGasData: dispatchSetGasData,
+    updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
+    createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
+    hideSidebar: dispatchHideSidebar,
+    cancelAndClose: dispatchCancelAndClose,
+    hideModal: dispatchHideModal,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    onSubmit: (gasLimit, gasPrice) => {
+      if (isConfirm) {
+        dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice)
+        dispatchHideModal()
+      } else if (isSpeedUp) {
+        dispatchCreateSpeedUpTransaction(txId, gasPrice)
+        dispatchHideSidebar()
+        dispatchCancelAndClose()
+      } else {
+        dispatchSetGasData(gasLimit, gasPrice)
+        dispatchHideGasButtonGroup()
+        dispatchCancelAndClose()
+      }
+    },
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchUpdateCustomGasPrice,
+    },
+    cancelAndClose: () => {
+      dispatchCancelAndClose()
+      if (isSpeedUp) {
+        dispatchHideSidebar()
+      }
+    },
+    disableSave: insufficientBalance || (isSpeedUp && customGasPrice === 0),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer)
+
+function isConfirm (state) {
+  return Boolean(Object.keys(state.confirmTransaction.txData).length)
+}
+
+function calcCustomGasPrice (customGasPriceInHex) {
+  return Number(hexWEIToDecGWEI(customGasPriceInHex))
+}
+
+function calcCustomGasLimit (customGasLimitInHex) {
+  return parseInt(customGasLimitInHex, 16)
+}
+
+function getTxParams (state, transactionId) {
+  const { confirmTransaction: { txData }, metamask: { send } } = state
+  const pendingTransactions = submittedPendingTransactionsSelector(state)
+  const pendingTransaction = pendingTransactions.find(({ id }) => id === transactionId)
+  const { txParams: pendingTxParams } = pendingTransaction || {}
+  return txData.txParams || pendingTxParams || {
+    from: send.from,
+    gas: send.gasLimit || '0x5208',
+    gasPrice: send.gasPrice || getFastPriceEstimateInHexWEI(state, true),
+    to: send.to,
+    value: getSelectedToken(state) ? '0x0' : send.amount,
+  }
+}
+
+function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
+  return pipe(
+    addHexWEIsToDec,
+    formatETHFee
+  )(aHexWEI, bHexWEI)
+}
+
+function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
+  return pipe(
+    addHexWEIsToDec,
+    partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]),
+    partialRight(formatCurrency, [convertedCurrency]),
+  )(aHexWEI, bHexWEI)
+}
+
+function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
+  const minGasPrice = gasPrices[0]
+  const maxGasPrice = gasPrices[gasPrices.length - 1]
+  let priceForEstimation = currentGasPrice
+  if (currentGasPrice < minGasPrice) {
+    priceForEstimation = minGasPrice
+  } else if (currentGasPrice > maxGasPrice) {
+    priceForEstimation = maxGasPrice
+  }
+
+  const {
+    closestLowerValueIndex,
+    closestHigherValueIndex,
+    closestHigherValue,
+    closestLowerValue,
+  } = getAdjacentGasPrices({ gasPrices, priceToPosition: priceForEstimation })
+
+  const newTimeEstimate = extrapolateY({
+    higherY: estimatedTimes[closestHigherValueIndex],
+    lowerY: estimatedTimes[closestLowerValueIndex],
+    higherX: closestHigherValue,
+    lowerX: closestLowerValue,
+    xForExtrapolation: priceForEstimation,
+  })
+
+  return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice)
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/index.js
index ec0ebad22..ec0ebad22 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/index.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.js
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
index b9e0f59c4..b9e0f59c4 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
new file mode 100644
index 000000000..7557eefe5
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
@@ -0,0 +1,274 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import GasModalPageContainer from '../gas-modal-page-container.component.js'
+import timeout from '../../../../../../lib/test-timeout'
+
+import PageContainer from '../../../../ui/page-container'
+
+import { Tab } from '../../../../ui/tabs'
+
+const mockBasicGasEstimates = {
+  blockTime: 'mockBlockTime',
+}
+
+const propsMethodSpies = {
+  cancelAndClose: sinon.spy(),
+  onSubmit: sinon.spy(),
+  fetchBasicGasAndTimeEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
+  fetchGasEstimates: sinon.spy(),
+}
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: 'mockSelectionFunction',
+  noButtonActiveByDefault: true,
+  showCheck: true,
+  newTotalFiat: 'mockNewTotalFiat',
+  newTotalEth: 'mockNewTotalEth',
+}
+const mockInfoRowProps = {
+  originalTotalFiat: 'mockOriginalTotalFiat',
+  originalTotalEth: 'mockOriginalTotalEth',
+  newTotalFiat: 'mockNewTotalFiat',
+  newTotalEth: 'mockNewTotalEth',
+  sendAmount: 'mockSendAmount',
+  transactionFee: 'mockTransactionFee',
+}
+
+const GP = GasModalPageContainer.prototype
+describe('GasModalPageContainer Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasModalPageContainer
+      cancelAndClose={propsMethodSpies.cancelAndClose}
+      onSubmit={propsMethodSpies.onSubmit}
+      fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
+      updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
+      customGasPrice={21}
+      customGasLimit={54321}
+      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+      infoRowProps={mockInfoRowProps}
+      currentTimeEstimate={'1 min 31 sec'}
+      customGasPriceInHex={'mockCustomGasPriceInHex'}
+      customGasLimitInHex={'mockCustomGasLimitInHex'}
+      insufficientBalance={false}
+      disableSave={false}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.cancelAndClose.resetHistory()
+  })
+
+  describe('componentDidMount', () => {
+    it('should call props.fetchBasicGasAndTimeEstimates', () => {
+      propsMethodSpies.fetchBasicGasAndTimeEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 1)
+    })
+
+    it('should call props.fetchGasEstimates with the block time returned by fetchBasicGasAndTimeEstimates', async () => {
+      propsMethodSpies.fetchGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      await timeout(250)
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
+      assert.equal(propsMethodSpies.fetchGasEstimates.getCall(0).args[0], 'mockBlockTime')
+    })
+  })
+
+  describe('render', () => {
+    it('should render a PageContainer compenent', () => {
+      assert.equal(wrapper.find(PageContainer).length, 1)
+    })
+
+    it('should pass correct props to PageContainer', () => {
+      const {
+        title,
+        subtitle,
+        disabled,
+      } = wrapper.find(PageContainer).props()
+      assert.equal(title, 'customGas')
+      assert.equal(subtitle, 'customGasSubTitle')
+      assert.equal(disabled, false)
+    })
+
+    it('should pass the correct onCancel and onClose methods to PageContainer', () => {
+      const {
+        onCancel,
+        onClose,
+      } = wrapper.find(PageContainer).props()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 0)
+      onCancel()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 1)
+      onClose()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 2)
+    })
+
+    it('should pass the correct renderTabs property to PageContainer', () => {
+      sinon.stub(GP, 'renderTabs').returns('mockTabs')
+      const renderTabsWrapperTester = shallow(<GasModalPageContainer
+        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+      const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
+      assert.equal(tabsComponent, 'mockTabs')
+      GasModalPageContainer.prototype.renderTabs.restore()
+    })
+  })
+
+  describe('renderTabs', () => {
+    beforeEach(() => {
+      sinon.spy(GP, 'renderBasicTabContent')
+      sinon.spy(GP, 'renderAdvancedTabContent')
+      sinon.spy(GP, 'renderInfoRows')
+    })
+
+    afterEach(() => {
+      GP.renderBasicTabContent.restore()
+      GP.renderAdvancedTabContent.restore()
+      GP.renderInfoRows.restore()
+    })
+
+    it('should render a Tabs component with "Basic" and "Advanced" tabs', () => {
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+      })
+      const renderedTabs = shallow(renderTabsResult)
+      assert.equal(renderedTabs.props().className, 'tabs')
+
+      const tabs = renderedTabs.find(Tab)
+      assert.equal(tabs.length, 2)
+
+      assert.equal(tabs.at(0).props().name, 'basic')
+      assert.equal(tabs.at(1).props().name, 'advanced')
+
+      assert.equal(tabs.at(0).childAt(0).props().className, 'gas-modal-content')
+      assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content')
+    })
+
+    it('should call renderBasicTabContent and renderAdvancedTabContent with the expected props', () => {
+      assert.equal(GP.renderBasicTabContent.callCount, 0)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 0)
+
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
+
+      assert.equal(GP.renderBasicTabContent.callCount, 1)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 1)
+
+      assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
+      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { transactionFee: 'mockTransactionFee', otherProps: 'mockAdvancedTabProps' })
+    })
+
+    it('should call renderInfoRows with the expected props', () => {
+      assert.equal(GP.renderInfoRows.callCount, 0)
+
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
+
+      assert.equal(GP.renderInfoRows.callCount, 2)
+
+      assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
+      assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
+    })
+
+    it('should not render the basic tab if hideBasic is true', () => {
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+        hideBasic: true,
+      })
+
+      const renderedTabs = shallow(renderTabsResult)
+      const tabs = renderedTabs.find(Tab)
+      assert.equal(tabs.length, 1)
+      assert.equal(tabs.at(0).props().name, 'advanced')
+    })
+  })
+
+  describe('renderBasicTabContent', () => {
+    it('should render', () => {
+      const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps)
+
+      assert.deepEqual(
+        renderBasicTabContentResult.props.gasPriceButtonGroupProps,
+        mockGasPriceButtonGroupProps
+      )
+    })
+  })
+
+  describe('renderAdvancedTabContent', () => {
+    it('should render with the correct props', () => {
+      const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({
+        convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice',
+        convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit',
+        customGasPrice: 123,
+        customGasLimit: 456,
+        newTotalFiat: '$0.30',
+        currentTimeEstimate: '1 min 31 sec',
+        gasEstimatesLoading: 'mockGasEstimatesLoading',
+      })
+      const advancedTabContentProps = renderAdvancedTabContentResult.props
+      assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
+      assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit')
+      assert.equal(advancedTabContentProps.customGasPrice, 123)
+      assert.equal(advancedTabContentProps.customGasLimit, 456)
+      assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec')
+      assert.equal(advancedTabContentProps.totalFee, '$0.30')
+      assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading')
+    })
+  })
+
+  describe('renderInfoRows', () => {
+    it('should render the info rows with the passed data', () => {
+      const baseClassName = 'gas-modal-content__info-row'
+      const renderedInfoRowsContainer = shallow(wrapper.instance().renderInfoRows(
+        'mockNewTotalFiat',
+        ' mockNewTotalEth',
+        ' mockSendAmount',
+        ' mockTransactionFee'
+      ))
+
+      assert(renderedInfoRowsContainer.childAt(0).hasClass(baseClassName))
+
+      const renderedInfoRows = renderedInfoRowsContainer.childAt(0).children()
+      assert.equal(renderedInfoRows.length, 4)
+      assert(renderedInfoRows.at(0).hasClass(`${baseClassName}__send-info`))
+      assert(renderedInfoRows.at(1).hasClass(`${baseClassName}__transaction-info`))
+      assert(renderedInfoRows.at(2).hasClass(`${baseClassName}__total-info`))
+      assert(renderedInfoRows.at(3).hasClass(`${baseClassName}__fiat-total-info`))
+
+      assert.equal(renderedInfoRows.at(0).text(), 'sendAmount mockSendAmount')
+      assert.equal(renderedInfoRows.at(1).text(), 'transactionFee mockTransactionFee')
+      assert.equal(renderedInfoRows.at(2).text(), 'newTotal mockNewTotalEth')
+      assert.equal(renderedInfoRows.at(3).text(), 'mockNewTotalFiat')
+    })
+  })
+})
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
new file mode 100644
index 000000000..aaa4f1c41
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -0,0 +1,425 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+let mergeProps
+
+const actionSpies = {
+  hideModal: sinon.spy(),
+  setGasLimit: sinon.spy(),
+  setGasPrice: sinon.spy(),
+}
+
+const gasActionSpies = {
+  setCustomGasPrice: sinon.spy(),
+  setCustomGasLimit: sinon.spy(),
+  resetCustomData: sinon.spy(),
+}
+
+const confirmTransactionActionSpies = {
+  updateGasAndCalculate: sinon.spy(),
+}
+
+const sendActionSpies = {
+  hideGasButtonGroup: sinon.spy(),
+}
+
+proxyquire('../gas-modal-page-container.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+  '../../../../selectors/custom-gas': {
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`,
+    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
+    getDefaultActiveButtonIndex: (a, b) => a + b,
+  },
+  '../../../../store/actions': actionSpies,
+  '../../../../ducks/gas/gas.duck': gasActionSpies,
+  '../../../../ducks/confirm-transaction/confirm-transaction.duck': confirmTransactionActionSpies,
+  '../../../../ducks/send/send.duck': sendActionSpies,
+  '../../../../selectors/selectors.js': {
+    getCurrentEthBalance: (state) => state.metamask.balance || '0x0',
+  },
+})
+
+describe('gas-modal-page-container container', () => {
+
+  describe('mapStateToProps()', () => {
+    it('should map the correct properties to props', () => {
+      const baseMockState = {
+        appState: {
+          modal: {
+            modalState: {
+              props: {
+                hideBasic: true,
+              },
+            },
+          },
+        },
+        metamask: {
+          send: {
+            gasLimit: '16',
+            gasPrice: '32',
+            amount: '64',
+          },
+          currentCurrency: 'abc',
+          conversionRate: 50,
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
+          },
+        },
+        gas: {
+          basicEstimates: {
+            blockTime: 12,
+            safeLow: 2,
+          },
+          customData: {
+            limit: 'aaaaaaaa',
+            price: 'ffffffff',
+          },
+          gasEstimatesLoading: false,
+          priceAndTimeEstimates: [
+            { gasprice: 3, expectedTime: 31 },
+            { gasprice: 4, expectedTime: 62 },
+            { gasprice: 5, expectedTime: 93 },
+            { gasprice: 6, expectedTime: 124 },
+          ],
+        },
+        confirmTransaction: {
+          txData: {
+            txParams: {
+              gas: '0x1600000',
+              gasPrice: '0x3200000',
+              value: '0x640000000000000',
+            },
+          },
+        },
+      }
+      const baseExpectedResult = {
+        isConfirm: true,
+        customGasPrice: 4.294967295,
+        customGasLimit: 2863311530,
+        currentTimeEstimate: '~1 min 11 sec',
+        newTotalFiat: '637.41',
+        blockTime: 12,
+        customModalGasLimitInHex: 'aaaaaaaa',
+        customModalGasPriceInHex: 'ffffffff',
+        customPriceIsSafe: true,
+        gasChartProps: {
+          'currentPrice': 4.294967295,
+          estimatedTimes: [31, 62, 93, 124],
+          estimatedTimesMax: '31',
+          gasPrices: [3, 4, 5, 6],
+          gasPricesMax: 6,
+        },
+        gasPriceButtonGroupProps: {
+          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',
+          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff',
+          gasButtonInfo: 'mockRenderableBasicEstimateData:4',
+        },
+        gasEstimatesLoading: false,
+        hideBasic: true,
+        infoRowProps: {
+          originalTotalFiat: '637.41',
+          originalTotalEth: '12.748189 ETH',
+          newTotalFiat: '637.41',
+          newTotalEth: '12.748189 ETH',
+          sendAmount: '0.45036 ETH',
+          transactionFee: '12.297829 ETH',
+        },
+        insufficientBalance: true,
+        isSpeedUp: false,
+        txId: 34,
+      }
+      const baseMockOwnProps = { transaction: { id: 34 } }
+      const tests = [
+        { mockState: baseMockState, expectedResult: baseExpectedResult, mockOwnProps: baseMockOwnProps },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: { ...baseMockState.metamask, balance: '0xfffffffffffffffffffff' },
+          }),
+          expectedResult: Object.assign({}, baseExpectedResult, { insufficientBalance: false }),
+          mockOwnProps: baseMockOwnProps,
+        },
+        {
+          mockState: baseMockState,
+          mockOwnProps: Object.assign({}, baseMockOwnProps, {
+            transaction: { id: 34, status: 'submitted' },
+          }),
+          expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }),
+        },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: false,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'rinkeby',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: {
+            ...baseExpectedResult,
+            infoRowProps: {
+              ...baseExpectedResult.infoRowProps,
+              newTotalFiat: '',
+            },
+          },
+        },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: true,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'rinkeby',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: baseExpectedResult,
+        },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: true,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'mainnet',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: baseExpectedResult,
+        },
+      ]
+
+      let result
+      tests.forEach(({ mockState, mockOwnProps, expectedResult}) => {
+        result = mapStateToProps(mockState, mockOwnProps)
+        assert.deepEqual(result, expectedResult)
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    afterEach(() => {
+      actionSpies.hideModal.resetHistory()
+      gasActionSpies.setCustomGasPrice.resetHistory()
+      gasActionSpies.setCustomGasLimit.resetHistory()
+    })
+
+    describe('hideGasButtonGroup()', () => {
+      it('should dispatch a hideGasButtonGroup action', () => {
+        mapDispatchToPropsObject.hideGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendActionSpies.hideGasButtonGroup.calledOnce)
+      })
+    })
+
+    describe('cancelAndClose()', () => {
+      it('should dispatch a hideModal action', () => {
+        mapDispatchToPropsObject.cancelAndClose()
+        assert(dispatchSpy.calledTwice)
+        assert(actionSpies.hideModal.calledOnce)
+        assert(gasActionSpies.resetCustomData.calledOnce)
+      })
+    })
+
+    describe('updateCustomGasPrice()', () => {
+      it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => {
+        mapDispatchToPropsObject.updateCustomGasPrice('ffff')
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff')
+      })
+    })
+
+    describe('convertThenUpdateCustomGasPrice()', () => {
+      it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff')
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0x3b9a8e653600')
+      })
+    })
+
+
+    describe('convertThenUpdateCustomGasLimit()', () => {
+      it('should dispatch a setCustomGasLimit action with the arg passed to convertThenUpdateCustomGasLimit converted to hex', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasLimit(16)
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasLimit.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasLimit.getCall(0).args[0], '0x10')
+      })
+    })
+
+    describe('setGasData()', () => {
+      it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
+        mapDispatchToPropsObject.setGasData('ffff', 'aaaa')
+        assert(dispatchSpy.calledTwice)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert(actionSpies.setGasLimit.calledOnce)
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'ffff')
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'aaaa')
+      })
+    })
+
+    describe('updateConfirmTxGasAndCalculate()', () => {
+      it('should dispatch a updateGasAndCalculate action with the correct props', () => {
+        mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
+        assert.equal(dispatchSpy.callCount, 3)
+        assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
+        assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
+      })
+    })
+
+  })
+
+  describe('mergeProps', () => {
+      let stateProps
+      let dispatchProps
+      let ownProps
+
+      beforeEach(() => {
+        stateProps = {
+          gasPriceButtonGroupProps: {
+            someGasPriceButtonGroupProp: 'foo',
+            anotherGasPriceButtonGroupProp: 'bar',
+          },
+          isConfirm: true,
+          someOtherStateProp: 'baz',
+        }
+        dispatchProps = {
+          updateCustomGasPrice: sinon.spy(),
+          hideGasButtonGroup: sinon.spy(),
+          setGasData: sinon.spy(),
+          updateConfirmTxGasAndCalculate: sinon.spy(),
+          someOtherDispatchProp: sinon.spy(),
+          createSpeedUpTransaction: sinon.spy(),
+          hideSidebar: sinon.spy(),
+          hideModal: sinon.spy(),
+          cancelAndClose: sinon.spy(),
+        }
+        ownProps = { someOwnProp: 123 }
+      })
+
+      afterEach(() => {
+        dispatchProps.updateCustomGasPrice.resetHistory()
+        dispatchProps.hideGasButtonGroup.resetHistory()
+        dispatchProps.setGasData.resetHistory()
+        dispatchProps.updateConfirmTxGasAndCalculate.resetHistory()
+        dispatchProps.someOtherDispatchProp.resetHistory()
+        dispatchProps.createSpeedUpTransaction.resetHistory()
+        dispatchProps.hideSidebar.resetHistory()
+        dispatchProps.hideModal.resetHistory()
+      })
+    it('should return the expected props when isConfirm is true', () => {
+      const result = mergeProps(stateProps, dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, true)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 0)
+
+      result.onSubmit()
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 1)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+
+    it('should return the expected props when isConfirm is false', () => {
+      const result = mergeProps(Object.assign({}, stateProps, { isConfirm: false }), dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, false)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 0)
+
+      result.onSubmit('mockNewLimit', 'mockNewPrice')
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 1)
+      assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice'])
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+
+    it('should dispatch the expected actions from obSubmit when isConfirm is false and isSpeedUp is true', () => {
+      const result = mergeProps(Object.assign({}, stateProps, { isSpeedUp: true, isConfirm: false }), dispatchProps, ownProps)
+
+      result.onSubmit()
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
+
+      assert.equal(dispatchProps.createSpeedUpTransaction.callCount, 1)
+      assert.equal(dispatchProps.hideSidebar.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js
new file mode 100644
index 000000000..0456f5262
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ButtonGroup from '../../../ui/button-group'
+import Button from '../../../ui/button'
+
+const GAS_OBJECT_PROPTYPES_SHAPE = {
+  label: PropTypes.string,
+  feeInPrimaryCurrency: PropTypes.string,
+  feeInSecondaryCurrency: PropTypes.string,
+  timeEstimate: PropTypes.string,
+  priceInHexWei: PropTypes.string,
+}
+
+export default class GasPriceButtonGroup extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    buttonDataLoading: PropTypes.bool,
+    className: PropTypes.string,
+    defaultActiveButtonIndex: PropTypes.number,
+    gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
+    handleGasPriceSelection: PropTypes.func,
+    newActiveButtonIndex: PropTypes.number,
+    noButtonActiveByDefault: PropTypes.bool,
+    showCheck: PropTypes.bool,
+  }
+
+  renderButtonContent ({
+    labelKey,
+    feeInPrimaryCurrency,
+    feeInSecondaryCurrency,
+    timeEstimate,
+  }, {
+    className,
+    showCheck,
+  }) {
+    return (<div>
+      { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
+      { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
+      { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
+      { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
+      { showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
+    </div>)
+  }
+
+  renderButton ({
+    priceInHexWei,
+    ...renderableGasInfo
+  }, {
+    buttonDataLoading,
+    handleGasPriceSelection,
+    ...buttonContentPropsAndFlags
+  }, index) {
+    return (
+      <Button
+        onClick={() => handleGasPriceSelection(priceInHexWei)}
+        key={`gas-price-button-${index}`}
+      >
+        {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
+      </Button>
+    )
+  }
+
+  render () {
+    const {
+      gasButtonInfo,
+      defaultActiveButtonIndex = 1,
+      newActiveButtonIndex,
+      noButtonActiveByDefault = false,
+      buttonDataLoading,
+      ...buttonPropsAndFlags
+    } = this.props
+
+    return (
+      !buttonDataLoading
+        ? <ButtonGroup
+          className={buttonPropsAndFlags.className}
+          defaultActiveButtonIndex={defaultActiveButtonIndex}
+          newActiveButtonIndex={newActiveButtonIndex}
+          noButtonActiveByDefault={noButtonActiveByDefault}
+        >
+          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
+        </ButtonGroup>
+        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.js b/ui/app/components/app/gas-customization/gas-price-button-group/index.js
index 775648330..775648330 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/index.js
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.js
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
index cb2f3ecf1..cb2f3ecf1 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js b/ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
new file mode 100644
index 000000000..37840a8a5
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
@@ -0,0 +1,233 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import GasPriceButtonGroup from '../gas-price-button-group.component'
+
+import ButtonGroup from '../../../../ui/button-group'
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: sinon.spy(),
+  noButtonActiveByDefault: true,
+  defaultActiveButtonIndex: 2,
+  showCheck: true,
+}
+
+const mockButtonPropsAndFlags = Object.assign({}, {
+  className: mockGasPriceButtonGroupProps.className,
+  handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
+  showCheck: mockGasPriceButtonGroupProps.showCheck,
+})
+
+sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
+sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
+
+describe('GasPriceButtonGroup Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasPriceButtonGroup
+      {...mockGasPriceButtonGroupProps}
+    />)
+  })
+
+  afterEach(() => {
+    GasPriceButtonGroup.prototype.renderButton.resetHistory()
+    GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
+    mockGasPriceButtonGroupProps.handleGasPriceSelection.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a ButtonGroup', () => {
+      assert(wrapper.is(ButtonGroup))
+    })
+
+    it('should render the correct props on the ButtonGroup', () => {
+      const {
+        className,
+        defaultActiveButtonIndex,
+        noButtonActiveByDefault,
+      } = wrapper.props()
+      assert.equal(className, 'gas-price-button-group')
+      assert.equal(defaultActiveButtonIndex, 2)
+      assert.equal(noButtonActiveByDefault, true)
+    })
+
+    function renderButtonArgsTest (i, mockButtonPropsAndFlags) {
+      assert.deepEqual(
+        GasPriceButtonGroup.prototype.renderButton.getCall(i).args,
+        [
+          Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[i]),
+          mockButtonPropsAndFlags,
+          i,
+        ]
+      )
+    }
+
+    it('should call this.renderButton 3 times, with the correct args', () => {
+      assert.equal(GasPriceButtonGroup.prototype.renderButton.callCount, 3)
+      renderButtonArgsTest(0, mockButtonPropsAndFlags)
+      renderButtonArgsTest(1, mockButtonPropsAndFlags)
+      renderButtonArgsTest(2, mockButtonPropsAndFlags)
+    })
+
+    it('should show loading if buttonDataLoading', () => {
+      wrapper.setProps({ buttonDataLoading: true })
+      assert(wrapper.is('div'))
+      assert(wrapper.hasClass('gas-price-button-group__loading-container'))
+      assert.equal(wrapper.text(), 'loading')
+    })
+  })
+
+  describe('renderButton', () => {
+    let wrappedRenderButtonResult
+
+    beforeEach(() => {
+      GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
+      const renderButtonResult = GasPriceButtonGroup.prototype.renderButton(
+        Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[0]),
+        mockButtonPropsAndFlags
+      )
+      wrappedRenderButtonResult = shallow(renderButtonResult)
+    })
+
+    it('should render a button', () => {
+      assert.equal(wrappedRenderButtonResult.type(), 'button')
+    })
+
+    it('should call the correct method when clicked', () => {
+      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 0)
+      wrappedRenderButtonResult.props().onClick()
+      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 1)
+      assert.deepEqual(
+        mockGasPriceButtonGroupProps.handleGasPriceSelection.getCall(0).args,
+        [mockGasPriceButtonGroupProps.gasButtonInfo[0].priceInHexWei]
+      )
+    })
+
+    it('should call this.renderButtonContent with the correct args', () => {
+      assert.equal(GasPriceButtonGroup.prototype.renderButtonContent.callCount, 1)
+      const {
+        feeInPrimaryCurrency,
+        feeInSecondaryCurrency,
+        timeEstimate,
+      } = mockGasPriceButtonGroupProps.gasButtonInfo[0]
+      const {
+        showCheck,
+        className,
+      } = mockGasPriceButtonGroupProps
+      assert.deepEqual(
+        GasPriceButtonGroup.prototype.renderButtonContent.getCall(0).args,
+        [
+          {
+            feeInPrimaryCurrency,
+            feeInSecondaryCurrency,
+            timeEstimate,
+          },
+          {
+            showCheck,
+            className,
+          },
+        ]
+      )
+    })
+  })
+
+  describe('renderButtonContent', () => {
+    it('should render a label if passed a labelKey', () => {
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabelKey',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabelKey')
+    })
+
+    it('should render a feeInPrimaryCurrency if passed a feeInPrimaryCurrency', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__primary-currency').text(), 'mockFeeInPrimaryCurrency')
+    })
+
+    it('should render a feeInSecondaryCurrency if passed a feeInSecondaryCurrency', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__secondary-currency').text(), 'mockFeeInSecondaryCurrency')
+    })
+
+    it('should render a timeEstimate if passed a timeEstimate', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        timeEstimate: 'mockTimeEstimate',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__time-estimate').text(), 'mockTimeEstimate')
+    })
+
+    it('should render a check if showCheck is true', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {
+        className: 'someClass',
+        showCheck: true,
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.find('.fa-check').length, 1)
+    })
+
+    it('should render all elements if all args passed', () => {
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabel',
+        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
+        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
+        timeEstimate: 'mockTimeEstimate',
+      }, {
+        className: 'someClass',
+        showCheck: true,
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.children().length, 5)
+    })
+
+
+    it('should render no elements if all args passed', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {})
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.children().length, 0)
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.component.js
index c0eaf4852..c0eaf4852 100644
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
+++ b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.component.js
diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js
index f19dafcc1..f19dafcc1 100644
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
+++ b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.js b/ui/app/components/app/gas-customization/gas-price-chart/index.js
index 9895acb62..9895acb62 100644
--- a/ui/app/components/gas-customization/gas-price-chart/index.js
+++ b/ui/app/components/app/gas-customization/gas-price-chart/index.js
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/app/gas-customization/gas-price-chart/index.scss
index 097543104..097543104 100644
--- a/ui/app/components/gas-customization/gas-price-chart/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-chart/index.scss
diff --git a/ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
new file mode 100644
index 000000000..7dec7a85f
--- /dev/null
+++ b/ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -0,0 +1,218 @@
+import React from 'react'
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+import shallow from '../../../../../../lib/shallow-with-context'
+import * as d3 from 'd3'
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const propsMethodSpies = {
+  updateCustomGasPrice: sinon.spy(),
+}
+
+const selectReturnSpies = {
+  empty: sinon.spy(),
+  remove: sinon.spy(),
+  style: sinon.spy(),
+  select: d3.select,
+  attr: sinon.spy(),
+  on: sinon.spy(),
+  datum: sinon.stub().returns({ x: 'mockX' }),
+}
+
+const mockSelectReturn = {
+  ...d3.select('div'),
+  node: () => ({
+    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
+  }),
+  ...selectReturnSpies,
+}
+
+const gasPriceChartUtilsSpies = {
+  appendOrUpdateCircle: sinon.spy(),
+  generateChart: sinon.stub().returns({ mockChart: true }),
+  generateDataUIObj: sinon.spy(),
+  getAdjacentGasPrices: sinon.spy(),
+  getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }),
+  getNewXandTimeEstimate: sinon.spy(),
+  handleChartUpdate: sinon.spy(),
+  hideDataUI: sinon.spy(),
+  setSelectedCircle: sinon.spy(),
+  setTickPosition: sinon.spy(),
+  handleMouseMove: sinon.spy(),
+}
+
+const testProps = {
+  gasPrices: [1.5, 2.5, 4, 8],
+  estimatedTimes: [100, 80, 40, 10],
+  gasPricesMax: 9,
+  estimatedTimesMax: '100',
+  currentPrice: 6,
+  updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
+}
+
+const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+  './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
+  'd3': {
+    ...d3,
+    select: function (...args) {
+      const result = d3.select(...args)
+      return result.empty()
+        ? mockSelectReturn
+        : result
+    },
+    event: {
+      clientX: 'mockClientX',
+    },
+  },
+}).default
+
+sinon.spy(GasPriceChart.prototype, 'renderChart')
+
+describe('GasPriceChart Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasPriceChart {...testProps} />)
+  })
+
+  describe('render()', () => {
+    it('should render', () => {
+      assert(wrapper.hasClass('gas-price-chart'))
+    })
+
+    it('should render the chart div', () => {
+      assert(wrapper.childAt(0).hasClass('gas-price-chart__root'))
+      assert.equal(wrapper.childAt(0).props().id, 'chart')
+    })
+  })
+
+  describe('componentDidMount', () => {
+    it('should call this.renderChart with the components props', () => {
+      assert(GasPriceChart.prototype.renderChart.callCount, 1)
+      wrapper.instance().componentDidMount()
+      assert(GasPriceChart.prototype.renderChart.callCount, 2)
+      assert.deepEqual(GasPriceChart.prototype.renderChart.getCall(1).args, [{...testProps}])
+    })
+  })
+
+  describe('componentDidUpdate', () => {
+    it('should call handleChartUpdate if props.currentPrice has changed', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
+      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 1)
+    })
+
+    it('should call handleChartUpdate with the correct props', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
+      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
+        chart: { mockChart: true },
+        gasPrices: [1.5, 2.5, 4, 8],
+        newPrice: 6,
+        cssId: '#set-circle',
+      }])
+    })
+
+    it('should not call handleChartUpdate if props.currentPrice has not changed', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 6 })
+      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 0)
+    })
+  })
+
+  describe('renderChart', () => {
+    it('should call setTickPosition 4 times, with the expected props', async () => {
+      await timeout(0)
+      gasPriceChartUtilsSpies.setTickPosition.resetHistory()
+      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 0)
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4)
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8])
+    })
+
+    it('should call handleChartUpdate with the correct props', async () => {
+      await timeout(0)
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
+        chart: { mockChart: true },
+        gasPrices: [1.5, 2.5, 4, 8],
+        newPrice: 6,
+        cssId: '#set-circle',
+      }])
+    })
+
+    it('should add three events to the chart', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      assert.equal(selectReturnSpies.on.callCount, 0)
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.equal(selectReturnSpies.on.callCount, 3)
+
+      const firstOnEventArgs = selectReturnSpies.on.getCall(0).args
+      assert.equal(firstOnEventArgs[0], 'mouseout')
+      const secondOnEventArgs = selectReturnSpies.on.getCall(1).args
+      assert.equal(secondOnEventArgs[0], 'click')
+      const thirdOnEventArgs = selectReturnSpies.on.getCall(2).args
+      assert.equal(thirdOnEventArgs[0], 'mousemove')
+    })
+
+    it('should hide the data UI on mouseout', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      gasPriceChartUtilsSpies.hideDataUI.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(0).args
+      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 1)
+      assert.deepEqual(gasPriceChartUtilsSpies.hideDataUI.getCall(0).args, [{ mockChart: true }, '#overlayed-circle'])
+    })
+
+    it('should updateCustomGasPrice on click', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      propsMethodSpies.updateCustomGasPrice.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(1).args
+      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 1)
+      assert.equal(propsMethodSpies.updateCustomGasPrice.getCall(0).args[0], 'mockX')
+    })
+
+    it('should handle mousemove', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      gasPriceChartUtilsSpies.handleMouseMove.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(2).args
+      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 1)
+      assert.deepEqual(gasPriceChartUtilsSpies.handleMouseMove.getCall(0).args, [{
+        xMousePos: 'mockClientX',
+        chartXStart: 'mockCoordinateX',
+        chartWidth: 'mockWidth',
+        gasPrices: testProps.gasPrices,
+        estimatedTimes: testProps.estimatedTimes,
+        chart: { mockChart: true },
+      }])
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-slider/gas-slider.component.js b/ui/app/components/app/gas-customization/gas-slider/gas-slider.component.js
index 5836e7dfc..5836e7dfc 100644
--- a/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
+++ b/ui/app/components/app/gas-customization/gas-slider/gas-slider.component.js
diff --git a/ui/app/components/gas-customization/gas-slider/index.js b/ui/app/components/app/gas-customization/gas-slider/index.js
index f1752c93f..f1752c93f 100644
--- a/ui/app/components/gas-customization/gas-slider/index.js
+++ b/ui/app/components/app/gas-customization/gas-slider/index.js
diff --git a/ui/app/components/gas-customization/gas-slider/index.scss b/ui/app/components/app/gas-customization/gas-slider/index.scss
index e6c734367..e6c734367 100644
--- a/ui/app/components/gas-customization/gas-slider/index.scss
+++ b/ui/app/components/app/gas-customization/gas-slider/index.scss
diff --git a/ui/app/components/gas-customization/gas.selectors.js b/ui/app/components/app/gas-customization/gas.selectors.js
index 89374b5f1..89374b5f1 100644
--- a/ui/app/components/gas-customization/gas.selectors.js
+++ b/ui/app/components/app/gas-customization/gas.selectors.js
diff --git a/ui/app/components/gas-customization/index.scss b/ui/app/components/app/gas-customization/index.scss
index b06c1d044..b06c1d044 100644
--- a/ui/app/components/gas-customization/index.scss
+++ b/ui/app/components/app/gas-customization/index.scss
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
new file mode 100644
index 000000000..e9bb4ac9f
--- /dev/null
+++ b/ui/app/components/app/index.scss
@@ -0,0 +1,81 @@
+@import 'account-menu/index';
+
+@import 'add-token-button/index';
+
+@import 'app-header/index';
+
+@import '../ui/breadcrumbs/index';
+
+@import '../ui/button-group/index';
+
+@import '../ui/card/index';
+
+@import 'confirm-page-container/index';
+
+@import '../ui/currency-input/index';
+
+@import '../ui/currency-display/index';
+
+@import '../ui/error-message/index';
+
+@import '../ui/export-text-container/index';
+
+@import '../ui/identicon/index';
+
+@import 'info-box/index';
+
+@import 'menu-bar/index';
+
+@import 'modal/index';
+
+@import 'modals/index';
+
+@import 'network-display/index';
+
+@import '../ui/page-container/index';
+
+@import '../../pages/index';
+
+@import 'provider-page-container/index';
+
+@import 'selected-account/index';
+
+@import '../ui/sender-to-recipient/index';
+
+@import '../ui/tabs/index';
+
+@import '../ui/token-balance/index';
+
+@import 'transaction-activity-log/index';
+
+@import 'transaction-breakdown/index';
+
+@import 'transaction-view/index';
+
+@import 'transaction-view-balance/index';
+
+@import 'transaction-list/index';
+
+@import 'transaction-list-item/index';
+
+@import 'transaction-list-item-details/index';
+
+@import 'transaction-status/index';
+
+@import 'app-header/index';
+
+@import 'sidebars/index';
+
+@import '../ui/unit-input/index';
+
+@import 'gas-customization/gas-modal-page-container/index';
+
+@import 'gas-customization/gas-modal-page-container/index';
+
+@import 'gas-customization/gas-modal-page-container/index';
+
+@import 'gas-customization/index';
+
+@import 'gas-customization/gas-price-button-group/index';
+
+@import 'ui-migration-annoucement/index';
diff --git a/ui/app/components/info-box/index.js b/ui/app/components/app/info-box/index.js
index 6110422ed..6110422ed 100644
--- a/ui/app/components/info-box/index.js
+++ b/ui/app/components/app/info-box/index.js
diff --git a/ui/app/components/info-box/index.scss b/ui/app/components/app/info-box/index.scss
index 8b5626d79..8b5626d79 100644
--- a/ui/app/components/info-box/index.scss
+++ b/ui/app/components/app/info-box/index.scss
diff --git a/ui/app/components/info-box/info-box.component.js b/ui/app/components/app/info-box/info-box.component.js
index 8688b8e8f..8688b8e8f 100644
--- a/ui/app/components/info-box/info-box.component.js
+++ b/ui/app/components/app/info-box/info-box.component.js
diff --git a/ui/app/components/app/input-number.js b/ui/app/components/app/input-number.js
new file mode 100644
index 000000000..8a6ec725c
--- /dev/null
+++ b/ui/app/components/app/input-number.js
@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const {
+  addCurrencies,
+  conversionGTE,
+  conversionLTE,
+  subtractCurrencies,
+} = require('../../helpers/utils/conversion-util')
+
+module.exports = InputNumber
+
+inherits(InputNumber, Component)
+function InputNumber () {
+  Component.call(this)
+
+  this.setValue = this.setValue.bind(this)
+}
+
+function isValidInput (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+function removeLeadingZeroes (str) {
+  return str.replace(/^0*(?=\d)/, '')
+}
+
+InputNumber.prototype.setValue = function (newValue) {
+  newValue = removeLeadingZeroes(newValue)
+  if (newValue && !isValidInput(newValue)) return
+  const { fixed, min = -1, max = Infinity, onChange } = this.props
+
+  newValue = fixed ? newValue.toFixed(4) : newValue
+  const newValueGreaterThanMin = conversionGTE(
+    { value: newValue || '0', fromNumericBase: 'dec' },
+    { value: min, fromNumericBase: 'hex' },
+  )
+
+  const newValueLessThanMax = conversionLTE(
+    { value: newValue || '0', fromNumericBase: 'dec' },
+    { value: max, fromNumericBase: 'hex' },
+  )
+  if (newValueGreaterThanMin && newValueLessThanMax) {
+    onChange(newValue)
+  } else if (!newValueGreaterThanMin) {
+    onChange(min)
+  } else if (!newValueLessThanMax) {
+    onChange(max)
+  }
+}
+
+InputNumber.prototype.render = function () {
+  const { unitLabel, step = 1, placeholder, value } = this.props
+
+  return h('div.customize-gas-input-wrapper', {}, [
+    h('input', {
+      className: 'customize-gas-input',
+      value,
+      placeholder,
+      type: 'number',
+      onChange: e => {
+        this.setValue(e.target.value)
+      },
+      min: 0,
+    }),
+    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
+    h('div.gas-tooltip-input-arrows', {}, [
+      h('div.gas-tooltip-input-arrow-wrapper', {
+        onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
+      }, [
+        h('i.fa.fa-angle-up'),
+      ]),
+      h('div.gas-tooltip-input-arrow-wrapper', {
+        onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
+      }, [
+        h('i.fa.fa-angle-down'),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/loading-network-screen/index.js b/ui/app/components/app/loading-network-screen/index.js
index 726b4b530..726b4b530 100644
--- a/ui/app/components/loading-network-screen/index.js
+++ b/ui/app/components/app/loading-network-screen/index.js
diff --git a/ui/app/components/app/loading-network-screen/loading-network-screen.component.js b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js
new file mode 100644
index 000000000..348a997c8
--- /dev/null
+++ b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js
@@ -0,0 +1,138 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Spinner from '../../ui/spinner'
+import Button from '../../ui/button'
+
+export default class LoadingNetworkScreen extends PureComponent {
+  state = {
+    showErrorScreen: false,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    loadingMessage: PropTypes.string,
+    cancelTime: PropTypes.number,
+    provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    showNetworkDropdown: PropTypes.func,
+    setProviderArgs: PropTypes.array,
+    lastSelectedProvider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    setProviderType: PropTypes.func,
+    isLoadingNetwork: PropTypes.bool,
+  }
+
+  componentDidMount = () => {
+    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
+  }
+
+  getConnectingLabel = function (loadingMessage) {
+    if (loadingMessage) {
+      return loadingMessage
+    }
+    const { provider, providerId } = this.props
+    const providerName = provider.type
+
+    let name
+
+    if (providerName === 'mainnet') {
+      name = this.context.t('connectingToMainnet')
+    } else if (providerName === 'ropsten') {
+      name = this.context.t('connectingToRopsten')
+    } else if (providerName === 'kovan') {
+      name = this.context.t('connectingToKovan')
+    } else if (providerName === 'rinkeby') {
+      name = this.context.t('connectingToRinkeby')
+    } else {
+      name = this.context.t('connectingTo', [providerId])
+    }
+
+    return name
+  }
+
+  renderMessage = () => {
+    return <span>{ this.getConnectingLabel(this.props.loadingMessage) }</span>
+  }
+
+  renderLoadingScreenContent = () => {
+    return <div className="loading-overlay__screen-content">
+      <Spinner color="#F7C06C" />
+      {this.renderMessage()}
+    </div>
+  }
+
+  renderErrorScreenContent = () => {
+    const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
+
+    return <div className="loading-overlay__error-screen">
+      <span className="loading-overlay__emoji">&#128542;</span>
+      <span>{ this.context.t('somethingWentWrong') }</span>
+      <div className="loading-overlay__error-buttons">
+        <Button
+          type="default"
+          onClick={() => {
+            window.clearTimeout(this.cancelCallTimeout)
+            showNetworkDropdown()
+          }}
+        >
+          { this.context.t('switchNetworks') }
+        </Button>
+
+        <Button
+          type="primary"
+          onClick={() => {
+            this.setState({ showErrorScreen: false })
+            setProviderType(...setProviderArgs)
+            window.clearTimeout(this.cancelCallTimeout)
+            this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
+          }}
+        >
+          { this.context.t('tryAgain') }
+        </Button>
+      </div>
+    </div>
+  }
+
+  cancelCall = () => {
+    const { isLoadingNetwork } = this.props
+
+    if (isLoadingNetwork) {
+      this.setState({ showErrorScreen: true })
+    }
+  }
+
+  componentDidUpdate = (prevProps) => {
+    const { provider } = this.props
+    const { provider: prevProvider } = prevProps
+    if (provider.type !== prevProvider.type) {
+      window.clearTimeout(this.cancelCallTimeout)
+      this.setState({ showErrorScreen: false })
+      this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
+    }
+  }
+
+  componentWillUnmount = () => {
+    window.clearTimeout(this.cancelCallTimeout)
+  }
+
+  render () {
+    const { lastSelectedProvider, setProviderType } = this.props
+
+    return (
+      <div className="loading-overlay">
+        <div
+          className="page-container__header-close"
+          onClick={() => setProviderType(lastSelectedProvider || 'ropsten')}
+        />
+        <div className="loading-overlay__container">
+          { this.state.showErrorScreen
+            ? this.renderErrorScreenContent()
+            : this.renderLoadingScreenContent()
+          }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/loading-network-screen/loading-network-screen.container.js b/ui/app/components/app/loading-network-screen/loading-network-screen.container.js
new file mode 100644
index 000000000..87f1397ce
--- /dev/null
+++ b/ui/app/components/app/loading-network-screen/loading-network-screen.container.js
@@ -0,0 +1,41 @@
+import { connect } from 'react-redux'
+import LoadingNetworkScreen from './loading-network-screen.component'
+import actions from '../../../store/actions'
+import { getNetworkIdentifier } from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const {
+    loadingMessage,
+    currentView,
+  } = state.appState
+  const {
+    provider,
+    lastSelectedProvider,
+    network,
+  } = state.metamask
+  const { rpcTarget, chainId, ticker, nickname, type } = provider
+
+  const setProviderArgs = type === 'rpc'
+    ? [rpcTarget, chainId, ticker, nickname]
+    : [provider.type]
+
+  return {
+    isLoadingNetwork: network === 'loading' && currentView.name !== 'config',
+    loadingMessage,
+    lastSelectedProvider,
+    setProviderArgs,
+    provider,
+    providerId: getNetworkIdentifier(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoadingNetworkScreen)
diff --git a/ui/app/components/menu-bar/index.js b/ui/app/components/app/menu-bar/index.js
index c5760847f..c5760847f 100644
--- a/ui/app/components/menu-bar/index.js
+++ b/ui/app/components/app/menu-bar/index.js
diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index f699f4090..f699f4090 100644
--- a/ui/app/components/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
new file mode 100644
index 000000000..e37fddda4
--- /dev/null
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Tooltip from '../../ui/tooltip'
+import SelectedAccount from '../selected-account'
+import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
+
+export default class MenuBar extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideSidebar: PropTypes.func,
+    sidebarOpen: PropTypes.bool,
+    showSidebar: PropTypes.func,
+  }
+
+  state = { accountDetailsMenuOpen: false }
+
+  render () {
+    const { t } = this.context
+    const { sidebarOpen, hideSidebar, showSidebar } = this.props
+    const { accountDetailsMenuOpen } = this.state
+
+    return (
+      <div className="menu-bar">
+        <Tooltip
+          title={t('menu')}
+          position="bottom"
+        >
+          <div
+            className="fa fa-bars menu-bar__sidebar-button"
+            onClick={() => {
+              this.context.metricsEvent({
+                eventOpts: {
+                  category: 'Navigation',
+                  action: 'Home',
+                  name: 'Opened Hamburger',
+                },
+              })
+              sidebarOpen ? hideSidebar() : showSidebar()
+            }}
+          />
+        </Tooltip>
+        <SelectedAccount />
+
+        <Tooltip
+          title={t('accountOptions')}
+          position="bottom"
+        >
+          <div
+            className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+            onClick={() => {
+              this.context.metricsEvent({
+                eventOpts: {
+                  category: 'Navigation',
+                  action: 'Home',
+                  name: 'Opened Account Options',
+                },
+              })
+              this.setState({ accountDetailsMenuOpen: true })
+            }}
+          >
+          </div>
+        </Tooltip>
+
+        {
+          accountDetailsMenuOpen && (
+            <AccountDetailsDropdown
+              className="menu-bar__account-details-dropdown"
+              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
+            />
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/menu-bar/menu-bar.container.js b/ui/app/components/app/menu-bar/menu-bar.container.js
new file mode 100644
index 000000000..059263ff3
--- /dev/null
+++ b/ui/app/components/app/menu-bar/menu-bar.container.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import { WALLET_VIEW_SIDEBAR } from '../sidebars/sidebar.constants'
+import MenuBar from './menu-bar.component'
+import { showSidebar, hideSidebar } from '../../../store/actions'
+
+const mapStateToProps = state => {
+  const { appState: { sidebar: { isOpen } } } = state
+
+  return {
+    sidebarOpen: isOpen,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showSidebar: () => {
+      dispatch(showSidebar({
+        transitionName: 'sidebar-right',
+        type: WALLET_VIEW_SIDEBAR,
+      }))
+    },
+    hideSidebar: () => dispatch(hideSidebar()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/app/menu-droppo.js
index c80bee2be..c80bee2be 100644
--- a/ui/app/components/menu-droppo.js
+++ b/ui/app/components/app/menu-droppo.js
diff --git a/ui/app/components/modal/index.js b/ui/app/components/app/modal/index.js
index 58309abbe..58309abbe 100644
--- a/ui/app/components/modal/index.js
+++ b/ui/app/components/app/modal/index.js
diff --git a/ui/app/components/app/modal/index.scss b/ui/app/components/app/modal/index.scss
new file mode 100644
index 000000000..ec67d15fd
--- /dev/null
+++ b/ui/app/components/app/modal/index.scss
@@ -0,0 +1,62 @@
+@import 'modal-content/index';
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-flow: column;
+  border-radius: 8px;
+
+  @media screen and (max-width: 575px) {
+    max-height: 450px;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+    padding: 16px 32px;
+
+    @media screen and (max-width: 575px) {
+      justify-content: center;
+      padding: 28px 20px;
+    }
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    padding: 12px;
+    justify-content: center;
+    border-bottom: 1px solid #d2d8dd;
+    flex: 0 0 auto;
+  }
+
+  &__header-close::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $dusty-gray;
+    position: absolute;
+    top: -5px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid #d2d8dd;
+    padding: 16px;
+    flex: 0 0 auto;
+
+    &-button {
+      min-width: 0;
+      margin-right: 16px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/app/modal/modal-content/index.js
index 733cfb3b8..733cfb3b8 100644
--- a/ui/app/components/modal/modal-content/index.js
+++ b/ui/app/components/app/modal/modal-content/index.js
diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/app/modal/modal-content/index.scss
index 560505b84..560505b84 100644
--- a/ui/app/components/modal/modal-content/index.scss
+++ b/ui/app/components/app/modal/modal-content/index.scss
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/app/modal/modal-content/modal-content.component.js
index ecec0ee5b..ecec0ee5b 100644
--- a/ui/app/components/modal/modal-content/modal-content.component.js
+++ b/ui/app/components/app/modal/modal-content/modal-content.component.js
diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/app/modal/modal-content/tests/modal-content.component.test.js
index 17af09f45..17af09f45 100644
--- a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
+++ b/ui/app/components/app/modal/modal-content/tests/modal-content.component.test.js
diff --git a/ui/app/components/app/modal/modal.component.js b/ui/app/components/app/modal/modal.component.js
new file mode 100644
index 000000000..49e131b3c
--- /dev/null
+++ b/ui/app/components/app/modal/modal.component.js
@@ -0,0 +1,83 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../ui/button'
+
+export default class Modal extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    // Header text
+    headerText: PropTypes.string,
+    onClose: PropTypes.func,
+    // Submit button (right button)
+    onSubmit: PropTypes.func,
+    submitType: PropTypes.string,
+    submitText: PropTypes.string,
+    submitDisabled: PropTypes.bool,
+    // Cancel button (left button)
+    onCancel: PropTypes.func,
+    cancelType: PropTypes.string,
+    cancelText: PropTypes.string,
+  }
+
+  static defaultProps = {
+    submitType: 'primary',
+    cancelType: 'default',
+  }
+
+  render () {
+    const {
+      children,
+      headerText,
+      onClose,
+      onSubmit,
+      submitType,
+      submitText,
+      submitDisabled,
+      onCancel,
+      cancelType,
+      cancelText,
+    } = this.props
+
+    return (
+      <div className="modal-container">
+        {
+          headerText && (
+            <div className="modal-container__header">
+              <div className="modal-container__header-text">
+                { headerText }
+              </div>
+              <div
+                className="modal-container__header-close"
+                onClick={onClose}
+              />
+            </div>
+          )
+        }
+        <div className="modal-container__content">
+          { children }
+        </div>
+        <div className="modal-container__footer">
+          {
+            onCancel && (
+              <Button
+                type={cancelType}
+                onClick={onCancel}
+                className="modal-container__footer-button"
+              >
+                { cancelText }
+              </Button>
+            )
+          }
+          <Button
+            type={submitType}
+            onClick={onSubmit}
+            disabled={submitDisabled}
+            className="modal-container__footer-button"
+          >
+            { submitText }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/modal/tests/modal.component.test.js b/ui/app/components/app/modal/tests/modal.component.test.js
new file mode 100644
index 000000000..a13d7c06a
--- /dev/null
+++ b/ui/app/components/app/modal/tests/modal.component.test.js
@@ -0,0 +1,133 @@
+import React from 'react'
+import assert from 'assert'
+import { mount, shallow } from 'enzyme'
+import sinon from 'sinon'
+import Modal from '../modal.component'
+import Button from '../../../ui/button'
+
+describe('Modal Component', () => {
+  it('should render a modal with a submit button', () => {
+    const wrapper = shallow(<Modal />)
+
+    assert.equal(wrapper.find('.modal-container').length, 1)
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 1)
+    assert.equal(buttons.at(0).props().type, 'primary')
+  })
+
+  it('should render a modal with a cancel and a submit button', () => {
+    const handleCancel = sinon.spy()
+    const handleSubmit = sinon.spy()
+    const wrapper = shallow(
+      <Modal
+        onCancel={handleCancel}
+        cancelText="Cancel"
+        onSubmit={handleSubmit}
+        submitText="Submit"
+      />
+    )
+
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 2)
+    const cancelButton = buttons.at(0)
+    const submitButton = buttons.at(1)
+
+    assert.equal(cancelButton.props().type, 'default')
+    assert.equal(cancelButton.props().children, 'Cancel')
+    assert.equal(handleCancel.callCount, 0)
+    cancelButton.simulate('click')
+    assert.equal(handleCancel.callCount, 1)
+
+    assert.equal(submitButton.props().type, 'primary')
+    assert.equal(submitButton.props().children, 'Submit')
+    assert.equal(handleSubmit.callCount, 0)
+    submitButton.simulate('click')
+    assert.equal(handleSubmit.callCount, 1)
+  })
+
+  it('should render a modal with different button types', () => {
+    const wrapper = shallow(
+      <Modal
+        onCancel={() => {}}
+        cancelText="Cancel"
+        cancelType="secondary"
+        onSubmit={() => {}}
+        submitText="Submit"
+        submitType="confirm"
+      />
+    )
+
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 2)
+    assert.equal(buttons.at(0).props().type, 'secondary')
+    assert.equal(buttons.at(1).props().type, 'confirm')
+  })
+
+  it('should render a modal with children', () => {
+    const wrapper = shallow(
+      <Modal
+        onCancel={() => {}}
+        cancelText="Cancel"
+        onSubmit={() => {}}
+        submitText="Submit"
+      >
+        <div className="test-child" />
+      </Modal>
+    )
+
+    assert.ok(wrapper.find('.test-class'))
+  })
+
+  it('should render a modal with a header', () => {
+    const handleCancel = sinon.spy()
+    const handleSubmit = sinon.spy()
+    const wrapper = shallow(
+      <Modal
+        onCancel={handleCancel}
+        cancelText="Cancel"
+        onSubmit={handleSubmit}
+        submitText="Submit"
+        headerText="My Header"
+        onClose={handleCancel}
+      />
+    )
+
+    assert.ok(wrapper.find('.modal-container__header'))
+    assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
+    assert.equal(handleCancel.callCount, 0)
+    assert.equal(handleSubmit.callCount, 0)
+    wrapper.find('.modal-container__header-close').simulate('click')
+    assert.equal(handleCancel.callCount, 1)
+    assert.equal(handleSubmit.callCount, 0)
+  })
+
+  it('should disable the submit button if submitDisabled is true', () => {
+    const handleCancel = sinon.spy()
+    const handleSubmit = sinon.spy()
+    const wrapper = mount(
+      <Modal
+        onCancel={handleCancel}
+        cancelText="Cancel"
+        onSubmit={handleSubmit}
+        submitText="Submit"
+        submitDisabled={true}
+        headerText="My Header"
+        onClose={handleCancel}
+      />
+    )
+
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 2)
+    const cancelButton = buttons.at(0)
+    const submitButton = buttons.at(1)
+
+    assert.equal(handleCancel.callCount, 0)
+    cancelButton.simulate('click')
+    assert.equal(handleCancel.callCount, 1)
+
+    assert.equal(submitButton.props().disabled, true)
+    assert.equal(handleSubmit.callCount, 0)
+    submitButton.simulate('click')
+    assert.equal(handleSubmit.callCount, 0)
+  })
+})
diff --git a/ui/app/components/app/modals/account-details-modal.js b/ui/app/components/app/modals/account-details-modal.js
new file mode 100644
index 000000000..94ed04df9
--- /dev/null
+++ b/ui/app/components/app/modals/account-details-modal.js
@@ -0,0 +1,101 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../../selectors/selectors')
+const genAccountLink = require('../../../../lib/account-link.js')
+const QrView = require('../../ui/qr-code')
+const EditableLabel = require('../../ui/editable-label')
+
+import Button from '../../ui/button'
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+    keyrings: state.metamask.keyrings,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    // Is this supposed to be used somewhere?
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
+    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
+  }
+}
+
+inherits(AccountDetailsModal, Component)
+function AccountDetailsModal () {
+  Component.call(this)
+}
+
+AccountDetailsModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
+
+
+// Not yet pixel perfect todos:
+  // fonts of qr-header
+
+AccountDetailsModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    showExportPrivateKeyModal,
+    setAccountLabel,
+    keyrings,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(address)
+  })
+
+  let exportPrivateKeyFeatureEnabled = true
+  // This feature is disabled for hardware wallets
+  if (keyring && keyring.type.search('Hardware') !== -1) {
+    exportPrivateKeyFeatureEnabled = false
+  }
+
+  return h(AccountModalContainer, {}, [
+      h(EditableLabel, {
+        className: 'account-modal__name',
+        defaultValue: name,
+        onSubmit: label => setAccountLabel(address, label),
+      }),
+
+      h(QrView, {
+        Qr: {
+          data: address,
+          network: network,
+        },
+      }),
+
+      h('div.account-modal-divider'),
+
+      h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
+        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
+      }, this.context.t('etherscanView')),
+
+      // Holding on redesign for Export Private Key functionality
+
+      exportPrivateKeyFeatureEnabled ? h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
+        onClick: () => showExportPrivateKeyModal(),
+      }, this.context.t('exportPrivateKey')) : null,
+
+  ])
+}
diff --git a/ui/app/components/app/modals/account-modal-container.js b/ui/app/components/app/modals/account-modal-container.js
new file mode 100644
index 000000000..b7ae0b5b8
--- /dev/null
+++ b/ui/app/components/app/modals/account-modal-container.js
@@ -0,0 +1,80 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getSelectedIdentity } = require('../../../selectors/selectors')
+import Identicon from '../../ui/identicon'
+
+function mapStateToProps (state, ownProps) {
+  return {
+    selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(AccountModalContainer, Component)
+function AccountModalContainer () {
+  Component.call(this)
+}
+
+AccountModalContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
+
+
+AccountModalContainer.prototype.render = function () {
+  const {
+    selectedIdentity,
+    showBackButton = false,
+    backButtonAction,
+  } = this.props
+  let { children } = this.props
+
+  if (children.constructor !== Array) {
+    children = [children]
+  }
+
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-modal-container', [
+
+      h('div', [
+
+        // Needs a border; requires changes to svg
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
+
+      ]),
+
+      showBackButton && h('div.account-modal-back', {
+        onClick: backButtonAction,
+      }, [
+
+        h('i.fa.fa-angle-left.fa-lg'),
+
+        h('span.account-modal-back__text', ' ' + this.context.t('back')),
+
+      ]),
+
+      h('div.account-modal-close', {
+        onClick: this.props.hideModal,
+      }),
+
+      ...children,
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/app/modals/buy-options-modal.js b/ui/app/components/app/modals/buy-options-modal.js
new file mode 100644
index 000000000..2df20e65c
--- /dev/null
+++ b/ui/app/components/app/modals/buy-options-modal.js
@@ -0,0 +1,101 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getNetworkDisplayName } = require('../../../../../app/scripts/controllers/network/util')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+BuyOptions.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+
+BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
+  return h('div.buy-modal-content-option', {
+    onClick,
+  }, [
+    h('div.buy-modal-content-option-title', {}, title),
+    h('div.buy-modal-content-option-subtitle', {}, header),
+  ])
+}
+
+BuyOptions.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const networkName = getNetworkDisplayName(network)
+
+  return h('div', {}, [
+    h('div.buy-modal-content.transfers-subview', {
+    }, [
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.buy-modal-content-title', {
+          style: {},
+        }, this.context.t('transfers')),
+        h('div', {}, this.context.t('howToDeposit')),
+      ]),
+
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+
+        isTestNetwork
+          ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)),
+
+        // h('div.buy-modal-content-option', {}, [
+        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        // ]),,
+
+        this.renderModalContentOption(
+          this.context.t('directDeposit'),
+          this.context.t('depositFromAccount'),
+          () => this.goToAccountDetailsModal()
+        ),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))),
+    ]),
+  ])
+}
+
+BuyOptions.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
new file mode 100644
index 000000000..beebb7ed7
--- /dev/null
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common'
+
+export default class CancelTransaction extends PureComponent {
+  static propTypes = {
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { value } = this.props
+
+    return (
+      <div className="cancel-transaction-gas-fee">
+        <UserPreferencedCurrencyDisplay
+          className="cancel-transaction-gas-fee__eth"
+          value={value}
+          type={PRIMARY}
+        />
+        <UserPreferencedCurrencyDisplay
+          className="cancel-transaction-gas-fee__fiat"
+          value={value}
+          type={SECONDARY}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
index 1a9ae2e07..1a9ae2e07 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
index ce81dd448..ce81dd448 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
index 014815503..014815503 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
diff --git a/ui/app/components/app/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/app/modals/cancel-transaction/cancel-transaction.component.js
new file mode 100644
index 000000000..6bab5ec1f
--- /dev/null
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction.component.js
@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import CancelTransactionGasFee from './cancel-transaction-gas-fee'
+import { SUBMITTED_STATUS } from '../../../../helpers/constants/transactions'
+
+export default class CancelTransaction extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    createCancelTransaction: PropTypes.func,
+    hideModal: PropTypes.func,
+    showTransactionConfirmedModal: PropTypes.func,
+    transactionStatus: PropTypes.string,
+    newGasFee: PropTypes.string,
+  }
+
+  state = {
+    busy: false,
+  }
+
+  componentDidUpdate () {
+    const { transactionStatus, showTransactionConfirmedModal } = this.props
+
+    if (transactionStatus !== SUBMITTED_STATUS) {
+      showTransactionConfirmedModal()
+      return
+    }
+  }
+
+  handleSubmit = async () => {
+    const { createCancelTransaction, hideModal } = this.props
+
+    this.setState({ busy: true })
+
+    await createCancelTransaction()
+    this.setState({ busy: false }, () => hideModal())
+  }
+
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+    const { newGasFee } = this.props
+    const { busy } = this.state
+
+    return (
+      <Modal
+        headerText={t('attemptToCancel')}
+        onClose={this.handleCancel}
+        onSubmit={this.handleSubmit}
+        onCancel={this.handleCancel}
+        submitText={t('yesLetsTry')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+        submitDisabled={busy}
+      >
+        <div>
+          <div className="cancel-transaction__title">
+            { t('cancellationGasFee') }
+          </div>
+          <div className="cancel-transaction__cancel-transaction-gas-fee-container">
+            <CancelTransactionGasFee value={newGasFee} />
+          </div>
+          <div className="cancel-transaction__description">
+            { t('attemptToCancelDescription') }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/app/modals/cancel-transaction/cancel-transaction.container.js
new file mode 100644
index 000000000..6959889d9
--- /dev/null
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction.container.js
@@ -0,0 +1,60 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ethUtil from 'ethereumjs-util'
+import { multiplyCurrencies } from '../../../../helpers/utils/conversion-util'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import CancelTransaction from './cancel-transaction.component'
+import { showModal, createCancelTransaction } from '../../../../store/actions'
+import { getHexGasTotal } from '../../../../helpers/utils/confirm-tx.util'
+
+const mapStateToProps = (state, ownProps) => {
+  const { metamask } = state
+  const { transactionId, originalGasPrice } = ownProps
+  const { selectedAddressTxList } = metamask
+  const transaction = selectedAddressTxList.find(({ id }) => id === transactionId)
+  const transactionStatus = transaction ? transaction.status : ''
+
+  const defaultNewGasPrice = ethUtil.addHexPrefix(
+    multiplyCurrencies(originalGasPrice, 1.1, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 10,
+    })
+  )
+
+  const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' })
+
+  return {
+    transactionId,
+    transactionStatus,
+    originalGasPrice,
+    defaultNewGasPrice,
+    newGasFee,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    createCancelTransaction: (txId, customGasPrice) => {
+      return dispatch(createCancelTransaction(txId, customGasPrice))
+    },
+    showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { transactionId, defaultNewGasPrice, ...restStateProps } = stateProps
+  const { createCancelTransaction, ...restDispatchProps } = dispatchProps
+
+  return {
+    ...restStateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    createCancelTransaction: () => createCancelTransaction(transactionId, defaultNewGasPrice),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+)(CancelTransaction)
diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/app/modals/cancel-transaction/index.js
index 7abc871ee..7abc871ee 100644
--- a/ui/app/components/modals/cancel-transaction/index.js
+++ b/ui/app/components/app/modals/cancel-transaction/index.js
diff --git a/ui/app/components/app/modals/cancel-transaction/index.scss b/ui/app/components/app/modals/cancel-transaction/index.scss
new file mode 100644
index 000000000..4ffb5a0f8
--- /dev/null
+++ b/ui/app/components/app/modals/cancel-transaction/index.scss
@@ -0,0 +1,18 @@
+@import 'cancel-transaction-gas-fee/index';
+
+.cancel-transaction {
+  &__title {
+    font-weight: 500;
+    padding-bottom: 16px;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__cancel-transaction-gas-fee-container {
+    margin-bottom: 16px;
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/app/modals/cancel-transaction/tests/cancel-transaction.component.test.js
index 345951b0f..345951b0f 100644
--- a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
+++ b/ui/app/components/app/modals/cancel-transaction/tests/cancel-transaction.component.test.js
diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js b/ui/app/components/app/modals/clear-approved-origins/clear-approved-origins.component.js
index ceaa20a95..ceaa20a95 100644
--- a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js
+++ b/ui/app/components/app/modals/clear-approved-origins/clear-approved-origins.component.js
diff --git a/ui/app/components/app/modals/clear-approved-origins/clear-approved-origins.container.js b/ui/app/components/app/modals/clear-approved-origins/clear-approved-origins.container.js
new file mode 100644
index 000000000..2276bc7e7
--- /dev/null
+++ b/ui/app/components/app/modals/clear-approved-origins/clear-approved-origins.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import ClearApprovedOriginsComponent from './clear-approved-origins.component'
+import { clearApprovedOrigins } from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clearApprovedOrigins: () => dispatch(clearApprovedOrigins()),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ClearApprovedOriginsComponent)
diff --git a/ui/app/components/modals/clear-approved-origins/index.js b/ui/app/components/app/modals/clear-approved-origins/index.js
index b3e321995..b3e321995 100644
--- a/ui/app/components/modals/clear-approved-origins/index.js
+++ b/ui/app/components/app/modals/clear-approved-origins/index.js
diff --git a/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
new file mode 100644
index 000000000..f35fb85a0
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import { addressSummary } from '../../../../helpers/utils/util'
+import Identicon from '../../../ui/identicon'
+import genAccountLink from '../../../../../lib/account-link'
+
+export default class ConfirmRemoveAccount extends Component {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    removeAccount: PropTypes.func.isRequired,
+    identity: PropTypes.object.isRequired,
+    network: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleRemove = () => {
+    this.props.removeAccount(this.props.identity.address)
+      .then(() => this.props.hideModal())
+  }
+
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
+  renderSelectedAccount () {
+    const { identity } = this.props
+    return (
+      <div className="confirm-remove-account__account">
+        <div className="confirm-remove-account__account__identicon">
+          <Identicon
+            address={identity.address}
+            diameter={32}
+          />
+        </div>
+        <div className="confirm-remove-account__account__name">
+          <span className="confirm-remove-account__account__label">Name</span>
+          <span className="account_value">{identity.name}</span>
+        </div>
+        <div className="confirm-remove-account__account__address">
+          <span className="confirm-remove-account__account__label">Public Address</span>
+          <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
+        </div>
+        <div className="confirm-remove-account__account__link">
+          <a
+            className=""
+            href={genAccountLink(identity.address, this.props.network)}
+            target={'_blank'}
+            title={this.context.t('etherscanView')}
+          >
+            <img src="images/popout.svg" />
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        headerText={`${t('removeAccount')}?`}
+        onClose={this.handleCancel}
+        onSubmit={this.handleRemove}
+        onCancel={this.handleCancel}
+        submitText={t('remove')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <div>
+          { this.renderSelectedAccount() }
+          <div className="confirm-remove-account__description">
+            { t('removeAccountDescription') }
+            <a
+              className="confirm-remove-account__link"
+              rel="noopener noreferrer"
+              target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
+              { t('learnMore') }
+            </a>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.container.js
new file mode 100644
index 000000000..0a3cda5b6
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.container.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ConfirmRemoveAccount from './confirm-remove-account.component'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import { removeAccount } from '../../../../store/actions'
+
+const mapStateToProps = state => {
+  return {
+    network: state.metamask.network,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    removeAccount: (address) => dispatch(removeAccount(address)),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmRemoveAccount)
diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/app/modals/confirm-remove-account/index.js
index ecb5f7790..ecb5f7790 100644
--- a/ui/app/components/modals/confirm-remove-account/index.js
+++ b/ui/app/components/app/modals/confirm-remove-account/index.js
diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/app/modals/confirm-remove-account/index.scss
index 3be3a1967..3be3a1967 100644
--- a/ui/app/components/modals/confirm-remove-account/index.scss
+++ b/ui/app/components/app/modals/confirm-remove-account/index.scss
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/app/modals/confirm-reset-account/confirm-reset-account.component.js
index f1a4542ac..f1a4542ac 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
+++ b/ui/app/components/app/modals/confirm-reset-account/confirm-reset-account.component.js
diff --git a/ui/app/components/app/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/app/modals/confirm-reset-account/confirm-reset-account.container.js
new file mode 100644
index 000000000..ffbd40d9d
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-reset-account/confirm-reset-account.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import ConfirmResetAccount from './confirm-reset-account.component'
+import { resetAccount } from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => dispatch(resetAccount()),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/app/modals/confirm-reset-account/index.js
index ca4d9c5bf..ca4d9c5bf 100644
--- a/ui/app/components/modals/confirm-reset-account/index.js
+++ b/ui/app/components/app/modals/confirm-reset-account/index.js
diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
new file mode 100644
index 000000000..5db5c79e7
--- /dev/null
+++ b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
@@ -0,0 +1,162 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import BigNumber from 'bignumber.js'
+import GasModalCard from '../../customize-gas-modal/gas-modal-card'
+import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../../ui/button'
+
+import {
+  getDecimalGasLimit,
+  getDecimalGasPrice,
+  getPrefixedHexGasLimit,
+  getPrefixedHexGasPrice,
+} from './customize-gas.util'
+
+export default class CustomizeGas extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    txData: PropTypes.object.isRequired,
+    hideModal: PropTypes.func,
+    validate: PropTypes.func,
+    onSubmit: PropTypes.func,
+  }
+
+  state = {
+    gasPrice: 0,
+    gasLimit: 0,
+    originalGasPrice: 0,
+    originalGasLimit: 0,
+  }
+
+  componentDidMount () {
+    const { txData = {} } = this.props
+    const { txParams: { gas: hexGasLimit, gasPrice: hexGasPrice } = {} } = txData
+
+    const gasLimit = getDecimalGasLimit(hexGasLimit)
+    const gasPrice = getDecimalGasPrice(hexGasPrice)
+
+    this.setState({
+      gasPrice,
+      gasLimit,
+      originalGasPrice: gasPrice,
+      originalGasLimit: gasLimit,
+    })
+  }
+
+  handleRevert () {
+    const { originalGasPrice, originalGasLimit } = this.state
+
+    this.setState({
+      gasPrice: originalGasPrice,
+      gasLimit: originalGasLimit,
+    })
+  }
+
+  handleSave () {
+    const { onSubmit, hideModal } = this.props
+    const { gasLimit, gasPrice } = this.state
+    const prefixedHexGasPrice = getPrefixedHexGasPrice(gasPrice)
+    const prefixedHexGasLimit = getPrefixedHexGasLimit(gasLimit)
+
+    Promise.resolve(onSubmit({ gasPrice: prefixedHexGasPrice, gasLimit: prefixedHexGasLimit }))
+      .then(() => hideModal())
+  }
+
+  validate () {
+    const { gasLimit, gasPrice } = this.state
+    return this.props.validate({
+      gasPrice: getPrefixedHexGasPrice(gasPrice),
+      gasLimit: getPrefixedHexGasLimit(gasLimit),
+    })
+  }
+
+  render () {
+    const { t, metricsEvent } = this.context
+    const { hideModal } = this.props
+    const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state
+    const { valid, errorKey } = this.validate()
+
+    return (
+      <div className="customize-gas">
+        <div className="customize-gas__content">
+          <div className="customize-gas__header">
+            <div className="customize-gas__title">
+              { this.context.t('customGas') }
+            </div>
+            <div
+              className="customize-gas__close"
+              onClick={() => hideModal()}
+            />
+          </div>
+          <div className="customize-gas__body">
+            <GasModalCard
+              value={gasPrice}
+              min={MIN_GAS_PRICE_GWEI}
+              step={1}
+              onChange={value => this.setState({ gasPrice: value })}
+              title={t('gasPrice')}
+              copy={t('gasPriceCalculation')}
+            />
+            <GasModalCard
+              value={gasLimit}
+              min={1}
+              step={1}
+              onChange={value => this.setState({ gasLimit: value })}
+              title={t('gasLimit')}
+              copy={t('gasLimitCalculation')}
+            />
+          </div>
+          <div className="customize-gas__footer">
+            { !valid && <div className="customize-gas__error-message">{ t(errorKey) }</div> }
+            <div
+              className="customize-gas__revert"
+              onClick={() => this.handleRevert()}
+            >
+              { t('revert') }
+            </div>
+            <div className="customize-gas__buttons">
+              <Button
+                type="default"
+                className="customize-gas__cancel"
+                onClick={() => hideModal()}
+                style={{ marginRight: '10px' }}
+              >
+                { t('cancel') }
+              </Button>
+              <Button
+                type="primary"
+                className="customize-gas__save"
+                onClick={() => {
+                  metricsEvent({
+                    eventOpts: {
+                      category: 'Activation',
+                      action: 'userCloses',
+                      name: 'closeCustomizeGas',
+                    },
+                    pageOpts: {
+                      section: 'customizeGasModal',
+                      component: 'customizeGasSaveButton',
+                    },
+                    customVariables: {
+                      gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10),
+                      gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10),
+                    },
+                  })
+                  this.handleSave()
+                }}
+                style={{ marginRight: '10px' }}
+                disabled={!valid}
+              >
+                { t('save') }
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.container.js b/ui/app/components/app/modals/customize-gas/customize-gas.container.js
new file mode 100644
index 000000000..221881a8a
--- /dev/null
+++ b/ui/app/components/app/modals/customize-gas/customize-gas.container.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import CustomizeGas from './customize-gas.component'
+import { hideModal } from '../../../../store/actions'
+
+const mapStateToProps = state => {
+  const { appState: { modal: { modalState: { props } } } } = state
+  const { txData, onSubmit, validate } = props
+
+  return {
+    txData,
+    onSubmit,
+    validate,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomizeGas)
diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.util.js b/ui/app/components/app/modals/customize-gas/customize-gas.util.js
new file mode 100644
index 000000000..e686183bd
--- /dev/null
+++ b/ui/app/components/app/modals/customize-gas/customize-gas.util.js
@@ -0,0 +1,34 @@
+import ethUtil from 'ethereumjs-util'
+import { conversionUtil } from '../../../../helpers/utils/conversion-util'
+
+export function getDecimalGasLimit (hexGasLimit) {
+  return conversionUtil(hexGasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+}
+
+export function getDecimalGasPrice (hexGasPrice) {
+  return conversionUtil(hexGasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+}
+
+export function getPrefixedHexGasLimit (gasLimit) {
+  return ethUtil.addHexPrefix(conversionUtil(gasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  }))
+}
+
+export function getPrefixedHexGasPrice (gasPrice) {
+  return ethUtil.addHexPrefix(conversionUtil(gasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  }))
+}
diff --git a/ui/app/components/modals/customize-gas/index.js b/ui/app/components/app/modals/customize-gas/index.js
index 3a0ab7edc..3a0ab7edc 100644
--- a/ui/app/components/modals/customize-gas/index.js
+++ b/ui/app/components/app/modals/customize-gas/index.js
diff --git a/ui/app/components/modals/customize-gas/index.scss b/ui/app/components/app/modals/customize-gas/index.scss
index e10452691..e10452691 100644
--- a/ui/app/components/modals/customize-gas/index.scss
+++ b/ui/app/components/app/modals/customize-gas/index.scss
diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js
new file mode 100644
index 000000000..72bb1df89
--- /dev/null
+++ b/ui/app/components/app/modals/deposit-ether-modal.js
@@ -0,0 +1,220 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getNetworkDisplayName } = require('../../../../../app/scripts/controllers/network/util')
+const ShapeshiftForm = require('../shapeshift-form')
+
+import Button from '../../ui/button'
+
+let DIRECT_DEPOSIT_ROW_TITLE
+let DIRECT_DEPOSIT_ROW_TEXT
+let COINBASE_ROW_TITLE
+let COINBASE_ROW_TEXT
+let SHAPESHIFT_ROW_TITLE
+let SHAPESHIFT_ROW_TEXT
+let FAUCET_ROW_TITLE
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
+  }
+}
+
+inherits(DepositEtherModal, Component)
+function DepositEtherModal (props, context) {
+  Component.call(this)
+
+  // need to set after i18n locale has loaded
+  DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer')
+  COINBASE_ROW_TITLE = context.t('buyCoinbase')
+  COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer')
+  SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift')
+  SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer')
+  FAUCET_ROW_TITLE = context.t('testFaucet')
+
+  this.state = {
+    buyingWithShapeshift: false,
+  }
+}
+
+DepositEtherModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
+
+
+DepositEtherModal.prototype.facuetRowText = function (networkName) {
+  return this.context.t('getEtherFromFaucet', [networkName])
+}
+
+DepositEtherModal.prototype.renderRow = function ({
+  logo,
+  title,
+  text,
+  buttonLabel,
+  onButtonClick,
+  hide,
+  className,
+  hideButton,
+  hideTitle,
+  onBackClick,
+  showBackButton,
+}) {
+  if (hide) {
+    return null
+  }
+
+  return h('div', {
+      className: className || 'deposit-ether-modal__buy-row',
+    }, [
+
+    onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
+      onClick: onBackClick,
+    }, [
+
+      h('i.fa.fa-arrow-left.cursor-pointer'),
+
+    ]),
+
+    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
+
+      h('div.deposit-ether-modal__buy-row__description', [
+
+        !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
+
+        h('div.deposit-ether-modal__buy-row__description__text', [text]),
+
+      ]),
+
+      !hideButton && h('div.deposit-ether-modal__buy-row__button', [
+        h(Button, {
+          type: 'primary',
+          className: 'deposit-ether-modal__deposit-button',
+          large: true,
+          onClick: onButtonClick,
+        }, [buttonLabel]),
+      ]),
+
+  ])
+}
+
+DepositEtherModal.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const { buyingWithShapeshift } = this.state
+
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const networkName = getNetworkDisplayName(network)
+
+  return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
+
+    h('div.page-container__header', [
+
+      h('div.page-container__title', [this.context.t('depositEther')]),
+
+      h('div.page-container__subtitle', [
+        this.context.t('needEtherInWallet'),
+      ]),
+
+      h('div.page-container__header-close', {
+        onClick: () => {
+          this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
+          this.props.hideModal()
+        },
+      }),
+
+    ]),
+
+    h('.page-container__content', {}, [
+
+      h('div.deposit-ether-modal__buy-rows', [
+
+        this.renderRow({
+          logo: h('img.deposit-ether-modal__logo', {
+            src: './images/deposit-eth.svg',
+          }),
+          title: DIRECT_DEPOSIT_ROW_TITLE,
+          text: DIRECT_DEPOSIT_ROW_TEXT,
+          buttonLabel: this.context.t('viewAccount'),
+          onButtonClick: () => this.goToAccountDetailsModal(),
+          hide: buyingWithShapeshift,
+        }),
+
+        this.renderRow({
+          logo: h('i.fa.fa-tint.fa-2x'),
+          title: FAUCET_ROW_TITLE,
+          text: this.facuetRowText(networkName),
+          buttonLabel: this.context.t('getEther'),
+          onButtonClick: () => toFaucet(network),
+          hide: !isTestNetwork || buyingWithShapeshift,
+        }),
+
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'./images/coinbase logo.png\')',
+              height: '40px',
+            },
+          }),
+          title: COINBASE_ROW_TITLE,
+          text: COINBASE_ROW_TEXT,
+          buttonLabel: this.context.t('continueToCoinbase'),
+          onButtonClick: () => toCoinbase(address),
+          hide: isTestNetwork || buyingWithShapeshift,
+        }),
+
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
+            },
+          }),
+          title: SHAPESHIFT_ROW_TITLE,
+          text: SHAPESHIFT_ROW_TEXT,
+          buttonLabel: this.context.t('shapeshiftBuy'),
+          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+          hide: isTestNetwork,
+          hideButton: buyingWithShapeshift,
+          hideTitle: buyingWithShapeshift,
+          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+          showBackButton: this.state.buyingWithShapeshift,
+          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
+        }),
+
+        buyingWithShapeshift && h(ShapeshiftForm),
+
+      ]),
+
+    ]),
+  ])
+}
+
+DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/app/modals/edit-account-name-modal.js b/ui/app/components/app/modals/edit-account-name-modal.js
new file mode 100644
index 000000000..41a9862e9
--- /dev/null
+++ b/ui/app/components/app/modals/edit-account-name-modal.js
@@ -0,0 +1,83 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getSelectedAccount } = require('../../../selectors/selectors')
+
+function mapStateToProps (state) {
+  return {
+    selectedAccount: getSelectedAccount(state),
+    identity: state.appState.modal.modalState.props.identity,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setAccountLabel: (account, label) => {
+      dispatch(actions.setAccountLabel(account, label))
+    },
+  }
+}
+
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal (props) {
+  Component.call(this)
+
+  this.state = {
+    inputText: props.identity.name,
+  }
+}
+
+EditAccountNameModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
+
+
+EditAccountNameModal.prototype.render = function () {
+  const { hideModal, setAccountLabel, identity } = this.props
+
+  return h('div', {}, [
+    h('div.flex-column.edit-account-name-modal-content', {
+    }, [
+
+      h('div.edit-account-name-modal-cancel', {
+        onClick: () => {
+          hideModal()
+        },
+      }, [
+        h('i.fa.fa-times'),
+      ]),
+
+      h('div.edit-account-name-modal-title', {
+      }, [this.context.t('editAccountName')]),
+
+      h('input.edit-account-name-modal-input', {
+        placeholder: identity.name,
+        onChange: (event) => {
+          this.setState({ inputText: event.target.value })
+        },
+        value: this.state.inputText,
+      }, []),
+
+      h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
+        onClick: () => {
+          if (this.state.inputText.length !== 0) {
+            setAccountLabel(identity.address, this.state.inputText)
+            hideModal()
+          }
+        },
+        disabled: this.state.inputText.length === 0,
+      }, [
+        this.context.t('save'),
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js
new file mode 100644
index 000000000..639887d4c
--- /dev/null
+++ b/ui/app/components/app/modals/export-private-key-modal.js
@@ -0,0 +1,177 @@
+const log = require('loglevel')
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const { stripHexPrefix } = require('ethereumjs-util')
+const actions = require('../../../store/actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../../selectors/selectors')
+const ReadOnlyInput = require('../../ui/readonly-input')
+const copyToClipboard = require('copy-to-clipboard')
+const { checksumAddress } = require('../../../helpers/utils/util')
+import Button from '../../ui/button'
+
+function mapStateToPropsFactory () {
+  let selectedIdentity = null
+  return function mapStateToProps (state) {
+    // We should **not** change the identity displayed here even if it changes from underneath us.
+    // If we do, we will be showing the user one private key and a **different** address and name.
+    // Note that the selected identity **will** change from underneath us when we unlock the keyring
+    // which is the expected behavior that we are side-stepping.
+    selectedIdentity = selectedIdentity || getSelectedIdentity(state)
+    return {
+      warning: state.appState.warning,
+      privateKey: state.appState.accountDetail.privateKey,
+      network: state.metamask.network,
+      selectedIdentity,
+      previousModalState: state.appState.modal.previousModalState.name,
+    }
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    exportAccount: (password, address) => {
+      return dispatch(actions.exportAccount(password, address))
+        .then((res) => {
+          dispatch(actions.hideWarning())
+          return res
+        })
+    },
+    showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
+    hideModal: () => dispatch(actions.hideModal()),
+  }
+}
+
+inherits(ExportPrivateKeyModal, Component)
+function ExportPrivateKeyModal () {
+  Component.call(this)
+
+  this.state = {
+    password: '',
+    privateKey: null,
+    showWarning: true,
+  }
+}
+
+ExportPrivateKeyModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal)
+
+
+ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
+  const { exportAccount } = this.props
+
+  exportAccount(password, address)
+    .then(privateKey => this.setState({
+      privateKey,
+      showWarning: false,
+    }))
+    .catch((e) => log.error(e))
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
+  return h('span.private-key-password-label', privateKey
+    ? this.context.t('copyPrivateKey')
+    : this.context.t('typePassword')
+  )
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
+  const plainKey = privateKey && stripHexPrefix(privateKey)
+
+  return privateKey
+    ? h(ReadOnlyInput, {
+        wrapperClass: 'private-key-password-display-wrapper',
+        inputClass: 'private-key-password-display-textarea',
+        textarea: true,
+        value: plainKey,
+        onClick: () => copyToClipboard(plainKey),
+      })
+    : h('input.private-key-password-input', {
+      type: 'password',
+      onChange: event => this.setState({ password: event.target.value }),
+    })
+}
+
+ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
+  return h('div.export-private-key-buttons', {}, [
+    !privateKey && h(Button, {
+      type: 'default',
+      large: true,
+      className: 'export-private-key__button export-private-key__button--cancel',
+      onClick: () => hideModal(),
+    }, this.context.t('cancel')),
+
+    (privateKey
+      ? (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => hideModal(),
+        }, this.context.t('done'))
+      ) : (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+        }, this.context.t('confirm'))
+      )
+    ),
+
+  ])
+}
+
+ExportPrivateKeyModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    warning,
+    showAccountDetailModal,
+    hideModal,
+    previousModalState,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  const {
+    privateKey,
+    showWarning,
+  } = this.state
+
+  return h(AccountModalContainer, {
+    selectedIdentity,
+    showBackButton: previousModalState === 'ACCOUNT_DETAILS',
+    backButtonAction: () => showAccountDetailModal(),
+  }, [
+
+      h('span.account-name', name),
+
+      h(ReadOnlyInput, {
+        wrapperClass: 'ellip-address-wrapper',
+        inputClass: 'qr-ellip-address ellip-address',
+        value: checksumAddress(address),
+      }),
+
+      h('div.account-modal-divider'),
+
+      h('span.modal-body-title', this.context.t('showPrivateKeys')),
+
+      h('div.private-key-password', {}, [
+        this.renderPasswordLabel(privateKey),
+
+        this.renderPasswordInput(privateKey),
+
+        showWarning && warning ? h('span.private-key-password-error', warning) : null,
+      ]),
+
+      h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
+
+      this.renderButtons(privateKey, this.state.password, address, hideModal),
+
+  ])
+}
diff --git a/ui/app/components/app/modals/hide-token-confirmation-modal.js b/ui/app/components/app/modals/hide-token-confirmation-modal.js
new file mode 100644
index 000000000..8a9a48fd2
--- /dev/null
+++ b/ui/app/components/app/modals/hide-token-confirmation-modal.js
@@ -0,0 +1,83 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+import Identicon from '../../ui/identicon'
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    token: state.appState.modal.modalState.props.token,
+    assetImages: state.metamask.assetImages,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    hideToken: address => {
+      dispatch(actions.removeToken(address))
+        .then(() => {
+          dispatch(actions.hideModal())
+        })
+    },
+  }
+}
+
+inherits(HideTokenConfirmationModal, Component)
+function HideTokenConfirmationModal () {
+  Component.call(this)
+
+  this.state = {}
+}
+
+HideTokenConfirmationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
+
+
+HideTokenConfirmationModal.prototype.render = function () {
+  const { token, network, hideToken, hideModal, assetImages } = this.props
+  const { symbol, address } = token
+  const image = assetImages[address]
+
+  return h('div.hide-token-confirmation', {}, [
+    h('div.hide-token-confirmation__container', {
+    }, [
+      h('div.hide-token-confirmation__title', {}, [
+        this.context.t('hideTokenPrompt'),
+      ]),
+
+      h(Identicon, {
+        className: 'hide-token-confirmation__identicon',
+        diameter: 45,
+        address,
+        network,
+        image,
+      }),
+
+      h('div.hide-token-confirmation__symbol', {}, symbol),
+
+      h('div.hide-token-confirmation__copy', {}, [
+        this.context.t('readdToken'),
+      ]),
+
+      h('div.hide-token-confirmation__buttons', {}, [
+        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
+          onClick: () => hideModal(),
+        }, [
+          this.context.t('cancel'),
+        ]),
+        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
+          onClick: () => hideToken(address),
+        }, [
+          this.context.t('hide'),
+        ]),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/index.js b/ui/app/components/app/modals/index.js
index 1db1d33d4..1db1d33d4 100644
--- a/ui/app/components/modals/index.js
+++ b/ui/app/components/app/modals/index.js
diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss
new file mode 100644
index 000000000..09b0bb73c
--- /dev/null
+++ b/ui/app/components/app/modals/index.scss
@@ -0,0 +1,11 @@
+@import 'cancel-transaction/index';
+
+@import 'confirm-remove-account/index';
+
+@import 'customize-gas/index';
+
+@import 'qr-scanner/index';
+
+@import 'transaction-confirmed/index';
+
+@import 'metametrics-opt-in-modal/index';
diff --git a/ui/app/components/modals/loading-network-error/index.js b/ui/app/components/app/modals/loading-network-error/index.js
index b3737458a..b3737458a 100644
--- a/ui/app/components/modals/loading-network-error/index.js
+++ b/ui/app/components/app/modals/loading-network-error/index.js
diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.component.js b/ui/app/components/app/modals/loading-network-error/loading-network-error.component.js
index 44f71e4b2..44f71e4b2 100644
--- a/ui/app/components/modals/loading-network-error/loading-network-error.component.js
+++ b/ui/app/components/app/modals/loading-network-error/loading-network-error.component.js
diff --git a/ui/app/components/app/modals/loading-network-error/loading-network-error.container.js b/ui/app/components/app/modals/loading-network-error/loading-network-error.container.js
new file mode 100644
index 000000000..38ea9b2ab
--- /dev/null
+++ b/ui/app/components/app/modals/loading-network-error/loading-network-error.container.js
@@ -0,0 +1,4 @@
+import LoadingNetworkError from './loading-network-error.component'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+
+export default withModalProps(LoadingNetworkError)
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.js b/ui/app/components/app/modals/metametrics-opt-in-modal/index.js
index 47f946757..47f946757 100644
--- a/ui/app/components/modals/metametrics-opt-in-modal/index.js
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/index.js
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss
index 88b6d7a4d..88b6d7a4d 100644
--- a/ui/app/components/modals/metametrics-opt-in-modal/index.scss
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss
diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
new file mode 100644
index 000000000..0335991fc
--- /dev/null
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
@@ -0,0 +1,141 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../../ui/page-container/page-container-footer'
+
+export default class MetaMetricsOptInModal extends Component {
+  static propTypes = {
+    setParticipateInMetaMetrics: PropTypes.func,
+    hideModal: PropTypes.func,
+  }
+
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  render () {
+    const { metricsEvent } = this.context
+    const { setParticipateInMetaMetrics, hideModal } = this.props
+
+    return (
+      <div className="metametrics-opt-in metametrics-opt-in-modal">
+        <div className="metametrics-opt-in__main">
+          <div className="metametrics-opt-in__content">
+            <div className="app-header__logo-container">
+              <img
+                className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+                src="/images/logo/metamask-logo-horizontal.svg"
+                height={30}
+              />
+              <img
+                className="app-header__metafox-logo app-header__metafox-logo--icon"
+                src="/images/logo/metamask-fox.svg"
+                height={42}
+                width={42}
+              />
+            </div>
+            <div className="metametrics-opt-in__body-graphic">
+              <img src="images/metrics-chart.svg" />
+            </div>
+            <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
+            <div className="metametrics-opt-in__body">
+              <div className="metametrics-opt-in__description">
+               MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
+               will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem.
+              </div>
+              <div className="metametrics-opt-in__description">
+               MetaMask will..
+              </div>
+
+              <div className="metametrics-opt-in__committments">
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Always allow you to opt-out via Settings
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Send anonymized click & pageview events
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Maintain a public aggregate dashboard to educate the community
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="metametrics-opt-in__bottom-text">
+              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
+                href="https://metamask.io/privacy.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Privacy Policy here
+              </a>.
+            </div>
+          </div>
+          <div className="metametrics-opt-in__footer">
+            <PageContainerFooter
+              onCancel={() => {
+                setParticipateInMetaMetrics(false)
+                  .then(() => {
+                    metricsEvent({
+                      eventOpts: {
+                        category: 'Onboarding',
+                        action: 'Metrics Option',
+                        name: 'Metrics Opt Out',
+                      },
+                      isOptIn: true,
+                    }, {
+                      excludeMetaMetricsId: true,
+                    })
+                    hideModal()
+                  })
+              }}
+              cancelText={'No Thanks'}
+              hideCancel={false}
+              onSubmit={() => {
+                setParticipateInMetaMetrics(true)
+                  .then(() => {
+                    metricsEvent({
+                      eventOpts: {
+                        category: 'Onboarding',
+                        action: 'Metrics Option',
+                        name: 'Metrics Opt In',
+                      },
+                      isOptIn: true,
+                    })
+                    hideModal()
+                  })
+              }}
+              submitText={'I agree'}
+              submitButtonType={'confirm'}
+              disabled={false}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
new file mode 100644
index 000000000..83595281f
--- /dev/null
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import MetaMetricsOptInModal from './metametrics-opt-in-modal.component'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import { setParticipateInMetaMetrics } from '../../../../store/actions'
+
+const mapStateToProps = (state, ownProps) => {
+  const { unapprovedTxCount } = ownProps
+
+  return {
+    unapprovedTxCount,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps),
+)(MetaMetricsOptInModal)
diff --git a/ui/app/components/app/modals/modal.js b/ui/app/components/app/modals/modal.js
new file mode 100644
index 000000000..717f623af
--- /dev/null
+++ b/ui/app/components/app/modals/modal.js
@@ -0,0 +1,511 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../../store/actions')
+const { resetCustomData: resetCustomGasData } = require('../../../ducks/gas/gas.duck')
+const isMobileView = require('../../../../lib/is-mobile-view')
+const { getEnvironmentType } = require('../../../../../app/scripts/lib/util')
+const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums')
+
+// Modal Components
+const BuyOptions = require('./buy-options-modal')
+const DepositEtherModal = require('./deposit-ether-modal')
+const AccountDetailsModal = require('./account-details-modal')
+const EditAccountNameModal = require('./edit-account-name-modal')
+const ExportPrivateKeyModal = require('./export-private-key-modal')
+const NewAccountModal = require('./new-account-modal')
+const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
+const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
+const NotifcationModal = require('./notification-modal')
+const QRScanner = require('./qr-scanner')
+
+import ConfirmRemoveAccount from './confirm-remove-account'
+import ConfirmResetAccount from './confirm-reset-account'
+import TransactionConfirmed from './transaction-confirmed'
+import CancelTransaction from './cancel-transaction'
+
+import MetaMetricsOptInModal from './metametrics-opt-in-modal'
+import RejectTransactions from './reject-transactions'
+import ClearApprovedOrigins from './clear-approved-origins'
+import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
+
+const modalContainerBaseStyle = {
+  transform: 'translate3d(-50%, 0, 0px)',
+  border: '1px solid #CCCFD1',
+  borderRadius: '8px',
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+}
+
+const modalContainerLaptopStyle = {
+  ...modalContainerBaseStyle,
+  width: '344px',
+  top: '15%',
+}
+
+const modalContainerMobileStyle = {
+  ...modalContainerBaseStyle,
+  width: '309px',
+  top: '12.5%',
+}
+
+const accountModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    // top: 'calc(33% + 45px)',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+}
+
+const MODALS = {
+  BUY: {
+    contents: [
+      h(BuyOptions, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '10%',
+    },
+    laptopModalStyle: {
+      width: '66%',
+      maxWidth: '550px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      transform: 'none',
+    },
+  },
+
+  DEPOSIT_ETHER: {
+    contents: [
+      h(DepositEtherModal, {}, []),
+    ],
+    onHide: (props) => props.hideWarning(),
+    mobileModalStyle: {
+      width: '100%',
+      height: '100%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '0',
+      display: 'flex',
+    },
+    laptopModalStyle: {
+      width: 'initial',
+      maxWidth: '850px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
+      borderRadius: '7px',
+      transform: 'none',
+      height: 'calc(80% - 20px)',
+      overflowY: 'hidden',
+    },
+    contentStyle: {
+      borderRadius: '7px',
+      height: '100%',
+    },
+  },
+
+  EDIT_ACCOUNT_NAME: {
+    contents: [
+      h(EditAccountNameModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '375px',
+      // top: 'calc(30% + 10px)',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  ACCOUNT_DETAILS: {
+    contents: [
+      h(AccountDetailsModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  SHAPESHIFT_DEPOSIT_TX: {
+    contents: [
+      h(ShapeshiftDepositTxModal),
+    ],
+    ...accountModalStyle,
+  },
+
+  HIDE_TOKEN_CONFIRMATION: {
+    contents: [
+      h(HideTokenConfirmationModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  CLEAR_APPROVED_ORIGINS: {
+    contents: h(ClearApprovedOrigins),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  METAMETRICS_OPT_IN_MODAL: {
+    contents: h(MetaMetricsOptInModal),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+      width: '100%',
+      height: '100%',
+      top: '0px',
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+      top: '10%',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  OLD_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'oldUI',
+        message: 'oldUIMessage',
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  GAS_PRICE_INFO_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'gasPriceNoDenom',
+        message: 'gasPriceInfoModalContent',
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  GAS_LIMIT_INFO_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'gasLimit',
+        message: 'gasLimitInfoModalContent',
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  CONFIRM_REMOVE_ACCOUNT: {
+    contents: h(ConfirmRemoveAccount),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  NEW_ACCOUNT: {
+    contents: [
+      h(NewAccountModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      // top: 'calc(33% + 45px)',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  CUSTOMIZE_GAS: {
+    contents: [
+      h(ConfirmCustomizeGasModal),
+    ],
+    mobileModalStyle: {
+      width: '100vw',
+      height: '100vh',
+      top: '0',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: 'auto',
+      height: '0px',
+      top: '80px',
+      left: '0px',
+      transform: 'none',
+      margin: '0 auto',
+      position: 'relative',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+    customOnHideOpts: {
+      action: resetCustomGasData,
+      args: [],
+    },
+  },
+
+  TRANSACTION_CONFIRMED: {
+    disableBackdropClick: true,
+    contents: h(TransactionConfirmed),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  QR_SCANNER: {
+    contents: h(QRScanner),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  CANCEL_TRANSACTION: {
+    contents: h(CancelTransaction),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  REJECT_TRANSACTIONS: {
+    contents: h(RejectTransactions),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  DEFAULT: {
+    contents: [],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  },
+}
+
+const BACKDROPSTYLE = {
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+}
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modal.open,
+    modalState: state.appState.modal.modalState,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: (customOnHideOpts) => {
+      dispatch(actions.hideModal())
+      if (customOnHideOpts && customOnHideOpts.action) {
+        dispatch(customOnHideOpts.action(...customOnHideOpts.args))
+      }
+    },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
+  }
+}
+
+// Global Modal Component
+inherits(Modal, Component)
+function Modal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
+
+Modal.prototype.render = function () {
+  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
+
+  const { contents: children, disableBackdropClick = false } = modal
+  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
+  const contentStyle = modal.contentStyle || {}
+
+  return h(FadeModal,
+    {
+      className: 'modal',
+      keyboard: false,
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide(modal.customOnHideOpts)
+      },
+      ref: (ref) => {
+        this.modalRef = ref
+      },
+      modalStyle,
+      contentStyle,
+      backdropStyle: BACKDROPSTYLE,
+      closeOnClick: !disableBackdropClick,
+    },
+    children,
+  )
+}
+
+Modal.prototype.componentWillReceiveProps = function (nextProps) {
+  if (nextProps.active) {
+    this.show()
+  } else if (this.props.active) {
+    this.hide()
+  }
+}
+
+Modal.prototype.onHide = function (customOnHideOpts) {
+  if (this.props.onHideCallback) {
+    this.props.onHideCallback()
+  }
+  this.props.hideModal(customOnHideOpts)
+}
+
+Modal.prototype.hide = function () {
+  this.modalRef.hide()
+}
+
+Modal.prototype.show = function () {
+  this.modalRef.show()
+}
diff --git a/ui/app/components/app/modals/new-account-modal.js b/ui/app/components/app/modals/new-account-modal.js
new file mode 100644
index 000000000..27c81a701
--- /dev/null
+++ b/ui/app/components/app/modals/new-account-modal.js
@@ -0,0 +1,112 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+
+class NewAccountModal extends Component {
+  constructor (props) {
+    super(props)
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: `${this.context.t('account')} ${newAccountNumber}`,
+    }
+  }
+
+  render () {
+    const { newAccountName } = this.state
+
+    return h('div', [
+      h('div.new-account-modal-wrapper', {
+      }, [
+        h('div.new-account-modal-header', {}, [
+          this.context.t('newAccount'),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+        h('div.new-account-modal-content', {}, [
+          this.context.t('accountName'),
+        ]),
+
+        h('div.new-account-input-wrapper', {}, [
+          h('input.new-account-input', {
+            value: this.state.newAccountName,
+            placeholder: this.context.t('sampleAccountName'),
+            onChange: event => this.setState({ newAccountName: event.target.value }),
+          }, []),
+        ]),
+
+        h('div.new-account-modal-content.after-input', {}, [
+          this.context.t('or'),
+        ]),
+
+        h('div.new-account-modal-content.after-input.pointer', {
+          onClick: () => {
+            this.props.hideModal()
+            this.props.showImportPage()
+          },
+        }, this.context.t('importAnAccount')),
+
+        h('div.new-account-modal-content.button.allcaps', {}, [
+          h('button.btn-clear', {
+            onClick: () => this.props.createAccount(newAccountName),
+          }, [
+            this.context.t('save'),
+          ]),
+        ]),
+      ]),
+    ])
+  }
+}
+
+NewAccountModal.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+    t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    createAccount: (newAccountName) => {
+      dispatch(actions.addNewAccount())
+        .then((newAccountAddress) => {
+          if (newAccountName) {
+            dispatch(actions.setAccountLabel(newAccountAddress, newAccountName))
+          }
+          dispatch(actions.hideModal())
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+  }
+}
+
+NewAccountModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
+
diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js
new file mode 100644
index 000000000..2d73b2cfa
--- /dev/null
+++ b/ui/app/components/app/modals/notification-modal.js
@@ -0,0 +1,81 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+
+class NotificationModal extends Component {
+  render () {
+    const {
+      header,
+      message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
+    } = this.props
+
+    const showButtons = showCancelButton || showConfirmButton
+
+    return h('div', [
+      h('div.notification-modal__wrapper', {
+      }, [
+
+        h('div.notification-modal__header', {}, [
+          this.context.t(header),
+        ]),
+
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
+            this.context.t(message),
+          ]),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: hideModal,
+        }),
+
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
+      ]),
+    ])
+  }
+}
+
+NotificationModal.propTypes = {
+  hideModal: PropTypes.func,
+  header: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
+    t: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+NotificationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
+
diff --git a/ui/app/components/modals/qr-scanner/index.js b/ui/app/components/app/modals/qr-scanner/index.js
index 470dee1f4..470dee1f4 100644
--- a/ui/app/components/modals/qr-scanner/index.js
+++ b/ui/app/components/app/modals/qr-scanner/index.js
diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/app/modals/qr-scanner/index.scss
index 6fa81d51f..6fa81d51f 100644
--- a/ui/app/components/modals/qr-scanner/index.scss
+++ b/ui/app/components/app/modals/qr-scanner/index.scss
diff --git a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
new file mode 100644
index 000000000..20915b5f9
--- /dev/null
+++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
@@ -0,0 +1,216 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { BrowserQRCodeReader } from '@zxing/library'
+import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
+import Spinner from '../../../ui/spinner'
+import WebcamUtils from '../../../../../lib/webcam-utils'
+import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component'
+
+export default class QrScanner extends Component {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    qrCodeDetected: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    error: PropTypes.bool,
+    errorType: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props, context) {
+    super(props)
+
+    this.state = {
+      ready: false,
+      msg: context.t('accessingYourCamera'),
+    }
+    this.codeReader = null
+    this.permissionChecker = null
+    this.needsToReinit = false
+
+    // Clear pre-existing qr code data before scanning
+    this.props.qrCodeDetected(null)
+  }
+
+  componentDidMount () {
+    this.initCamera()
+  }
+
+  async checkPermisisions () {
+    const { permissions } = await WebcamUtils.checkStatus()
+    if (permissions) {
+      clearTimeout(this.permissionChecker)
+      // Let the video stream load first...
+      setTimeout(_ => {
+        this.setState({
+          ready: true,
+          msg: this.context.t('scanInstructions'),
+        })
+        if (this.needsToReinit) {
+          this.initCamera()
+          this.needsToReinit = false
+        }
+      }, 2000)
+    } else {
+      // Keep checking for permissions
+      this.permissionChecker = setTimeout(_ => {
+        this.checkPermisisions()
+      }, 1000)
+    }
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.permissionChecker)
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
+  }
+
+  initCamera () {
+    this.codeReader = new BrowserQRCodeReader()
+    this.codeReader.getVideoInputDevices()
+      .then(videoInputDevices => {
+        clearTimeout(this.permissionChecker)
+        this.checkPermisisions()
+        this.codeReader.decodeFromInputVideoDevice(undefined, 'video')
+        .then(content => {
+          const result = this.parseContent(content.text)
+          if (result.type !== 'unknown') {
+            this.props.qrCodeDetected(result)
+            this.stopAndClose()
+          } else {
+            this.setState({msg: this.context.t('unknownQrCode')})
+          }
+        })
+        .catch(err => {
+          if (err && err.name === 'NotAllowedError') {
+            this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
+            clearTimeout(this.permissionChecker)
+            this.needsToReinit = true
+            this.checkPermisisions()
+          }
+        })
+      }).catch(err => {
+        console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err)
+      })
+  }
+
+  parseContent (content) {
+    let type = 'unknown'
+    let values = {}
+
+    // Here we could add more cases
+    // To parse other type of links
+    // For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681)
+
+
+    // Ethereum address links - fox ex. ethereum:0x.....1111
+    if (content.split('ethereum:').length > 1) {
+
+      type = 'address'
+      values = {'address': content.split('ethereum:')[1] }
+
+    // Regular ethereum addresses - fox ex. 0x.....1111
+    } else if (content.substring(0, 2).toLowerCase() === '0x') {
+
+      type = 'address'
+      values = {'address': content }
+
+    }
+    return {type, values}
+  }
+
+
+  stopAndClose = () => {
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
+    this.setState({ ready: false })
+    this.props.hideModal()
+  }
+
+  tryAgain = () => {
+    // close the modal
+    this.stopAndClose()
+    // wait for the animation and try again
+    setTimeout(_ => {
+      this.props.scanQrCode()
+    }, 1000)
+  }
+
+  renderVideo () {
+    return (
+      <div className={'qr-scanner__content__video-wrapper'}>
+        <video
+          id="video"
+          style={{
+            display: this.state.ready ? 'block' : 'none',
+          }}
+        />
+        { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
+      </div>
+    )
+  }
+
+  renderErrorModal () {
+    let title, msg
+
+    if (this.props.error) {
+      if (this.props.errorType === 'NO_WEBCAM_FOUND') {
+        title = this.context.t('noWebcamFoundTitle')
+        msg = this.context.t('noWebcamFound')
+      } else {
+        title = this.context.t('unknownCameraErrorTitle')
+        msg = this.context.t('unknownCameraError')
+      }
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+
+        <div className="qr-scanner__image">
+          <img src={'images/webcam.svg'} width={70} height={70} />
+        </div>
+        <div className="qr-scanner__title">
+          { title }
+        </div>
+        <div className={'qr-scanner__error'}>
+          {msg}
+        </div>
+        <PageContainerFooter
+          onCancel={this.stopAndClose}
+          onSubmit={this.tryAgain}
+          cancelText={this.context.t('cancel')}
+          submitText={this.context.t('tryAgain')}
+          submitButtonType="confirm"
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+
+    if (this.props.error) {
+      return this.renderErrorModal()
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+        <div className="qr-scanner__title">
+          { `${t('scanQrCode')}` }
+        </div>
+        <div className="qr-scanner__content">
+          { this.renderVideo() }
+        </div>
+        <div className={'qr-scanner__status'}>
+          {this.state.msg}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/app/modals/qr-scanner/qr-scanner.container.js
new file mode 100644
index 000000000..2210fbed2
--- /dev/null
+++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.container.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import QrScanner from './qr-scanner.component'
+
+const { hideModal, qrCodeDetected, showQrScanner } = require('../../../../store/actions')
+import {
+  SEND_ROUTE,
+} from '../../../../helpers/constants/routes'
+
+const mapStateToProps = state => {
+  return {
+    error: state.appState.modal.modalState.props.error,
+    errorType: state.appState.modal.modalState.props.errorType,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QrScanner)
diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/app/modals/reject-transactions/index.js
index fcdc372b6..fcdc372b6 100644
--- a/ui/app/components/modals/reject-transactions/index.js
+++ b/ui/app/components/app/modals/reject-transactions/index.js
diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/app/modals/reject-transactions/index.scss
index 753466883..753466883 100644
--- a/ui/app/components/modals/reject-transactions/index.scss
+++ b/ui/app/components/app/modals/reject-transactions/index.scss
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/app/modals/reject-transactions/reject-transactions.component.js
index 60b259bdc..60b259bdc 100644
--- a/ui/app/components/modals/reject-transactions/reject-transactions.component.js
+++ b/ui/app/components/app/modals/reject-transactions/reject-transactions.component.js
diff --git a/ui/app/components/app/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/app/modals/reject-transactions/reject-transactions.container.js
new file mode 100644
index 000000000..d2af05573
--- /dev/null
+++ b/ui/app/components/app/modals/reject-transactions/reject-transactions.container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import RejectTransactionsModal from './reject-transactions.component'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+
+const mapStateToProps = (state, ownProps) => {
+  const { unapprovedTxCount } = ownProps
+
+  return {
+    unapprovedTxCount,
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps),
+)(RejectTransactionsModal)
diff --git a/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js
new file mode 100644
index 000000000..ada9430f7
--- /dev/null
+++ b/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js
@@ -0,0 +1,40 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const QrView = require('../../ui/qr-code')
+const AccountModalContainer = require('./account-modal-container')
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.modal.modalState.props.Qr,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(ShapeshiftDepositTxModal, Component)
+function ShapeshiftDepositTxModal () {
+  Component.call(this)
+
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal)
+
+ShapeshiftDepositTxModal.prototype.render = function () {
+  const { Qr } = this.props
+
+  return h(AccountModalContainer, {
+  }, [
+    h('div', {}, [
+      h(QrView, {key: 'qr', Qr}),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/app/modals/transaction-confirmed/index.js
index 7776b969e..7776b969e 100644
--- a/ui/app/components/modals/transaction-confirmed/index.js
+++ b/ui/app/components/app/modals/transaction-confirmed/index.js
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/app/modals/transaction-confirmed/index.scss
index c97371fb6..c97371fb6 100644
--- a/ui/app/components/modals/transaction-confirmed/index.scss
+++ b/ui/app/components/app/modals/transaction-confirmed/index.scss
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
index 0a98eb1a1..0a98eb1a1 100644
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
diff --git a/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..9089ec158
--- /dev/null
+++ b/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,4 @@
+import TransactionConfirmed from './transaction-confirmed.component'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionConfirmed)
diff --git a/ui/app/components/network-display/index.js b/ui/app/components/app/network-display/index.js
index f6878ae5b..f6878ae5b 100644
--- a/ui/app/components/network-display/index.js
+++ b/ui/app/components/app/network-display/index.js
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/app/network-display/index.scss
index e9f2f2057..e9f2f2057 100644
--- a/ui/app/components/network-display/index.scss
+++ b/ui/app/components/app/network-display/index.scss
diff --git a/ui/app/components/app/network-display/network-display.component.js b/ui/app/components/app/network-display/network-display.component.js
new file mode 100644
index 000000000..1142e8606
--- /dev/null
+++ b/ui/app/components/app/network-display/network-display.component.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {
+  MAINNET_CODE,
+  ROPSTEN_CODE,
+  RINKEYBY_CODE,
+  KOVAN_CODE,
+} from '../../../../../app/scripts/controllers/network/enums'
+
+const networkToClassHash = {
+  [MAINNET_CODE]: 'mainnet',
+  [ROPSTEN_CODE]: 'ropsten',
+  [RINKEYBY_CODE]: 'rinkeby',
+  [KOVAN_CODE]: 'kovan',
+}
+
+export default class NetworkDisplay extends Component {
+  static defaultProps = {
+    colored: true,
+  }
+
+  static propTypes = {
+    colored: PropTypes.bool,
+    network: PropTypes.string,
+    provider: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  renderNetworkIcon () {
+    const { network } = this.props
+    const networkClass = networkToClassHash[network]
+
+    return networkClass
+      ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
+      : <div
+          className="i fa fa-question-circle fa-med"
+          style={{
+            margin: '0 4px',
+            color: 'rgb(125, 128, 130)',
+          }}
+        />
+  }
+
+  render () {
+    const { colored, network, provider: { type, nickname } } = this.props
+    const networkClass = networkToClassHash[network]
+
+    return (
+      <div
+        className={classnames('network-display__container', {
+          'network-display__container--colored': colored,
+          ['network-display__container--' + networkClass]: colored && networkClass,
+        })}
+      >
+        {
+          networkClass
+            ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
+            : <div
+                className="i fa fa-question-circle fa-med"
+                style={{
+                  margin: '0 4px',
+                  color: 'rgb(125, 128, 130)',
+                }}
+              />
+        }
+        <div className="network-display__name">
+          { type === 'rpc' && nickname ? nickname : this.context.t(type) }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/network-display/network-display.container.js b/ui/app/components/app/network-display/network-display.container.js
index 99a14fff4..99a14fff4 100644
--- a/ui/app/components/network-display/network-display.container.js
+++ b/ui/app/components/app/network-display/network-display.container.js
diff --git a/ui/app/components/network.js b/ui/app/components/app/network.js
index e18404f42..e18404f42 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/app/network.js
diff --git a/ui/app/components/notice.js b/ui/app/components/app/notice.js
index bb7e0814c..bb7e0814c 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/app/notice.js
diff --git a/ui/app/components/provider-page-container/index.js b/ui/app/components/app/provider-page-container/index.js
index 927c35940..927c35940 100644
--- a/ui/app/components/provider-page-container/index.js
+++ b/ui/app/components/app/provider-page-container/index.js
diff --git a/ui/app/components/provider-page-container/index.scss b/ui/app/components/app/provider-page-container/index.scss
index 8d35ac179..8d35ac179 100644
--- a/ui/app/components/provider-page-container/index.scss
+++ b/ui/app/components/app/provider-page-container/index.scss
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/index.js b/ui/app/components/app/provider-page-container/provider-page-container-content/index.js
index 73e491adc..73e491adc 100644
--- a/ui/app/components/provider-page-container/provider-page-container-content/index.js
+++ b/ui/app/components/app/provider-page-container/provider-page-container-content/index.js
diff --git a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
new file mode 100644
index 000000000..0eb1d616a
--- /dev/null
+++ b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import Identicon from '../../../ui/identicon'
+
+export default class ProviderPageContainerContent extends PureComponent {
+  static propTypes = {
+    origin: PropTypes.string.isRequired,
+    selectedIdentity: PropTypes.string.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  renderConnectVisual = () => {
+    const { origin, selectedIdentity, siteImage, siteTitle } = this.props
+
+    return (
+      <div className="provider-approval-visual">
+        <section>
+          {siteImage ? (
+            <img
+              className="provider-approval-visual__identicon"
+              src={siteImage}
+            />
+          ) : (
+            <i className="provider-approval-visual__identicon--default">
+              {siteTitle.charAt(0).toUpperCase()}
+            </i>
+          )}
+          <h1>{siteTitle}</h1>
+          <h2>{origin}</h2>
+        </section>
+        <span className="provider-approval-visual__check" />
+        <section>
+          <Identicon
+            className="provider-approval-visual__identicon"
+            address={selectedIdentity.address}
+            diameter={64}
+          />
+          <h1>{selectedIdentity.name}</h1>
+        </section>
+      </div>
+    )
+  }
+
+  render () {
+    const { siteTitle } = this.props
+    const { t } = this.context
+
+    return (
+      <div className="provider-approval-container__content">
+        <section>
+          <h2>{t('connectRequest')}</h2>
+          {this.renderConnectVisual()}
+          <h1>{t('providerRequest', [siteTitle])}</h1>
+          <p>
+            {t('providerRequestInfo')}
+            <br/>
+            <a
+              href="https://medium.com/metamask/introducing-privacy-mode-42549d4870fa"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('learnMore')}.
+            </a>
+          </p>
+        </section>
+        <section className="secure-badge">
+          <img src="/images/mm-secure.svg" />
+        </section>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.container.js b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
new file mode 100644
index 000000000..4dbdddd16
--- /dev/null
+++ b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import ProviderPageContainerContent from './provider-page-container-content.component'
+import { getSelectedIdentity } from '../../../../selectors/selectors'
+
+const mapStateToProps = (state) => {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+export default connect(mapStateToProps)(ProviderPageContainerContent)
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/index.js b/ui/app/components/app/provider-page-container/provider-page-container-header/index.js
index 430627d3a..430627d3a 100644
--- a/ui/app/components/provider-page-container/provider-page-container-header/index.js
+++ b/ui/app/components/app/provider-page-container/provider-page-container-header/index.js
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js b/ui/app/components/app/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
index 41bf6c3dd..41bf6c3dd 100644
--- a/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
+++ b/ui/app/components/app/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
diff --git a/ui/app/components/app/provider-page-container/provider-page-container.component.js b/ui/app/components/app/provider-page-container/provider-page-container.component.js
new file mode 100644
index 000000000..910def2a3
--- /dev/null
+++ b/ui/app/components/app/provider-page-container/provider-page-container.component.js
@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import { ProviderPageContainerContent, ProviderPageContainerHeader } from '.'
+import { PageContainerFooter } from '../../ui/page-container'
+
+export default class ProviderPageContainer extends PureComponent {
+  static propTypes = {
+    approveProviderRequest: PropTypes.func.isRequired,
+    origin: PropTypes.string.isRequired,
+    rejectProviderRequest: PropTypes.func.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+    tabID: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  componentDidMount () {
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Auth',
+        action: 'Connect',
+        name: 'Popup Opened',
+      },
+    })
+  }
+
+  onCancel = () => {
+    const { tabID, rejectProviderRequest } = this.props
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Auth',
+        action: 'Connect',
+        name: 'Canceled',
+      },
+    })
+    rejectProviderRequest(tabID)
+  }
+
+  onSubmit = () => {
+    const { approveProviderRequest, tabID } = this.props
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Auth',
+        action: 'Connect',
+        name: 'Confirmed',
+      },
+    })
+    approveProviderRequest(tabID)
+  }
+
+  render () {
+    const {origin, siteImage, siteTitle} = this.props
+
+    return (
+      <div className="page-container provider-approval-container">
+        <ProviderPageContainerHeader />
+        <ProviderPageContainerContent
+          origin={origin}
+          siteImage={siteImage}
+          siteTitle={siteTitle}
+        />
+        <PageContainerFooter
+          onCancel={() => this.onCancel()}
+          cancelText={this.context.t('cancel')}
+          onSubmit={() => this.onSubmit()}
+          submitText={this.context.t('connect')}
+          submitButtonType="confirm"
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/selected-account/index.js b/ui/app/components/app/selected-account/index.js
index eb342181f..eb342181f 100644
--- a/ui/app/components/selected-account/index.js
+++ b/ui/app/components/app/selected-account/index.js
diff --git a/ui/app/components/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index 5339a228b..5339a228b 100644
--- a/ui/app/components/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
diff --git a/ui/app/components/app/selected-account/selected-account.component.js b/ui/app/components/app/selected-account/selected-account.component.js
new file mode 100644
index 000000000..5a3fa815f
--- /dev/null
+++ b/ui/app/components/app/selected-account/selected-account.component.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
+import { addressSlicer, checksumAddress } from '../../../helpers/utils/util'
+
+const Tooltip = require('../../ui/tooltip-v2.js').default
+
+class SelectedAccount extends Component {
+  state = {
+    copied: false,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    selectedAddress: PropTypes.string,
+    selectedIdentity: PropTypes.object,
+    network: PropTypes.string,
+  }
+
+  render () {
+    const { t } = this.context
+    const { selectedAddress, selectedIdentity, network } = this.props
+    const checksummedAddress = checksumAddress(selectedAddress, network)
+
+    return (
+      <div className="selected-account">
+        <Tooltip
+          position="bottom"
+          title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
+        >
+          <div
+            className="selected-account__clickable"
+            onClick={() => {
+              this.setState({ copied: true })
+              setTimeout(() => this.setState({ copied: false }), 3000)
+              copyToClipboard(checksummedAddress)
+            }}
+          >
+            <div className="selected-account__name">
+              { selectedIdentity.name }
+            </div>
+            <div className="selected-account__address">
+              { addressSlicer(checksummedAddress) }
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+}
+
+export default SelectedAccount
diff --git a/ui/app/components/app/selected-account/selected-account.container.js b/ui/app/components/app/selected-account/selected-account.container.js
new file mode 100644
index 000000000..b5dbe74f3
--- /dev/null
+++ b/ui/app/components/app/selected-account/selected-account.container.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import SelectedAccount from './selected-account.component'
+
+const selectors = require('../../../selectors/selectors')
+
+const mapStateToProps = state => {
+  return {
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+    network: state.metamask.network,
+  }
+}
+
+export default connect(mapStateToProps)(SelectedAccount)
diff --git a/ui/app/components/selected-account/tests/selected-account-component.test.js b/ui/app/components/app/selected-account/tests/selected-account-component.test.js
index 78a94d1c8..78a94d1c8 100644
--- a/ui/app/components/selected-account/tests/selected-account-component.test.js
+++ b/ui/app/components/app/selected-account/tests/selected-account-component.test.js
diff --git a/ui/app/components/send/README.md b/ui/app/components/app/send/README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/README.md
+++ b/ui/app/components/app/send/README.md
diff --git a/ui/app/components/send/account-list-item/account-list-item-README.md b/ui/app/components/app/send/account-list-item/account-list-item-README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/account-list-item/account-list-item-README.md
+++ b/ui/app/components/app/send/account-list-item/account-list-item-README.md
diff --git a/ui/app/components/app/send/account-list-item/account-list-item.component.js b/ui/app/components/app/send/account-list-item/account-list-item.component.js
new file mode 100644
index 000000000..18e77b4f9
--- /dev/null
+++ b/ui/app/components/app/send/account-list-item/account-list-item.component.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { checksumAddress } from '../../../../helpers/utils/util'
+import Identicon from '../../../ui/identicon'
+import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common'
+import Tooltip from '../../../ui/tooltip-v2'
+
+export default class AccountListItem extends Component {
+
+  static propTypes = {
+    account: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    displayAddress: PropTypes.bool,
+    displayBalance: PropTypes.bool,
+    handleClick: PropTypes.func,
+    icon: PropTypes.node,
+    balanceIsCached: PropTypes.bool,
+    showFiat: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    showFiat: true,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      account,
+      className,
+      displayAddress = false,
+      displayBalance = true,
+      handleClick,
+      icon = null,
+      balanceIsCached,
+      showFiat,
+    } = this.props
+
+    const { name, address, balance } = account || {}
+
+    return (<div
+      className={`account-list-item ${className}`}
+      onClick={() => handleClick && handleClick({ name, address, balance })}
+    >
+
+      <div className="account-list-item__top-row">
+        <Identicon
+          address={address}
+          className="account-list-item__identicon"
+          diameter={18}
+        />
+
+        <div className="account-list-item__account-name">{ name || address }</div>
+
+        {icon && <div className="account-list-item__icon">{ icon }</div>}
+
+      </div>
+
+      {displayAddress && name && <div className="account-list-item__account-address">
+        { checksumAddress(address) }
+      </div>}
+
+      {
+        displayBalance && (
+          <Tooltip
+            position="left"
+            title={this.context.t('balanceOutdated')}
+            disabled={!balanceIsCached}
+            style={{
+              left: '-20px !important',
+            }}
+          >
+            <div className={classnames('account-list-item__account-balances', {
+              'account-list-item__cached-balances': balanceIsCached,
+            })}>
+              <div className="account-list-item__primary-cached-container">
+                <UserPreferencedCurrencyDisplay
+                  type={PRIMARY}
+                  value={balance}
+                  hideTitle={true}
+                />
+                {
+                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
+                }
+              </div>
+              {
+                showFiat && (
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={balance}
+                    hideTitle={true}
+                  />
+                )
+              }
+            </div>
+          </Tooltip>
+        )
+      }
+
+    </div>)
+  }
+}
diff --git a/ui/app/components/app/send/account-list-item/account-list-item.container.js b/ui/app/components/app/send/account-list-item/account-list-item.container.js
new file mode 100644
index 000000000..bc9a60f49
--- /dev/null
+++ b/ui/app/components/app/send/account-list-item/account-list-item.container.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import {
+    getConversionRate,
+    getCurrentCurrency,
+    getNativeCurrency,
+} from '../send.selectors.js'
+import {
+  getIsMainnet,
+  isBalanceCached,
+  preferencesSelector,
+} from '../../../../selectors/selectors'
+import AccountListItem from './account-list-item.component'
+
+export default connect(mapStateToProps)(AccountListItem)
+
+function mapStateToProps (state) {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    conversionRate: getConversionRate(state),
+    currentCurrency: getCurrentCurrency(state),
+    nativeCurrency: getNativeCurrency(state),
+    balanceIsCached: isBalanceCached(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
+  }
+}
diff --git a/ui/app/components/send/account-list-item/index.js b/ui/app/components/app/send/account-list-item/index.js
index 907485cf7..907485cf7 100644
--- a/ui/app/components/send/account-list-item/index.js
+++ b/ui/app/components/app/send/account-list-item/index.js
diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js
new file mode 100644
index 000000000..5df9f77d6
--- /dev/null
+++ b/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js
@@ -0,0 +1,148 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+import Identicon from '../../../../ui/identicon'
+import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
+
+const utilsMethodStubs = {
+  checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
+}
+
+const AccountListItem = proxyquire('../account-list-item.component.js', {
+  '../../../../helpers/utils/util': utilsMethodStubs,
+}).default
+
+
+const propsMethodSpies = {
+  handleClick: sinon.spy(),
+}
+
+describe('AccountListItem Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<AccountListItem
+      account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
+      className={'mockClassName'}
+      conversionRate={4}
+      currentCurrency={'mockCurrentyCurrency'}
+      nativeCurrency={'ETH'}
+      displayAddress={false}
+      displayBalance={false}
+      handleClick={propsMethodSpies.handleClick}
+      icon={<i className="mockIcon" />}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.handleClick.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a div with the passed className', () => {
+      assert.equal(wrapper.find('.mockClassName').length, 1)
+      assert(wrapper.find('.mockClassName').is('div'))
+      assert(wrapper.find('.mockClassName').hasClass('account-list-item'))
+    })
+
+    it('should call handleClick with the expected props when the root div is clicked', () => {
+      const { onClick } = wrapper.find('.mockClassName').props()
+      assert.equal(propsMethodSpies.handleClick.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.handleClick.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.handleClick.getCall(0).args,
+        [{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }]
+      )
+    })
+
+    it('should have a top row div', () => {
+      assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1)
+      assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div'))
+    })
+
+    it('should have an identicon, name and icon in the top row', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find(Identicon).length, 1)
+      assert.equal(topRow.find('.account-list-item__account-name').length, 1)
+      assert.equal(topRow.find('.account-list-item__icon').length, 1)
+    })
+
+    it('should show the account name if it exists', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName')
+    })
+
+    it('should show the account address if there is no name', () => {
+      wrapper.setProps({ account: { address: 'addressButNoName' } })
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName')
+    })
+
+    it('should render the passed icon', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert(topRow.find('.account-list-item__icon').childAt(0).is('i'))
+      assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'))
+    })
+
+    it('should not render an icon if none is passed', () => {
+      wrapper.setProps({ icon: null })
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__icon').length, 0)
+    })
+
+    it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
+      wrapper.setProps({ displayAddress: true })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 1)
+      assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress')
+      assert.deepEqual(
+        utilsMethodStubs.checksumAddress.getCall(0).args,
+        ['mockAddress']
+      )
+    })
+
+    it('should not render the account address as a checksumAddress if displayAddress is false', () => {
+      wrapper.setProps({ displayAddress: false })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
+    })
+
+    it('should not render the account address as a checksumAddress if name is not provided', () => {
+      wrapper.setProps({ account: { address: 'someAddressButNoName' } })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
+    })
+
+    it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => {
+      wrapper.setProps({ displayBalance: true })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
+      assert.deepEqual(
+        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
+        {
+          type: 'PRIMARY',
+          value: 'mockBalance',
+          hideTitle: true,
+        }
+      )
+    })
+
+    it('should only render one CurrencyDisplay if showFiat is false', () => {
+      wrapper.setProps({ showFiat: false, displayBalance: true })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
+      assert.deepEqual(
+        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
+        {
+          type: 'PRIMARY',
+          value: 'mockBalance',
+          hideTitle: true,
+        }
+      )
+    })
+
+    it('should not render a CurrencyDisplay if displayBalance is false', () => {
+      wrapper.setProps({ displayBalance: false })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
+    })
+
+  })
+})
diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js
new file mode 100644
index 000000000..19a9a02d0
--- /dev/null
+++ b/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js
@@ -0,0 +1,73 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../account-list-item.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../send.selectors.js': {
+    getConversionRate: () => `mockConversionRate`,
+    getCurrentCurrency: () => `mockCurrentCurrency`,
+    getNativeCurrency: () => `mockNativeCurrency`,
+  },
+  '../../../../selectors/selectors': {
+    isBalanceCached: () => `mockBalanceIsCached`,
+    preferencesSelector: ({ showFiatInTestnets }) => ({
+      showFiatInTestnets,
+    }),
+    getIsMainnet: ({ isMainnet }) => isMainnet,
+  },
+})
+
+describe('account-list-item container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: false,
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/index.js b/ui/app/components/app/send/index.js
index b5114babc..b5114babc 100644
--- a/ui/app/components/send/index.js
+++ b/ui/app/components/app/send/index.js
diff --git a/ui/app/components/send/send-content/index.js b/ui/app/components/app/send/send-content/index.js
index 891c17e6a..891c17e6a 100644
--- a/ui/app/components/send/send-content/index.js
+++ b/ui/app/components/app/send/send-content/index.js
diff --git a/ui/app/components/send/send-content/send-amount-row/README.md b/ui/app/components/app/send/send-content/send-amount-row/README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-amount-row/README.md
+++ b/ui/app/components/app/send/send-content/send-amount-row/README.md
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index f17137c1e..f17137c1e 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
new file mode 100644
index 000000000..16c5a0db5
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
@@ -0,0 +1,40 @@
+import { connect } from 'react-redux'
+import {
+  getGasTotal,
+  getSelectedToken,
+  getSendFromBalance,
+  getTokenBalance,
+} from '../../../send.selectors.js'
+import { getMaxModeOn } from './amount-max-button.selectors.js'
+import { calcMaxAmount } from './amount-max-button.utils.js'
+import {
+  updateSendAmount,
+  setMaxModeTo,
+} from '../../../../../../store/actions'
+import AmountMaxButton from './amount-max-button.component'
+import {
+  updateSendErrors,
+} from '../../../../../../ducks/send/send.duck'
+
+export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton)
+
+function mapStateToProps (state) {
+
+  return {
+    balance: getSendFromBalance(state),
+    gasTotal: getGasTotal(state),
+    maxModeOn: getMaxModeOn(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setAmountToMax: maxAmountDataObject => {
+      dispatch(updateSendErrors({ amount: null }))
+      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
+    },
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+  }
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
index 69fec1994..69fec1994 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
new file mode 100644
index 000000000..f4c8fad8a
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -0,0 +1,29 @@
+const {
+  multiplyCurrencies,
+  subtractCurrencies,
+} = require('../../../../../../helpers/utils/conversion-util')
+const ethUtil = require('ethereumjs-util')
+
+function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  return selectedToken
+    ? multiplyCurrencies(
+      tokenBalance,
+      multiplier,
+      {
+        toNumericBase: 'hex',
+        multiplicandBase: 16,
+      }
+    )
+    : subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+}
+
+module.exports = {
+  calcMaxAmount,
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js
index ee8271494..ee8271494 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/index.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
index b04d3897f..b04d3897f 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
new file mode 100644
index 000000000..f446e330c
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
@@ -0,0 +1,91 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  setMaxModeTo: sinon.spy(),
+  updateSendAmount: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+}
+
+proxyquire('../amount-max-button.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../send.selectors.js': {
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendFromBalance: (s) => `mockBalance:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+  },
+  './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` },
+  './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 },
+  '../../../../../../store/actions': actionSpies,
+  '../../../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('amount-max-button container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        balance: 'mockBalance:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        maxModeOn: 'mockMaxModeOn:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('setAmountToMax()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' })
+        assert(dispatchSpy.calledTwice)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { amount: null }
+        )
+        assert(actionSpies.updateSendAmount.calledOnce)
+        assert.equal(
+          actionSpies.updateSendAmount.getCall(0).args[0],
+          12
+        )
+      })
+    })
+
+    describe('setMaxModeTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setMaxModeTo('mockVal')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.setMaxModeTo.getCall(0).args[0],
+          'mockVal'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
index 655fe1969..655fe1969 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
index 1ee858f67..1ee858f67 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
diff --git a/ui/app/components/send/send-content/send-amount-row/index.js b/ui/app/components/app/send/send-content/send-amount-row/index.js
index abc6852fe..abc6852fe 100644
--- a/ui/app/components/send/send-content/send-amount-row/index.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/index.js
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js
new file mode 100644
index 000000000..e725e7eda
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import AmountMaxButton from './amount-max-button'
+import UserPreferencedCurrencyInput from '../../../user-preferenced-currency-input'
+import UserPreferencedTokenInput from '../../../user-preferenced-token-input'
+
+export default class SendAmountRow extends Component {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    balance: PropTypes.string,
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    gasTotal: PropTypes.string,
+    inError: PropTypes.bool,
+    primaryCurrency: PropTypes.string,
+    selectedToken: PropTypes.object,
+    setMaxModeTo: PropTypes.func,
+    tokenBalance: PropTypes.string,
+    updateGasFeeError: PropTypes.func,
+    updateSendAmount: PropTypes.func,
+    updateSendAmountError: PropTypes.func,
+    updateGas: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  validateAmount (amount) {
+    const {
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateGasFeeError,
+      updateSendAmountError,
+    } = this.props
+
+    updateSendAmountError({
+      amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+    })
+
+    if (selectedToken) {
+      updateGasFeeError({
+        amountConversionRate,
+        balance,
+        conversionRate,
+        gasTotal,
+        primaryCurrency,
+        selectedToken,
+        tokenBalance,
+      })
+    }
+  }
+
+  updateAmount (amount) {
+    const { updateSendAmount, setMaxModeTo } = this.props
+
+    setMaxModeTo(false)
+    updateSendAmount(amount)
+  }
+
+  updateGas (amount) {
+    const { selectedToken, updateGas } = this.props
+
+    if (selectedToken) {
+      updateGas({ amount })
+    }
+  }
+
+  renderInput () {
+    const { amount, inError, selectedToken } = this.props
+    const Component = selectedToken ? UserPreferencedTokenInput : UserPreferencedCurrencyInput
+
+    return (
+      <Component
+        onChange={newAmount => this.validateAmount(newAmount)}
+        onBlur={newAmount => {
+          this.updateGas(newAmount)
+          this.updateAmount(newAmount)
+        }}
+        error={inError}
+        value={amount}
+      />
+    )
+  }
+
+  render () {
+    const { gasTotal, inError } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('amount')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        {!inError && gasTotal && <AmountMaxButton />}
+        { this.renderInput() }
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js
new file mode 100644
index 000000000..0646355ab
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js
@@ -0,0 +1,54 @@
+import { connect } from 'react-redux'
+import {
+  getAmountConversionRate,
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
+  getPrimaryCurrency,
+  getSelectedToken,
+  getSendAmount,
+  getSendFromBalance,
+  getTokenBalance,
+} from '../../send.selectors'
+import {
+  sendAmountIsInError,
+} from './send-amount-row.selectors'
+import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils'
+import {
+  setMaxModeTo,
+  updateSendAmount,
+} from '../../../../../store/actions'
+import {
+  updateSendErrors,
+} from '../../../../../ducks/send/send.duck'
+import SendAmountRow from './send-amount-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    balance: getSendFromBalance(state),
+    conversionRate: getConversionRate(state),
+    convertedCurrency: getCurrentCurrency(state),
+    gasTotal: getGasTotal(state),
+    inError: sendAmountIsInError(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+    updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
+    updateGasFeeError: (amountDataObject) => {
+      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
+    },
+    updateSendAmountError: (amountDataObject) => {
+      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
+    },
+  }
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.scss
+++ b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js
index fb08c7ed7..fb08c7ed7 100644
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.selectors.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js
diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 14a71129f..14a71129f 100644
--- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
new file mode 100644
index 000000000..6d20202b0
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
@@ -0,0 +1,125 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  setMaxModeTo: sinon.spy(),
+  updateSendAmount: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+}
+
+proxyquire('../send-amount-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors': {
+    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendFromBalance: (s) => `mockBalance:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+  },
+  './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` },
+  '../../send.utils': {
+    getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }),
+    getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }),
+  },
+  '../../../../../store/actions': actionSpies,
+  '../../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('send-amount-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        amountConversionRate: 'mockAmountConversionRate:mockState',
+        balance: 'mockBalance:mockState',
+        conversionRate: 'mockConversionRate:mockState',
+        convertedCurrency: 'mockConvertedCurrency:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        inError: 'mockInError:mockState',
+        primaryCurrency: 'mockPrimaryCurrency:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+      duckActionSpies.updateSendErrors.resetHistory()
+    })
+
+    describe('setMaxModeTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setMaxModeTo('mockBool')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.setMaxModeTo.calledOnce)
+        assert.equal(
+          actionSpies.setMaxModeTo.getCall(0).args[0],
+          'mockBool'
+        )
+      })
+    })
+
+    describe('updateSendAmount()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendAmount('mockAmount')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.updateSendAmount.calledOnce)
+        assert.equal(
+          actionSpies.updateSendAmount.getCall(0).args[0],
+          'mockAmount'
+        )
+      })
+    })
+
+    describe('updateGasFeeError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' })
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { some: 'data', mockGasFeeErrorChange: true }
+        )
+      })
+    })
+
+    describe('updateSendAmountError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendAmountError({ some: 'data' })
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { some: 'data', mockChange: true }
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
index 4672cb8a7..4672cb8a7 100644
--- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
+++ b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
diff --git a/ui/app/components/app/send/send-content/send-content.component.js b/ui/app/components/app/send/send-content/send-content.component.js
new file mode 100644
index 000000000..2c09ceb19
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-content.component.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerContent from '../../../ui/page-container/page-container-content.component'
+import SendAmountRow from './send-amount-row'
+import SendFromRow from './send-from-row'
+import SendGasRow from './send-gas-row'
+import SendHexDataRow from './send-hex-data-row'
+import SendToRow from './send-to-row'
+
+export default class SendContent extends Component {
+
+  static propTypes = {
+    updateGas: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    showHexData: PropTypes.bool,
+  }
+
+  updateGas = (updateData) => this.props.updateGas(updateData)
+
+  render () {
+    return (
+      <PageContainerContent>
+        <div className="send-v2__form">
+          <SendFromRow />
+          <SendToRow
+            updateGas={this.updateGas}
+            scanQrCode={ _ => this.props.scanQrCode()}
+          />
+          <SendAmountRow updateGas={this.updateGas} />
+          <SendGasRow />
+          {(this.props.showHexData && (
+            <SendHexDataRow
+              updateGas={this.updateGas}
+            />
+          ))}
+        </div>
+      </PageContainerContent>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-dropdown-list/index.js b/ui/app/components/app/send/send-content/send-dropdown-list/index.js
index 04af6536c..04af6536c 100644
--- a/ui/app/components/send/send-content/send-dropdown-list/index.js
+++ b/ui/app/components/app/send/send-content/send-dropdown-list/index.js
diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js
new file mode 100644
index 000000000..0d026bc69
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../account-list-item'
+
+export default class SendDropdownList extends Component {
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    closeDropdown: PropTypes.func,
+    onSelect: PropTypes.func,
+    activeAddress: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  getListItemIcon (accountAddress, activeAddress) {
+    return accountAddress === activeAddress
+      ? <i className={`fa fa-check fa-lg`} style={ { color: '#02c9b1' } }/>
+      : null
+  }
+
+  render () {
+    const {
+      accounts,
+      closeDropdown,
+      onSelect,
+      activeAddress,
+    } = this.props
+
+    return (<div>
+      <div
+        className="send-v2__from-dropdown__close-area"
+        onClick={() => closeDropdown()}
+      />
+      <div className="send-v2__from-dropdown__list">
+        {accounts.map((account, index) => <AccountListItem
+          account={account}
+          className="account-list-item__dropdown"
+          handleClick={() => {
+            onSelect(account)
+            closeDropdown()
+          }}
+          icon={this.getListItemIcon(account.address, activeAddress)}
+          key={`send-dropdown-account-#${index}`}
+        />)}
+      </div>
+    </div>)
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
index b92dd4dfe..b92dd4dfe 100644
--- a/ui/app/components/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
+++ b/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
diff --git a/ui/app/components/send/send-content/send-from-row/index.js b/ui/app/components/app/send/send-content/send-from-row/index.js
index 0a79726b2..0a79726b2 100644
--- a/ui/app/components/send/send-content/send-from-row/index.js
+++ b/ui/app/components/app/send/send-content/send-from-row/index.js
diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js
new file mode 100644
index 000000000..dfa53e970
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import AccountListItem from '../../account-list-item'
+
+export default class SendFromRow extends Component {
+  static propTypes = {
+    from: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { from } = this.props
+
+    return (
+      <SendRowWrapper label={`${t('from')}:`}>
+        <div className="send-v2__from-dropdown">
+          <AccountListItem account={from} />
+        </div>
+      </SendRowWrapper>
+    )
+  }
+}
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js
index fe3ac9aa1..fe3ac9aa1 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
+++ b/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js
index 03ef4806b..03ef4806b 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.selectors.js
+++ b/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js
diff --git a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js
index 18811c57e..18811c57e 100644
--- a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-component.test.js
+++ b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js
diff --git a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js
index fd771ea77..fd771ea77 100644
--- a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js
+++ b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js
diff --git a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
index ecb57bbc3..ecb57bbc3 100644
--- a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
+++ b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
diff --git a/ui/app/components/send/send-content/send-gas-row/README.md b/ui/app/components/app/send/send-content/send-gas-row/README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-gas-row/README.md
+++ b/ui/app/components/app/send/send-content/send-gas-row/README.md
diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
new file mode 100644
index 000000000..48088607a
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -0,0 +1,57 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../../../helpers/constants/common'
+
+export default class GasFeeDisplay extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    primaryCurrency: PropTypes.string,
+    convertedCurrency: PropTypes.string,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    onReset: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { gasTotal, gasLoadingError, onReset } = this.props
+
+    return (
+      <div className="send-v2__gas-fee-display">
+        {gasTotal
+          ? (
+            <div className="currency-display">
+              <UserPreferencedCurrencyDisplay
+                value={gasTotal}
+                type={PRIMARY}
+              />
+              <UserPreferencedCurrencyDisplay
+                className="currency-display__converted-value"
+                value={gasTotal}
+                type={SECONDARY}
+              />
+            </div>
+          )
+          : gasLoadingError
+            ? <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            : <div className="currency-display">
+                {this.context.t('loading')}
+              </div>
+        }
+        <button
+          className="gas-fee-reset"
+          onClick={onReset}
+        >
+          { this.context.t('reset') }
+        </button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js
index dba0edb7b..dba0edb7b 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/index.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
index cb4180508..cb4180508 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
diff --git a/ui/app/components/send/send-content/send-gas-row/index.js b/ui/app/components/app/send/send-content/send-gas-row/index.js
index 3c7ff1d5f..3c7ff1d5f 100644
--- a/ui/app/components/send/send-content/send-gas-row/index.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/index.js
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js
new file mode 100644
index 000000000..424a65b20
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
+import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group'
+import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs'
+
+export default class SendGasRow extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    gasFeeError: PropTypes.bool,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    showCustomizeGasModal: PropTypes.func,
+    setGasPrice: PropTypes.func,
+    setGasLimit: PropTypes.func,
+    gasPriceButtonGroupProps: PropTypes.object,
+    gasButtonGroupShown: PropTypes.bool,
+    advancedInlineGasShown: PropTypes.bool,
+    resetGasButtons: PropTypes.func,
+    gasPrice: PropTypes.number,
+    gasLimit: PropTypes.number,
+    insufficientBalance: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  renderAdvancedOptionsButton () {
+    const { metricsEvent } = this.context
+    const { showCustomizeGasModal } = this.props
+    return <div className="advanced-gas-options-btn" onClick={() => {
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Edit Screen',
+          name: 'Clicked "Advanced Options"',
+        },
+      })
+      showCustomizeGasModal()
+    }}>
+      { this.context.t('advancedOptions') }
+    </div>
+  }
+
+  renderContent () {
+    const {
+      conversionRate,
+      convertedCurrency,
+      gasLoadingError,
+      gasTotal,
+      showCustomizeGasModal,
+      gasPriceButtonGroupProps,
+      gasButtonGroupShown,
+      advancedInlineGasShown,
+      resetGasButtons,
+      setGasPrice,
+      setGasLimit,
+      gasPrice,
+      gasLimit,
+      insufficientBalance,
+    } = this.props
+    const { metricsEvent } = this.context
+
+    const gasPriceButtonGroup = <div>
+        <GasPriceButtonGroup
+          className="gas-price-button-group--small"
+          showCheck={false}
+          {...gasPriceButtonGroupProps}
+          handleGasPriceSelection={(...args) => {
+            metricsEvent({
+              eventOpts: {
+                category: 'Transactions',
+                action: 'Edit Screen',
+                name: 'Changed Gas Button',
+              },
+            })
+            gasPriceButtonGroupProps.handleGasPriceSelection(...args)
+          }}
+        />
+        { this.renderAdvancedOptionsButton() }
+      </div>
+    const gasFeeDisplay = <GasFeeDisplay
+      conversionRate={conversionRate}
+      convertedCurrency={convertedCurrency}
+      gasLoadingError={gasLoadingError}
+      gasTotal={gasTotal}
+      onReset={resetGasButtons}
+      onClick={() => showCustomizeGasModal()}
+    />
+    const advancedGasInputs = <div>
+      <AdvancedGasInputs
+        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
+        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
+        customGasPrice={gasPrice}
+        customGasLimit={gasLimit}
+        insufficientBalance={insufficientBalance}
+        customPriceIsSafe={true}
+        isSpeedUp={false}
+      />
+      { this.renderAdvancedOptionsButton() }
+     </div>
+
+    if (advancedInlineGasShown) {
+      return advancedGasInputs
+    } else if (gasButtonGroupShown) {
+      return gasPriceButtonGroup
+    } else {
+      return gasFeeDisplay
+    }
+  }
+
+  render () {
+    const { gasFeeError } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('transactionFee')}:`}
+        showError={gasFeeError}
+        errorType={'gasFee'}
+      >
+        { this.renderContent() }
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js
new file mode 100644
index 000000000..f81670c02
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js
@@ -0,0 +1,118 @@
+import { connect } from 'react-redux'
+import {
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
+  getGasPrice,
+  getGasLimit,
+  getSendAmount,
+} from '../../send.selectors.js'
+import {
+  isBalanceSufficient,
+  calcGasTotal,
+} from '../../send.utils.js'
+import {
+  getBasicGasEstimateLoadingStatus,
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+  getDefaultActiveButtonIndex,
+} from '../../../../../selectors/custom-gas'
+import {
+  showGasButtonGroup,
+} from '../../../../../ducks/send/send.duck'
+import {
+  resetCustomData,
+  setCustomGasPrice,
+  setCustomGasLimit,
+} from '../../../../../ducks/gas/gas.duck'
+import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
+import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../../store/actions'
+import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../../selectors/selectors'
+import SendGasRow from './send-gas-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
+
+function mapStateToProps (state) {
+  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
+  const gasPrice = getGasPrice(state)
+  const gasLimit = getGasLimit(state)
+  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
+
+  const gasTotal = getGasTotal(state)
+  const conversionRate = getConversionRate(state)
+  const balance = getCurrentEthBalance(state)
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount: getSelectedToken(state) ? '0x0' : getSendAmount(state),
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+
+  return {
+    conversionRate,
+    convertedCurrency: getCurrentCurrency(state),
+    gasTotal,
+    gasFeeError: gasFeeIsInError(state),
+    gasLoadingError: getGasLoadingError(state),
+    gasPriceButtonGroupProps: {
+      buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
+      defaultActiveButtonIndex: 1,
+      newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
+      gasButtonInfo,
+    },
+    gasButtonGroupShown: getGasButtonGroupShown(state),
+    advancedInlineGasShown: getAdvancedInlineGasShown(state),
+    gasPrice,
+    gasLimit,
+    insufficientBalance,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
+    setGasPrice: (newPrice, gasLimit) => {
+      dispatch(setGasPrice(newPrice))
+      dispatch(setCustomGasPrice(newPrice))
+      if (gasLimit) {
+        dispatch(setGasTotal(calcGasTotal(gasLimit, newPrice)))
+      }
+    },
+    setGasLimit: (newLimit, gasPrice) => {
+      dispatch(setGasLimit(newLimit))
+      dispatch(setCustomGasLimit(newLimit))
+      if (gasPrice) {
+        dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
+      }
+    },
+    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
+    resetCustomData: () => dispatch(resetCustomData()),
+  }
+}
+
+function mergeProps (stateProps, dispatchProps, ownProps) {
+  const { gasPriceButtonGroupProps } = stateProps
+  const { gasButtonInfo } = gasPriceButtonGroupProps
+  const {
+    setGasPrice: dispatchSetGasPrice,
+    showGasButtonGroup: dispatchShowGasButtonGroup,
+    resetCustomData: dispatchResetCustomData,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchSetGasPrice,
+    },
+    resetGasButtons: () => {
+      dispatchResetCustomData()
+      dispatchSetGasPrice(gasButtonInfo[1].priceInHexWei)
+      dispatchShowGasButtonGroup()
+    },
+    setGasPrice: dispatchSetGasPrice,
+  }
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.scss
+++ b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js
index 79c838543..79c838543 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
index 08f26854e..08f26854e 100644
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
new file mode 100644
index 000000000..d1f753639
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
@@ -0,0 +1,200 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+let mergeProps
+
+const actionSpies = {
+  showModal: sinon.spy(),
+  setGasPrice: sinon.spy(),
+  setGasTotal: sinon.spy(),
+  setGasLimit: sinon.spy(),
+}
+
+const sendDuckSpies = {
+  showGasButtonGroup: sinon.spy(),
+}
+
+const gasDuckSpies = {
+  resetCustomData: sinon.spy(),
+  setCustomGasPrice: sinon.spy(),
+  setCustomGasLimit: sinon.spy(),
+}
+
+proxyquire('../send-gas-row.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+  '../../../../../selectors/selectors': {
+    getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`,
+    getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`,
+    getSelectedToken: () => false,
+  },
+  '../../send.selectors.js': {
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getSendAmount: (s) => `mockSendAmount:${s}`,
+  },
+  '../../send.utils.js': {
+    isBalanceSufficient: ({
+      amount,
+      gasTotal,
+      balance,
+      conversionRate,
+    }) => `${amount}:${gasTotal}:${balance}:${conversionRate}`,
+    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
+  },
+  './send-gas-row.selectors.js': {
+    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
+    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
+    getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`,
+  },
+  '../../../../../store/actions': actionSpies,
+  '../../../../../selectors/custom-gas': {
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
+    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`,
+    getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length,
+  },
+  '../../../../../ducks/send/send.duck': sendDuckSpies,
+  '../../../../../ducks/gas/gas.duck': gasDuckSpies,
+})
+
+describe('send-gas-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        conversionRate: 'mockConversionRate:mockState',
+        convertedCurrency: 'mockConvertedCurrency:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        gasFeeError: 'mockGasFeeError:mockState',
+        gasLoadingError: 'mockGasLoadingError:mockState',
+        gasPriceButtonGroupProps: {
+          buttonDataLoading: `mockBasicGasEstimateLoadingStatus:mockState`,
+          defaultActiveButtonIndex: 1,
+          newActiveButtonIndex: 49,
+          gasButtonInfo: `mockGasButtonInfo:mockState`,
+        },
+        gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
+        advancedInlineGasShown: 'mockAdvancedInlineGasShown:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        insufficientBalance: false,
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+      actionSpies.setGasTotal.resetHistory()
+    })
+
+    describe('showCustomizeGasModal()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showCustomizeGasModal()
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.showModal.getCall(0).args[0],
+          { name: 'CUSTOMIZE_GAS', hideBasic: true }
+        )
+      })
+    })
+
+    describe('setGasPrice()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setGasPrice('mockNewPrice', 'mockLimit')
+        assert(dispatchSpy.calledThrice)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
+        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], 'mockNewPrice')
+        assert(actionSpies.setGasTotal.calledOnce)
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimitmockNewPrice')
+      })
+    })
+
+    describe('setGasLimit()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice')
+        assert(dispatchSpy.calledThrice)
+        assert(actionSpies.setGasLimit.calledOnce)
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'mockNewLimit')
+        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], 'mockNewLimit')
+        assert(actionSpies.setGasTotal.calledOnce)
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockNewLimitmockPrice')
+      })
+    })
+
+    describe('showGasButtonGroup()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendDuckSpies.showGasButtonGroup.calledOnce)
+      })
+    })
+
+    describe('resetCustomData()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.resetCustomData()
+        assert(dispatchSpy.calledOnce)
+        assert(gasDuckSpies.resetCustomData.calledOnce)
+      })
+    })
+
+  })
+
+  describe('mergeProps', () => {
+    let stateProps
+    let dispatchProps
+    let ownProps
+
+    beforeEach(() => {
+      stateProps = {
+        gasPriceButtonGroupProps: {
+          someGasPriceButtonGroupProp: 'foo',
+          anotherGasPriceButtonGroupProp: 'bar',
+        },
+        someOtherStateProp: 'baz',
+      }
+      dispatchProps = {
+        setGasPrice: sinon.spy(),
+        someOtherDispatchProp: sinon.spy(),
+      }
+      ownProps = { someOwnProp: 123 }
+    })
+
+    it('should return the expected props when isConfirm is true', () => {
+      const result = mergeProps(stateProps, dispatchProps, ownProps)
+
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.setGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.setGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
index bd3c9a257..bd3c9a257 100644
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
+++ b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
diff --git a/ui/app/components/send/send-content/send-hex-data-row/index.js b/ui/app/components/app/send/send-content/send-hex-data-row/index.js
index 08c341067..08c341067 100644
--- a/ui/app/components/send/send-content/send-hex-data-row/index.js
+++ b/ui/app/components/app/send/send-content/send-hex-data-row/index.js
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js
index 62a74a77b..62a74a77b 100644
--- a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js
diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js
new file mode 100644
index 000000000..76c929d08
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import {
+  updateSendHexData,
+} from '../../../../../store/actions'
+import SendHexDataRow from './send-hex-data-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow)
+
+function mapStateToProps (state) {
+  return {
+    data: state.metamask.send.data,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateSendHexData (data) {
+      return dispatch(updateSendHexData(data))
+    },
+  }
+}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/index.js
index d17545dcc..d17545dcc 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/index.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/index.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js
index c00617f83..c00617f83 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/index.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
index 61bc7bab7..61bc7bab7 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
index 59622047f..59622047f 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
index 2304a43d2..2304a43d2 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
index eecff165d..eecff165d 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js
index fd4d19ef7..fd4d19ef7 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/index.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
index f1caa8f99..f1caa8f99 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
index 7df14fd96..7df14fd96 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
index bd803d833..bd803d833 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
index 225bf056c..225bf056c 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper-README.md
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js
new file mode 100644
index 000000000..94309bd96
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowErrorMessage from './send-row-error-message'
+import SendRowWarningMessage from './send-row-warning-message'
+
+export default class SendRowWrapper extends Component {
+
+  static propTypes = {
+    children: PropTypes.node,
+    errorType: PropTypes.string,
+    label: PropTypes.string,
+    showError: PropTypes.bool,
+    showWarning: PropTypes.bool,
+    warningType: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      children,
+      errorType = '',
+      label,
+      showError = false,
+      showWarning = false,
+      warningType = '',
+    } = this.props
+    const formField = Array.isArray(children) ? children[1] || children[0] : children
+    const customLabelContent = children.length > 1 ? children[0] : null
+
+    return (
+      <div className="send-v2__form-row">
+        <div className="send-v2__form-label">
+          {label}
+          {showError && <SendRowErrorMessage errorType={errorType}/>}
+          {!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
+          {customLabelContent}
+        </div>
+        <div className="send-v2__form-field">
+          {formField}
+        </div>
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.scss
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss
diff --git a/ui/app/components/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
index 30280e1d0..30280e1d0 100644
--- a/ui/app/components/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
+++ b/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
diff --git a/ui/app/components/send/send-content/send-to-row/index.js b/ui/app/components/app/send/send-content/send-to-row/index.js
index 121f15148..121f15148 100644
--- a/ui/app/components/send/send-content/send-to-row/index.js
+++ b/ui/app/components/app/send/send-content/send-to-row/index.js
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row-README.md b/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row-README.md
+++ b/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js
new file mode 100644
index 000000000..e8a55cb2a
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import EnsInput from '../../../ens-input'
+import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js'
+
+export default class SendToRow extends Component {
+
+  static propTypes = {
+    closeToDropdown: PropTypes.func,
+    hasHexData: PropTypes.bool.isRequired,
+    inError: PropTypes.bool,
+    inWarning: PropTypes.bool,
+    network: PropTypes.string,
+    openToDropdown: PropTypes.func,
+    selectedToken: PropTypes.object,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    toDropdownOpen: PropTypes.bool,
+    tokens: PropTypes.array,
+    updateGas: PropTypes.func,
+    updateSendTo: PropTypes.func,
+    updateSendToError: PropTypes.func,
+    updateSendToWarning: PropTypes.func,
+    scanQrCode: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  handleToChange (to, nickname = '', toError, toWarning, network) {
+    const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props
+    const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network)
+    const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken)
+    updateSendTo(to, nickname)
+    updateSendToError(toErrorObject)
+    updateSendToWarning(toWarningObject)
+    if (toErrorObject.to === null) {
+      updateGas({ to })
+    }
+  }
+
+  render () {
+    const {
+      closeToDropdown,
+      inError,
+      inWarning,
+      network,
+      openToDropdown,
+      to,
+      toAccounts,
+      toDropdownOpen,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        errorType={'to'}
+        label={`${this.context.t('to')}: `}
+        showError={inError}
+        showWarning={inWarning}
+        warningType={'to'}
+        >
+        <EnsInput
+          scanQrCode={_ => {
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Transactions',
+                action: 'Edit Screen',
+                name: 'Used QR scanner',
+              },
+            })
+            this.props.scanQrCode()
+          }}
+          accounts={toAccounts}
+          closeDropdown={() => closeToDropdown()}
+          dropdownOpen={toDropdownOpen}
+          inError={inError}
+          name={'address'}
+          network={network}
+          onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)}
+          openDropdown={() => openToDropdown()}
+          placeholder={this.context.t('recipientAddress')}
+          to={to}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js
new file mode 100644
index 000000000..30865d295
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js
@@ -0,0 +1,54 @@
+import { connect } from 'react-redux'
+import {
+    getCurrentNetwork,
+    getSelectedToken,
+    getSendTo,
+    getSendToAccounts,
+    getSendHexData,
+} from '../../send.selectors.js'
+import {
+    getToDropdownOpen,
+    getTokens,
+    sendToIsInError,
+    sendToIsInWarning,
+} from './send-to-row.selectors.js'
+import {
+    updateSendTo,
+} from '../../../../../store/actions'
+import {
+  updateSendErrors,
+  updateSendWarnings,
+  openToDropdown,
+  closeToDropdown,
+} from '../../../../../ducks/send/send.duck'
+import SendToRow from './send-to-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+
+function mapStateToProps (state) {
+  return {
+    hasHexData: Boolean(getSendHexData(state)),
+    inError: sendToIsInError(state),
+    inWarning: sendToIsInWarning(state),
+    network: getCurrentNetwork(state),
+    selectedToken: getSelectedToken(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    toDropdownOpen: getToDropdownOpen(state),
+    tokens: getTokens(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    closeToDropdown: () => dispatch(closeToDropdown()),
+    openToDropdown: () => dispatch(openToDropdown()),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    updateSendToError: (toErrorObject) => {
+        dispatch(updateSendErrors(toErrorObject))
+    },
+    updateSendToWarning: (toWarningObject) => {
+      dispatch(updateSendWarnings(toWarningObject))
+  },
+  }
+}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js
index a6160d335..a6160d335 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js
+++ b/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js
new file mode 100644
index 000000000..60e75d34c
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js
@@ -0,0 +1,36 @@
+const {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+} = require('../../send.constants')
+const { isValidAddress, isEthNetwork } = require('../../../../../helpers/utils/util')
+import { checkExistingAddresses } from '../../../../../pages/add-token/util'
+
+const ethUtil = require('ethereumjs-util')
+const contractMap = require('eth-contract-metadata')
+
+function getToErrorObject (to, toError = null, hasHexData = false, tokens = [], selectedToken = null, network) {
+  if (!to) {
+    if (!hasHexData) {
+      toError = REQUIRED_ERROR
+    }
+  } else if (!isValidAddress(to, network) && !toError) {
+    toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR
+  } else if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
+    toError = KNOWN_RECIPIENT_ADDRESS_ERROR
+  }
+  return { to: toError }
+}
+
+function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) {
+  if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
+    toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR
+  }
+  return { to: toWarning }
+}
+
+module.exports = {
+  getToErrorObject,
+  getToWarningObject,
+}
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js
index d4d054057..d4d054057 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
+++ b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js
new file mode 100644
index 000000000..94b4f1024
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js
@@ -0,0 +1,134 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendTo: sinon.spy(),
+}
+const duckActionSpies = {
+  closeToDropdown: sinon.spy(),
+  openToDropdown: sinon.spy(),
+  updateSendErrors: sinon.spy(),
+  updateSendWarnings: sinon.spy(),
+}
+
+proxyquire('../send-to-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendHexData: (s) => s,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendToAccounts: (s) => `mockToAccounts:${s}`,
+  },
+  './send-to-row.selectors.js': {
+    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
+    sendToIsInError: (s) => `mockInError:${s}`,
+    sendToIsInWarning: (s) => `mockInWarning:${s}`,
+    getTokens: (s) => `mockTokens:${s}`,
+  },
+  '../../../../../store/actions': actionSpies,
+  '../../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('send-to-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        hasHexData: true,
+        inError: 'mockInError:mockState',
+        inWarning: 'mockInWarning:mockState',
+        network: 'mockNetwork:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        to: 'mockTo:mockState',
+        toAccounts: 'mockToAccounts:mockState',
+        toDropdownOpen: 'mockToDropdownOpen:mockState',
+        tokens: 'mockTokens:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('closeToDropdown()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.closeToDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.closeToDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.closeToDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('openToDropdown()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.openToDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.openToDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.openToDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('updateSendTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.updateSendTo.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateSendTo.getCall(0).args,
+          ['mockTo', 'mockNickname']
+        )
+      })
+    })
+
+    describe('updateSendToError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendToError('mockToErrorObject')
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          'mockToErrorObject'
+        )
+      })
+    })
+
+    describe('updateSendToWarning()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject')
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendWarnings.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendWarnings.getCall(0).args[0],
+          'mockToWarningObject'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
index 0fa342d1e..0fa342d1e 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
+++ b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js
new file mode 100644
index 000000000..95882d640
--- /dev/null
+++ b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -0,0 +1,107 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+import {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+} from '../../../send.constants'
+
+const stubs = {
+  isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))),
+}
+
+const toRowUtils = proxyquire('../send-to-row.utils.js', {
+  '../../../../../helpers/utils/util': {
+    isValidAddress: stubs.isValidAddress,
+  },
+})
+const {
+  getToErrorObject,
+  getToWarningObject,
+} = toRowUtils
+
+describe('send-to-row utils', () => {
+
+  describe('getToErrorObject()', () => {
+    it('should return a required error if to is falsy', () => {
+      assert.deepEqual(getToErrorObject(null), {
+        to: REQUIRED_ERROR,
+      })
+    })
+
+    it('should return null if to is falsy and hexData is truthy', () => {
+      assert.deepEqual(getToErrorObject(null, undefined, true), {
+        to: null,
+      })
+    })
+
+    it('should return an invalid recipient error if to is truthy but invalid', () => {
+      assert.deepEqual(getToErrorObject('mockInvalidTo'), {
+        to: INVALID_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should return null if to is truthy and valid', () => {
+      assert.deepEqual(getToErrorObject('0xabc123'), {
+        to: null,
+      })
+    })
+
+    it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => {
+      assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), {
+        to: 'someExplicitError',
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of state tokens', () => {
+      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
+      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), {
+        to: null,
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
+      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
+      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+  })
+
+  describe('getToWarningObject()', () => {
+    it('should return a known address recipient if to is truthy but part of state tokens', () => {
+      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
+      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), {
+        to: null,
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
+      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
+      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+  })
+
+})
diff --git a/ui/app/components/app/send/send-content/tests/send-content-component.test.js b/ui/app/components/app/send/send-content/tests/send-content-component.test.js
new file mode 100644
index 000000000..7d102c930
--- /dev/null
+++ b/ui/app/components/app/send/send-content/tests/send-content-component.test.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendContent from '../send-content.component.js'
+
+import PageContainerContent from '../../../../ui/page-container/page-container-content.component'
+import SendAmountRow from '../send-amount-row/send-amount-row.container'
+import SendFromRow from '../send-from-row/send-from-row.container'
+import SendGasRow from '../send-gas-row/send-gas-row.container'
+import SendToRow from '../send-to-row/send-to-row.container'
+import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
+
+describe('SendContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendContent showHexData={true} />)
+  })
+
+  describe('render', () => {
+    it('should render a PageContainerContent component', () => {
+      assert.equal(wrapper.find(PageContainerContent).length, 1)
+    })
+
+    it('should render a div with a .send-v2__form class as a child of PageContainerContent', () => {
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      PageContainerContentChild.is('div')
+      PageContainerContentChild.is('.send-v2__form')
+    })
+
+    it('should render the correct row components as grandchildren of the PageContainerContent component', () => {
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
+      assert(PageContainerContentChild.childAt(1).is(SendToRow))
+      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
+      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
+      assert(PageContainerContentChild.childAt(4).is(SendHexDataRow))
+    })
+
+    it('should not render the SendHexDataRow if props.showHexData is false', () => {
+      wrapper.setProps({ showHexData: false })
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
+      assert(PageContainerContentChild.childAt(1).is(SendToRow))
+      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
+      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
+      assert.equal(PageContainerContentChild.childAt(4).exists(), false)
+    })
+  })
+})
diff --git a/ui/app/components/send/send-footer/README.md b/ui/app/components/app/send/send-footer/README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-footer/README.md
+++ b/ui/app/components/app/send/send-footer/README.md
diff --git a/ui/app/components/send/send-footer/index.js b/ui/app/components/app/send/send-footer/index.js
index 58e91d622..58e91d622 100644
--- a/ui/app/components/send/send-footer/index.js
+++ b/ui/app/components/app/send/send-footer/index.js
diff --git a/ui/app/components/app/send/send-footer/send-footer.component.js b/ui/app/components/app/send/send-footer/send-footer.component.js
new file mode 100644
index 000000000..cc891a9b3
--- /dev/null
+++ b/ui/app/components/app/send/send-footer/send-footer.component.js
@@ -0,0 +1,137 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../../ui/page-container/page-container-footer'
+import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
+
+export default class SendFooter extends Component {
+
+  static propTypes = {
+    addToAddressBookIfNew: PropTypes.func,
+    amount: PropTypes.string,
+    data: PropTypes.string,
+    clearSend: PropTypes.func,
+    disabled: PropTypes.bool,
+    editingTransactionId: PropTypes.string,
+    errors: PropTypes.object,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    inError: PropTypes.bool,
+    selectedToken: PropTypes.object,
+    sign: PropTypes.func,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    tokenBalance: PropTypes.string,
+    unapprovedTxs: PropTypes.object,
+    update: PropTypes.func,
+    sendErrors: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  onCancel () {
+    this.props.clearSend()
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  onSubmit (event) {
+    event.preventDefault()
+    const {
+      addToAddressBookIfNew,
+      amount,
+      data,
+      editingTransactionId,
+      from: {address: from},
+      gasLimit: gas,
+      gasPrice,
+      selectedToken,
+      sign,
+      to,
+      unapprovedTxs,
+      // updateTx,
+      update,
+      toAccounts,
+      history,
+    } = this.props
+    const { metricsEvent } = this.context
+
+    // Should not be needed because submit should be disabled if there are errors.
+    // const noErrors = !amountError && toError === null
+
+    // if (!noErrors) {
+    //   return
+    // }
+
+    // TODO: add nickname functionality
+    addToAddressBookIfNew(to, toAccounts)
+    const promise = editingTransactionId
+      ? update({
+        amount,
+        data,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+      : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
+
+    Promise.resolve(promise)
+      .then(() => {
+        metricsEvent({
+          eventOpts: {
+            category: 'Transactions',
+            action: 'Edit Screen',
+            name: 'Complete',
+          },
+        })
+        history.push(CONFIRM_TRANSACTION_ROUTE)
+      })
+  }
+
+  formShouldBeDisabled () {
+    const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
+    const missingTokenBalance = selectedToken && !tokenBalance
+    const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to)
+    return shouldBeDisabled
+  }
+
+  componentDidUpdate (prevProps) {
+    const { inError, sendErrors } = this.props
+    const { metricsEvent } = this.context
+    if (!prevProps.inError && inError) {
+      const errorField = Object.keys(sendErrors).find(key => sendErrors[key])
+      const errorMessage = sendErrors[errorField]
+
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Edit Screen',
+          name: 'Error',
+        },
+        customVariables: {
+          errorField,
+          errorMessage,
+        },
+      })
+    }
+  }
+
+  render () {
+    return (
+      <PageContainerFooter
+        onCancel={() => this.onCancel()}
+        onSubmit={e => this.onSubmit(e)}
+        disabled={this.formShouldBeDisabled()}
+      />
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send-footer/send-footer.container.js b/ui/app/components/app/send/send-footer/send-footer.container.js
new file mode 100644
index 000000000..502159a81
--- /dev/null
+++ b/ui/app/components/app/send/send-footer/send-footer.container.js
@@ -0,0 +1,107 @@
+import { connect } from 'react-redux'
+import ethUtil from 'ethereumjs-util'
+import {
+  addToAddressBook,
+  clearSend,
+  signTokenTx,
+  signTx,
+  updateTransaction,
+} from '../../../../store/actions'
+import SendFooter from './send-footer.component'
+import {
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getSelectedToken,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendFromObject,
+  getSendTo,
+  getSendToAccounts,
+  getSendHexData,
+  getTokenBalance,
+  getUnapprovedTxs,
+  getSendErrors,
+} from '../send.selectors'
+import {
+  isSendFormInError,
+} from './send-footer.selectors'
+import {
+  addressIsNew,
+  constructTxParams,
+  constructUpdatedTx,
+} from './send-footer.utils'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    data: getSendHexData(state),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    gasTotal: getGasTotal(state),
+    inError: isSendFormInError(state),
+    selectedToken: getSelectedToken(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    tokenBalance: getTokenBalance(state),
+    unapprovedTxs: getUnapprovedTxs(state),
+    sendErrors: getSendErrors(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(clearSend()),
+    sign: ({ selectedToken, to, amount, from, gas, gasPrice, data }) => {
+      const txParams = constructTxParams({
+        amount,
+        data,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+      })
+
+      selectedToken
+        ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams))
+        : dispatch(signTx(txParams))
+    },
+    update: ({
+      amount,
+      data,
+      editingTransactionId,
+      from,
+      gas,
+      gasPrice,
+      selectedToken,
+      to,
+      unapprovedTxs,
+    }) => {
+      const editingTx = constructUpdatedTx({
+        amount,
+        data,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+
+      return dispatch(updateTransaction(editingTx))
+    },
+    addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => {
+      const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress)
+      if (addressIsNew(toAccounts)) {
+        // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
+        dispatch(addToAddressBook(hexPrefixedAddress, nickname))
+      }
+    },
+  }
+}
diff --git a/ui/app/components/send/send-footer/send-footer.scss b/ui/app/components/app/send/send-footer/send-footer.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-footer/send-footer.scss
+++ b/ui/app/components/app/send/send-footer/send-footer.scss
diff --git a/ui/app/components/send/send-footer/send-footer.selectors.js b/ui/app/components/app/send/send-footer/send-footer.selectors.js
index e20addfdc..e20addfdc 100644
--- a/ui/app/components/send/send-footer/send-footer.selectors.js
+++ b/ui/app/components/app/send/send-footer/send-footer.selectors.js
diff --git a/ui/app/components/send/send-footer/send-footer.utils.js b/ui/app/components/app/send/send-footer/send-footer.utils.js
index f82ff1e9b..f82ff1e9b 100644
--- a/ui/app/components/send/send-footer/send-footer.utils.js
+++ b/ui/app/components/app/send/send-footer/send-footer.utils.js
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js
new file mode 100644
index 000000000..6683ca8c0
--- /dev/null
+++ b/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js
@@ -0,0 +1,233 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../../helpers/constants/routes'
+import SendFooter from '../send-footer.component.js'
+
+import PageContainerFooter from '../../../../ui/page-container/page-container-footer'
+
+const propsMethodSpies = {
+  addToAddressBookIfNew: sinon.spy(),
+  clearSend: sinon.spy(),
+  sign: sinon.spy(),
+  update: sinon.spy(),
+}
+const historySpies = {
+  push: sinon.spy(),
+}
+const MOCK_EVENT = { preventDefault: () => {} }
+
+sinon.spy(SendFooter.prototype, 'onCancel')
+sinon.spy(SendFooter.prototype, 'onSubmit')
+
+describe('SendFooter Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendFooter
+      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+      amount={'mockAmount'}
+      clearSend={propsMethodSpies.clearSend}
+      disabled={true}
+      editingTransactionId={'mockEditingTransactionId'}
+      errors={{}}
+      from={ { address: 'mockAddress', balance: 'mockBalance' } }
+      gasLimit={'mockGasLimit'}
+      gasPrice={'mockGasPrice'}
+      gasTotal={'mockGasTotal'}
+      history={historySpies}
+      inError={false}
+      selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+      sign={propsMethodSpies.sign}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      tokenBalance={'mockTokenBalance'}
+      unapprovedTxs={['mockTx']}
+      update={propsMethodSpies.update}
+      sendErrors={{}}
+    />, { context: { t: str => str, metricsEvent: () => ({}) } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.clearSend.resetHistory()
+    propsMethodSpies.addToAddressBookIfNew.resetHistory()
+    propsMethodSpies.clearSend.resetHistory()
+    propsMethodSpies.sign.resetHistory()
+    propsMethodSpies.update.resetHistory()
+    historySpies.push.resetHistory()
+    SendFooter.prototype.onCancel.resetHistory()
+    SendFooter.prototype.onSubmit.resetHistory()
+  })
+
+  describe('onCancel', () => {
+    it('should call clearSend', () => {
+      assert.equal(propsMethodSpies.clearSend.callCount, 0)
+      wrapper.instance().onCancel()
+      assert.equal(propsMethodSpies.clearSend.callCount, 1)
+    })
+
+    it('should call history.push', () => {
+      assert.equal(historySpies.push.callCount, 0)
+      wrapper.instance().onCancel()
+      assert.equal(historySpies.push.callCount, 1)
+      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
+    })
+  })
+
+
+  describe('formShouldBeDisabled()', () => {
+    const config = {
+      'should return true if inError is truthy': {
+        inError: true,
+        expectedResult: true,
+      },
+      'should return true if gasTotal is falsy': {
+        inError: false,
+        gasTotal: false,
+        expectedResult: true,
+      },
+      'should return true if to is truthy': {
+        to: '0xsomevalidAddress',
+        inError: false,
+        gasTotal: false,
+        expectedResult: true,
+      },
+      'should return true if selectedToken is truthy and tokenBalance is falsy': {
+        selectedToken: true,
+        tokenBalance: null,
+        expectedResult: true,
+      },
+      'should return false if inError is false and all other params are truthy': {
+        inError: false,
+        gasTotal: '0x123',
+        selectedToken: true,
+        tokenBalance: 123,
+        expectedResult: false,
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        wrapper.setProps(obj)
+        assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('onSubmit', () => {
+    it('should call addToAddressBookIfNew with the correct params', () => {
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.addToAddressBookIfNew.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
+        ['mockTo', ['mockAccount']]
+      )
+    })
+
+    it('should call props.update if editingTransactionId is truthy', () => {
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.update.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.update.getCall(0).args[0],
+        {
+          data: undefined,
+          amount: 'mockAmount',
+          editingTransactionId: 'mockEditingTransactionId',
+          from: 'mockAddress',
+          gas: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          selectedToken: { mockProp: 'mockSelectedTokenProp' },
+          to: 'mockTo',
+          unapprovedTxs: ['mockTx'],
+        }
+      )
+    })
+
+    it('should not call props.sign if editingTransactionId is truthy', () => {
+      assert.equal(propsMethodSpies.sign.callCount, 0)
+    })
+
+    it('should call props.sign if editingTransactionId is falsy', () => {
+      wrapper.setProps({ editingTransactionId: null })
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.sign.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.sign.getCall(0).args[0],
+        {
+          data: undefined,
+          amount: 'mockAmount',
+          from: 'mockAddress',
+          gas: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          selectedToken: { mockProp: 'mockSelectedTokenProp' },
+          to: 'mockTo',
+        }
+      )
+    })
+
+    it('should not call props.update if editingTransactionId is falsy', () => {
+      assert.equal(propsMethodSpies.update.callCount, 0)
+    })
+
+    it('should call history.push', done => {
+      Promise.resolve(wrapper.instance().onSubmit(MOCK_EVENT))
+        .then(() => {
+          assert.equal(historySpies.push.callCount, 1)
+          assert.equal(historySpies.push.getCall(0).args[0], CONFIRM_TRANSACTION_ROUTE)
+          done()
+        })
+    })
+  })
+
+  describe('render', () => {
+    beforeEach(() => {
+      sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
+      wrapper = shallow(<SendFooter
+        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+        amount={'mockAmount'}
+        clearSend={propsMethodSpies.clearSend}
+        disabled={true}
+        editingTransactionId={'mockEditingTransactionId'}
+        errors={{}}
+        from={ { address: 'mockAddress', balance: 'mockBalance' } }
+        gasLimit={'mockGasLimit'}
+        gasPrice={'mockGasPrice'}
+        gasTotal={'mockGasTotal'}
+        history={historySpies}
+        inError={false}
+        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+        sign={propsMethodSpies.sign}
+        to={'mockTo'}
+        toAccounts={['mockAccount']}
+        tokenBalance={'mockTokenBalance'}
+        unapprovedTxs={['mockTx']}
+        update={propsMethodSpies.update}
+      />, { context: { t: str => str, metricsEvent: () => ({}) } })
+    })
+
+    afterEach(() => {
+      SendFooter.prototype.formShouldBeDisabled.restore()
+    })
+
+    it('should render a PageContainerFooter component', () => {
+      assert.equal(wrapper.find(PageContainerFooter).length, 1)
+    })
+
+    it('should pass the correct props to PageContainerFooter', () => {
+      const {
+        onCancel,
+        onSubmit,
+        disabled,
+      } = wrapper.find(PageContainerFooter).props()
+      assert.equal(disabled, 'formShouldBeDisabledReturn')
+
+      assert.equal(SendFooter.prototype.onSubmit.callCount, 0)
+      onSubmit(MOCK_EVENT)
+      assert.equal(SendFooter.prototype.onSubmit.callCount, 1)
+
+      assert.equal(SendFooter.prototype.onCancel.callCount, 0)
+      onCancel()
+      assert.equal(SendFooter.prototype.onCancel.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js
new file mode 100644
index 000000000..878b0aa19
--- /dev/null
+++ b/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js
@@ -0,0 +1,200 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  addToAddressBook: sinon.spy(),
+  clearSend: sinon.spy(),
+  signTokenTx: sinon.spy(),
+  signTx: sinon.spy(),
+  updateTransaction: sinon.spy(),
+}
+const utilsStubs = {
+  addressIsNew: sinon.stub().returns(true),
+  constructTxParams: sinon.stub().returns({
+    value: 'mockAmount',
+  }),
+  constructUpdatedTx: sinon.stub().returns('mockConstructedUpdatedTxParams'),
+}
+
+proxyquire('../send-footer.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../../store/actions': actionSpies,
+  '../send.selectors': {
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
+    getSendFromObject: (s) => `mockFromObject:${s}`,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendToAccounts: (s) => `mockToAccounts:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getSendHexData: (s) => `mockHexData:${s}`,
+    getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
+    getSendErrors: (s) => `mockSendErrors:${s}`,
+  },
+  './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
+  './send-footer.utils': utilsStubs,
+})
+
+describe('send-footer container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        data: 'mockHexData:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        editingTransactionId: 'mockEditingTransactionId:mockState',
+        from: 'mockFromObject:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        inError: 'mockInError:mockState',
+        to: 'mockTo:mockState',
+        toAccounts: 'mockToAccounts:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+        unapprovedTxs: 'mockUnapprovedTxs:mockState',
+        sendErrors: 'mockSendErrors:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('clearSend()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.clearSend()
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.clearSend.calledOnce)
+      })
+    })
+
+    describe('sign()', () => {
+      it('should dispatch a signTokenTx action if selectedToken is defined', () => {
+        mapDispatchToPropsObject.sign({
+          selectedToken: {
+            address: '0xabc',
+          },
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructTxParams.getCall(0).args[0],
+          {
+            data: undefined,
+            selectedToken: {
+              address: '0xabc',
+            },
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+          }
+        )
+        assert.deepEqual(
+          actionSpies.signTokenTx.getCall(0).args,
+          [ '0xabc', 'mockTo', 'mockAmount', { value: 'mockAmount' } ]
+        )
+      })
+
+      it('should dispatch a sign action if selectedToken is not defined', () => {
+        utilsStubs.constructTxParams.resetHistory()
+        mapDispatchToPropsObject.sign({
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructTxParams.getCall(0).args[0],
+          {
+            data: undefined,
+            selectedToken: undefined,
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+          }
+        )
+        assert.deepEqual(
+          actionSpies.signTx.getCall(0).args,
+          [ { value: 'mockAmount' } ]
+        )
+      })
+    })
+
+    describe('update()', () => {
+      it('should dispatch an updateTransaction action', () => {
+        mapDispatchToPropsObject.update({
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+          editingTransactionId: 'mockEditingTransactionId',
+          selectedToken: 'mockSelectedToken',
+          unapprovedTxs: 'mockUnapprovedTxs',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructUpdatedTx.getCall(0).args[0],
+          {
+            data: undefined,
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+            editingTransactionId: 'mockEditingTransactionId',
+            selectedToken: 'mockSelectedToken',
+            unapprovedTxs: 'mockUnapprovedTxs',
+          }
+        )
+        assert.equal(actionSpies.updateTransaction.getCall(0).args[0], 'mockConstructedUpdatedTxParams')
+      })
+    })
+
+    describe('addToAddressBookIfNew()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.addToAddressBookIfNew('mockNewAddress', 'mockToAccounts', 'mockNickname')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(utilsStubs.addressIsNew.getCall(0).args[0], 'mockToAccounts')
+        assert.deepEqual(
+          actionSpies.addToAddressBook.getCall(0).args,
+          [ '0xmockNewAddress', 'mockNickname' ]
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-footer/tests/send-footer-selectors.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js
index 8de032f57..8de032f57 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-selectors.test.js
+++ b/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js
diff --git a/ui/app/components/send/send-footer/tests/send-footer-utils.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js
index 28ff0c891..28ff0c891 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-utils.test.js
+++ b/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js
diff --git a/ui/app/components/send/send-header/README.md b/ui/app/components/app/send/send-header/README.md
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send-header/README.md
+++ b/ui/app/components/app/send/send-header/README.md
diff --git a/ui/app/components/send/send-header/index.js b/ui/app/components/app/send/send-header/index.js
index 0b17f0b7d..0b17f0b7d 100644
--- a/ui/app/components/send/send-header/index.js
+++ b/ui/app/components/app/send/send-header/index.js
diff --git a/ui/app/components/app/send/send-header/send-header.component.js b/ui/app/components/app/send/send-header/send-header.component.js
new file mode 100644
index 000000000..f216954ef
--- /dev/null
+++ b/ui/app/components/app/send/send-header/send-header.component.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerHeader from '../../../ui/page-container/page-container-header'
+import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
+
+export default class SendHeader extends Component {
+
+  static propTypes = {
+    clearSend: PropTypes.func,
+    history: PropTypes.object,
+    titleKey: PropTypes.string,
+    subtitleParams: PropTypes.array,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onClose () {
+    this.props.clearSend()
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  render () {
+    return (
+      <PageContainerHeader
+        onClose={() => this.onClose()}
+        subtitle={this.context.t(...this.props.subtitleParams)}
+        title={this.context.t(this.props.titleKey)}
+      />
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send-header/send-header.container.js b/ui/app/components/app/send/send-header/send-header.container.js
new file mode 100644
index 000000000..ce53fba9a
--- /dev/null
+++ b/ui/app/components/app/send/send-header/send-header.container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import { clearSend } from '../../../../store/actions'
+import SendHeader from './send-header.component'
+import { getSubtitleParams, getTitleKey } from './send-header.selectors'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
+
+function mapStateToProps (state) {
+  return {
+    titleKey: getTitleKey(state),
+    subtitleParams: getSubtitleParams(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(clearSend()),
+  }
+}
diff --git a/ui/app/components/send/send-header/send-header.selectors.js b/ui/app/components/app/send/send-header/send-header.selectors.js
index d7c9d3766..d7c9d3766 100644
--- a/ui/app/components/send/send-header/send-header.selectors.js
+++ b/ui/app/components/app/send/send-header/send-header.selectors.js
diff --git a/ui/app/components/app/send/send-header/tests/send-header-component.test.js b/ui/app/components/app/send/send-header/tests/send-header-component.test.js
new file mode 100644
index 000000000..db2ee8967
--- /dev/null
+++ b/ui/app/components/app/send/send-header/tests/send-header-component.test.js
@@ -0,0 +1,70 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { DEFAULT_ROUTE } from '../../../../../helpers/constants/routes'
+import SendHeader from '../send-header.component.js'
+
+import PageContainerHeader from '../../../../ui/page-container/page-container-header'
+
+const propsMethodSpies = {
+  clearSend: sinon.spy(),
+}
+const historySpies = {
+  push: sinon.spy(),
+}
+
+sinon.spy(SendHeader.prototype, 'onClose')
+
+describe('SendHeader Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendHeader
+      clearSend={propsMethodSpies.clearSend}
+      history={historySpies}
+      titleKey={'mockTitleKey'}
+      subtitleParams={[ 'mockSubtitleKey', 'mockVal']}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.clearSend.resetHistory()
+    historySpies.push.resetHistory()
+    SendHeader.prototype.onClose.resetHistory()
+  })
+
+  describe('onClose', () => {
+    it('should call clearSend', () => {
+      assert.equal(propsMethodSpies.clearSend.callCount, 0)
+      wrapper.instance().onClose()
+      assert.equal(propsMethodSpies.clearSend.callCount, 1)
+    })
+
+    it('should call history.push', () => {
+      assert.equal(historySpies.push.callCount, 0)
+      wrapper.instance().onClose()
+      assert.equal(historySpies.push.callCount, 1)
+      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
+    })
+  })
+
+  describe('render', () => {
+    it('should render a PageContainerHeader compenent', () => {
+      assert.equal(wrapper.find(PageContainerHeader).length, 1)
+    })
+
+    it('should pass the correct props to PageContainerHeader', () => {
+      const {
+        onClose,
+        subtitle,
+        title,
+      } = wrapper.find(PageContainerHeader).props()
+      assert.equal(subtitle, 'mockSubtitleKeymockVal')
+      assert.equal(title, 'mockTitleKey')
+      assert.equal(SendHeader.prototype.onClose.callCount, 0)
+      onClose()
+      assert.equal(SendHeader.prototype.onClose.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/app/send/send-header/tests/send-header-container.test.js b/ui/app/components/app/send/send-header/tests/send-header-container.test.js
new file mode 100644
index 000000000..634c3424b
--- /dev/null
+++ b/ui/app/components/app/send/send-header/tests/send-header-container.test.js
@@ -0,0 +1,59 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  clearSend: sinon.spy(),
+}
+
+proxyquire('../send-header.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../../store/actions': actionSpies,
+  './send-header.selectors': {
+    getTitleKey: (s) => `mockTitleKey:${s}`,
+    getSubtitleParams: (s) => `mockSubtitleParams:${s}`,
+  },
+})
+
+describe('send-header container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        titleKey: 'mockTitleKey:mockState',
+        subtitleParams: 'mockSubtitleParams:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('clearSend()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.clearSend()
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.clearSend.calledOnce)
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-header/tests/send-header-selectors.test.js b/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js
index e0c6a3ab3..e0c6a3ab3 100644
--- a/ui/app/components/send/send-header/tests/send-header-selectors.test.js
+++ b/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js
diff --git a/ui/app/components/app/send/send.component.js b/ui/app/components/app/send/send.component.js
new file mode 100644
index 000000000..a38b681b0
--- /dev/null
+++ b/ui/app/components/app/send/send.component.js
@@ -0,0 +1,218 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PersistentForm from '../../../../lib/persistent-form'
+import {
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  doesAmountErrorRequireUpdate,
+} from './send.utils'
+
+import SendHeader from './send-header'
+import SendContent from './send-content'
+import SendFooter from './send-footer'
+
+export default class SendTransactionScreen extends PersistentForm {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    blockGasLimit: PropTypes.string,
+    conversionRate: PropTypes.number,
+    editingTransactionId: PropTypes.string,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    network: PropTypes.string,
+    primaryCurrency: PropTypes.string,
+    recentBlocks: PropTypes.array,
+    selectedAddress: PropTypes.string,
+    selectedToken: PropTypes.object,
+    tokenBalance: PropTypes.string,
+    tokenContract: PropTypes.object,
+    fetchBasicGasEstimates: PropTypes.func,
+    updateAndSetGasTotal: PropTypes.func,
+    updateSendErrors: PropTypes.func,
+    updateSendTokenBalance: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    qrCodeDetected: PropTypes.func,
+    qrCodeData: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.qrCodeData) {
+      if (nextProps.qrCodeData.type === 'address') {
+        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
+        const currentAddress = this.props.to && this.props.to.toLowerCase()
+        if (currentAddress !== scannedAddress) {
+          this.props.updateSendTo(scannedAddress)
+          this.updateGas({ to: scannedAddress })
+          // Clean up QR code data after handling
+          this.props.qrCodeDetected(null)
+        }
+      }
+    }
+  }
+
+  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
+    const {
+      amount,
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken = {},
+      to: currentToAddress,
+      updateAndSetGasLimit,
+    } = this.props
+
+    updateAndSetGasLimit({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
+      value: value || amount,
+      data,
+    })
+  }
+
+  componentDidUpdate (prevProps) {
+    const {
+      amount,
+      amountConversionRate,
+      conversionRate,
+      from: { address, balance },
+      gasTotal,
+      network,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateSendErrors,
+      updateSendTokenBalance,
+      tokenContract,
+    } = this.props
+
+    const {
+      from: { balance: prevBalance },
+      gasTotal: prevGasTotal,
+      tokenBalance: prevTokenBalance,
+      network: prevNetwork,
+    } = prevProps
+
+    const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
+
+    const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
+      balance,
+      gasTotal,
+      prevBalance,
+      prevGasTotal,
+      prevTokenBalance,
+      selectedToken,
+      tokenBalance,
+    })
+
+    if (amountErrorRequiresUpdate) {
+      const amountErrorObject = getAmountErrorObject({
+        amount,
+        amountConversionRate,
+        balance,
+        conversionRate,
+        gasTotal,
+        primaryCurrency,
+        selectedToken,
+        tokenBalance,
+      })
+      const gasFeeErrorObject = selectedToken
+        ? getGasFeeErrorObject({
+          amountConversionRate,
+          balance,
+          conversionRate,
+          gasTotal,
+          primaryCurrency,
+          selectedToken,
+        })
+        : { gasFee: null }
+      updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject))
+    }
+
+    if (!uninitialized) {
+
+      if (network !== prevNetwork && network !== 'loading') {
+        updateSendTokenBalance({
+          selectedToken,
+          tokenContract,
+          address,
+        })
+        this.updateGas()
+      }
+    }
+  }
+
+  componentDidMount () {
+    this.props.fetchBasicGasEstimates()
+    .then(() => {
+      this.updateGas()
+    })
+  }
+
+  componentWillMount () {
+    const {
+      from: { address },
+      selectedToken,
+      tokenContract,
+      updateSendTokenBalance,
+    } = this.props
+
+    updateSendTokenBalance({
+      selectedToken,
+      tokenContract,
+      address,
+    })
+
+    // Show QR Scanner modal  if ?scan=true
+    if (window.location.search === '?scan=true') {
+      this.props.scanQrCode()
+
+      // Clear the queryString param after showing the modal
+      const cleanUrl = location.href.split('?')[0]
+      history.pushState({}, null, `${cleanUrl}`)
+      window.location.hash = '#send'
+    }
+  }
+
+  componentWillUnmount () {
+    this.props.resetSendState()
+  }
+
+  render () {
+    const { history, showHexData } = this.props
+
+    return (
+      <div className="page-container">
+        <SendHeader history={history}/>
+        <SendContent
+          updateGas={(updateData) => this.updateGas(updateData)}
+          scanQrCode={_ => this.props.scanQrCode()}
+          showHexData={showHexData}
+        />
+        <SendFooter history={history}/>
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/app/send/send.constants.js b/ui/app/components/app/send/send.constants.js
new file mode 100644
index 000000000..36549038e
--- /dev/null
+++ b/ui/app/components/app/send/send.constants.js
@@ -0,0 +1,61 @@
+const ethUtil = require('ethereumjs-util')
+const { conversionUtil, multiplyCurrencies } = require('../../../helpers/utils/conversion-util')
+
+const MIN_GAS_PRICE_DEC = '0'
+const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
+
+const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
+  fromDenomination: 'WEI',
+  toDenomination: 'GWEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+  numberOfDecimals: 1,
+}))
+
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
+  toNumericBase: 'hex',
+  multiplicandBase: 16,
+  multiplierBase: 16,
+})
+
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
+const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'
+const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens'
+const NEGATIVE_ETH_ERROR = 'negativeETH'
+const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient'
+const INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR = 'invalidAddressRecipientNotEthNetwork'
+const REQUIRED_ERROR = 'required'
+const KNOWN_RECIPIENT_ADDRESS_ERROR = 'knownAddressRecipient'
+
+const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', {
+  fromDenomination: 'GWEI',
+  toDenomination: 'WEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+}))
+
+const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
+const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers.
+
+module.exports = {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_LIMIT_HEX,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_PRICE_GWEI,
+  MIN_GAS_PRICE_HEX,
+  MIN_GAS_TOTAL,
+  NEGATIVE_ETH_ERROR,
+  ONE_GWEI_IN_WEI_HEX,
+  REQUIRED_ERROR,
+  SIMPLE_GAS_COST,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+  BASE_TOKEN_GAS_COST,
+}
diff --git a/ui/app/components/app/send/send.container.js b/ui/app/components/app/send/send.container.js
new file mode 100644
index 000000000..e65463b93
--- /dev/null
+++ b/ui/app/components/app/send/send.container.js
@@ -0,0 +1,112 @@
+import { connect } from 'react-redux'
+import SendEther from './send.component'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import {
+  getAmountConversionRate,
+  getBlockGasLimit,
+  getConversionRate,
+  getCurrentNetwork,
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getPrimaryCurrency,
+  getRecentBlocks,
+  getSelectedAddress,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendHexDataFeatureFlagState,
+  getSendFromObject,
+  getSendTo,
+  getTokenBalance,
+  getQrCodeData,
+} from './send.selectors'
+import {
+  updateSendTo,
+  updateSendTokenBalance,
+  updateGasData,
+  setGasTotal,
+  showQrScanner,
+  qrCodeDetected,
+} from '../../../store/actions'
+import {
+  resetSendState,
+  updateSendErrors,
+} from '../../../ducks/send/send.duck'
+import {
+  fetchBasicGasEstimates,
+} from '../../../ducks/gas/gas.duck'
+import {
+  calcGasTotal,
+} from './send.utils.js'
+
+import {
+  SEND_ROUTE,
+} from '../../../helpers/constants/routes'
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SendEther)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    blockGasLimit: getBlockGasLimit(state),
+    conversionRate: getConversionRate(state),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    gasTotal: getGasTotal(state),
+    network: getCurrentNetwork(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    recentBlocks: getRecentBlocks(state),
+    selectedAddress: getSelectedAddress(state),
+    selectedToken: getSelectedToken(state),
+    showHexData: getSendHexDataFeatureFlagState(state),
+    to: getSendTo(state),
+    tokenBalance: getTokenBalance(state),
+    tokenContract: getSelectedTokenContract(state),
+    tokenToFiatRate: getSelectedTokenToFiatRate(state),
+    qrCodeData: getQrCodeData(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateAndSetGasLimit: ({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to,
+      value,
+      data,
+    }) => {
+      !editingTransactionId
+        ? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
+        : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
+    },
+    updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
+      dispatch(updateSendTokenBalance({
+        selectedToken,
+        tokenContract,
+        address,
+      }))
+    },
+    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
+    resetSendState: () => dispatch(resetSendState()),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
+  }
+}
diff --git a/ui/app/components/send/send.scss b/ui/app/components/app/send/send.scss
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/send/send.scss
+++ b/ui/app/components/app/send/send.scss
diff --git a/ui/app/components/app/send/send.selectors.js b/ui/app/components/app/send/send.selectors.js
new file mode 100644
index 000000000..2ec677ad1
--- /dev/null
+++ b/ui/app/components/app/send/send.selectors.js
@@ -0,0 +1,291 @@
+const { valuesFor } = require('../../../helpers/utils/util')
+const abi = require('human-standard-token-abi')
+const {
+  multiplyCurrencies,
+} = require('../../../helpers/utils/conversion-util')
+const {
+  getMetaMaskAccounts,
+} = require('../../../selectors/selectors')
+const {
+  estimateGasPriceFromRecentBlocks,
+  calcGasTotal,
+} = require('./send.utils')
+import {
+  getFastPriceEstimateInHexWEI,
+} from '../../../selectors/custom-gas'
+
+const selectors = {
+  accountsWithSendEtherInfoSelector,
+  getAddressBook,
+  getAmountConversionRate,
+  getBlockGasLimit,
+  getConversionRate,
+  getCurrentAccountWithSendEtherInfo,
+  getCurrentCurrency,
+  getCurrentNetwork,
+  getCurrentViewContext,
+  getForceGasMin,
+  getNativeCurrency,
+  getGasLimit,
+  getGasPrice,
+  getGasPriceFromRecentBlocks,
+  getGasTotal,
+  getPrimaryCurrency,
+  getRecentBlocks,
+  getSelectedAccount,
+  getSelectedAddress,
+  getSelectedIdentity,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenExchangeRate,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendHexData,
+  getSendHexDataFeatureFlagState,
+  getSendEditingTransactionId,
+  getSendErrors,
+  getSendFrom,
+  getSendFromBalance,
+  getSendFromObject,
+  getSendMaxModeState,
+  getSendTo,
+  getSendToAccounts,
+  getSendWarnings,
+  getTokenBalance,
+  getTokenExchangeRate,
+  getUnapprovedTxs,
+  transactionsSelector,
+  getQrCodeData,
+}
+
+module.exports = selectors
+
+function accountsWithSendEtherInfoSelector (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const { identities } = state.metamask
+
+  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
+    return Object.assign({}, account, identities[key])
+  })
+
+  return accountsWithSendEtherInfo
+}
+
+function getAddressBook (state) {
+  return state.metamask.addressBook
+}
+
+function getAmountConversionRate (state) {
+  return getSelectedToken(state)
+    ? getSelectedTokenToFiatRate(state)
+    : getConversionRate(state)
+}
+
+function getBlockGasLimit (state) {
+  return state.metamask.currentBlockGasLimit
+}
+
+function getConversionRate (state) {
+  return state.metamask.conversionRate
+}
+
+function getCurrentAccountWithSendEtherInfo (state) {
+  const currentAddress = getSelectedAddress(state)
+  const accounts = accountsWithSendEtherInfoSelector(state)
+
+  return accounts.find(({ address }) => address === currentAddress)
+}
+
+function getCurrentCurrency (state) {
+  return state.metamask.currentCurrency
+}
+
+function getNativeCurrency (state) {
+  return state.metamask.nativeCurrency
+}
+
+function getCurrentNetwork (state) {
+  return state.metamask.network
+}
+
+function getCurrentViewContext (state) {
+  const { currentView = {} } = state.appState
+  return currentView.context
+}
+
+function getForceGasMin (state) {
+  return state.metamask.send.forceGasMin
+}
+
+function getGasLimit (state) {
+  return state.metamask.send.gasLimit || '0'
+}
+
+function getGasPrice (state) {
+  return state.metamask.send.gasPrice || getFastPriceEstimateInHexWEI(state)
+}
+
+function getGasPriceFromRecentBlocks (state) {
+  return estimateGasPriceFromRecentBlocks(state.metamask.recentBlocks)
+}
+
+function getGasTotal (state) {
+  return calcGasTotal(getGasLimit(state), getGasPrice(state))
+}
+
+function getPrimaryCurrency (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken && selectedToken.symbol
+}
+
+function getRecentBlocks (state) {
+  return state.metamask.recentBlocks
+}
+
+function getSelectedAccount (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const selectedAddress = getSelectedAddress(state)
+
+  return accounts[selectedAddress]
+}
+
+function getSelectedAddress (state) {
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
+
+  return selectedAddress
+}
+
+function getSelectedIdentity (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const identities = state.metamask.identities
+
+  return identities[selectedAddress]
+}
+
+function getSelectedToken (state) {
+  const tokens = state.metamask.tokens || []
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+  const sendToken = state.metamask.send.token
+
+  return selectedToken || sendToken || null
+}
+
+function getSelectedTokenContract (state) {
+  const selectedToken = getSelectedToken(state)
+
+  return selectedToken
+    ? global.eth.contract(abi).at(selectedToken.address)
+    : null
+}
+
+function getSelectedTokenExchangeRate (state) {
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedToken = getSelectedToken(state) || {}
+  const { symbol = '' } = selectedToken
+  const pair = `${symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getSelectedTokenToFiatRate (state) {
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = getConversionRate(state)
+
+  const tokenToFiatRate = multiplyCurrencies(
+    conversionRate,
+    selectedTokenExchangeRate,
+    { toNumericBase: 'dec' }
+  )
+
+  return tokenToFiatRate
+}
+
+function getSendAmount (state) {
+  return state.metamask.send.amount
+}
+
+function getSendHexData (state) {
+  return state.metamask.send.data
+}
+
+function getSendHexDataFeatureFlagState (state) {
+  return state.metamask.featureFlags.sendHexData
+}
+
+function getSendEditingTransactionId (state) {
+  return state.metamask.send.editingTransactionId
+}
+
+function getSendErrors (state) {
+  return state.send.errors
+}
+
+function getSendFrom (state) {
+  return state.metamask.send.from
+}
+
+function getSendFromBalance (state) {
+  const from = getSendFrom(state) || getSelectedAccount(state)
+  return from.balance
+}
+
+function getSendFromObject (state) {
+  return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
+}
+
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
+}
+
+function getSendTo (state) {
+  return state.metamask.send.to
+}
+
+function getSendToAccounts (state) {
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const addressBookAccounts = getAddressBook(state)
+  const allAccounts = [...fromAccounts, ...addressBookAccounts]
+  // TODO: figure out exactly what the below returns and put a descriptive variable name on it
+  return Object.entries(allAccounts).map(([key, account]) => account)
+}
+
+function getSendWarnings (state) {
+  return state.send.warnings
+}
+
+function getTokenBalance (state) {
+  return state.metamask.send.tokenBalance
+}
+
+function getTokenExchangeRate (state, tokenSymbol) {
+  const pair = `${tokenSymbol.toLowerCase()}_eth`
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getUnapprovedTxs (state) {
+  return state.metamask.unapprovedTxs
+}
+
+function transactionsSelector (state) {
+  const { network, selectedTokenAddress } = state.metamask
+  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
+  const transactions = state.metamask.selectedAddressTxList || []
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+
+  return selectedTokenAddress
+    ? txsToRender
+      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
+      .sort((a, b) => b.time - a.time)
+    : txsToRender
+      .sort((a, b) => b.time - a.time)
+}
+
+function getQrCodeData (state) {
+  return state.appState.qrCodeData
+}
diff --git a/ui/app/components/app/send/send.utils.js b/ui/app/components/app/send/send.utils.js
new file mode 100644
index 000000000..7609d46ea
--- /dev/null
+++ b/ui/app/components/app/send/send.utils.js
@@ -0,0 +1,332 @@
+const {
+  addCurrencies,
+  conversionUtil,
+  conversionGTE,
+  multiplyCurrencies,
+  conversionGreaterThan,
+  conversionLessThan,
+} = require('../../../helpers/utils/conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../../helpers/utils/token-util')
+const {
+  BASE_TOKEN_GAS_COST,
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  NEGATIVE_ETH_ERROR,
+  ONE_GWEI_IN_WEI_HEX,
+  SIMPLE_GAS_COST,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+} = require('./send.constants')
+const abi = require('ethereumjs-abi')
+const ethUtil = require('ethereumjs-util')
+
+module.exports = {
+  addGasBuffer,
+  calcGasTotal,
+  calcTokenBalance,
+  doesAmountErrorRequireUpdate,
+  estimateGas,
+  estimateGasPriceFromRecentBlocks,
+  generateTokenTransferData,
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+  removeLeadingZeroes,
+}
+
+function calcGasTotal (gasLimit = '0', gasPrice = '0') {
+  return multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+}
+
+function isBalanceSufficient ({
+  amount = '0x0',
+  amountConversionRate = 1,
+  balance = '0x0',
+  conversionRate = 1,
+  gasTotal = '0x0',
+  primaryCurrency,
+}) {
+  const totalAmount = addCurrencies(amount, gasTotal, {
+    aBase: 16,
+    bBase: 16,
+    toNumericBase: 'hex',
+  })
+
+  const balanceIsSufficient = conversionGTE(
+    {
+      value: balance,
+      fromNumericBase: 'hex',
+      fromCurrency: primaryCurrency,
+      conversionRate,
+    },
+    {
+      value: totalAmount,
+      fromNumericBase: 'hex',
+      conversionRate: Number(amountConversionRate) || conversionRate,
+      fromCurrency: primaryCurrency,
+    },
+  )
+
+  return balanceIsSufficient
+}
+
+function isTokenBalanceSufficient ({
+  amount = '0x0',
+  tokenBalance,
+  decimals,
+}) {
+  const amountInDec = conversionUtil(amount, {
+    fromNumericBase: 'hex',
+  })
+
+  const tokenBalanceIsSufficient = conversionGTE(
+    {
+      value: tokenBalance,
+      fromNumericBase: 'hex',
+    },
+    {
+      value: calcTokenAmount(amountInDec, decimals),
+    },
+  )
+
+  return tokenBalanceIsSufficient
+}
+
+function getAmountErrorObject ({
+  amount,
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal,
+  primaryCurrency,
+  selectedToken,
+  tokenBalance,
+}) {
+  let insufficientFunds = false
+  if (gasTotal && conversionRate && !selectedToken) {
+    insufficientFunds = !isBalanceSufficient({
+      amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+    })
+  }
+
+  let inSufficientTokens = false
+  if (selectedToken && tokenBalance !== null) {
+    const { decimals } = selectedToken
+    inSufficientTokens = !isTokenBalanceSufficient({
+      tokenBalance,
+      amount,
+      decimals,
+    })
+  }
+
+  const amountLessThanZero = conversionGreaterThan(
+    { value: 0, fromNumericBase: 'dec' },
+    { value: amount, fromNumericBase: 'hex' },
+  )
+
+  let amountError = null
+
+  if (insufficientFunds) {
+    amountError = INSUFFICIENT_FUNDS_ERROR
+  } else if (inSufficientTokens) {
+    amountError = INSUFFICIENT_TOKENS_ERROR
+  } else if (amountLessThanZero) {
+    amountError = NEGATIVE_ETH_ERROR
+  }
+
+  return { amount: amountError }
+}
+
+function getGasFeeErrorObject ({
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal,
+  primaryCurrency,
+}) {
+  let gasFeeError = null
+
+  if (gasTotal && conversionRate) {
+    const insufficientFunds = !isBalanceSufficient({
+      amount: '0x0',
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+    })
+
+    if (insufficientFunds) {
+      gasFeeError = INSUFFICIENT_FUNDS_ERROR
+    }
+  }
+
+  return { gasFee: gasFeeError }
+}
+
+function calcTokenBalance ({ selectedToken, usersToken }) {
+  const { decimals } = selectedToken || {}
+  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16)
+}
+
+function doesAmountErrorRequireUpdate ({
+  balance,
+  gasTotal,
+  prevBalance,
+  prevGasTotal,
+  prevTokenBalance,
+  selectedToken,
+  tokenBalance,
+}) {
+  const balanceHasChanged = balance !== prevBalance
+  const gasTotalHasChange = gasTotal !== prevGasTotal
+  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
+  const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
+
+  return amountErrorRequiresUpdate
+}
+
+async function estimateGas ({
+  selectedAddress,
+  selectedToken,
+  blockGasLimit,
+  to,
+  value,
+  data,
+  gasPrice,
+  estimateGasMethod,
+}) {
+  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
+
+  // if recipient has no code, gas is 21k max:
+  if (!selectedToken && !data) {
+    const code = Boolean(to) && await global.eth.getCode(to)
+    // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
+    const codeIsEmpty = !code || code === '0x' || code === '0x0'
+    if (codeIsEmpty) {
+      return SIMPLE_GAS_COST
+    }
+  } else if (selectedToken && !to) {
+    return BASE_TOKEN_GAS_COST
+  }
+
+  if (selectedToken) {
+    paramsForGasEstimate.value = '0x0'
+    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
+    paramsForGasEstimate.to = selectedToken.address
+  } else {
+    if (data) {
+      paramsForGasEstimate.data = data
+    }
+
+    if (to) {
+      paramsForGasEstimate.to = to
+    }
+
+    if (!value || value === '0') {
+      paramsForGasEstimate.value = '0xff'
+    }
+  }
+
+  // if not, fall back to block gasLimit
+  paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit || '0x5208', 0.95, {
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    roundDown: '0',
+    toNumericBase: 'hex',
+  }))
+  // run tx
+  return new Promise((resolve, reject) => {
+    return estimateGasMethod(paramsForGasEstimate, (err, estimatedGas) => {
+      if (err) {
+        const simulationFailed = (
+          err.message.includes('Transaction execution error.') ||
+          err.message.includes('gas required exceeds allowance or always failing transaction')
+        )
+        if (simulationFailed) {
+          const estimateWithBuffer = addGasBuffer(paramsForGasEstimate.gas, blockGasLimit, 1.5)
+          return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
+        } else {
+          return reject(err)
+        }
+      }
+      const estimateWithBuffer = addGasBuffer(estimatedGas.toString(16), blockGasLimit, 1.5)
+      return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
+    })
+  })
+}
+
+function addGasBuffer (initialGasLimitHex, blockGasLimitHex, bufferMultiplier = 1.5) {
+  const upperGasLimit = multiplyCurrencies(blockGasLimitHex, 0.9, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    numberOfDecimals: '0',
+  })
+  const bufferedGasLimit = multiplyCurrencies(initialGasLimitHex, bufferMultiplier, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    numberOfDecimals: '0',
+  })
+
+  // if initialGasLimit is above blockGasLimit, dont modify it
+  if (conversionGreaterThan(
+    { value: initialGasLimitHex, fromNumericBase: 'hex' },
+    { value: upperGasLimit, fromNumericBase: 'hex' },
+  )) return initialGasLimitHex
+  // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit
+  if (conversionLessThan(
+    { value: bufferedGasLimit, fromNumericBase: 'hex' },
+    { value: upperGasLimit, fromNumericBase: 'hex' },
+  )) return bufferedGasLimit
+  // otherwise use blockGasLimit
+  return upperGasLimit
+}
+
+function generateTokenTransferData ({ toAddress = '0x0', amount = '0x0', selectedToken }) {
+  if (!selectedToken) return
+  return TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
+    abi.rawEncode(['address', 'uint256'], [toAddress, ethUtil.addHexPrefix(amount)]),
+    x => ('00' + x.toString(16)).slice(-2)
+  ).join('')
+}
+
+function estimateGasPriceFromRecentBlocks (recentBlocks) {
+  // Return 1 gwei if no blocks have been observed:
+  if (!recentBlocks || recentBlocks.length === 0) {
+    return ONE_GWEI_IN_WEI_HEX
+  }
+
+  const lowestPrices = recentBlocks.map((block) => {
+    if (!block.gasPrices || block.gasPrices.length < 1) {
+      return ONE_GWEI_IN_WEI_HEX
+    }
+    return block.gasPrices.reduce((currentLowest, next) => {
+      return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest
+    })
+  })
+  .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
+
+  return lowestPrices[Math.floor(lowestPrices.length / 2)]
+}
+
+function getToAddressForGasUpdate (...addresses) {
+  return [...addresses, ''].find(str => str !== undefined && str !== null).toLowerCase()
+}
+
+function removeLeadingZeroes (str) {
+  return str.replace(/^0*(?=\d)/, '')
+}
diff --git a/ui/app/components/app/send/tests/send-component.test.js b/ui/app/components/app/send/tests/send-component.test.js
new file mode 100644
index 000000000..738c14839
--- /dev/null
+++ b/ui/app/components/app/send/tests/send-component.test.js
@@ -0,0 +1,354 @@
+import React from 'react'
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import timeout from '../../../../../lib/test-timeout'
+
+import SendHeader from '../send-header/send-header.container'
+import SendContent from '../send-content/send-content.component'
+import SendFooter from '../send-footer/send-footer.container'
+
+const mockBasicGasEstimates = {
+  blockTime: 'mockBlockTime',
+}
+
+const propsMethodSpies = {
+  updateAndSetGasLimit: sinon.spy(),
+  updateSendErrors: sinon.spy(),
+  updateSendTokenBalance: sinon.spy(),
+  resetSendState: sinon.spy(),
+  fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
+  fetchGasEstimates: sinon.spy(),
+}
+const utilsMethodStubs = {
+  getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
+  getGasFeeErrorObject: sinon.stub().returns({ gasFee: 'mockGasFeeError' }),
+  doesAmountErrorRequireUpdate: sinon.stub().callsFake(obj => obj.balance !== obj.prevBalance),
+}
+
+const SendTransactionScreen = proxyquire('../send.component.js', {
+  './send.utils': utilsMethodStubs,
+}).default
+
+sinon.spy(SendTransactionScreen.prototype, 'componentDidMount')
+sinon.spy(SendTransactionScreen.prototype, 'updateGas')
+
+describe('Send Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendTransactionScreen
+      amount={'mockAmount'}
+      amountConversionRate={'mockAmountConversionRate'}
+      blockGasLimit={'mockBlockGasLimit'}
+      conversionRate={10}
+      editingTransactionId={'mockEditingTransactionId'}
+      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
+      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      from={ { address: 'mockAddress', balance: 'mockBalance' } }
+      gasLimit={'mockGasLimit'}
+      gasPrice={'mockGasPrice'}
+      gasTotal={'mockGasTotal'}
+      history={{ mockProp: 'history-abc'}}
+      network={'3'}
+      primaryCurrency={'mockPrimaryCurrency'}
+      recentBlocks={['mockBlock']}
+      selectedAddress={'mockSelectedAddress'}
+      selectedToken={'mockSelectedToken'}
+      showHexData={true}
+      tokenBalance={'mockTokenBalance'}
+      tokenContract={'mockTokenContract'}
+      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
+      updateSendErrors={propsMethodSpies.updateSendErrors}
+      updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
+      resetSendState={propsMethodSpies.resetSendState}
+    />)
+  })
+
+  afterEach(() => {
+    SendTransactionScreen.prototype.componentDidMount.resetHistory()
+    SendTransactionScreen.prototype.updateGas.resetHistory()
+    utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
+    utilsMethodStubs.getAmountErrorObject.resetHistory()
+    utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+    propsMethodSpies.fetchBasicGasEstimates.resetHistory()
+    propsMethodSpies.updateAndSetGasLimit.resetHistory()
+    propsMethodSpies.updateSendErrors.resetHistory()
+    propsMethodSpies.updateSendTokenBalance.resetHistory()
+  })
+
+  it('should call componentDidMount', () => {
+    assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
+  })
+
+  describe('componentDidMount', () => {
+    it('should call props.fetchBasicGasAndTimeEstimates', () => {
+      propsMethodSpies.fetchBasicGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 1)
+    })
+
+    it('should call this.updateGas', async () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendErrors.resetHistory()
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+      wrapper.instance().componentDidMount()
+      await timeout(250)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
+    })
+  })
+
+  describe('componentWillUnmount', () => {
+    it('should call this.props.resetSendState', () => {
+      propsMethodSpies.resetSendState.resetHistory()
+      assert.equal(propsMethodSpies.resetSendState.callCount, 0)
+      wrapper.instance().componentWillUnmount()
+      assert.equal(propsMethodSpies.resetSendState.callCount, 1)
+    })
+  })
+
+  describe('componentDidUpdate', () => {
+    it('should call doesAmountErrorRequireUpdate with the expected params', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: '',
+        },
+      })
+      assert(utilsMethodStubs.doesAmountErrorRequireUpdate.calledOnce)
+      assert.deepEqual(
+        utilsMethodStubs.doesAmountErrorRequireUpdate.getCall(0).args[0],
+        {
+          balance: 'mockBalance',
+          gasTotal: 'mockGasTotal',
+          prevBalance: '',
+          prevGasTotal: undefined,
+          prevTokenBalance: undefined,
+          selectedToken: 'mockSelectedToken',
+          tokenBalance: 'mockTokenBalance',
+        }
+      )
+    })
+
+    it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'mockBalance',
+        },
+      })
+      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 0)
+    })
+
+    it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 1)
+      assert.deepEqual(
+        utilsMethodStubs.getAmountErrorObject.getCall(0).args[0],
+        {
+          amount: 'mockAmount',
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 10,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: 'mockSelectedToken',
+          tokenBalance: 'mockTokenBalance',
+        }
+      )
+    })
+
+    it('should call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true and selectedToken is truthy', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 1)
+      assert.deepEqual(
+        utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0],
+        {
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 10,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: 'mockSelectedToken',
+        }
+      )
+    })
+
+    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns false', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: { address: 'mockAddress', balance: 'mockBalance' },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
+    })
+
+    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true but selectedToken is falsy', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.setProps({ selectedToken: null })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
+    })
+
+    it('should call updateSendErrors with the expected params if selectedToken is falsy', () => {
+      propsMethodSpies.updateSendErrors.resetHistory()
+      wrapper.setProps({ selectedToken: null })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendErrors.getCall(0).args[0],
+        { amount: 'mockAmountError', gasFee: null }
+      )
+    })
+
+    it('should call updateSendErrors with the expected params if selectedToken is truthy', () => {
+      propsMethodSpies.updateSendErrors.resetHistory()
+      wrapper.setProps({ selectedToken: 'someToken' })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendErrors.getCall(0).args[0],
+        { amount: 'mockAmountError', gasFee: 'mockGasFeeError' }
+      )
+    })
+
+    it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '3',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+    })
+
+    it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => {
+      wrapper.setProps({ network: 'loading' })
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '3',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+    })
+
+    it('should call updateSendTokenBalance and this.updateGas with the correct params', () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '2',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendTokenBalance.getCall(0).args[0],
+        {
+          selectedToken: 'mockSelectedToken',
+          tokenContract: 'mockTokenContract',
+          address: 'mockAddress',
+        }
+      )
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
+      assert.deepEqual(
+        SendTransactionScreen.prototype.updateGas.getCall(0).args,
+        []
+      )
+    })
+  })
+
+  describe('updateGas', () => {
+    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.instance().updateGas()
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
+        {
+          blockGasLimit: 'mockBlockGasLimit',
+          editingTransactionId: 'mockEditingTransactionId',
+          gasLimit: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          recentBlocks: ['mockBlock'],
+          selectedAddress: 'mockSelectedAddress',
+          selectedToken: 'mockSelectedToken',
+          to: '',
+          value: 'mockAmount',
+          data: undefined,
+        }
+      )
+    })
+
+    it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.setProps({ to: 'someAddress' })
+      wrapper.instance().updateGas()
+      assert.equal(
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
+        'someaddress',
+      )
+    })
+
+    it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.instance().updateGas({ to: '0xABC' })
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
+    })
+  })
+
+  describe('render', () => {
+    it('should render a page-container class', () => {
+      assert.equal(wrapper.find('.page-container').length, 1)
+    })
+
+    it('should render SendHeader, SendContent and SendFooter', () => {
+      assert.equal(wrapper.find(SendHeader).length, 1)
+      assert.equal(wrapper.find(SendContent).length, 1)
+      assert.equal(wrapper.find(SendFooter).length, 1)
+    })
+
+    it('should pass the history prop to SendHeader and SendFooter', () => {
+      assert.deepEqual(
+        wrapper.find(SendFooter).props(),
+        {
+          history: { mockProp: 'history-abc' },
+        }
+      )
+    })
+
+    it('should pass showHexData to SendContent', () => {
+      assert.equal(wrapper.find(SendContent).props().showHexData, true)
+    })
+  })
+})
diff --git a/ui/app/components/app/send/tests/send-container.test.js b/ui/app/components/app/send/tests/send-container.test.js
new file mode 100644
index 000000000..9538b67b3
--- /dev/null
+++ b/ui/app/components/app/send/tests/send-container.test.js
@@ -0,0 +1,174 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendTokenBalance: sinon.spy(),
+  updateGasData: sinon.spy(),
+  setGasTotal: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+  resetSendState: sinon.spy(),
+}
+
+proxyquire('../send.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  'react-router-dom': { withRouter: () => {} },
+  'recompose': { compose: (arg1, arg2) => () => arg2() },
+  './send.selectors': {
+    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
+    getBlockGasLimit: (s) => `mockBlockGasLimit:${s}`,
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
+    getRecentBlocks: (s) => `mockRecentBlocks:${s}`,
+    getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
+    getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
+    getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
+    getSendFromObject: (s) => `mockFrom:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getQrCodeData: (s) => `mockQrCodeData:${s}`,
+  },
+  '../../../store/actions': actionSpies,
+  '../../../ducks/send/send.duck': duckActionSpies,
+  './send.utils.js': {
+    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
+  },
+})
+
+describe('send container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        amountConversionRate: 'mockAmountConversionRate:mockState',
+        blockGasLimit: 'mockBlockGasLimit:mockState',
+        conversionRate: 'mockConversionRate:mockState',
+        editingTransactionId: 'mockEditingTransactionId:mockState',
+        from: 'mockFrom:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        network: 'mockNetwork:mockState',
+        primaryCurrency: 'mockPrimaryCurrency:mockState',
+        recentBlocks: 'mockRecentBlocks:mockState',
+        selectedAddress: 'mockSelectedAddress:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        showHexData: 'mockSendHexDataFeatureFlagState:mockState',
+        to: 'mockTo:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+        tokenContract: 'mockTokenContract:mockState',
+        tokenToFiatRate: 'mockTokenToFiatRate:mockState',
+        qrCodeData: 'mockQrCodeData:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('updateAndSetGasLimit()', () => {
+      const mockProps = {
+        blockGasLimit: 'mockBlockGasLimit',
+        editingTransactionId: '0x2',
+        gasLimit: '0x3',
+        gasPrice: '0x4',
+        recentBlocks: ['mockBlock'],
+        selectedAddress: '0x4',
+        selectedToken: { address: '0x1' },
+        to: 'mockTo',
+        value: 'mockValue',
+        data: undefined,
+      }
+
+      it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
+        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.setGasTotal.getCall(0).args[0],
+          '0x30x4'
+        )
+      })
+
+      it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
+        const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
+        mapDispatchToPropsObject.updateAndSetGasLimit(
+          Object.assign({}, mockProps, {editingTransactionId: false})
+        )
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateGasData.getCall(0).args[0],
+          { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
+        )
+      })
+    })
+
+    describe('updateSendTokenBalance()', () => {
+      const mockProps = {
+        address: '0x10',
+        tokenContract: '0x00a',
+        selectedToken: {address: '0x1'},
+      }
+
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendTokenBalance(Object.assign({}, mockProps))
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateSendTokenBalance.getCall(0).args[0],
+          mockProps
+        )
+      })
+    })
+
+    describe('updateSendErrors()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendErrors('mockError')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          'mockError'
+        )
+      })
+    })
+
+    describe('resetSendState()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.resetSendState()
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          duckActionSpies.resetSendState.getCall(0).args.length,
+          0
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/tests/send-selectors-test-data.js b/ui/app/components/app/send/tests/send-selectors-test-data.js
index d43d7c650..d43d7c650 100644
--- a/ui/app/components/send/tests/send-selectors-test-data.js
+++ b/ui/app/components/app/send/tests/send-selectors-test-data.js
diff --git a/ui/app/components/send/tests/send-selectors.test.js b/ui/app/components/app/send/tests/send-selectors.test.js
index cdc86fe59..cdc86fe59 100644
--- a/ui/app/components/send/tests/send-selectors.test.js
+++ b/ui/app/components/app/send/tests/send-selectors.test.js
diff --git a/ui/app/components/app/send/tests/send-utils.test.js b/ui/app/components/app/send/tests/send-utils.test.js
new file mode 100644
index 000000000..fc4c6deed
--- /dev/null
+++ b/ui/app/components/app/send/tests/send-utils.test.js
@@ -0,0 +1,527 @@
+import assert from 'assert'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+import {
+  BASE_TOKEN_GAS_COST,
+  ONE_GWEI_IN_WEI_HEX,
+  SIMPLE_GAS_COST,
+} from '../send.constants'
+const {
+  addCurrencies,
+  subtractCurrencies,
+} = require('../../../../helpers/utils/conversion-util')
+
+const {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+} = require('../send.constants')
+
+const stubs = {
+  addCurrencies: sinon.stub().callsFake((a, b, obj) => {
+    if (String(a).match(/^0x.+/)) a = Number(String(a).slice(2))
+    if (String(b).match(/^0x.+/)) b = Number(String(b).slice(2))
+    return a + b
+  }),
+  conversionUtil: sinon.stub().callsFake((val, obj) => parseInt(val, 16)),
+  conversionGTE: sinon.stub().callsFake((obj1, obj2) => obj1.value >= obj2.value),
+  multiplyCurrencies: sinon.stub().callsFake((a, b) => `${a}x${b}`),
+  calcTokenAmount: sinon.stub().callsFake((a, d) => 'calc:' + a + d),
+  rawEncode: sinon.stub().returns([16, 1100]),
+  conversionGreaterThan: sinon.stub().callsFake((obj1, obj2) => obj1.value > obj2.value),
+  conversionLessThan: sinon.stub().callsFake((obj1, obj2) => obj1.value < obj2.value),
+}
+
+const sendUtils = proxyquire('../send.utils.js', {
+  '../../../helpers/utils/conversion-util': {
+    addCurrencies: stubs.addCurrencies,
+    conversionUtil: stubs.conversionUtil,
+    conversionGTE: stubs.conversionGTE,
+    multiplyCurrencies: stubs.multiplyCurrencies,
+    conversionGreaterThan: stubs.conversionGreaterThan,
+    conversionLessThan: stubs.conversionLessThan,
+  },
+  '../../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount },
+  'ethereumjs-abi': {
+    rawEncode: stubs.rawEncode,
+  },
+})
+
+const {
+  calcGasTotal,
+  estimateGas,
+  doesAmountErrorRequireUpdate,
+  estimateGasPriceFromRecentBlocks,
+  generateTokenTransferData,
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  calcTokenBalance,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+  removeLeadingZeroes,
+} = sendUtils
+
+describe('send utils', () => {
+
+  describe('calcGasTotal()', () => {
+    it('should call multiplyCurrencies with the correct params and return the multiplyCurrencies return', () => {
+      const result = calcGasTotal(12, 15)
+      assert.equal(result, '12x15')
+      const call_ = stubs.multiplyCurrencies.getCall(0).args
+      assert.deepEqual(
+        call_,
+        [12, 15, {
+          toNumericBase: 'hex',
+           multiplicandBase: 16,
+           multiplierBase: 16,
+         } ]
+      )
+    })
+  })
+
+  describe('doesAmountErrorRequireUpdate()', () => {
+    const config = {
+      'should return true if balances are different': {
+        balance: 0,
+        prevBalance: 1,
+        expectedResult: true,
+      },
+      'should return true if gasTotals are different': {
+        gasTotal: 0,
+        prevGasTotal: 1,
+        expectedResult: true,
+      },
+      'should return true if token balances are different': {
+        tokenBalance: 0,
+        prevTokenBalance: 1,
+        selectedToken: 'someToken',
+        expectedResult: true,
+      },
+      'should return false if they are all the same': {
+        balance: 1,
+        prevBalance: 1,
+        gasTotal: 1,
+        prevGasTotal: 1,
+        tokenBalance: 1,
+        prevTokenBalance: 1,
+        selectedToken: 'someToken',
+        expectedResult: false,
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult)
+      })
+    })
+
+  })
+
+  describe('generateTokenTransferData()', () => {
+    it('should return undefined if not passed a selected token', () => {
+      assert.equal(generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: false}), undefined)
+    })
+
+    it('should call abi.rawEncode with the correct params', () => {
+      stubs.rawEncode.resetHistory()
+      generateTokenTransferData({ toAddress: 'mockAddress', amount: 'ab', selectedToken: true})
+      assert.deepEqual(
+        stubs.rawEncode.getCall(0).args,
+        [['address', 'uint256'], ['mockAddress', '0xab']]
+      )
+    })
+
+    it('should return encoded token transfer data', () => {
+      assert.equal(
+        generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: true}),
+        '0xa9059cbb104c'
+      )
+    })
+  })
+
+  describe('getAmountErrorObject()', () => {
+    const config = {
+      'should return insufficientFunds error if isBalanceSufficient returns false': {
+        amount: 15,
+        amountConversionRate: 2,
+        balance: 1,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR },
+      },
+      'should not return insufficientFunds error if selectedToken is truthy': {
+        amount: '0x0',
+        amountConversionRate: 2,
+        balance: 1,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        selectedToken: { symbole: 'DEF', decimals: 0 },
+        decimals: 0,
+        tokenBalance: 'sometokenbalance',
+        expectedResult: { amount: null },
+      },
+      'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': {
+        amount: '0x10',
+        amountConversionRate: 2,
+        balance: 100,
+        conversionRate: 3,
+        decimals: 10,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        selectedToken: 'someToken',
+        tokenBalance: 123,
+        expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR },
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('getGasFeeErrorObject()', () => {
+    const config = {
+      'should return insufficientFunds error if isBalanceSufficient returns false': {
+        amountConversionRate: 2,
+        balance: 16,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        expectedResult: { gasFee: INSUFFICIENT_FUNDS_ERROR },
+      },
+      'should return null error if isBalanceSufficient returns true': {
+        amountConversionRate: 2,
+        balance: 16,
+        conversionRate: 3,
+        gasTotal: 15,
+        primaryCurrency: 'ABC',
+        expectedResult: { gasFee: null },
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.deepEqual(getGasFeeErrorObject(obj), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('calcTokenBalance()', () => {
+    it('should return the calculated token blance', () => {
+      assert.equal(calcTokenBalance({
+        selectedToken: {
+          decimals: 11,
+        },
+        usersToken: {
+          balance: 20,
+        },
+      }), 'calc:2011')
+    })
+  })
+
+  describe('isBalanceSufficient()', () => {
+    it('should correctly call addCurrencies and return the result of calling conversionGTE', () => {
+      stubs.conversionGTE.resetHistory()
+      const result = isBalanceSufficient({
+        amount: 15,
+        amountConversionRate: 2,
+        balance: 100,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+      })
+      assert.deepEqual(
+        stubs.addCurrencies.getCall(0).args,
+        [
+          15, 17, {
+            aBase: 16,
+            bBase: 16,
+            toNumericBase: 'hex',
+          },
+        ]
+      )
+      assert.deepEqual(
+        stubs.conversionGTE.getCall(0).args,
+        [
+          {
+            value: 100,
+            fromNumericBase: 'hex',
+            fromCurrency: 'ABC',
+            conversionRate: 3,
+          },
+          {
+            value: 32,
+            fromNumericBase: 'hex',
+            conversionRate: 2,
+            fromCurrency: 'ABC',
+          },
+        ]
+      )
+
+      assert.equal(result, true)
+    })
+  })
+
+  describe('isTokenBalanceSufficient()', () => {
+    it('should correctly call conversionUtil and return the result of calling conversionGTE', () => {
+      stubs.conversionGTE.resetHistory()
+      stubs.conversionUtil.resetHistory()
+      const result = isTokenBalanceSufficient({
+        amount: '0x10',
+        tokenBalance: 123,
+        decimals: 10,
+      })
+      assert.deepEqual(
+        stubs.conversionUtil.getCall(0).args,
+        [
+          '0x10', {
+            fromNumericBase: 'hex',
+          },
+        ]
+      )
+      assert.deepEqual(
+        stubs.conversionGTE.getCall(0).args,
+        [
+          {
+            value: 123,
+            fromNumericBase: 'hex',
+          },
+          {
+            value: 'calc:1610',
+          },
+        ]
+      )
+
+      assert.equal(result, false)
+    })
+  })
+
+  describe('estimateGas', () => {
+    const baseMockParams = {
+      blockGasLimit: '0x64',
+      selectedAddress: 'mockAddress',
+      to: '0xisContract',
+      estimateGasMethod: sinon.stub().callsFake(
+        ({to}, cb) => {
+          const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
+            ? new Error(to.match(/:(.+)$/)[1])
+            : null
+          const result = { toString: (n) => `0xabc${n}` }
+          return cb(err, result)
+        }
+      ),
+    }
+    const baseExpectedCall = {
+      from: 'mockAddress',
+      gas: '0x64x0.95',
+      to: '0xisContract',
+      value: '0xff',
+    }
+
+    beforeEach(() => {
+      global.eth = {
+        getCode: sinon.stub().callsFake(
+          (address) => Promise.resolve(address.match(/isContract/) ? 'not-0x' : '0x')
+        ),
+      }
+    })
+
+    afterEach(() => {
+      baseMockParams.estimateGasMethod.resetHistory()
+      global.eth.getCode.resetHistory()
+    })
+
+    it('should call ethQuery.estimateGas with the expected params', async () => {
+      const result = await sendUtils.estimateGas(baseMockParams)
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall)
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it('should call ethQuery.estimateGas with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, { blockGasLimit: '0xbcd' }))
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall, { gas: '0xbcdx0.95' })
+      )
+      assert.equal(result, '0xabc16x1.5')
+    })
+
+    it('should call ethQuery.estimateGas with a value of 0x0 and the expected data and to if passed a selectedToken', async () => {
+      const result = await estimateGas(Object.assign({ data: 'mockData', selectedToken: { address: 'mockAddress' } }, baseMockParams))
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({}, baseExpectedCall, {
+          gasPrice: undefined,
+          value: '0x0',
+          data: '0xa9059cbb104c',
+          to: 'mockAddress',
+        })
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
+      const data = 'mockData'
+      const to = ''
+      const result = await estimateGas({...baseMockParams, data, to})
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        { gasPrice: undefined, value: '0xff', data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
+      assert.equal(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should return ${SIMPLE_GAS_COST} if not passed a selectedToken or truthy to address`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null }))
+      assert.equal(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should not return ${SIMPLE_GAS_COST} if passed a selectedToken`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123', selectedToken: { address: '' } }))
+      assert.notEqual(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } }))
+      assert.equal(result, BASE_TOKEN_GAS_COST)
+    })
+
+    it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, {
+        to: 'isContract willFailBecauseOf:Transaction execution error.',
+      }))
+      assert.equal(result, '0x64x0.95')
+    })
+
+    it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, {
+        to: 'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.',
+      }))
+      assert.equal(result, '0x64x0.95')
+    })
+
+    it(`should reject other errors`, async () => {
+      try {
+        await estimateGas(Object.assign({}, baseMockParams, {
+          to: 'isContract willFailBecauseOf:some other error',
+        }))
+      } catch (err) {
+        assert.equal(err.message, 'some other error')
+      }
+    })
+  })
+
+  describe('estimateGasPriceFromRecentBlocks', () => {
+    const ONE_GWEI_IN_WEI_HEX_PLUS_ONE = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+    const ONE_GWEI_IN_WEI_HEX_PLUS_TWO = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x2', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+    const ONE_GWEI_IN_WEI_HEX_MINUS_ONE = subtractCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+
+    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is falsy`, () => {
+      assert.equal(estimateGasPriceFromRecentBlocks(), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is empty`, () => {
+      assert.equal(estimateGasPriceFromRecentBlocks([]), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has no gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: null },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has empty gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should return the middle value of all blocks lowest prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_TWO ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX_PLUS_ONE)
+    })
+
+    it(`should work if a block has multiple gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [ '0x1', '0x2', '0x3', '0x4', '0x5' ] },
+        { gasPrices: [ '0x101', '0x100', '0x103', '0x104', '0x102' ] },
+        { gasPrices: [ '0x150', '0x50', '0x100', '0x200', '0x5' ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), '0x5')
+    })
+  })
+
+  describe('getToAddressForGasUpdate()', () => {
+    it('should return empty string if all params are undefined or null', () => {
+      assert.equal(getToAddressForGasUpdate(undefined, null), '')
+    })
+
+    it('should return the first string that is not defined or null in lower case', () => {
+      assert.equal(getToAddressForGasUpdate('A', null), 'a')
+      assert.equal(getToAddressForGasUpdate(undefined, 'B'), 'b')
+    })
+  })
+
+  describe('removeLeadingZeroes()', () => {
+    it('should remove leading zeroes from int when user types', () => {
+      assert.equal(removeLeadingZeroes('0'), '0')
+      assert.equal(removeLeadingZeroes('1'), '1')
+      assert.equal(removeLeadingZeroes('00'), '0')
+      assert.equal(removeLeadingZeroes('01'), '1')
+    })
+
+    it('should remove leading zeroes from int when user copy/paste', () => {
+      assert.equal(removeLeadingZeroes('001'), '1')
+    })
+
+    it('should remove leading zeroes from float when user types', () => {
+      assert.equal(removeLeadingZeroes('0.'), '0.')
+      assert.equal(removeLeadingZeroes('0.0'), '0.0')
+      assert.equal(removeLeadingZeroes('0.00'), '0.00')
+      assert.equal(removeLeadingZeroes('0.001'), '0.001')
+      assert.equal(removeLeadingZeroes('0.10'), '0.10')
+    })
+
+    it('should remove leading zeroes from float when user copy/paste', () => {
+      assert.equal(removeLeadingZeroes('00.1'), '0.1')
+    })
+  })
+})
diff --git a/ui/app/components/app/send/to-autocomplete.component.js b/ui/app/components/app/send/to-autocomplete.component.js
new file mode 100644
index 000000000..183967c58
--- /dev/null
+++ b/ui/app/components/app/send/to-autocomplete.component.js
@@ -0,0 +1,141 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import AccountListItem from './account-list-item/account-list-item.component'
+
+
+export default class ToAutoComplete extends Component {
+
+  static propTypes = {
+    dropdownOpen: PropTypes.bool,
+    openDropdown: PropTypes.func,
+    closeDropdown: PropTypes.func,
+    onChange: PropTypes.func,
+    to: PropTypes.string,
+    accounts: PropTypes.array,
+    inError: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  state = {
+    accountsToRender: [],
+  }
+
+  getListItemIcon (listItemAddress, toAddress) {
+    return toAddress && listItemAddress === toAddress
+      ? <i className={'fa fa-check fa-lg'}
+          style={{
+            color: '#02c9b1',
+          }}
+        />
+      : null
+  }
+
+  renderDropdown () {
+    const {
+      closeDropdown,
+      onChange,
+      to,
+    } = this.props
+    const {accountsToRender} = this.state
+
+    if (!accountsToRender.length) {
+      return null
+    }
+
+    return (
+      <div>
+        <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} />
+        <div className={'send-v2__from-dropdown__list'}>
+          {accountsToRender.map((account, i) => (
+            <AccountListItem
+              key={i}
+              account={account}
+              className={'account-list-item__dropdown'}
+              handleClick={() => {
+                onChange(account.address)
+                closeDropdown()
+              }}
+              icon={this.getListItemIcon(account.address, to)}
+              displayBalance={false}
+              displayAddress={true}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  handleInputEvent (event = {}, cb) {
+    const {
+      to,
+      accounts,
+      closeDropdown,
+      openDropdown,
+    } = this.props
+
+    const matchingAccounts = accounts.filter(({address}) => address.match(to || ''))
+    const matches = matchingAccounts.length
+
+    if (!matches || matchingAccounts[0].address === to) {
+      this.setState({accountsToRender: []})
+      event.target && event.target.select()
+      closeDropdown()
+    } else {
+      this.setState({accountsToRender: matchingAccounts})
+      openDropdown()
+    }
+    cb && cb(event.target.value)
+  }
+
+  componentDidUpdate (nextProps) {
+    if (this.props.to !== nextProps.to) {
+      this.handleInputEvent()
+    }
+  }
+
+  render () {
+    const {
+      to,
+      dropdownOpen,
+      onChange,
+      inError,
+    } = this.props
+
+    return (
+      <div className={'send-v2__to-autocomplete'}>
+        <input
+          className={classnames('send-v2__to-autocomplete__input', {
+            'send-v2__error-border': inError,
+          })}
+          placeholder={this.context.t('recipientAddress')}
+          value={to}
+          onChange={event => onChange(event.target.value)}
+          onFocus={event => this.handleInputEvent(event)}
+          style={{
+            borderColor: inError ? 'red' : null,
+          }}
+        />
+        {
+          to
+          ? null
+          : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
+              onClick={() => this.handleInputEvent()}
+              style={{
+                style: {color: '#dedede'},
+              }}
+            />
+        }
+        {
+          dropdownOpen
+          ? this.renderDropdown()
+          : null
+        }
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/to-autocomplete/index.js b/ui/app/components/app/send/to-autocomplete/index.js
index 244d301d1..244d301d1 100644
--- a/ui/app/components/send/to-autocomplete/index.js
+++ b/ui/app/components/app/send/to-autocomplete/index.js
diff --git a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js b/ui/app/components/app/send/to-autocomplete/to-autocomplete.js
new file mode 100644
index 000000000..d3db8cb59
--- /dev/null
+++ b/ui/app/components/app/send/to-autocomplete/to-autocomplete.js
@@ -0,0 +1,129 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountListItem = require('../account-list-item/account-list-item.component').default
+const connect = require('react-redux').connect
+const Tooltip = require('../../../ui/tooltip')
+const checksumAddress = require('../../../../helpers/utils/util').checksumAddress
+
+ToAutoComplete.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(ToAutoComplete)
+
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+
+  this.state = { accountsToRender: [] }
+}
+
+ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return toAddress && listItemAddress === toAddress
+    ? listItemIcon
+    : null
+}
+
+ToAutoComplete.prototype.renderDropdown = function () {
+  const {
+    closeDropdown,
+    onChange,
+    to,
+  } = this.props
+  const { accountsToRender } = this.state
+
+  return accountsToRender.length && h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accountsToRender.map(account => h(AccountListItem, {
+        account,
+        className: 'account-list-item__dropdown',
+        handleClick: () => {
+          onChange(checksumAddress(account.address))
+          closeDropdown()
+        },
+        icon: this.getListItemIcon(account.address, to),
+        displayBalance: false,
+        displayAddress: true,
+      })),
+
+    ]),
+
+  ])
+}
+
+ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
+  const {
+    to,
+    accounts,
+    closeDropdown,
+    openDropdown,
+  } = this.props
+
+  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
+  const matches = matchingAccounts.length
+
+  if (!matches || matchingAccounts[0].address === to) {
+    this.setState({ accountsToRender: [] })
+    event.target && event.target.select()
+    closeDropdown()
+  } else {
+    this.setState({ accountsToRender: matchingAccounts })
+    openDropdown()
+  }
+  cb && cb(event.target.value)
+}
+
+ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
+  if (this.props.to !== nextProps.to) {
+    this.handleInputEvent()
+  }
+}
+
+ToAutoComplete.prototype.render = function () {
+  const {
+    to,
+    dropdownOpen,
+    onChange,
+    inError,
+    qrScanner,
+  } = this.props
+
+  return h('div.send-v2__to-autocomplete', {}, [
+
+    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
+      placeholder: this.context.t('recipientAddress'),
+      className: inError ? `send-v2__error-border` : '',
+      value: to,
+      onChange: event => onChange(event.target.value),
+      onFocus: event => this.handleInputEvent(event),
+      style: {
+        borderColor: inError ? 'red' : null,
+      },
+    }),
+    qrScanner && h(Tooltip, {
+      title: this.context.t('scanQrCode'),
+      position: 'bottom',
+    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
+      style: { color: '#33333' },
+      onClick: () => this.props.scanQrCode(),
+    })),
+    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
+      style: { color: '#dedede' },
+      onClick: () => this.handleInputEvent(),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+}
diff --git a/ui/app/components/app/shapeshift-form.js b/ui/app/components/app/shapeshift-form.js
new file mode 100644
index 000000000..11459fd5e
--- /dev/null
+++ b/ui/app/components/app/shapeshift-form.js
@@ -0,0 +1,256 @@
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const PropTypes = require('prop-types')
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const classnames = require('classnames')
+const qrcode = require('qrcode-generator')
+const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../../store/actions')
+const { isValidAddress } = require('../../helpers/utils/util')
+const SimpleDropdown = require('./dropdowns/simple-dropdown')
+
+import Button from '../ui/button'
+
+function mapStateToProps (state) {
+  const {
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
+  } = state.metamask
+  const { warning } = state.appState
+
+  return {
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
+    warning,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
+    pairUpdate: coin => dispatch(pairUpdate(coin)),
+    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
+  }
+}
+
+ShapeshiftForm.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
+
+
+inherits(ShapeshiftForm, Component)
+function ShapeshiftForm () {
+  Component.call(this)
+
+  this.state = {
+    depositCoin: 'btc',
+    refundAddress: '',
+    showQrCode: false,
+    depositAddress: '',
+    errorMessage: '',
+    isLoading: false,
+    bought: false,
+  }
+}
+
+ShapeshiftForm.prototype.getCoinPair = function () {
+  return `${this.state.depositCoin.toUpperCase()}_ETH`
+}
+
+ShapeshiftForm.prototype.componentWillMount = function () {
+  this.props.shapeShiftSubview()
+}
+
+ShapeshiftForm.prototype.onCoinChange = function (coin) {
+  this.setState({
+    depositCoin: coin,
+    errorMessage: '',
+  })
+  this.props.pairUpdate(coin)
+}
+
+ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
+  this.setState({
+    isLoading: true,
+    showQrCode: true,
+  })
+
+  const {
+    buyWithShapeShift,
+    selectedAddress: withdrawal,
+  } = this.props
+  const {
+    refundAddress: returnAddress,
+    depositCoin,
+  } = this.state
+  const pair = `${depositCoin}_eth`
+  const data = {
+    withdrawal,
+    pair,
+    returnAddress,
+    //  Public api key
+    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
+  }
+
+  if (isValidAddress(withdrawal)) {
+    buyWithShapeShift(data)
+      .then(d => this.setState({
+        showQrCode: true,
+        depositAddress: d.deposit,
+        isLoading: false,
+      }))
+      .catch(() => this.setState({
+        showQrCode: false,
+        errorMessage: this.context.t('invalidRequest'),
+        isLoading: false,
+      }))
+  }
+}
+
+ShapeshiftForm.prototype.renderMetadata = function (label, value) {
+  return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [
+
+    h('div.shapeshift-form__metadata-label', {}, [
+      h('span', `${label}:`),
+    ]),
+
+    h('div.shapeshift-form__metadata-value', {}, [
+      h('span', value),
+    ]),
+
+  ])
+}
+
+ShapeshiftForm.prototype.renderMarketInfo = function () {
+  const { tokenExchangeRates } = this.props
+  const {
+    limit,
+    rate,
+    minimum,
+  } = tokenExchangeRates[this.getCoinPair()] || {}
+
+  return h('div.shapeshift-form__metadata', {}, [
+
+    this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')),
+    this.renderMetadata(this.context.t('limit'), limit),
+    this.renderMetadata(this.context.t('exchangeRate'), rate),
+    this.renderMetadata(this.context.t('min'), minimum),
+
+  ])
+}
+
+ShapeshiftForm.prototype.renderQrCode = function () {
+  const { depositAddress, isLoading, depositCoin } = this.state
+  const qrImage = qrcode(4, 'M')
+  qrImage.addData(depositAddress)
+  qrImage.make()
+
+  return h('div.shapeshift-form', {}, [
+
+    h('div.shapeshift-form__deposit-instruction', [
+      this.context.t('depositCoin', [depositCoin.toUpperCase()]),
+    ]),
+
+    h('div', depositAddress),
+
+    h('div.shapeshift-form__qr-code', [
+      isLoading
+        ? h('img', {
+          src: 'images/loading.svg',
+          style: { width: '60px'},
+        })
+        : h('div', {
+          dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) },
+        }),
+    ]),
+
+    this.renderMarketInfo(),
+
+  ])
+}
+
+
+ShapeshiftForm.prototype.render = function () {
+  const { coinOptions, btnClass, warning } = this.props
+  const { errorMessage, showQrCode, depositAddress } = this.state
+  const { tokenExchangeRates } = this.props
+  const token = tokenExchangeRates[this.getCoinPair()]
+
+  return h('div.shapeshift-form-wrapper', [
+    showQrCode
+      ? this.renderQrCode()
+      : h('div.modal-shapeshift-form', [
+          h('div.shapeshift-form__selectors', [
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', this.context.t('deposit')),
+
+              h(SimpleDropdown, {
+                selectedOption: this.state.depositCoin,
+                onSelect: (coin) => this.onCoinChange(coin),
+                options: Object.entries(coinOptions).map(([coin]) => ({
+                  value: coin.toLowerCase(),
+                  displayValue: coin,
+                })),
+              }),
+
+            ]),
+
+            h('div.icon.shapeshift-form__caret', {
+              style: { backgroundImage: 'url(images/caret-right.svg)'},
+            }),
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', [
+                this.context.t('receive'),
+              ]),
+
+              h('div.shapeshift-form__selector-input', ['ETH']),
+
+            ]),
+
+          ]),
+
+          warning && h('div.shapeshift-form__address-input-label', warning),
+
+          !warning && h('div', {
+            className: classnames('shapeshift-form__address-input-wrapper', {
+              'shapeshift-form__address-input-wrapper--error': errorMessage,
+            }),
+          }, [
+
+            h('div.shapeshift-form__address-input-label', [
+              this.context.t('refundAddress'),
+            ]),
+
+            h('input.shapeshift-form__address-input', {
+              type: 'text',
+              onChange: e => this.setState({
+                refundAddress: e.target.value,
+                errorMessage: '',
+              }),
+            }),
+
+            h('divshapeshift-form__address-input-error-message', [errorMessage]),
+          ]),
+
+          !warning && this.renderMarketInfo(),
+
+      ]),
+
+      !depositAddress && h(Button, {
+        type: 'primary',
+        large: true,
+        className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
+        disabled: !token,
+        onClick: () => this.onBuyWithShapeShift(),
+      }, [this.context.t('buy')]),
+
+    ])
+}
diff --git a/ui/app/components/app/shift-list-item.js b/ui/app/components/app/shift-list-item.js
new file mode 100644
index 000000000..f5fa00047
--- /dev/null
+++ b/ui/app/components/app/shift-list-item.js
@@ -0,0 +1,204 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const explorerLink = require('etherscan-link').createExplorerLink
+const actions = require('../../store/actions')
+const { formatDate, addressSummary } = require('../../helpers/utils/util')
+
+const CopyButton = require('../ui/copyButton')
+const EthBalance = require('../ui/eth-balance')
+const Tooltip = require('../ui/tooltip')
+
+
+ShiftListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps)(ShiftListItem)
+
+
+function mapStateToProps (state) {
+  return {
+    selectedAddress: state.metamask.selectedAddress,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
+
+inherits(ShiftListItem, Component)
+
+function ShiftListItem () {
+  Component.call(this)
+}
+
+ShiftListItem.prototype.render = function () {
+  return h('div.transaction-list-item.tx-list-clickable', {
+    style: {
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+  }, [
+    h('div', {
+      style: {
+        width: '0px',
+        position: 'relative',
+        bottom: '19px',
+      },
+    }, [
+      h('img', {
+        src: 'https://shapeshift.io/logo.png',
+        style: {
+          height: '35px',
+          width: '132px',
+          position: 'absolute',
+          clip: 'rect(0px,30px,34px,0px)',
+        },
+      }),
+    ]),
+
+    this.renderInfo(),
+    this.renderUtilComponents(),
+  ])
+}
+
+ShiftListItem.prototype.renderUtilComponents = function () {
+  var props = this.props
+  const { conversionRate, currentCurrency } = props
+
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-row', [
+        h(CopyButton, {
+          value: this.props.depositAddress,
+        }),
+        h(Tooltip, {
+          title: this.context.t('qrCode'),
+        }, [
+          h('i.fa.fa-qrcode.pointer.pop-hover', {
+            onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
+            style: {
+              margin: '5px',
+              marginLeft: '23px',
+              marginRight: '12px',
+              fontSize: '20px',
+              color: '#F7861C',
+            },
+          }),
+        ]),
+      ])
+    case 'received':
+      return h('.flex-row')
+
+    case 'complete':
+      return h('.flex-row', [
+        h(CopyButton, {
+          value: this.props.response.transaction,
+        }),
+        h(EthBalance, {
+          value: `${props.response.outgoingCoin}`,
+          conversionRate,
+          currentCurrency,
+          width: '55px',
+          shorten: true,
+          needsParse: false,
+          incoming: true,
+          style: {
+            fontSize: '15px',
+            color: '#01888C',
+          },
+        }),
+      ])
+
+    case 'failed':
+      return ''
+    default:
+      return ''
+  }
+}
+
+ShiftListItem.prototype.renderInfo = function () {
+  var props = this.props
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-column', {
+        style: {
+          overflow: 'hidden',
+        },
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('noDeposits')),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'received':
+      return h('.flex-column', {
+        style: {
+          width: '200px',
+          overflow: 'hidden',
+        },
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('conversionProgress')),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'complete':
+      var url = explorerLink(props.response.transaction, parseInt('1'))
+
+      return h('.flex-column.pointer', {
+        style: {
+          width: '200px',
+          overflow: 'hidden',
+        },
+        onClick: () => global.platform.openWindow({ url }),
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, this.context.t('fromShapeShift')),
+        h('div', formatDate(props.time)),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, addressSummary(props.response.transaction)),
+      ])
+
+    case 'failed':
+      return h('span.error', '(' + this.context.t('failed') + ')')
+    default:
+      return ''
+  }
+}
diff --git a/ui/app/components/sidebars/index.js b/ui/app/components/app/sidebars/index.js
index 732925f69..732925f69 100644
--- a/ui/app/components/sidebars/index.js
+++ b/ui/app/components/app/sidebars/index.js
diff --git a/ui/app/components/app/sidebars/index.scss b/ui/app/components/app/sidebars/index.scss
new file mode 100644
index 000000000..08181426f
--- /dev/null
+++ b/ui/app/components/app/sidebars/index.scss
@@ -0,0 +1,81 @@
+@import 'sidebar-content';
+
+.sidebar-right-enter {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(-100%);
+}
+
+.sidebar-right-enter.sidebar-right-enter-active {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(0%);
+}
+
+.sidebar-right-leave {
+  transition: transform 200ms ease-out;
+  transform: translateX(0%);
+}
+
+.sidebar-right-leave.sidebar-right-leave-active {
+  transition: transform 200ms ease-out;
+  transform: translateX(-100%);
+}
+
+.sidebar-left-enter {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(100%);
+}
+
+.sidebar-left-enter.sidebar-left-enter-active {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(0%);
+}
+
+.sidebar-left-leave {
+  transition: transform 200ms ease-out;
+  transform: translateX(0%);
+}
+
+.sidebar-left-leave.sidebar-left-leave-active {
+  transition: transform 200ms ease-out;
+  transform: translateX(100%);
+}
+
+.sidebar-left {
+  flex: 1 0 230px;
+  background: rgb(250, 250, 250);
+  z-index: $sidebar-z-index;
+  position: fixed;
+  left: 15%;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  will-change: transform;
+  overflow-y: auto;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  width: 85%;
+  height: 100%;
+
+  @media screen and (min-width: 769px) {
+    width: 408px;
+    left: calc(100% - 408px);
+  }
+
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+    left: 0%;
+  }
+}
+
+.sidebar-overlay {
+  z-index: $sidebar-overlay-z-index;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(0, 0, 0, .3);
+}
diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/app/sidebars/sidebar-content.scss
index ca6b0a458..ca6b0a458 100644
--- a/ui/app/components/sidebars/sidebar-content.scss
+++ b/ui/app/components/app/sidebars/sidebar-content.scss
diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/app/sidebars/sidebar.component.js
index b9e0f9e81..b9e0f9e81 100644
--- a/ui/app/components/sidebars/sidebar.component.js
+++ b/ui/app/components/app/sidebars/sidebar.component.js
diff --git a/ui/app/components/sidebars/sidebar.constants.js b/ui/app/components/app/sidebars/sidebar.constants.js
index 1613a8245..1613a8245 100644
--- a/ui/app/components/sidebars/sidebar.constants.js
+++ b/ui/app/components/app/sidebars/sidebar.constants.js
diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/app/sidebars/tests/sidebars-component.test.js
index cee22aca8..cee22aca8 100644
--- a/ui/app/components/sidebars/tests/sidebars-component.test.js
+++ b/ui/app/components/app/sidebars/tests/sidebars-component.test.js
diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js
new file mode 100644
index 000000000..4415ecd4f
--- /dev/null
+++ b/ui/app/components/app/signature-request.js
@@ -0,0 +1,316 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+import Identicon from '../ui/identicon'
+const connect = require('react-redux').connect
+const ethUtil = require('ethereumjs-util')
+const classnames = require('classnames')
+const { compose } = require('recompose')
+const { withRouter } = require('react-router-dom')
+const { ObjectInspector } = require('react-inspector')
+
+import AccountDropdownMini from '../ui/account-dropdown-mini'
+
+const actions = require('../../store/actions')
+const { conversionUtil } = require('../../helpers/utils/conversion-util')
+
+const {
+  getSelectedAccount,
+  getCurrentAccountWithSendEtherInfo,
+  getSelectedAddress,
+  accountsWithSendEtherInfoSelector,
+  conversionRateSelector,
+} = require('../../selectors/selectors.js')
+
+import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'
+import Button from '../ui/button'
+
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+
+function mapStateToProps (state) {
+  return {
+    balance: getSelectedAccount(state).balance,
+    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
+    selectedAddress: getSelectedAddress(state),
+    requester: null,
+    requesterAddress: null,
+    accounts: accountsWithSendEtherInfoSelector(state),
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+  }
+}
+
+SignatureRequest.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SignatureRequest)
+
+
+inherits(SignatureRequest, Component)
+function SignatureRequest (props) {
+  Component.call(this)
+
+  this.state = {
+    selectedAccount: props.selectedAccount,
+  }
+}
+
+SignatureRequest.prototype.renderHeader = function () {
+  return h('div.request-signature__header', [
+
+    h('div.request-signature__header-background'),
+
+    h('div.request-signature__header__text', this.context.t('sigRequest')),
+
+    h('div.request-signature__header__tip-container', [
+      h('div.request-signature__header__tip'),
+    ]),
+
+  ])
+}
+
+SignatureRequest.prototype.renderAccountDropdown = function () {
+  const { selectedAccount } = this.state
+
+  const {
+    accounts,
+  } = this.props
+
+  return h('div.request-signature__account', [
+
+    h('div.request-signature__account-text', [this.context.t('account') + ':']),
+
+    h(AccountDropdownMini, {
+      selectedAccount,
+      accounts,
+      disabled: true,
+    }),
+
+  ])
+}
+
+SignatureRequest.prototype.renderBalance = function () {
+  const { balance, conversionRate } = this.props
+
+  const balanceInEther = conversionUtil(balance, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return h('div.request-signature__balance', [
+
+    h('div.request-signature__balance-text', `${this.context.t('balance')}:`),
+
+    h('div.request-signature__balance-value', `${balanceInEther} ETH`),
+
+  ])
+}
+
+SignatureRequest.prototype.renderAccountInfo = function () {
+  return h('div.request-signature__account-info', [
+
+    this.renderAccountDropdown(),
+
+    this.renderRequestIcon(),
+
+    this.renderBalance(),
+
+  ])
+}
+
+SignatureRequest.prototype.renderRequestIcon = function () {
+  const { requesterAddress } = this.props
+
+  return h('div.request-signature__request-icon', [
+    h(Identicon, {
+      diameter: 40,
+      address: requesterAddress,
+    }),
+  ])
+}
+
+SignatureRequest.prototype.renderRequestInfo = function () {
+  return h('div.request-signature__request-info', [
+
+    h('div.request-signature__headline', [
+      this.context.t('yourSigRequested'),
+    ]),
+
+  ])
+}
+
+SignatureRequest.prototype.msgHexToText = function (hex) {
+  try {
+    const stripped = ethUtil.stripHexPrefix(hex)
+    const buff = Buffer.from(stripped, 'hex')
+    return buff.length === 32 ? hex : buff.toString('utf8')
+  } catch (e) {
+    return hex
+  }
+}
+
+// eslint-disable-next-line react/display-name
+SignatureRequest.prototype.renderTypedDataV3 = function (data) {
+  const { domain, message } = JSON.parse(data)
+  return [
+    h('div.request-signature__typed-container', [
+      domain ? h('div', [
+        h('h1', 'Domain'),
+        h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
+      ]) : '',
+      message ? h('div', [
+        h('h1', 'Message'),
+        h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
+      ]) : '',
+    ]),
+  ]
+}
+
+SignatureRequest.prototype.renderBody = function () {
+  let rows
+  let notice = this.context.t('youSign') + ':'
+
+  const { txData } = this.props
+  const { type, msgParams: { data, version } } = txData
+
+  if (type === 'personal_sign') {
+    rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
+  } else if (type === 'eth_signTypedData') {
+    rows = data
+  } else if (type === 'eth_sign') {
+    rows = [{ name: this.context.t('message'), value: data }]
+    notice = [this.context.t('signNotice'),
+      h('span.request-signature__help-link', {
+        onClick: () => {
+          global.platform.openWindow({
+            url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
+          })
+        },
+    }, this.context.t('learnMore'))]
+  }
+
+  return h('div.request-signature__body', {}, [
+
+    this.renderAccountInfo(),
+
+    this.renderRequestInfo(),
+
+    h('div.request-signature__notice', {
+      className: classnames({
+        'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData',
+        'request-signature__warning': type === 'eth_sign',
+      }),
+    }, [notice]),
+
+    h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
+      this.renderTypedDataV3(data) :
+      rows.map(({ name, value }) => {
+        if (typeof value === 'boolean') {
+          value = value.toString()
+        }
+        return h('div.request-signature__row', [
+          h('div.request-signature__row-title', [`${name}:`]),
+          h('div.request-signature__row-value', value),
+        ])
+      }),
+    ),
+  ])
+}
+
+SignatureRequest.prototype.renderFooter = function () {
+  const {
+    signPersonalMessage,
+    signTypedMessage,
+    cancelPersonalMessage,
+    cancelTypedMessage,
+    signMessage,
+    cancelMessage,
+  } = this.props
+
+  const { txData } = this.props
+  const { type } = txData
+
+  let cancel
+  let sign
+  if (type === 'personal_sign') {
+    cancel = cancelPersonalMessage
+    sign = signPersonalMessage
+  } else if (type === 'eth_signTypedData') {
+    cancel = cancelTypedMessage
+    sign = signTypedMessage
+  } else if (type === 'eth_sign') {
+    cancel = cancelMessage
+    sign = signMessage
+  }
+
+  return h('div.request-signature__footer', [
+    h(Button, {
+      type: 'default',
+      large: true,
+      className: 'request-signature__footer__cancel-button',
+      onClick: event => {
+        cancel(event).then(() => {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Sign Request',
+              name: 'Cancel',
+            },
+          })
+          this.props.clearConfirmTransaction()
+          this.props.history.push(DEFAULT_ROUTE)
+        })
+      },
+    }, this.context.t('cancel')),
+    h(Button, {
+      type: 'primary',
+      large: true,
+      className: 'request-signature__footer__sign-button',
+      onClick: event => {
+        sign(event).then(() => {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Sign Request',
+              name: 'Confirm',
+            },
+          })
+          this.props.clearConfirmTransaction()
+          this.props.history.push(DEFAULT_ROUTE)
+        })
+      },
+    }, this.context.t('sign')),
+  ])
+}
+
+SignatureRequest.prototype.render = function () {
+  return (
+
+    h('div.request-signature__container', [
+
+      this.renderHeader(),
+
+      this.renderBody(),
+
+      this.renderFooter(),
+
+    ])
+
+  )
+
+}
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/app/tab-bar.js
index 0016a09c1..0016a09c1 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/app/tab-bar.js
diff --git a/ui/app/components/app/token-cell.js b/ui/app/components/app/token-cell.js
new file mode 100644
index 000000000..cef809e8a
--- /dev/null
+++ b/ui/app/components/app/token-cell.js
@@ -0,0 +1,177 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+import Identicon from '../ui/identicon'
+const prefixForNetwork = require('../../../lib/etherscan-prefix-for-network')
+const selectors = require('../../selectors/selectors')
+const actions = require('../../store/actions')
+const { conversionUtil, multiplyCurrencies } = require('../../helpers/utils/conversion-util')
+
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    currentCurrency: state.metamask.currentCurrency,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+    userAddress: selectors.getSelectedAddress(state),
+    contractExchangeRates: state.metamask.contractExchangeRates,
+    conversionRate: state.metamask.conversionRate,
+    sidebarOpen: state.appState.sidebar.isOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
+
+inherits(TokenCell, Component)
+function TokenCell () {
+  Component.call(this)
+
+  this.state = {
+    tokenMenuOpen: false,
+  }
+}
+
+TokenCell.contextTypes = {
+  metricsEvent: PropTypes.func,
+}
+
+TokenCell.prototype.render = function () {
+  const { tokenMenuOpen } = this.state
+  const props = this.props
+  const {
+    address,
+    symbol,
+    string,
+    network,
+    setSelectedToken,
+    selectedTokenAddress,
+    contractExchangeRates,
+    conversionRate,
+    hideSidebar,
+    sidebarOpen,
+    currentCurrency,
+    // userAddress,
+    image,
+  } = props
+  let currentTokenToFiatRate
+  let currentTokenInFiat
+  let formattedFiat = ''
+
+  if (contractExchangeRates[address]) {
+    currentTokenToFiatRate = multiplyCurrencies(
+      contractExchangeRates[address],
+      conversionRate
+    )
+    currentTokenInFiat = conversionUtil(string, {
+      fromNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: currentCurrency.toUpperCase(),
+      numberOfDecimals: 2,
+      conversionRate: currentTokenToFiatRate,
+    })
+    formattedFiat = currentTokenInFiat.toString() === '0'
+      ? ''
+      : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
+  }
+
+  const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
+
+  return (
+    h('div.token-list-item', {
+      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
+      // style: { cursor: network === '1' ? 'pointer' : 'default' },
+      // onClick: this.view.bind(this, address, userAddress, network),
+      onClick: () => {
+        setSelectedToken(address)
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Token Menu',
+            name: 'Clicked Token',
+          },
+        })
+        selectedTokenAddress !== address && sidebarOpen && hideSidebar()
+      },
+    }, [
+
+      h(Identicon, {
+        className: 'token-list-item__identicon',
+        diameter: 50,
+        address,
+        network,
+        image,
+      }),
+
+      h('div.token-list-item__balance-ellipsis', null, [
+        h('div.token-list-item__balance-wrapper', null, [
+          h('div.token-list-item__token-balance', `${string || 0}`),
+          h('div.token-list-item__token-symbol', symbol),
+          showFiat && h('div.token-list-item__fiat-amount', {
+            style: {},
+          }, formattedFiat),
+        ]),
+
+        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+          onClick: (e) => {
+            e.stopPropagation()
+            this.setState({ tokenMenuOpen: true })
+          },
+        }),
+
+      ]),
+
+
+      tokenMenuOpen && h(TokenMenuDropdown, {
+        onClose: () => this.setState({ tokenMenuOpen: false }),
+        token: { symbol, address },
+      }),
+
+      /*
+      h('button', {
+        onClick: this.send.bind(this, address),
+      }, 'SEND'),
+      */
+
+    ])
+  )
+}
+
+TokenCell.prototype.send = function (address, event) {
+  event.preventDefault()
+  event.stopPropagation()
+  const url = tokenFactoryFor(address)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+TokenCell.prototype.view = function (address, userAddress, network, event) {
+  const url = etherscanLinkFor(address, userAddress, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (tokenAddress, address, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
+}
+
+function tokenFactoryFor (tokenAddress) {
+  return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
+}
+
diff --git a/ui/app/components/app/token-list.js b/ui/app/components/app/token-list.js
new file mode 100644
index 000000000..2188e7020
--- /dev/null
+++ b/ui/app/components/app/token-list.js
@@ -0,0 +1,188 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenTracker = require('eth-token-tracker')
+const TokenCell = require('./token-cell.js')
+const connect = require('react-redux').connect
+const selectors = require('../../selectors/selectors')
+const log = require('loglevel')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    tokens: state.metamask.tokens,
+    userAddress: selectors.getSelectedAddress(state),
+    assetImages: state.metamask.assetImages,
+  }
+}
+
+const defaultTokens = []
+const contracts = require('eth-contract-metadata')
+for (const address in contracts) {
+  const contract = contracts[address]
+  if (contract.erc20) {
+    contract.address = address
+    defaultTokens.push(contract)
+  }
+}
+
+TokenList.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps)(TokenList)
+
+
+inherits(TokenList, Component)
+function TokenList () {
+  this.state = {
+    tokens: [],
+    isLoading: true,
+    network: null,
+  }
+  Component.call(this)
+}
+
+TokenList.prototype.render = function () {
+  const { userAddress, assetImages } = this.props
+  const state = this.state
+  const { tokens, isLoading, error } = state
+  if (isLoading) {
+    return this.message(this.context.t('loadingTokens'))
+  }
+
+  if (error) {
+    log.error(error)
+    return h('.hotFix', {
+      style: {
+        padding: '80px',
+      },
+    }, [
+      this.context.t('troubleTokenBalances'),
+      h('span.hotFix', {
+        style: {
+          color: 'rgba(247, 134, 28, 1)',
+          cursor: 'pointer',
+        },
+        onClick: () => {
+          global.platform.openWindow({
+          url: `https://ethplorer.io/address/${userAddress}`,
+        })
+        },
+      }, this.context.t('here')),
+    ])
+  }
+
+  return h('div', tokens.map((tokenData) => {
+    tokenData.image = assetImages[tokenData.address]
+    return h(TokenCell, tokenData)
+  }))
+
+}
+
+TokenList.prototype.message = function (body) {
+  return h('div', {
+    style: {
+      display: 'flex',
+      height: '250px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '30px',
+    },
+  }, body)
+}
+
+TokenList.prototype.componentDidMount = function () {
+  this.createFreshTokenTracker()
+}
+
+TokenList.prototype.createFreshTokenTracker = function () {
+  if (this.tracker) {
+    // Clean up old trackers when refreshing:
+    this.tracker.stop()
+    this.tracker.removeListener('update', this.balanceUpdater)
+    this.tracker.removeListener('error', this.showError)
+  }
+
+  if (!global.ethereumProvider) return
+  const { userAddress } = this.props
+
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: global.ethereumProvider,
+    tokens: this.props.tokens,
+    pollingInterval: 8000,
+  })
+
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalances.bind(this)
+  this.showError = (error) => {
+    this.setState({ error, isLoading: false })
+  }
+  this.tracker.on('update', this.balanceUpdater)
+  this.tracker.on('error', this.showError)
+
+  this.tracker.updateBalances()
+  .then(() => {
+    this.updateBalances(this.tracker.serialize())
+  })
+  .catch((reason) => {
+    log.error(`Problem updating balances`, reason)
+    this.setState({ isLoading: false })
+  })
+}
+
+TokenList.prototype.componentDidUpdate = function (prevProps) {
+  const {
+    network: oldNet,
+    userAddress: oldAddress,
+    tokens,
+  } = prevProps
+  const {
+    network: newNet,
+    userAddress: newAddress,
+    tokens: newTokens,
+  } = this.props
+
+  const isLoading = newNet === 'loading'
+  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
+  const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet
+  const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork
+
+  const oldTokensLength = tokens ? tokens.length : 0
+  const tokensLengthUnchanged = oldTokensLength === newTokens.length
+
+  if (tokensLengthUnchanged && shouldUpdateTokens) return
+
+  this.setState({ isLoading: true })
+  this.createFreshTokenTracker()
+}
+
+TokenList.prototype.updateBalances = function (tokens) {
+  if (!this.tracker.running) {
+    return
+  }
+  this.setState({ tokens, isLoading: false })
+}
+
+TokenList.prototype.componentWillUnmount = function () {
+  if (!this.tracker) return
+  this.tracker.stop()
+  this.tracker.removeListener('update', this.balanceUpdater)
+  this.tracker.removeListener('error', this.showError)
+}
+
+// function uniqueMergeTokens (tokensA, tokensB = []) {
+//   const uniqueAddresses = []
+//   const result = []
+//   tokensA.concat(tokensB).forEach((token) => {
+//     const normal = normalizeAddress(token.address)
+//     if (!uniqueAddresses.includes(normal)) {
+//       uniqueAddresses.push(normal)
+//       result.push(token)
+//     }
+//   })
+//   return result
+// }
diff --git a/ui/app/components/transaction-action/index.js b/ui/app/components/app/transaction-action/index.js
index a6e9097f1..a6e9097f1 100644
--- a/ui/app/components/transaction-action/index.js
+++ b/ui/app/components/app/transaction-action/index.js
diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/app/transaction-action/tests/transaction-action.component.test.js
index b22a9db39..b22a9db39 100644
--- a/ui/app/components/transaction-action/tests/transaction-action.component.test.js
+++ b/ui/app/components/app/transaction-action/tests/transaction-action.component.test.js
diff --git a/ui/app/components/app/transaction-action/transaction-action.component.js b/ui/app/components/app/transaction-action/transaction-action.component.js
new file mode 100644
index 000000000..4a5efdaae
--- /dev/null
+++ b/ui/app/components/app/transaction-action/transaction-action.component.js
@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getTransactionActionKey } from '../../../helpers/utils/transactions.util'
+import { camelCaseToCapitalize } from '../../../helpers/utils/common.util'
+
+export default class TransactionAction extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    transaction: PropTypes.object,
+    methodData: PropTypes.object,
+  }
+
+  state = {
+    transactionAction: '',
+  }
+
+  componentDidMount () {
+    this.getTransactionAction()
+  }
+
+  componentDidUpdate () {
+    this.getTransactionAction()
+  }
+
+  async getTransactionAction () {
+    const { transactionAction } = this.state
+    const { transaction, methodData } = this.props
+    const { data, done } = methodData
+    const { name = '' } = data
+
+    if (!done || transactionAction) {
+      return
+    }
+
+    const actionKey = await getTransactionActionKey(transaction, data)
+    const action = actionKey
+      ? this.context.t(actionKey)
+      : camelCaseToCapitalize(name)
+
+    this.setState({ transactionAction: action })
+  }
+
+  render () {
+    const { className, methodData: { done } } = this.props
+    const { transactionAction } = this.state
+
+    return (
+      <div className={classnames('transaction-action', className)}>
+        { (done && transactionAction) || '--' }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/app/transaction-activity-log/index.js
index a33da15a3..a33da15a3 100644
--- a/ui/app/components/transaction-activity-log/index.js
+++ b/ui/app/components/app/transaction-activity-log/index.js
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/app/transaction-activity-log/index.scss
index 00c17e6aa..00c17e6aa 100644
--- a/ui/app/components/transaction-activity-log/index.scss
+++ b/ui/app/components/app/transaction-activity-log/index.scss
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js
index a2946e53d..a2946e53d 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
+++ b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.container.test.js
index a7c35f51e..a7c35f51e 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
+++ b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.container.test.js
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.util.test.js
index d014b8886..d014b8886 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
+++ b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.util.test.js
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/index.js
index 86b12360a..86b12360a 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/index.js
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
index 871716002..871716002 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
diff --git a/ui/app/components/app/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log.component.js
new file mode 100644
index 000000000..de4d29750
--- /dev/null
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,131 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../../helpers/utils/conversions.util'
+import { formatDate } from '../../../helpers/utils/util'
+import TransactionActivityLogIcon from './transaction-activity-log-icon'
+import { CONFIRMED_STATUS } from './transaction-activity-log.constants'
+import prefixForNetwork from '../../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionActivityLog extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    activities: PropTypes.array,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+    inlineRetryIndex: PropTypes.number,
+    inlineCancelIndex: PropTypes.number,
+    nativeCurrency: PropTypes.string,
+    onCancel: PropTypes.func,
+    onRetry: PropTypes.func,
+    primaryTransaction: PropTypes.object,
+  }
+
+  handleActivityClick = hash => {
+    const { primaryTransaction } = this.props
+    const { metamaskNetworkId } = primaryTransaction
+
+    const prefix = prefixForNetwork(metamaskNetworkId)
+    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+
+    global.platform.openWindow({ url: etherscanUrl })
+  }
+
+  renderInlineRetry (index, activity) {
+    const { t } = this.context
+    const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props
+    const { status } = primaryTransaction
+    const { id } = activity
+
+    return status !== CONFIRMED_STATUS && index === inlineRetryIndex
+      ? (
+        <div
+          className="transaction-activity-log__action-link"
+          onClick={() => onRetry(id)}
+        >
+          { t('speedUpTransaction') }
+        </div>
+      ) : null
+  }
+
+  renderInlineCancel (index, activity) {
+    const { t } = this.context
+    const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props
+    const { status } = primaryTransaction
+    const { id } = activity
+
+    return status !== CONFIRMED_STATUS && index === inlineCancelIndex
+      ? (
+        <div
+          className="transaction-activity-log__action-link"
+          onClick={() => onCancel(id)}
+        >
+          { t('speedUpCancellation') }
+        </div>
+      ) : null
+  }
+
+  renderActivity (activity, index) {
+    const { conversionRate, nativeCurrency } = this.props
+    const { eventKey, value, timestamp, hash } = activity
+    const ethValue = index === 0
+      ? `${getValueFromWeiHex({
+        value,
+        fromCurrency: nativeCurrency,
+        toCurrency: nativeCurrency,
+        conversionRate,
+        numberOfDecimals: 6,
+      })} ${nativeCurrency}`
+      : getEthConversionFromWeiHex({
+        value,
+        fromCurrency: nativeCurrency,
+        conversionRate,
+        numberOfDecimals: 3,
+      })
+    const formattedTimestamp = formatDate(timestamp, 'T \'on\' M/d/y')
+    const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
+
+    return (
+      <div
+        key={index}
+        className="transaction-activity-log__activity"
+      >
+        <TransactionActivityLogIcon
+          className="transaction-activity-log__activity-icon"
+          eventKey={eventKey}
+        />
+        <div className="transaction-activity-log__entry-container">
+          <div
+            className="transaction-activity-log__activity-text"
+            title={activityText}
+            onClick={() => this.handleActivityClick(hash)}
+          >
+            { activityText }
+          </div>
+          { this.renderInlineRetry(index, activity) }
+          { this.renderInlineCancel(index, activity) }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { className, activities } = this.props
+
+    return (
+      <div className={classnames('transaction-activity-log', className)}>
+        <div className="transaction-activity-log__title">
+          { t('activityLog') }
+        </div>
+        <div className="transaction-activity-log__activities-container">
+          { activities.map((activity, index) => this.renderActivity(activity, index)) }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log.constants.js
index 72e63d85c..72e63d85c 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log.constants.js
diff --git a/ui/app/components/app/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log.container.js
new file mode 100644
index 000000000..11b20f245
--- /dev/null
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log.container.js
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux'
+import R from 'ramda'
+import TransactionActivityLog from './transaction-activity-log.component'
+import { conversionRateSelector, getNativeCurrency } from '../../../selectors/selectors'
+import { combineTransactionHistories } from './transaction-activity-log.util'
+import {
+  TRANSACTION_RESUBMITTED_EVENT,
+  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+} from './transaction-activity-log.constants'
+
+const matchesEventKey = matchEventKey => ({ eventKey }) => eventKey === matchEventKey
+
+const mapStateToProps = state => {
+  return {
+    conversionRate: conversionRateSelector(state),
+    nativeCurrency: getNativeCurrency(state),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const {
+    transactionGroup: {
+      transactions = [],
+      primaryTransaction,
+    } = {},
+    ...restOwnProps
+  } = ownProps
+
+  const activities = combineTransactionHistories(transactions)
+  const inlineRetryIndex = R.findLastIndex(matchesEventKey(TRANSACTION_RESUBMITTED_EVENT))(activities)
+  const inlineCancelIndex = R.findLastIndex(matchesEventKey(TRANSACTION_CANCEL_ATTEMPTED_EVENT))(activities)
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...restOwnProps,
+    activities,
+    inlineRetryIndex,
+    inlineCancelIndex,
+    primaryTransaction,
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(TransactionActivityLog)
diff --git a/ui/app/components/app/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log.util.js
new file mode 100644
index 000000000..ac5a00c31
--- /dev/null
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,224 @@
+import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util'
+
+// path constants
+const STATUS_PATH = '/status'
+const GAS_PRICE_PATH = '/txParams/gasPrice'
+const GAS_LIMIT_PATH = '/txParams/gas'
+
+// op constants
+const REPLACE_OP = 'replace'
+
+import {
+  // event constants
+  TRANSACTION_CREATED_EVENT,
+  TRANSACTION_SUBMITTED_EVENT,
+  TRANSACTION_RESUBMITTED_EVENT,
+  TRANSACTION_CONFIRMED_EVENT,
+  TRANSACTION_DROPPED_EVENT,
+  TRANSACTION_UPDATED_EVENT,
+  TRANSACTION_ERRORED_EVENT,
+  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+  TRANSACTION_CANCEL_SUCCESS_EVENT,
+  // status constants
+  SUBMITTED_STATUS,
+  CONFIRMED_STATUS,
+  DROPPED_STATUS,
+} from './transaction-activity-log.constants'
+
+import {
+  TRANSACTION_TYPE_CANCEL,
+  TRANSACTION_TYPE_RETRY,
+} from '../../../../../app/scripts/controllers/transactions/enums'
+
+const eventPathsHash = {
+  [STATUS_PATH]: true,
+  [GAS_PRICE_PATH]: true,
+  [GAS_LIMIT_PATH]: true,
+}
+
+const statusHash = {
+  [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
+  [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
+  [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
+}
+
+/**
+ * @name getActivities
+ * @param {Object} transaction - txMeta object
+ * @param {boolean} isFirstTransaction - True if the transaction is the first created transaction
+ * in the list of transactions with the same nonce. If so, we use this transaction to create the
+ * transactionCreated activity.
+ * @returns {Array}
+ */
+export function getActivities (transaction, isFirstTransaction = false) {
+  const { id, hash, history = [], txReceipt: { status } = {}, type } = transaction
+
+  let cachedGasLimit = '0x0'
+  let cachedGasPrice = '0x0'
+
+  const historyActivities = history.reduce((acc, base, index) => {
+    // First history item should be transaction creation
+    if (index === 0 && !Array.isArray(base) && base.txParams) {
+      const { time: timestamp, txParams: { value, gas = '0x0', gasPrice = '0x0' } = {} } = base
+      // The cached gas limit and gas price are used to display the gas fee in the activity log. We
+      // need to cache these values because the status update history events don't provide us with
+      // the latest gas limit and gas price.
+      cachedGasLimit = gas
+      cachedGasPrice = gasPrice
+
+      if (isFirstTransaction) {
+        return acc.concat({
+          id,
+          hash,
+          eventKey: TRANSACTION_CREATED_EVENT,
+          timestamp,
+          value,
+        })
+      }
+      // An entry in the history may be an array of more sub-entries.
+    } else if (Array.isArray(base)) {
+      const events = []
+
+      base.forEach(entry => {
+        const { op, path, value, timestamp: entryTimestamp } = entry
+        // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a
+        // timestamp, the first sub-entry in a history entry should.
+        const timestamp = entryTimestamp || base[0] && base[0].timestamp
+
+        if (path in eventPathsHash && op === REPLACE_OP) {
+          switch (path) {
+            case STATUS_PATH: {
+              const gasFee = getHexGasTotal({ gasLimit: cachedGasLimit, gasPrice: cachedGasPrice })
+
+              if (value in statusHash) {
+                let eventKey = statusHash[value]
+
+                // If the status is 'submitted', we need to determine whether the event is a
+                // transaction retry or a cancellation attempt.
+                if (value === SUBMITTED_STATUS) {
+                  if (type === TRANSACTION_TYPE_RETRY) {
+                    eventKey = TRANSACTION_RESUBMITTED_EVENT
+                  } else if (type === TRANSACTION_TYPE_CANCEL) {
+                    eventKey = TRANSACTION_CANCEL_ATTEMPTED_EVENT
+                  }
+                } else if (value === CONFIRMED_STATUS) {
+                  if (type === TRANSACTION_TYPE_CANCEL) {
+                    eventKey = TRANSACTION_CANCEL_SUCCESS_EVENT
+                  }
+                }
+
+                events.push({
+                  id,
+                  hash,
+                  eventKey,
+                  timestamp,
+                  value: gasFee,
+                })
+              }
+
+              break
+            }
+
+            // If the gas price or gas limit has been changed, we update the gasFee of the
+            // previously submitted event. These events happen when the gas limit and gas price is
+            // changed at the confirm screen.
+            case GAS_PRICE_PATH:
+            case GAS_LIMIT_PATH: {
+              const lastEvent = events[events.length - 1] || {}
+              const { lastEventKey } = lastEvent
+
+              if (path === GAS_LIMIT_PATH) {
+                cachedGasLimit = value
+              } else if (path === GAS_PRICE_PATH) {
+                cachedGasPrice = value
+              }
+
+              if (lastEventKey === TRANSACTION_SUBMITTED_EVENT ||
+                lastEventKey === TRANSACTION_RESUBMITTED_EVENT) {
+                lastEvent.value = getHexGasTotal({
+                  gasLimit: cachedGasLimit,
+                  gasPrice: cachedGasPrice,
+                })
+              }
+
+              break
+            }
+
+            default: {
+              events.push({
+                id,
+                hash,
+                eventKey: TRANSACTION_UPDATED_EVENT,
+                timestamp,
+              })
+            }
+          }
+        }
+      })
+
+      return acc.concat(events)
+    }
+
+    return acc
+  }, [])
+
+  // If txReceipt.status is '0x0', that means that an on-chain error occured for the transaction,
+  // so we add an error entry to the Activity Log.
+  return status === '0x0'
+    ? historyActivities.concat({ id, hash, eventKey: TRANSACTION_ERRORED_EVENT })
+    : historyActivities
+}
+
+/**
+ * @description Removes "Transaction dropped" activities from a list of sorted activities if one of
+ * the transactions has been confirmed. Typically, if multiple transactions have the same nonce,
+ * once one transaction is confirmed, the rest are dropped. In this case, we don't want to show
+ * multiple "Transaction dropped" activities, and instead want to show a single "Transaction
+ * confirmed".
+ * @param {Array} activities - List of sorted activities generated from the getActivities function.
+ * @returns {Array}
+ */
+function filterSortedActivities (activities) {
+  const filteredActivities = []
+  const hasConfirmedActivity = Boolean(activities.find(({ eventKey }) => (
+    eventKey === TRANSACTION_CONFIRMED_EVENT || eventKey === TRANSACTION_CANCEL_SUCCESS_EVENT
+  )))
+  let addedDroppedActivity = false
+
+  activities.forEach(activity => {
+    if (activity.eventKey === TRANSACTION_DROPPED_EVENT) {
+      if (!hasConfirmedActivity && !addedDroppedActivity) {
+        filteredActivities.push(activity)
+        addedDroppedActivity = true
+      }
+    } else {
+      filteredActivities.push(activity)
+    }
+  })
+
+  return filteredActivities
+}
+
+/**
+ * Combines the histories of an array of transactions into a single array.
+ * @param {Array} transactions - Array of txMeta transaction objects.
+ * @returns {Array}
+ */
+export function combineTransactionHistories (transactions = []) {
+  if (!transactions.length) {
+    return []
+  }
+
+  const activities = []
+
+  transactions.forEach((transaction, index) => {
+    // The first transaction should be the transaction with the earliest submittedTime. We show the
+    // 'created' and 'submitted' activities here. All subsequent transactions will use 'resubmitted'
+    // instead.
+    const transactionActivities = getActivities(transaction, index === 0)
+    activities.push(...transactionActivities)
+  })
+
+  const sortedActivities = activities.sort((a, b) => a.timestamp - b.timestamp)
+  return filterSortedActivities(sortedActivities)
+}
diff --git a/ui/app/components/transaction-breakdown/index.js b/ui/app/components/app/transaction-breakdown/index.js
index 4a5b52663..4a5b52663 100644
--- a/ui/app/components/transaction-breakdown/index.js
+++ b/ui/app/components/app/transaction-breakdown/index.js
diff --git a/ui/app/components/app/transaction-breakdown/index.scss b/ui/app/components/app/transaction-breakdown/index.scss
new file mode 100644
index 000000000..c8144eac2
--- /dev/null
+++ b/ui/app/components/app/transaction-breakdown/index.scss
@@ -0,0 +1,24 @@
+@import 'transaction-breakdown-row/index';
+
+.transaction-breakdown {
+  &__title {
+    border-bottom: 1px solid #d8d8d8;
+    padding-bottom: 4px;
+    text-transform: capitalize;
+  }
+
+  &__row-title {
+    text-transform: capitalize;
+  }
+
+  &__value {
+    text-align: end;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &--eth-total {
+      font-weight: 500;
+    }
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/app/transaction-breakdown/tests/transaction-breakdown.component.test.js
index 4512b84f0..4512b84f0 100644
--- a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
+++ b/ui/app/components/app/transaction-breakdown/tests/transaction-breakdown.component.test.js
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.js
index 557bf75fb..557bf75fb 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.js
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
index 8c73be1a6..8c73be1a6 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
new file mode 100644
index 000000000..82e40fce2
--- /dev/null
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdownRow from '../transaction-breakdown-row.component'
+import Button from '../../../../ui/button'
+
+describe('TransactionBreakdownRow Component', () => {
+  it('should render text properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        Test
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
+  })
+
+  it('should render components properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        <Button onClick={() => {}} >Button</Button>
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
+  })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
index c11ff8efa..c11ff8efa 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
new file mode 100644
index 000000000..5642e0fa5
--- /dev/null
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,106 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import TransactionBreakdownRow from './transaction-breakdown-row'
+import CurrencyDisplay from '../../ui/currency-display'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import HexToDecimal from '../../ui/hex-to-decimal'
+import { GWEI, PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+
+export default class TransactionBreakdown extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    className: PropTypes.string,
+    nativeCurrency: PropTypes.string.isRequired,
+    showFiat: PropTypes.bool,
+    gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }
+
+  static defaultProps = {
+    transaction: {},
+    showFiat: true,
+  }
+
+  render () {
+    const { t } = this.context
+    const { gas, gasPrice, value, className, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
+
+    return (
+      <div className={classnames('transaction-breakdown', className)}>
+        <div className="transaction-breakdown__title">
+          { t('transaction') }
+        </div>
+        <TransactionBreakdownRow title={t('amount')}>
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value"
+            type={PRIMARY}
+            value={value}
+          />
+        </TransactionBreakdownRow>
+        <TransactionBreakdownRow
+          title={`${t('gasLimit')} (${t('units')})`}
+          className="transaction-breakdown__row-title"
+        >
+          {typeof gas !== 'undefined'
+            ? <HexToDecimal
+              className="transaction-breakdown__value"
+              value={gas}
+            />
+            : '?'
+          }
+        </TransactionBreakdownRow>
+        {
+          typeof gasUsed === 'string' && (
+            <TransactionBreakdownRow
+              title={`${t('gasUsed')} (${t('units')})`}
+              className="transaction-breakdown__row-title"
+            >
+              <HexToDecimal
+                className="transaction-breakdown__value"
+                value={gasUsed}
+              />
+            </TransactionBreakdownRow>
+          )
+        }
+        <TransactionBreakdownRow title={t('gasPrice')}>
+          {typeof gasPrice !== 'undefined'
+            ? <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={nativeCurrency}
+              denomination={GWEI}
+              value={gasPrice}
+              hideLabel
+            />
+            : '?'
+          }
+        </TransactionBreakdownRow>
+        <TransactionBreakdownRow title={t('total')}>
+          <div>
+            <UserPreferencedCurrencyDisplay
+              className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+              type={PRIMARY}
+              value={totalInHex}
+            />
+            {
+              showFiat && (
+                <UserPreferencedCurrencyDisplay
+                  className="transaction-breakdown__value"
+                  type={SECONDARY}
+                  value={totalInHex}
+                />
+              )
+            }
+          </div>
+        </TransactionBreakdownRow>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown.container.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown.container.js
new file mode 100644
index 000000000..82f377358
--- /dev/null
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown.container.js
@@ -0,0 +1,29 @@
+import { connect } from 'react-redux'
+import TransactionBreakdown from './transaction-breakdown.component'
+import {getIsMainnet, getNativeCurrency, preferencesSelector} from '../../../selectors/selectors'
+import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util'
+import { sumHexes } from '../../../helpers/utils/transactions.util'
+
+const mapStateToProps = (state, ownProps) => {
+  const { transaction } = ownProps
+  const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
+
+  const hexGasTotal = gasLimit && gasPrice && getHexGasTotal({ gasLimit, gasPrice }) || '0x0'
+  const totalInHex = sumHexes(hexGasTotal, value)
+
+  return {
+    nativeCurrency: getNativeCurrency(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
+    totalInHex,
+    gas,
+    gasPrice,
+    value,
+    gasUsed,
+  }
+}
+
+export default connect(mapStateToProps)(TransactionBreakdown)
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/app/transaction-list-item-details/index.js
index 0e878d032..0e878d032 100644
--- a/ui/app/components/transaction-list-item-details/index.js
+++ b/ui/app/components/app/transaction-list-item-details/index.js
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/app/transaction-list-item-details/index.scss
index 7cb253e4e..7cb253e4e 100644
--- a/ui/app/components/transaction-list-item-details/index.scss
+++ b/ui/app/components/app/transaction-list-item-details/index.scss
diff --git a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
new file mode 100644
index 000000000..c4e118b01
--- /dev/null
+++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionListItemDetails from '../transaction-list-item-details.component'
+import Button from '../../../ui/button'
+import SenderToRecipient from '../../../ui/sender-to-recipient'
+import TransactionBreakdown from '../../transaction-breakdown'
+import TransactionActivityLog from '../../transaction-activity-log'
+
+describe('TransactionListItemDetails Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 2)
+    assert.equal(wrapper.find(SenderToRecipient).length, 1)
+    assert.equal(wrapper.find(TransactionBreakdown).length, 1)
+    assert.equal(wrapper.find(TransactionActivityLog).length, 1)
+  })
+
+  it('should render a retry button', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+      nonce: '0xa4',
+      hasRetried: false,
+      hasCancelled: false,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+        showRetry={true}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 3)
+  })
+})
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
new file mode 100644
index 000000000..b08e0bbe3
--- /dev/null
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -0,0 +1,181 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
+import SenderToRecipient from '../../ui/sender-to-recipient'
+import { FLAT_VARIANT } from '../../ui/sender-to-recipient/sender-to-recipient.constants'
+import TransactionActivityLog from '../transaction-activity-log'
+import TransactionBreakdown from '../transaction-breakdown'
+import Button from '../../ui/button'
+import Tooltip from '../../ui/tooltip'
+import prefixForNetwork from '../../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionListItemDetails extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    onCancel: PropTypes.func,
+    onRetry: PropTypes.func,
+    showCancel: PropTypes.bool,
+    showRetry: PropTypes.bool,
+    transactionGroup: PropTypes.object,
+  }
+
+  state = {
+    justCopied: false,
+  }
+
+  handleEtherscanClick = () => {
+    const { transactionGroup: { primaryTransaction } } = this.props
+    const { hash, metamaskNetworkId } = primaryTransaction
+
+    const prefix = prefixForNetwork(metamaskNetworkId)
+    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Navigation',
+        action: 'Activity Log',
+        name: 'Clicked "View on Etherscan"',
+      },
+    })
+
+    global.platform.openWindow({ url: etherscanUrl })
+  }
+
+  handleCancel = event => {
+    const { transactionGroup: { initialTransaction: { id } = {} } = {}, onCancel } = this.props
+
+    event.stopPropagation()
+    onCancel(id)
+  }
+
+  handleRetry = event => {
+    const { transactionGroup: { initialTransaction: { id } = {} } = {}, onRetry } = this.props
+
+    event.stopPropagation()
+    onRetry(id)
+  }
+
+  handleCopyTxId = () => {
+    const { transactionGroup} = this.props
+    const { primaryTransaction: transaction } = transactionGroup
+    const { hash } = transaction
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Navigation',
+        action: 'Activity Log',
+        name: 'Copied Transaction ID',
+      },
+    })
+
+    this.setState({ justCopied: true }, () => {
+      copyToClipboard(hash)
+      setTimeout(() => this.setState({ justCopied: false }), 1000)
+    })
+  }
+
+  render () {
+    const { t } = this.context
+    const { justCopied } = this.state
+    const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props
+    const { primaryTransaction: transaction } = transactionGroup
+    const { txParams: { to, from } = {} } = transaction
+
+    return (
+      <div className="transaction-list-item-details">
+        <div className="transaction-list-item-details__header">
+          <div>{ t('details') }</div>
+          <div className="transaction-list-item-details__header-buttons">
+            {
+              showRetry && (
+                <Button
+                  type="raised"
+                  onClick={this.handleRetry}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('speedUp') }
+                </Button>
+              )
+            }
+            {
+              showCancel && (
+                <Button
+                  type="raised"
+                  onClick={this.handleCancel}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('cancel') }
+                </Button>
+              )
+            }
+            <Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}>
+              <Button
+                type="raised"
+                onClick={this.handleCopyTxId}
+                className="transaction-list-item-details__header-button"
+              >
+                <img
+                  className="transaction-list-item-details__header-button__copy-icon"
+                  src="/images/copy-to-clipboard.svg"
+                />
+              </Button>
+            </Tooltip>
+            <Tooltip title={t('viewOnEtherscan')}>
+              <Button
+                type="raised"
+                onClick={this.handleEtherscanClick}
+                className="transaction-list-item-details__header-button"
+                >
+                <img src="/images/arrow-popout.svg" />
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+        <div className="transaction-list-item-details__body">
+          <div className="transaction-list-item-details__sender-to-recipient-container">
+            <SenderToRecipient
+              variant={FLAT_VARIANT}
+              addressOnly
+              recipientAddress={to}
+              senderAddress={from}
+              onRecipientClick={() => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Navigation',
+                    action: 'Activity Log',
+                    name: 'Copied "To" Address',
+                  },
+                })
+              }}
+              onSenderClick={() => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Navigation',
+                    action: 'Activity Log',
+                    name: 'Copied "From" Address',
+                  },
+                })
+              }}
+            />
+          </div>
+          <div className="transaction-list-item-details__cards-container">
+            <TransactionBreakdown
+              transaction={transaction}
+              className="transaction-list-item-details__transaction-breakdown"
+            />
+            <TransactionActivityLog
+              transactionGroup={transactionGroup}
+              className="transaction-list-item-details__transaction-activity-log"
+              onCancel={onCancel}
+              onRetry={onRetry}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list-item/index.js b/ui/app/components/app/transaction-list-item/index.js
index 697cc55e9..697cc55e9 100644
--- a/ui/app/components/transaction-list-item/index.js
+++ b/ui/app/components/app/transaction-list-item/index.js
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index 9e73a546c..9e73a546c 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
new file mode 100644
index 000000000..c0a911cda
--- /dev/null
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -0,0 +1,224 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../ui/identicon'
+import TransactionStatus from '../transaction-status'
+import TransactionAction from '../transaction-action'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import TokenCurrencyDisplay from '../../ui/token-currency-display'
+import TransactionListItemDetails from '../transaction-list-item-details'
+import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes'
+import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../../helpers/constants/transactions'
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+import { getStatusKey } from '../../../helpers/utils/transactions.util'
+
+export default class TransactionListItem extends PureComponent {
+  static propTypes = {
+    assetImages: PropTypes.object,
+    history: PropTypes.object,
+    methodData: PropTypes.object,
+    nonceAndDate: PropTypes.string,
+    primaryTransaction: PropTypes.object,
+    retryTransaction: PropTypes.func,
+    setSelectedToken: PropTypes.func,
+    showCancelModal: PropTypes.func,
+    showCancel: PropTypes.bool,
+    showRetry: PropTypes.bool,
+    showFiat: PropTypes.bool,
+    token: PropTypes.object,
+    tokenData: PropTypes.object,
+    transaction: PropTypes.object,
+    transactionGroup: PropTypes.object,
+    value: PropTypes.string,
+    fetchBasicGasAndTimeEstimates: PropTypes.func,
+    fetchGasEstimates: PropTypes.func,
+  }
+
+  static defaultProps = {
+    showFiat: true,
+  }
+
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  state = {
+    showTransactionDetails: false,
+  }
+
+  handleClick = () => {
+    const {
+      transaction,
+      history,
+    } = this.props
+    const { id, status } = transaction
+    const { showTransactionDetails } = this.state
+
+    if (status === UNAPPROVED_STATUS) {
+      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
+      return
+    }
+
+    if (!showTransactionDetails) {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Navigation',
+          action: 'Home',
+          name: 'Expand Transaction',
+        },
+      })
+    }
+
+    this.setState({ showTransactionDetails: !showTransactionDetails })
+  }
+
+  handleCancel = id => {
+    const {
+      primaryTransaction: { txParams: { gasPrice } } = {},
+      transaction: { id: initialTransactionId },
+      showCancelModal,
+    } = this.props
+
+    const cancelId = id || initialTransactionId
+    showCancelModal(cancelId, gasPrice)
+  }
+
+  /**
+   * @name handleRetry
+   * @description Resubmits a transaction. Retrying a transaction within a list of transactions with
+   * the same nonce requires keeping the original value while increasing the gas price of the latest
+   * transaction.
+   * @param {number} id - Transaction id
+   */
+  handleRetry = id => {
+    const {
+      primaryTransaction: { txParams: { gasPrice } } = {},
+      transaction: { txParams: { to } = {}, id: initialTransactionId },
+      methodData: { name } = {},
+      setSelectedToken,
+      retryTransaction,
+      fetchBasicGasAndTimeEstimates,
+      fetchGasEstimates,
+    } = this.props
+
+    if (name === TOKEN_METHOD_TRANSFER) {
+      setSelectedToken(to)
+    }
+
+    const retryId = id || initialTransactionId
+
+    return fetchBasicGasAndTimeEstimates()
+      .then(basicEstimates => fetchGasEstimates(basicEstimates.blockTime))
+      .then(retryTransaction(retryId, gasPrice))
+  }
+
+  renderPrimaryCurrency () {
+    const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props
+
+    return token
+      ? (
+        <TokenCurrencyDisplay
+          className="transaction-list-item__amount transaction-list-item__amount--primary"
+          token={token}
+          transactionData={data}
+          prefix="-"
+        />
+      ) : (
+        <UserPreferencedCurrencyDisplay
+          className="transaction-list-item__amount transaction-list-item__amount--primary"
+          value={value}
+          type={PRIMARY}
+          prefix="-"
+        />
+      )
+  }
+
+  renderSecondaryCurrency () {
+    const { token, value, showFiat } = this.props
+
+    return token || !showFiat
+      ? null
+      : (
+        <UserPreferencedCurrencyDisplay
+          className="transaction-list-item__amount transaction-list-item__amount--secondary"
+          value={value}
+          prefix="-"
+          type={SECONDARY}
+        />
+      )
+  }
+
+  render () {
+    const {
+      assetImages,
+      transaction,
+      methodData,
+      nonceAndDate,
+      primaryTransaction,
+      showCancel,
+      showRetry,
+      tokenData,
+      transactionGroup,
+    } = this.props
+    const { txParams = {} } = transaction
+    const { showTransactionDetails } = this.state
+    const toAddress = tokenData
+      ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
+      : txParams.to
+
+    return (
+      <div className="transaction-list-item">
+        <div
+          className="transaction-list-item__grid"
+          onClick={this.handleClick}
+        >
+          <Identicon
+            className="transaction-list-item__identicon"
+            address={toAddress}
+            diameter={34}
+            image={assetImages[toAddress]}
+          />
+          <TransactionAction
+            transaction={transaction}
+            methodData={methodData}
+            className="transaction-list-item__action"
+          />
+          <div
+            className="transaction-list-item__nonce"
+            title={nonceAndDate}
+          >
+            { nonceAndDate }
+          </div>
+          <TransactionStatus
+            className="transaction-list-item__status"
+            statusKey={getStatusKey(primaryTransaction)}
+            title={(
+              (primaryTransaction.err && primaryTransaction.err.rpc)
+                ? primaryTransaction.err.rpc.message
+                : primaryTransaction.err && primaryTransaction.err.message
+            )}
+          />
+          { this.renderPrimaryCurrency() }
+          { this.renderSecondaryCurrency() }
+        </div>
+        <div className={classnames('transaction-list-item__expander', {
+          'transaction-list-item__expander--show': showTransactionDetails,
+        })}>
+          {
+            showTransactionDetails && (
+              <div className="transaction-list-item__details-container">
+                <TransactionListItemDetails
+                  transactionGroup={transactionGroup}
+                  onRetry={this.handleRetry}
+                  showRetry={showRetry && methodData.done}
+                  onCancel={this.handleCancel}
+                  showCancel={showCancel}
+                />
+              </div>
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
new file mode 100644
index 000000000..499558a9b
--- /dev/null
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
@@ -0,0 +1,82 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import withMethodData from '../../../helpers/higher-order-components/with-method-data'
+import TransactionListItem from './transaction-list-item.component'
+import { setSelectedToken, showModal, showSidebar, addKnownMethodData } from '../../../store/actions'
+import { hexToDecimal } from '../../../helpers/utils/conversions.util'
+import { getTokenData } from '../../../helpers/utils/transactions.util'
+import { increaseLastGasPrice } from '../../../helpers/utils/confirm-tx.util'
+import { formatDate } from '../../../helpers/utils/util'
+import {
+  fetchBasicGasAndTimeEstimates,
+  fetchGasEstimates,
+  setCustomGasPriceForRetry,
+  setCustomGasLimit,
+} from '../../../ducks/gas/gas.duck'
+import {getIsMainnet, preferencesSelector} from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { metamask: { knownMethodData } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    knownMethodData,
+    showFiat: (isMainnet || !!showFiatInTestnets),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
+    setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
+    addKnownMethodData: (fourBytePrefix, methodData) => dispatch(addKnownMethodData(fourBytePrefix, methodData)),
+    retryTransaction: (transaction, gasPrice) => {
+      dispatch(setCustomGasPriceForRetry(gasPrice || transaction.txParams.gasPrice))
+      dispatch(setCustomGasLimit(transaction.txParams.gas))
+      dispatch(showSidebar({
+        transitionName: 'sidebar-left',
+        type: 'customize-gas',
+        props: { transaction },
+      }))
+    },
+    showCancelModal: (transactionId, originalGasPrice) => {
+      return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+    },
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps
+  const { retryTransaction, ...restDispatchProps } = dispatchProps
+  const { txParams: { nonce, data } = {}, time } = initialTransaction
+  const { txParams: { value } = {} } = primaryTransaction
+
+  const tokenData = data && getTokenData(data)
+  const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
+
+  return {
+    ...stateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    value,
+    nonceAndDate,
+    tokenData,
+    transaction: initialTransaction,
+    primaryTransaction,
+    retryTransaction: (transactionId, gasPrice) => {
+      const { transactionGroup: { transactions = [] } } = ownProps
+      const transaction = transactions.find(tx => tx.id === transactionId) || {}
+      const increasedGasPrice = increaseLastGasPrice(gasPrice)
+      retryTransaction(transaction, increasedGasPrice)
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withMethodData,
+)(TransactionListItem)
diff --git a/ui/app/components/transaction-list/index.js b/ui/app/components/app/transaction-list/index.js
index 688994367..688994367 100644
--- a/ui/app/components/transaction-list/index.js
+++ b/ui/app/components/app/transaction-list/index.js
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss
index a486f4112..a486f4112 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/app/transaction-list/index.scss
diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js
new file mode 100644
index 000000000..fc5488884
--- /dev/null
+++ b/ui/app/components/app/transaction-list/transaction-list.component.js
@@ -0,0 +1,126 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TransactionListItem from '../transaction-list-item'
+import ShapeShiftTransactionListItem from '../shift-list-item'
+import { TRANSACTION_TYPE_SHAPESHIFT } from '../../../helpers/constants/transactions'
+
+export default class TransactionList extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    pendingTransactions: [],
+    completedTransactions: [],
+  }
+
+  static propTypes = {
+    pendingTransactions: PropTypes.array,
+    completedTransactions: PropTypes.array,
+    selectedToken: PropTypes.object,
+    updateNetworkNonce: PropTypes.func,
+    assetImages: PropTypes.object,
+  }
+
+  componentDidMount () {
+    this.props.updateNetworkNonce()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { pendingTransactions: prevPendingTransactions = [] } = prevProps
+    const { pendingTransactions = [], updateNetworkNonce } = this.props
+
+    if (pendingTransactions.length > prevPendingTransactions.length) {
+      updateNetworkNonce()
+    }
+  }
+
+  shouldShowRetry = (transactionGroup, isEarliestNonce) => {
+    const { transactions = [], hasRetried } = transactionGroup
+    const [earliestTransaction = {}] = transactions
+    const { submittedTime } = earliestTransaction
+    return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
+  }
+
+  shouldShowCancel (transactionGroup) {
+    const { hasCancelled } = transactionGroup
+    return !hasCancelled
+  }
+
+  renderTransactions () {
+    const { t } = this.context
+    const { pendingTransactions = [], completedTransactions = [] } = this.props
+    const pendingLength = pendingTransactions.length
+
+    return (
+      <div className="transaction-list__transactions">
+        {
+          pendingLength > 0 && (
+            <div className="transaction-list__pending-transactions">
+              <div className="transaction-list__header">
+                { `${t('queue')} (${pendingTransactions.length})` }
+              </div>
+              {
+                pendingTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index, true)
+                ))
+              }
+            </div>
+          )
+        }
+        <div className="transaction-list__completed-transactions">
+          <div className="transaction-list__header">
+            { t('history') }
+          </div>
+          {
+            completedTransactions.length > 0
+              ? completedTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index)
+                ))
+              : this.renderEmpty()
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderTransaction (transactionGroup, index, isPendingTx = false) {
+    const { selectedToken, assetImages } = this.props
+    const { transactions = [] } = transactionGroup
+
+    return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT
+      ? (
+        <ShapeShiftTransactionListItem
+          { ...transactions[0] }
+          key={`shapeshift${index}`}
+        />
+      ) : (
+        <TransactionListItem
+          transactionGroup={transactionGroup}
+          key={`${transactionGroup.nonce}:${index}`}
+          showRetry={isPendingTx && this.shouldShowRetry(transactionGroup, index === 0)}
+          showCancel={isPendingTx && this.shouldShowCancel(transactionGroup)}
+          token={selectedToken}
+          assetImages={assetImages}
+        />
+      )
+  }
+
+  renderEmpty () {
+    return (
+      <div className="transaction-list__empty">
+        <div className="transaction-list__empty-text">
+          { this.context.t('noTransactions') }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <div className="transaction-list">
+        { this.renderTransactions() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/transaction-list/transaction-list.container.js b/ui/app/components/app/transaction-list/transaction-list.container.js
new file mode 100644
index 000000000..67a24588b
--- /dev/null
+++ b/ui/app/components/app/transaction-list/transaction-list.container.js
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionList from './transaction-list.component'
+import {
+  nonceSortedCompletedTransactionsSelector,
+  nonceSortedPendingTransactionsSelector,
+} from '../../../selectors/transactions'
+import { getSelectedAddress, getAssetImages } from '../../../selectors/selectors'
+import { selectedTokenSelector } from '../../../selectors/tokens'
+import { updateNetworkNonce } from '../../../store/actions'
+
+const mapStateToProps = state => {
+  return {
+    completedTransactions: nonceSortedCompletedTransactionsSelector(state),
+    pendingTransactions: nonceSortedPendingTransactionsSelector(state),
+    selectedToken: selectedTokenSelector(state),
+    selectedAddress: getSelectedAddress(state),
+    assetImages: getAssetImages(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateNetworkNonce: address => dispatch(updateNetworkNonce(address)),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { selectedAddress, ...restStateProps } = stateProps
+  const { updateNetworkNonce, ...restDispatchProps } = dispatchProps
+
+  return {
+    ...restStateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    updateNetworkNonce: () => updateNetworkNonce(selectedAddress),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(TransactionList)
diff --git a/ui/app/components/transaction-status/index.js b/ui/app/components/app/transaction-status/index.js
index dece41e9c..dece41e9c 100644
--- a/ui/app/components/transaction-status/index.js
+++ b/ui/app/components/app/transaction-status/index.js
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss
index e7daafeef..e7daafeef 100644
--- a/ui/app/components/transaction-status/index.scss
+++ b/ui/app/components/app/transaction-status/index.scss
diff --git a/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js b/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js
new file mode 100644
index 000000000..ec1d580bd
--- /dev/null
+++ b/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import assert from 'assert'
+import { mount } from 'enzyme'
+import TransactionStatus from '../transaction-status.component'
+import Tooltip from '../../../ui/tooltip-v2'
+
+describe('TransactionStatus Component', () => {
+  it('should render APPROVED properly', () => {
+    const wrapper = mount(
+      <TransactionStatus
+        statusKey="approved"
+        title="test-title"
+      />,
+      { context: { t: str => str.toUpperCase() } }
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.text(), 'APPROVED')
+    assert.equal(wrapper.find(Tooltip).props().title, 'test-title')
+  })
+
+  it('should render SUBMITTED properly', () => {
+    const wrapper = mount(
+      <TransactionStatus
+        statusKey="submitted"
+      />,
+      { context: { t: str => str.toUpperCase() } }
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.text(), 'PENDING')
+  })
+})
diff --git a/ui/app/components/app/transaction-status/transaction-status.component.js b/ui/app/components/app/transaction-status/transaction-status.component.js
new file mode 100644
index 000000000..d3a239539
--- /dev/null
+++ b/ui/app/components/app/transaction-status/transaction-status.component.js
@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Tooltip from '../../ui/tooltip-v2'
+import {
+  UNAPPROVED_STATUS,
+  REJECTED_STATUS,
+  APPROVED_STATUS,
+  SIGNED_STATUS,
+  SUBMITTED_STATUS,
+  CONFIRMED_STATUS,
+  FAILED_STATUS,
+  DROPPED_STATUS,
+  CANCELLED_STATUS,
+} from '../../../helpers/constants/transactions'
+
+const statusToClassNameHash = {
+  [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
+  [REJECTED_STATUS]: 'transaction-status--rejected',
+  [APPROVED_STATUS]: 'transaction-status--approved',
+  [SIGNED_STATUS]: 'transaction-status--signed',
+  [SUBMITTED_STATUS]: 'transaction-status--submitted',
+  [CONFIRMED_STATUS]: 'transaction-status--confirmed',
+  [FAILED_STATUS]: 'transaction-status--failed',
+  [DROPPED_STATUS]: 'transaction-status--dropped',
+  [CANCELLED_STATUS]: 'transaction-status--failed',
+}
+
+const statusToTextHash = {
+  [SUBMITTED_STATUS]: 'pending',
+}
+
+export default class TransactionStatus extends PureComponent {
+  static defaultProps = {
+    title: null,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    statusKey: PropTypes.string,
+    className: PropTypes.string,
+    title: PropTypes.string,
+  }
+
+  render () {
+    const { className, statusKey, title } = this.props
+    const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
+
+    return (
+      <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
+        <Tooltip
+          position="top"
+          title={title}
+        >
+          { statusText }
+        </Tooltip>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-view-balance/index.js b/ui/app/components/app/transaction-view-balance/index.js
index 8824737f7..8824737f7 100644
--- a/ui/app/components/transaction-view-balance/index.js
+++ b/ui/app/components/app/transaction-view-balance/index.js
diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss
index bdcd536b0..bdcd536b0 100644
--- a/ui/app/components/transaction-view-balance/index.scss
+++ b/ui/app/components/app/transaction-view-balance/index.scss
diff --git a/ui/app/components/app/transaction-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/app/transaction-view-balance/tests/token-view-balance.component.test.js
new file mode 100644
index 000000000..0e2882e9c
--- /dev/null
+++ b/ui/app/components/app/transaction-view-balance/tests/token-view-balance.component.test.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TokenBalance from '../../../ui/token-balance'
+import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
+import { SEND_ROUTE } from '../../../../helpers/constants/routes'
+import TransactionViewBalance from '../transaction-view-balance.component'
+
+const propsMethodSpies = {
+  showDepositModal: sinon.spy(),
+}
+
+const historySpies = {
+  push: sinon.spy(),
+}
+
+const t = (str1, str2) => str2 ? str1 + str2 : str1
+const metricsEvent = () => ({})
+
+describe('TransactionViewBalance Component', () => {
+  afterEach(() => {
+    propsMethodSpies.showDepositModal.resetHistory()
+    historySpies.push.resetHistory()
+  })
+
+  it('should render ETH balance properly', () => {
+    const wrapper = shallow(<TransactionViewBalance
+      showDepositModal={propsMethodSpies.showDepositModal}
+      history={historySpies}
+      network="3"
+      ethBalance={123}
+      fiatBalance={456}
+      currentCurrency="usd"
+    />, { context: { t, metricsEvent } })
+
+    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+    assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
+    assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
+
+    const buttons = wrapper.find('.transaction-view-balance__buttons')
+    assert.equal(propsMethodSpies.showDepositModal.callCount, 0)
+    buttons.childAt(0).simulate('click')
+    assert.equal(propsMethodSpies.showDepositModal.callCount, 1)
+    assert.equal(historySpies.push.callCount, 0)
+    buttons.childAt(1).simulate('click')
+    assert.equal(historySpies.push.callCount, 1)
+    assert.equal(historySpies.push.getCall(0).args[0], SEND_ROUTE)
+  })
+
+  it('should render token balance properly', () => {
+    const token = {
+      address: '0x35865238f0bec9d5ce6abff0fdaebe7b853dfcc5',
+      decimals: '2',
+      symbol: 'ABC',
+    }
+
+    const wrapper = shallow(<TransactionViewBalance
+      showDepositModal={propsMethodSpies.showDepositModal}
+      history={historySpies}
+      network="3"
+      ethBalance={123}
+      fiatBalance={456}
+      currentCurrency="usd"
+      selectedToken={token}
+    />, { context: { t } })
+
+    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+    assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)
+    assert.equal(wrapper.find(TokenBalance).length, 1)
+  })
+})
diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
new file mode 100644
index 000000000..8559e2233
--- /dev/null
+++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
@@ -0,0 +1,145 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Button from '../../ui/button'
+import Identicon from '../../ui/identicon'
+import TokenBalance from '../../ui/token-balance'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import { SEND_ROUTE } from '../../../helpers/constants/routes'
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+import Tooltip from '../../ui/tooltip-v2'
+
+export default class TransactionViewBalance extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    showDepositModal: PropTypes.func,
+    selectedToken: PropTypes.object,
+    history: PropTypes.object,
+    network: PropTypes.string,
+    balance: PropTypes.string,
+    assetImage: PropTypes.string,
+    balanceIsCached: PropTypes.bool,
+    showFiat: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    showFiat: true,
+  }
+
+  renderBalance () {
+    const { selectedToken, balance, balanceIsCached, showFiat } = this.props
+
+    return selectedToken
+      ? (
+        <div className="transaction-view-balance__balance">
+          <TokenBalance
+            token={selectedToken}
+            withSymbol
+            className="transaction-view-balance__primary-balance"
+          />
+        </div>
+      ) : (
+          <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}>
+            <div className="transaction-view-balance__balance">
+                <div className="transaction-view-balance__primary-container">
+                  <UserPreferencedCurrencyDisplay
+                    className={classnames('transaction-view-balance__primary-balance', {
+                      'transaction-view-balance__cached-balance': balanceIsCached,
+                    })}
+                    value={balance}
+                    type={PRIMARY}
+                    ethNumberOfDecimals={4}
+                    hideTitle={true}
+                  />
+                  {
+                    balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
+                  }
+                </div>
+                {
+                  showFiat && (
+                    <UserPreferencedCurrencyDisplay
+                      className={classnames({
+                        'transaction-view-balance__cached-secondary-balance': balanceIsCached,
+                        'transaction-view-balance__secondary-balance': !balanceIsCached,
+                      })}
+                      value={balance}
+                      type={SECONDARY}
+                      ethNumberOfDecimals={4}
+                      hideTitle={true}
+                    />
+                  )
+                }
+            </div>
+          </Tooltip>
+      )
+  }
+
+  renderButtons () {
+    const { t, metricsEvent } = this.context
+    const { selectedToken, showDepositModal, history } = this.props
+
+    return (
+      <div className="transaction-view-balance__buttons">
+        {
+          !selectedToken && (
+            <Button
+              type="primary"
+              className="transaction-view-balance__button"
+              onClick={() => {
+                metricsEvent({
+                  eventOpts: {
+                    category: 'Navigation',
+                    action: 'Home',
+                    name: 'Clicked Deposit',
+                  },
+                })
+                showDepositModal()
+              }}
+            >
+              { t('deposit') }
+            </Button>
+          )
+        }
+        <Button
+          type="primary"
+          className="transaction-view-balance__button"
+          onClick={() => {
+            metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Home',
+                name: 'Clicked Send',
+              },
+            })
+            history.push(SEND_ROUTE)
+          }}
+        >
+          { t('send') }
+        </Button>
+      </div>
+    )
+  }
+
+  render () {
+    const { network, selectedToken, assetImage } = this.props
+
+    return (
+      <div className="transaction-view-balance">
+        <div className="transaction-view-balance__balance-container">
+          <Identicon
+            diameter={50}
+            address={selectedToken && selectedToken.address}
+            network={network}
+            image={assetImage}
+          />
+          { this.renderBalance() }
+        </div>
+        { this.renderButtons() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.container.js
new file mode 100644
index 000000000..41a4525dc
--- /dev/null
+++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.container.js
@@ -0,0 +1,46 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionViewBalance from './transaction-view-balance.component'
+import {
+  getSelectedToken,
+  getSelectedAddress,
+  getNativeCurrency,
+  getSelectedTokenAssetImage,
+  getMetaMaskAccounts,
+  isBalanceCached,
+  preferencesSelector,
+  getIsMainnet,
+} from '../../../selectors/selectors'
+import { showModal } from '../../../store/actions'
+
+const mapStateToProps = state => {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+  const selectedAddress = getSelectedAddress(state)
+  const { metamask: { network } } = state
+  const accounts = getMetaMaskAccounts(state)
+  const account = accounts[selectedAddress]
+  const { balance } = account
+
+  return {
+    selectedToken: getSelectedToken(state),
+    network,
+    balance,
+    nativeCurrency: getNativeCurrency(state),
+    assetImage: getSelectedTokenAssetImage(state),
+    balanceIsCached: isBalanceCached(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showDepositModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(TransactionViewBalance)
diff --git a/ui/app/components/transaction-view/index.js b/ui/app/components/app/transaction-view/index.js
index 9eb0c3c83..9eb0c3c83 100644
--- a/ui/app/components/transaction-view/index.js
+++ b/ui/app/components/app/transaction-view/index.js
diff --git a/ui/app/components/transaction-view/index.scss b/ui/app/components/app/transaction-view/index.scss
index 13187f0e5..13187f0e5 100644
--- a/ui/app/components/transaction-view/index.scss
+++ b/ui/app/components/app/transaction-view/index.scss
diff --git a/ui/app/components/transaction-view/transaction-view.component.js b/ui/app/components/app/transaction-view/transaction-view.component.js
index 7014ca173..7014ca173 100644
--- a/ui/app/components/transaction-view/transaction-view.component.js
+++ b/ui/app/components/app/transaction-view/transaction-view.component.js
diff --git a/ui/app/components/ui-migration-annoucement/index.js b/ui/app/components/app/ui-migration-annoucement/index.js
index c6c8cc619..c6c8cc619 100644
--- a/ui/app/components/ui-migration-annoucement/index.js
+++ b/ui/app/components/app/ui-migration-annoucement/index.js
diff --git a/ui/app/components/ui-migration-annoucement/index.scss b/ui/app/components/app/ui-migration-annoucement/index.scss
index 6138a3079..6138a3079 100644
--- a/ui/app/components/ui-migration-annoucement/index.scss
+++ b/ui/app/components/app/ui-migration-annoucement/index.scss
diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js
index 7a4124972..7a4124972 100644
--- a/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js
+++ b/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js
diff --git a/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js
new file mode 100644
index 000000000..55efd5a44
--- /dev/null
+++ b/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import UiMigrationAnnouncement from './ui-migration-annoucement.component'
+import { setCompletedUiMigration } from '../../../store/actions'
+
+const mapStateToProps = (state) => {
+  const shouldShowAnnouncement = !state.metamask.completedUiMigration
+
+  return {
+    shouldShowAnnouncement,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onClose () {
+      dispatch(setCompletedUiMigration())
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement)
diff --git a/ui/app/components/user-preferenced-currency-display/index.js b/ui/app/components/app/user-preferenced-currency-display/index.js
index 0deddaecf..0deddaecf 100644
--- a/ui/app/components/user-preferenced-currency-display/index.js
+++ b/ui/app/components/app/user-preferenced-currency-display/index.js
diff --git a/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js b/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
new file mode 100644
index 000000000..51b2a3c4f
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display.component'
+import CurrencyDisplay from '../../../ui/currency-display'
+
+describe('UserPreferencedCurrencyDisplay Component', () => {
+  describe('rendering', () => {
+    it('should render properly', () => {
+      const wrapper = shallow(
+        <UserPreferencedCurrencyDisplay />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+    })
+
+    it('should pass all props to the CurrencyDisplay child component', () => {
+      const wrapper = shallow(
+        <UserPreferencedCurrencyDisplay
+          prop1={true}
+          prop2="test"
+          prop3={1}
+        />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+      assert.equal(wrapper.find(CurrencyDisplay).props().prop1, true)
+      assert.equal(wrapper.find(CurrencyDisplay).props().prop2, 'test')
+      assert.equal(wrapper.find(CurrencyDisplay).props().prop3, 1)
+    })
+  })
+})
diff --git a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js b/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
index 88d63baae..88d63baae 100644
--- a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
+++ b/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
diff --git a/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
new file mode 100644
index 000000000..4b64b26c0
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common'
+import CurrencyDisplay from '../../ui/currency-display'
+
+export default class UserPreferencedCurrencyDisplay extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    prefix: PropTypes.string,
+    value: PropTypes.string,
+    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideLabel: PropTypes.bool,
+    hideTitle: PropTypes.bool,
+    style: PropTypes.object,
+    showEthLogo: PropTypes.bool,
+    ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    // Used in container
+    type: PropTypes.oneOf([PRIMARY, SECONDARY]),
+    ethNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    fiatNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    ethPrefix: PropTypes.string,
+    fiatPrefix: PropTypes.string,
+    // From container
+    currency: PropTypes.string,
+    nativeCurrency: PropTypes.string,
+  }
+
+  renderEthLogo () {
+    const { currency, showEthLogo, ethLogoHeight = 12 } = this.props
+
+    return currency === ETH && showEthLogo && (
+      <img
+        src="/images/eth.svg"
+        height={ethLogoHeight}
+      />
+    )
+  }
+
+  render () {
+    return (
+      <CurrencyDisplay
+        {...this.props}
+        prefixComponent={this.renderEthLogo()}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.container.js b/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.container.js
new file mode 100644
index 000000000..42d156f92
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.container.js
@@ -0,0 +1,67 @@
+import { connect } from 'react-redux'
+import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display.component'
+import { preferencesSelector, getIsMainnet } from '../../../selectors/selectors'
+import { ETH, PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+
+const mapStateToProps = (state, ownProps) => {
+  const {
+    useNativeCurrencyAsPrimaryCurrency,
+    showFiatInTestnets,
+  } = preferencesSelector(state)
+
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    useNativeCurrencyAsPrimaryCurrency,
+    showFiatInTestnets,
+    isMainnet,
+    nativeCurrency: state.metamask.nativeCurrency,
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets, isMainnet, nativeCurrency, ...restStateProps } = stateProps
+  const {
+    type,
+    numberOfDecimals: propsNumberOfDecimals,
+    ethNumberOfDecimals,
+    fiatNumberOfDecimals,
+    ethPrefix,
+    fiatPrefix,
+    prefix: propsPrefix,
+    ...restOwnProps
+  } = ownProps
+
+  let currency, numberOfDecimals, prefix
+
+  if (type === PRIMARY && useNativeCurrencyAsPrimaryCurrency ||
+    type === SECONDARY && !useNativeCurrencyAsPrimaryCurrency) {
+    // Display ETH
+    currency = nativeCurrency || ETH
+    numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
+    prefix = propsPrefix || ethPrefix
+  } else if (type === SECONDARY && useNativeCurrencyAsPrimaryCurrency ||
+    type === PRIMARY && !useNativeCurrencyAsPrimaryCurrency) {
+    // Display Fiat
+    numberOfDecimals = propsNumberOfDecimals || fiatNumberOfDecimals || 2
+    prefix = propsPrefix || fiatPrefix
+  }
+
+  if (!isMainnet && !showFiatInTestnets) {
+    currency = nativeCurrency || ETH
+    numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
+    prefix = propsPrefix || ethPrefix
+  }
+
+  return {
+    ...restStateProps,
+    ...dispatchProps,
+    ...restOwnProps,
+    nativeCurrency,
+    currency,
+    numberOfDecimals,
+    prefix,
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(UserPreferencedCurrencyDisplay)
diff --git a/ui/app/components/user-preferenced-currency-input/index.js b/ui/app/components/app/user-preferenced-currency-input/index.js
index 4dc70db3d..4dc70db3d 100644
--- a/ui/app/components/user-preferenced-currency-input/index.js
+++ b/ui/app/components/app/user-preferenced-currency-input/index.js
diff --git a/ui/app/components/app/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js b/ui/app/components/app/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js
new file mode 100644
index 000000000..3802e16f3
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import UserPreferencedCurrencyInput from '../user-preferenced-currency-input.component'
+import CurrencyInput from '../../../ui/currency-input'
+
+describe('UserPreferencedCurrencyInput Component', () => {
+  describe('rendering', () => {
+    it('should render properly', () => {
+      const wrapper = shallow(
+        <UserPreferencedCurrencyInput />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(CurrencyInput).length, 1)
+    })
+
+    it('should render useFiat for CurrencyInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
+      const wrapper = shallow(
+        <UserPreferencedCurrencyInput
+          useNativeCurrencyAsPrimaryCurrency
+        />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(CurrencyInput).length, 1)
+      assert.equal(wrapper.find(CurrencyInput).props().useFiat, false)
+      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false })
+      assert.equal(wrapper.find(CurrencyInput).props().useFiat, true)
+    })
+  })
+})
diff --git a/ui/app/components/user-preferenced-currency-input/tests/user-preferenced-currency-input.container.test.js b/ui/app/components/app/user-preferenced-currency-input/tests/user-preferenced-currency-input.container.test.js
index 959726443..959726443 100644
--- a/ui/app/components/user-preferenced-currency-input/tests/user-preferenced-currency-input.container.test.js
+++ b/ui/app/components/app/user-preferenced-currency-input/tests/user-preferenced-currency-input.container.test.js
diff --git a/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js b/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js
new file mode 100644
index 000000000..7c0ec1734
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js
@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyInput from '../../ui/currency-input'
+
+export default class UserPreferencedCurrencyInput extends PureComponent {
+  static propTypes = {
+    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
+  }
+
+  render () {
+    const { useNativeCurrencyAsPrimaryCurrency, ...restProps } = this.props
+
+    return (
+      <CurrencyInput
+        {...restProps}
+        useFiat={!useNativeCurrencyAsPrimaryCurrency}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js b/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js
new file mode 100644
index 000000000..72f17fde4
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import UserPreferencedCurrencyInput from './user-preferenced-currency-input.component'
+import { preferencesSelector } from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
+
+  return {
+    useNativeCurrencyAsPrimaryCurrency,
+  }
+}
+
+export default connect(mapStateToProps)(UserPreferencedCurrencyInput)
diff --git a/ui/app/components/user-preferenced-token-input/index.js b/ui/app/components/app/user-preferenced-token-input/index.js
index 54167e633..54167e633 100644
--- a/ui/app/components/user-preferenced-token-input/index.js
+++ b/ui/app/components/app/user-preferenced-token-input/index.js
diff --git a/ui/app/components/app/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js b/ui/app/components/app/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js
new file mode 100644
index 000000000..41cfd51f9
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import UserPreferencedTokenInput from '../user-preferenced-token-input.component'
+import TokenInput from '../../../ui/token-input'
+
+describe('UserPreferencedCurrencyInput Component', () => {
+  describe('rendering', () => {
+    it('should render properly', () => {
+      const wrapper = shallow(
+        <UserPreferencedTokenInput />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(TokenInput).length, 1)
+    })
+
+    it('should render showFiat for TokenInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
+      const wrapper = shallow(
+        <UserPreferencedTokenInput
+          useNativeCurrencyAsPrimaryCurrency
+        />
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find(TokenInput).length, 1)
+      assert.equal(wrapper.find(TokenInput).props().showFiat, false)
+      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false })
+      assert.equal(wrapper.find(TokenInput).props().showFiat, true)
+    })
+  })
+})
diff --git a/ui/app/components/user-preferenced-token-input/tests/user-preferenced-token-input.container.test.js b/ui/app/components/app/user-preferenced-token-input/tests/user-preferenced-token-input.container.test.js
index 2f89fba90..2f89fba90 100644
--- a/ui/app/components/user-preferenced-token-input/tests/user-preferenced-token-input.container.test.js
+++ b/ui/app/components/app/user-preferenced-token-input/tests/user-preferenced-token-input.container.test.js
diff --git a/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js b/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js
new file mode 100644
index 000000000..24133188d
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js
@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TokenInput from '../../ui/token-input'
+
+export default class UserPreferencedTokenInput extends PureComponent {
+  static propTypes = {
+    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
+  }
+
+  render () {
+    const { useNativeCurrencyAsPrimaryCurrency, ...restProps } = this.props
+
+    return (
+      <TokenInput
+        {...restProps}
+        showFiat={!useNativeCurrencyAsPrimaryCurrency}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js b/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js
new file mode 100644
index 000000000..4a20b20d9
--- /dev/null
+++ b/ui/app/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import UserPreferencedTokenInput from './user-preferenced-token-input.component'
+import { preferencesSelector } from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
+
+  return {
+    useNativeCurrencyAsPrimaryCurrency,
+  }
+}
+
+export default connect(mapStateToProps)(UserPreferencedTokenInput)
diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js
new file mode 100644
index 000000000..cec8228b1
--- /dev/null
+++ b/ui/app/components/app/wallet-view.js
@@ -0,0 +1,246 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const inherits = require('util').inherits
+const classnames = require('classnames')
+const { checksumAddress } = require('../../helpers/utils/util')
+import Identicon from '../ui/identicon'
+// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('../ui/tooltip-v2.js').default
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('../../store/actions')
+import BalanceComponent from '../ui/balance'
+const TokenList = require('./token-list')
+const selectors = require('../../selectors/selectors')
+const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes')
+
+import AddTokenButton from './add-token-button'
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(WalletView)
+
+WalletView.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+WalletView.defaultProps = {
+  responsiveDisplayClassname: '',
+}
+
+function mapStateToProps (state) {
+
+  return {
+    network: state.metamask.network,
+    sidebarOpen: state.appState.sidebar.isOpen,
+    identities: state.metamask.identities,
+    accounts: selectors.getMetaMaskAccounts(state),
+    keyrings: state.metamask.keyrings,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedAccount: selectors.getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSendPage: () => dispatch(actions.showSendPage()),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
+  }
+}
+
+inherits(WalletView, Component)
+function WalletView () {
+  Component.call(this)
+  this.state = {
+    hasCopied: false,
+    copyToClipboardPressed: false,
+  }
+}
+
+WalletView.prototype.renderWalletBalance = function () {
+  const {
+    selectedTokenAddress,
+    selectedAccount,
+    unsetSelectedToken,
+    hideSidebar,
+    sidebarOpen,
+  } = this.props
+
+  const selectedClass = selectedTokenAddress
+    ? ''
+    : 'wallet-balance-wrapper--active'
+  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
+
+  return h('div', { className }, [
+    h('div.wallet-balance',
+      {
+        onClick: () => {
+          unsetSelectedToken()
+          selectedTokenAddress && sidebarOpen && hideSidebar()
+        },
+      },
+      [
+        h(BalanceComponent, {
+          balanceValue: selectedAccount ? selectedAccount.balance : '',
+          style: {},
+        }),
+      ]
+    ),
+  ])
+}
+
+WalletView.prototype.renderAddToken = function () {
+  const {
+    sidebarOpen,
+    hideSidebar,
+    history,
+  } = this.props
+  const { metricsEvent } = this.context
+
+  return h(AddTokenButton, {
+    onClick () {
+      history.push(ADD_TOKEN_ROUTE)
+      metricsEvent({
+        eventOpts: {
+          category: 'Navigation',
+          action: 'Token Menu',
+          name: 'Clicked "Add Token"',
+        },
+      })
+      if (sidebarOpen) {
+        hideSidebar()
+      }
+    },
+  })
+}
+
+WalletView.prototype.render = function () {
+  const {
+    responsiveDisplayClassname,
+    selectedAddress,
+    keyrings,
+    showAccountDetailModal,
+    hideSidebar,
+    identities,
+    network,
+  } = this.props
+  // temporary logs + fake extra wallets
+
+  const checksummedAddress = checksumAddress(selectedAddress, network)
+
+  if (!selectedAddress) {
+    throw new Error('selectedAddress should not be ' + String(selectedAddress))
+  }
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(selectedAddress)
+  })
+
+  let label = ''
+  let type
+  if (keyring) {
+    type = keyring.type
+    if (type !== 'HD Key Tree') {
+      if (type.toLowerCase().search('hardware') !== -1) {
+        label = this.context.t('hardware')
+      } else {
+        label = this.context.t('imported')
+      }
+    }
+  }
+
+  return h('div.wallet-view.flex-column', {
+    style: {},
+    className: responsiveDisplayClassname,
+  }, [
+
+    // TODO: Separate component: wallet account details
+    h('div.flex-column.wallet-view-account-details', {
+      style: {},
+    }, [
+      h('div.wallet-view__sidebar-close', {
+        onClick: hideSidebar,
+      }),
+
+      h('div.wallet-view__keyring-label.allcaps', label),
+
+      h('div.flex-column.flex-center.wallet-view__name-container', {
+        style: { margin: '0 auto' },
+        onClick: showAccountDetailModal,
+      }, [
+        h(Identicon, {
+          diameter: 54,
+          address: checksummedAddress,
+        }),
+
+        h('span.account-name', {
+          style: {},
+        }, [
+          identities[selectedAddress].name,
+        ]),
+
+        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
+      ]),
+    ]),
+
+    h(Tooltip, {
+      position: 'bottom',
+      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
+      wrapperClassName: 'wallet-view__tooltip',
+    }, [
+      h('button.wallet-view__address', {
+        className: classnames({
+          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+        }),
+        onClick: () => {
+          copyToClipboard(checksummedAddress)
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Navigation',
+              action: 'Home',
+              name: 'Copied Address',
+            },
+          })
+          this.setState({ hasCopied: true })
+          setTimeout(() => this.setState({ hasCopied: false }), 3000)
+        },
+        onMouseDown: () => {
+          this.setState({ copyToClipboardPressed: true })
+        },
+        onMouseUp: () => {
+          this.setState({ copyToClipboardPressed: false })
+        },
+      }, [
+        `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
+        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      ]),
+    ]),
+
+    this.renderWalletBalance(),
+
+    h(TokenList),
+
+    this.renderAddToken(),
+  ])
+}
+
+// TODO: Extra wallets, for dev testing. Remove when PRing to master.
+// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
+//     h('div.wallet-balance', {}, [
+//       h(BalanceComponent, {
+//         balanceValue: selectedAccount.balance,
+//         style: {},
+//       }),
+//     ]),
+// ])
diff --git a/ui/app/components/balance/balance.component.js b/ui/app/components/balance/balance.component.js
deleted file mode 100644
index 9d0018add..000000000
--- a/ui/app/components/balance/balance.component.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import TokenBalance from '../token-balance'
-import Identicon from '../identicon'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../constants/common'
-import { formatBalance } from '../../util'
-
-export default class Balance extends PureComponent {
-  static propTypes = {
-    account: PropTypes.object,
-    assetImages: PropTypes.object,
-    nativeCurrency: PropTypes.string,
-    needsParse: PropTypes.bool,
-    network: PropTypes.string,
-    showFiat: PropTypes.bool,
-    token: PropTypes.object,
-  }
-
-  static defaultProps = {
-    needsParse: true,
-    showFiat: true,
-  }
-
-  renderBalance () {
-    const { account, nativeCurrency, needsParse, showFiat } = this.props
-    const balanceValue = account && account.balance
-    const formattedBalance = balanceValue
-      ? formatBalance(balanceValue, 6, needsParse, nativeCurrency)
-      : '...'
-
-    if (formattedBalance === 'None' || formattedBalance === '...') {
-      return (
-        <div className="flex-column balance-display">
-          <div className="token-amount">
-            { formattedBalance }
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <div className="flex-column balance-display">
-        <UserPreferencedCurrencyDisplay
-          className="token-amount"
-          value={balanceValue}
-          type={PRIMARY}
-          ethNumberOfDecimals={4}
-        />
-        {
-          showFiat && (
-            <UserPreferencedCurrencyDisplay
-              value={balanceValue}
-              type={SECONDARY}
-              ethNumberOfDecimals={4}
-            />
-          )
-        }
-      </div>
-    )
-  }
-
-  renderTokenBalance () {
-    const { token } = this.props
-
-    return (
-      <div className="flex-column balance-display">
-        <div className="token-amount">
-          <TokenBalance token={token} />
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { token, network, assetImages } = this.props
-    const address = token && token.address
-    const image = assetImages && address ? assetImages[token.address] : undefined
-
-    return (
-      <div className="balance-container">
-        <Identicon
-          diameter={50}
-          address={address}
-          network={network}
-          image={image}
-        />
-        { token ? this.renderTokenBalance() : this.renderBalance() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/balance/balance.container.js b/ui/app/components/balance/balance.container.js
deleted file mode 100644
index 1cd6df5ce..000000000
--- a/ui/app/components/balance/balance.container.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { connect } from 'react-redux'
-import Balance from './balance.component'
-import {
-  getNativeCurrency,
-  getAssetImages,
-  conversionRateSelector,
-  getCurrentCurrency,
-  getMetaMaskAccounts,
-  getIsMainnet,
-  preferencesSelector,
-} from '../../selectors'
-
-const mapStateToProps = state => {
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-  const accounts = getMetaMaskAccounts(state)
-  const network = state.metamask.network
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  const account = accounts[selectedAddress]
-
-  return {
-    account,
-    network,
-    nativeCurrency: getNativeCurrency(state),
-    conversionRate: conversionRateSelector(state),
-    currentCurrency: getCurrentCurrency(state),
-    assetImages: getAssetImages(state),
-    showFiat: (isMainnet || !!showFiatInTestnets),
-  }
-}
-
-export default connect(mapStateToProps)(Balance)
diff --git a/ui/app/components/button-group/button-group.stories.js b/ui/app/components/button-group/button-group.stories.js
deleted file mode 100644
index 14e1a7e49..000000000
--- a/ui/app/components/button-group/button-group.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import ButtonGroup from './'
-import Button from '../button'
-import { text, boolean } from '@storybook/addon-knobs/react'
-
-storiesOf('ButtonGroup', module)
-  .add('with Buttons', () =>
-    <ButtonGroup
-      style={{ width: '300px' }}
-      disabled={boolean('Disabled', false)}
-      defaultActiveButtonIndex={1}
-    >
-      <Button
-        onClick={action('cheap')}
-      >
-        {text('Button1', 'Cheap')}
-      </Button>
-      <Button
-        onClick={action('average')}
-      >
-        {text('Button2', 'Average')}
-      </Button>
-      <Button
-        onClick={action('fast')}
-      >
-        {text('Button3', 'Fast')}
-      </Button>
-    </ButtonGroup>
-  )
-  .add('with a disabled Button', () =>
-    <ButtonGroup
-      style={{ width: '300px' }}
-      disabled={boolean('Disabled', false)}
-    >
-      <Button
-        onClick={action('enabled')}
-      >
-        {text('Button1', 'Enabled')}
-      </Button>
-      <Button
-        onClick={action('disabled')}
-        disabled
-      >
-        {text('Button2', 'Disabled')}
-      </Button>
-    </ButtonGroup>
-  )
diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js
deleted file mode 100644
index dec084a25..000000000
--- a/ui/app/components/button/button.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import Button from './'
-import { text } from '@storybook/addon-knobs/react'
-
-storiesOf('Button', module)
-  .add('primary', () =>
-    <Button
-      onClick={action('clicked')}
-      type="primary"
-    >
-      {text('text', 'Click me')}
-    </Button>
-  )
-  .add('secondary', () =>
-    <Button
-      onClick={action('clicked')}
-      type="secondary"
-    >
-      {text('text', 'Click me')}
-    </Button>
-  )
-  .add('default', () => (
-    <Button
-      onClick={action('clicked')}
-      type="default"
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('large primary', () => (
-    <Button
-      onClick={action('clicked')}
-      type="primary"
-      large
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('large secondary', () => (
-    <Button
-      onClick={action('clicked')}
-      type="secondary"
-      large
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('large default', () => (
-    <Button
-      onClick={action('clicked')}
-      type="default"
-      large
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
deleted file mode 100644
index d5915292e..000000000
--- a/ui/app/components/coinbase-form.js
+++ /dev/null
@@ -1,69 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../actions')
-
-CoinbaseForm.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(CoinbaseForm)
-
-
-function mapStateToProps (state) {
-  return {
-    warning: state.appState.warning,
-  }
-}
-
-inherits(CoinbaseForm, Component)
-
-function CoinbaseForm () {
-  Component.call(this)
-}
-
-CoinbaseForm.prototype.render = function () {
-  var props = this.props
-
-  return h('.flex-column', {
-    style: {
-      marginTop: '35px',
-      padding: '25px',
-      width: '100%',
-    },
-  }, [
-    h('.flex-row', {
-      style: {
-        justifyContent: 'space-around',
-        margin: '33px',
-        marginTop: '0px',
-      },
-    }, [
-      h('button.btn-green', {
-        onClick: this.toCoinbase.bind(this),
-      }, this.context.t('continueToCoinbase')),
-
-      h('button.btn-red', {
-        onClick: () => props.dispatch(actions.goHome()),
-      }, this.context.t('cancel')),
-    ]),
-  ])
-}
-
-CoinbaseForm.prototype.toCoinbase = function () {
-  const props = this.props
-  const address = props.buyView.buyAddress
-  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-}
-
-CoinbaseForm.prototype.renderLoading = function () {
-  return h('img', {
-    style: {
-      width: '27px',
-      marginRight: '-27px',
-    },
-    src: 'images/loading.svg',
-  })
-}
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
deleted file mode 100644
index c7262d2a9..000000000
--- a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../constants/common'
-
-const ConfirmDetailRow = props => {
-  const {
-    label,
-    primaryText,
-    secondaryText,
-    onHeaderClick,
-    primaryValueTextColor,
-    headerText,
-    headerTextClassName,
-    value,
-  } = props
-
-  return (
-    <div className="confirm-detail-row">
-      <div className="confirm-detail-row__label">
-        { label }
-      </div>
-      <div className="confirm-detail-row__details">
-        <div
-          className={classnames('confirm-detail-row__header-text', headerTextClassName)}
-          onClick={() => onHeaderClick && onHeaderClick()}
-        >
-          { headerText }
-        </div>
-        {
-          primaryText
-            ? (
-              <div
-                className="confirm-detail-row__primary"
-                style={{ color: primaryValueTextColor }}
-              >
-                { primaryText }
-              </div>
-            ) : (
-              <UserPreferencedCurrencyDisplay
-                className="confirm-detail-row__primary"
-                type={PRIMARY}
-                value={value}
-                showEthLogo
-                ethLogoHeight="18"
-                style={{ color: primaryValueTextColor }}
-                hideLabel
-              />
-            )
-        }
-        {
-          secondaryText
-            ? (
-              <div className="confirm-detail-row__secondary">
-                { secondaryText }
-              </div>
-            ) : (
-              <UserPreferencedCurrencyDisplay
-                className="confirm-detail-row__secondary"
-                type={SECONDARY}
-                value={value}
-                showEthLogo
-                hideLabel
-              />
-            )
-        }
-      </div>
-    </div>
-  )
-}
-
-ConfirmDetailRow.propTypes = {
-  headerText: PropTypes.string,
-  headerTextClassName: PropTypes.string,
-  label: PropTypes.string,
-  onHeaderClick: PropTypes.func,
-  primaryValueTextColor: PropTypes.string,
-  primaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  secondaryText: PropTypes.string,
-  value: PropTypes.string,
-}
-
-export default ConfirmDetailRow
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
deleted file mode 100644
index 1dca81560..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { Tabs, Tab } from '../../tabs'
-import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from './'
-import ErrorMessage from '../../error-message'
-
-export default class ConfirmPageContainerContent extends Component {
-  static propTypes = {
-    action: PropTypes.string,
-    dataComponent: PropTypes.node,
-    detailsComponent: PropTypes.node,
-    errorKey: PropTypes.string,
-    errorMessage: PropTypes.string,
-    hideSubtitle: PropTypes.bool,
-    identiconAddress: PropTypes.string,
-    nonce: PropTypes.string,
-    assetImage: PropTypes.string,
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    subtitleComponent: PropTypes.node,
-    summaryComponent: PropTypes.node,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    titleComponent: PropTypes.node,
-    warning: PropTypes.string,
-  }
-
-  renderContent () {
-    const { detailsComponent, dataComponent } = this.props
-
-    if (detailsComponent && dataComponent) {
-      return this.renderTabs()
-    } else {
-      return detailsComponent || dataComponent
-    }
-  }
-
-  renderTabs () {
-    const { detailsComponent, dataComponent } = this.props
-
-    return (
-      <Tabs>
-        <Tab name="Details">
-          { detailsComponent }
-        </Tab>
-        <Tab name="Data">
-          { dataComponent }
-        </Tab>
-      </Tabs>
-    )
-  }
-
-  render () {
-    const {
-      action,
-      errorKey,
-      errorMessage,
-      title,
-      titleComponent,
-      subtitle,
-      subtitleComponent,
-      hideSubtitle,
-      identiconAddress,
-      nonce,
-      assetImage,
-      summaryComponent,
-      detailsComponent,
-      dataComponent,
-      warning,
-    } = this.props
-
-    return (
-      <div className="confirm-page-container-content">
-        {
-          warning && (
-            <ConfirmPageContainerWarning warning={warning} />
-          )
-        }
-        {
-          summaryComponent || (
-            <ConfirmPageContainerSummary
-              className={classnames({
-                'confirm-page-container-summary--border': !detailsComponent || !dataComponent,
-              })}
-              action={action}
-              title={title}
-              titleComponent={titleComponent}
-              subtitle={subtitle}
-              subtitleComponent={subtitleComponent}
-              hideSubtitle={hideSubtitle}
-              identiconAddress={identiconAddress}
-              nonce={nonce}
-              assetImage={assetImage}
-            />
-          )
-        }
-        { this.renderContent() }
-        {
-          (errorKey || errorMessage) && (
-            <div className="confirm-page-container-content__error-container">
-              <ErrorMessage
-                errorMessage={errorMessage}
-                errorKey={errorKey}
-              />
-            </div>
-          )
-        }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
deleted file mode 100644
index 89ceb015f..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Identicon from '../../../identicon'
-
-const ConfirmPageContainerSummary = props => {
-  const {
-    action,
-    title,
-    titleComponent,
-    subtitle,
-    subtitleComponent,
-    hideSubtitle,
-    className,
-    identiconAddress,
-    nonce,
-    assetImage,
-  } = props
-
-  return (
-    <div className={classnames('confirm-page-container-summary', className)}>
-      <div className="confirm-page-container-summary__action-row">
-        <div className="confirm-page-container-summary__action">
-          { action }
-        </div>
-        {
-          nonce && (
-            <div className="confirm-page-container-summary__nonce">
-              { `#${nonce}` }
-            </div>
-          )
-        }
-      </div>
-      <div className="confirm-page-container-summary__title">
-        {
-          identiconAddress && (
-            <Identicon
-              className="confirm-page-container-summary__identicon"
-              diameter={36}
-              address={identiconAddress}
-              image={assetImage}
-            />
-          )
-        }
-        <div className="confirm-page-container-summary__title-text">
-          { titleComponent || title }
-        </div>
-      </div>
-      {
-        hideSubtitle || <div className="confirm-page-container-summary__subtitle">
-          { subtitleComponent || subtitle }
-        </div>
-      }
-    </div>
-  )
-}
-
-ConfirmPageContainerSummary.propTypes = {
-  action: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  titleComponent: PropTypes.node,
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  subtitleComponent: PropTypes.node,
-  hideSubtitle: PropTypes.bool,
-  className: PropTypes.string,
-  identiconAddress: PropTypes.string,
-  nonce: PropTypes.string,
-  assetImage: PropTypes.string,
-}
-
-export default ConfirmPageContainerSummary
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
deleted file mode 100644
index 78639a435..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import './confirm-page-container-warning/index';
-
-@import './confirm-page-container-summary/index';
-
-.confirm-page-container-content {
-  overflow-y: auto;
-  flex: 1;
-
-  &__error-container {
-    padding: 0 16px 16px 16px;
-  }
-
-  &__details {
-    box-sizing: border-box;
-    padding: 0 24px;
-  }
-
-  &__data {
-   padding: 16px;
-   color: $oslo-gray;
-  }
-
-  &__data-box {
-    background-color: #f9fafa;
-    padding: 12px;
-    font-size: .75rem;
-    margin-bottom: 16px;
-    word-wrap: break-word;
-    max-height: 200px;
-    overflow-y: auto;
-
-    &-label {
-      text-transform: uppercase;
-      padding: 8px 0 12px;
-      font-size: 12px;
-    }
-  }
-
-  &__data-field {
-    display: flex;
-    flex-direction: row;
-
-    &-label {
-      font-weight: 500;
-      padding-right: 16px;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 5px;
-    }
-  }
-
-  &__gas-fee {
-    border-bottom: 1px solid $geyser;
-
-    .advanced-gas-inputs__gas-edit-rows {
-      margin-bottom: 16px;
-    }
-  }
-
-  &__function-type {
-    font-size: .875rem;
-    font-weight: 500;
-    text-transform: capitalize;
-    color: $black;
-    padding-left: 5px;
-  }
-}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
deleted file mode 100644
index e6fe8f82c..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {
-  ENVIRONMENT_TYPE_POPUP,
-  ENVIRONMENT_TYPE_NOTIFICATION,
-} from '../../../../../app/scripts/lib/enums'
-import NetworkDisplay from '../../network-display'
-
-export default class ConfirmPageContainer extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    showEdit: PropTypes.bool,
-    onEdit: PropTypes.func,
-    children: PropTypes.node,
-  }
-
-  renderTop () {
-    const { onEdit, showEdit } = this.props
-    const windowType = window.METAMASK_UI_TYPE
-    const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
-      windowType !== ENVIRONMENT_TYPE_POPUP
-
-    if (!showEdit && isFullScreen) {
-      return null
-    }
-
-    return (
-      <div className="confirm-page-container-header__row">
-        <div
-          className="confirm-page-container-header__back-button-container"
-          style={{
-            visibility: showEdit ? 'initial' : 'hidden',
-          }}
-        >
-          <img
-            src="/images/caret-left.svg"
-          />
-          <span
-            className="confirm-page-container-header__back-button"
-            onClick={() => onEdit()}
-          >
-            { this.context.t('edit') }
-          </span>
-        </div>
-        { !isFullScreen && <NetworkDisplay /> }
-      </div>
-    )
-  }
-
-  render () {
-    const { children } = this.props
-
-    return (
-      <div className="confirm-page-container-header">
-        { this.renderTop() }
-        { children }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
deleted file mode 100644
index 10edf3b16..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SenderToRecipient from '../sender-to-recipient'
-import { PageContainerFooter } from '../page-container'
-import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation } from './'
-
-export default class ConfirmPageContainer extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    // Header
-    action: PropTypes.string,
-    hideSubtitle: PropTypes.bool,
-    onEdit: PropTypes.func,
-    showEdit: PropTypes.bool,
-    subtitle: PropTypes.string,
-    subtitleComponent: PropTypes.node,
-    title: PropTypes.string,
-    titleComponent: PropTypes.node,
-    // Sender to Recipient
-    fromAddress: PropTypes.string,
-    fromName: PropTypes.string,
-    toAddress: PropTypes.string,
-    toName: PropTypes.string,
-    // Content
-    contentComponent: PropTypes.node,
-    errorKey: PropTypes.string,
-    errorMessage: PropTypes.string,
-    fiatTransactionAmount: PropTypes.string,
-    fiatTransactionFee: PropTypes.string,
-    fiatTransactionTotal: PropTypes.string,
-    ethTransactionAmount: PropTypes.string,
-    ethTransactionFee: PropTypes.string,
-    ethTransactionTotal: PropTypes.string,
-    onEditGas: PropTypes.func,
-    dataComponent: PropTypes.node,
-    detailsComponent: PropTypes.node,
-    identiconAddress: PropTypes.string,
-    nonce: PropTypes.string,
-    assetImage: PropTypes.string,
-    summaryComponent: PropTypes.node,
-    warning: PropTypes.string,
-    unapprovedTxCount: PropTypes.number,
-    // Navigation
-    totalTx: PropTypes.number,
-    positionOfCurrentTx: PropTypes.number,
-    nextTxId: PropTypes.string,
-    prevTxId: PropTypes.string,
-    showNavigation: PropTypes.bool,
-    onNextTx: PropTypes.func,
-    firstTx: PropTypes.string,
-    lastTx: PropTypes.string,
-    ofText: PropTypes.string,
-    requestsWaitingText: PropTypes.string,
-    // Footer
-    onCancelAll: PropTypes.func,
-    onCancel: PropTypes.func,
-    onSubmit: PropTypes.func,
-    disabled: PropTypes.bool,
-  }
-
-  render () {
-    const {
-      showEdit,
-      onEdit,
-      fromName,
-      fromAddress,
-      toName,
-      toAddress,
-      disabled,
-      errorKey,
-      errorMessage,
-      contentComponent,
-      action,
-      title,
-      titleComponent,
-      subtitle,
-      subtitleComponent,
-      hideSubtitle,
-      summaryComponent,
-      detailsComponent,
-      dataComponent,
-      onCancelAll,
-      onCancel,
-      onSubmit,
-      identiconAddress,
-      nonce,
-      unapprovedTxCount,
-      assetImage,
-      warning,
-      totalTx,
-      positionOfCurrentTx,
-      nextTxId,
-      prevTxId,
-      showNavigation,
-      onNextTx,
-      firstTx,
-      lastTx,
-      ofText,
-      requestsWaitingText,
-    } = this.props
-    const renderAssetImage = contentComponent || (!contentComponent && !identiconAddress)
-
-    return (
-      <div className="page-container">
-        <ConfirmPageContainerNavigation
-            totalTx={totalTx}
-            positionOfCurrentTx={positionOfCurrentTx}
-            nextTxId={nextTxId}
-            prevTxId={prevTxId}
-            showNavigation={showNavigation}
-            onNextTx={(txId) => onNextTx(txId)}
-            firstTx={firstTx}
-            lastTx={lastTx}
-            ofText={ofText}
-            requestsWaitingText={requestsWaitingText}
-        />
-        <ConfirmPageContainerHeader
-          showEdit={showEdit}
-          onEdit={() => onEdit()}
-        >
-          <SenderToRecipient
-            senderName={fromName}
-            senderAddress={fromAddress}
-            recipientName={toName}
-            recipientAddress={toAddress}
-            assetImage={renderAssetImage ? assetImage : undefined}
-          />
-        </ConfirmPageContainerHeader>
-        {
-          contentComponent || (
-            <ConfirmPageContainerContent
-              action={action}
-              title={title}
-              titleComponent={titleComponent}
-              subtitle={subtitle}
-              subtitleComponent={subtitleComponent}
-              hideSubtitle={hideSubtitle}
-              summaryComponent={summaryComponent}
-              detailsComponent={detailsComponent}
-              dataComponent={dataComponent}
-              errorMessage={errorMessage}
-              errorKey={errorKey}
-              identiconAddress={identiconAddress}
-              nonce={nonce}
-              assetImage={assetImage}
-              warning={warning}
-            />
-          )
-        }
-        <PageContainerFooter
-          onCancel={() => onCancel()}
-          cancelText={this.context.t('reject')}
-          onSubmit={() => onSubmit()}
-          submitText={this.context.t('confirm')}
-          submitButtonType="confirm"
-          disabled={disabled}
-        >
-          {unapprovedTxCount > 1 && (
-            <a onClick={() => onCancelAll()}>
-              {this.context.t('rejectTxsN', [unapprovedTxCount])}
-            </a>
-          )}
-        </PageContainerFooter>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/confirm-page-container/index.scss b/ui/app/components/confirm-page-container/index.scss
deleted file mode 100644
index d41cd4423..000000000
--- a/ui/app/components/confirm-page-container/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import './confirm-page-container-content/index';
-
-@import './confirm-page-container-header/index';
-
-@import './confirm-detail-row/index';
-
-@import './confirm-page-container-navigation/index';
\ No newline at end of file
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
deleted file mode 100644
index ad504deb8..000000000
--- a/ui/app/components/copyable.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-const Tooltip = require('./tooltip')
-const copyToClipboard = require('copy-to-clipboard')
-const connect = require('react-redux').connect
-
-Copyable.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(Copyable)
-
-
-inherits(Copyable, Component)
-function Copyable () {
-  Component.call(this)
-  this.state = {
-    copied: false,
-  }
-}
-
-Copyable.prototype.render = function () {
-  const props = this.props
-  const state = this.state
-  const { value, children } = props
-  const { copied } = state
-
-  return h(Tooltip, {
-    title: copied ? this.context.t('copiedExclamation') : this.context.t('copy'),
-    position: 'bottom',
-  }, h('span', {
-    style: {
-      cursor: 'pointer',
-    },
-    onClick: (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-      copyToClipboard(value)
-      this.debounceRestore()
-    },
-  }, children))
-}
-
-Copyable.prototype.debounceRestore = function () {
-  this.setState({ copied: true })
-  clearTimeout(this.timeout)
-  this.timeout = setTimeout(() => {
-    this.setState({ copied: false })
-  }, 850)
-}
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
deleted file mode 100644
index 6a743cc4e..000000000
--- a/ui/app/components/currency-display/currency-display.component.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { GWEI } from '../../constants/common'
-
-export default class CurrencyDisplay extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    displayValue: PropTypes.string,
-    prefix: PropTypes.string,
-    prefixComponent: PropTypes.node,
-    style: PropTypes.object,
-    suffix: PropTypes.string,
-    // Used in container
-    currency: PropTypes.string,
-    denomination: PropTypes.oneOf([GWEI]),
-    value: PropTypes.string,
-    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    hideLabel: PropTypes.bool,
-    hideTitle: PropTypes.bool,
-  }
-
-  render () {
-    const { className, displayValue, prefix, prefixComponent, style, suffix, hideTitle } = this.props
-    const text = `${prefix || ''}${displayValue}`
-    const title = `${text} ${suffix}`
-
-    return (
-      <div
-        className={classnames('currency-display-component', className)}
-        style={style}
-        title={!hideTitle && title || null}
-      >
-        { prefixComponent }
-        <span className="currency-display-component__text">{ text }</span>
-        {
-          suffix && (
-            <span className="currency-display-component__suffix">
-              { suffix }
-            </span>
-          )
-        }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
deleted file mode 100644
index e581f8a5e..000000000
--- a/ui/app/components/currency-display/currency-display.container.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { connect } from 'react-redux'
-import CurrencyDisplay from './currency-display.component'
-import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
-
-const mapStateToProps = state => {
-  const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
-
-  return {
-    currentCurrency,
-    conversionRate,
-    nativeCurrency,
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { nativeCurrency, currentCurrency, conversionRate, ...restStateProps } = stateProps
-  const {
-    value,
-    numberOfDecimals = 2,
-    currency,
-    denomination,
-    hideLabel,
-    displayValue: propsDisplayValue,
-    suffix: propsSuffix,
-    ...restOwnProps
-  } = ownProps
-
-  const toCurrency = currency || currentCurrency
-
-  const displayValue = propsDisplayValue || formatCurrency(
-    getValueFromWeiHex({
-      value,
-      fromCurrency: nativeCurrency,
-      toCurrency, conversionRate,
-      numberOfDecimals,
-      toDenomination: denomination,
-    }),
-    toCurrency
-  )
-  const suffix = propsSuffix || (hideLabel ? undefined : toCurrency.toUpperCase())
-
-  return {
-    ...restStateProps,
-    ...dispatchProps,
-    ...restOwnProps,
-    displayValue,
-    suffix,
-  }
-}
-
-export default connect(mapStateToProps, null, mergeProps)(CurrencyDisplay)
diff --git a/ui/app/components/currency-input/currency-input.component.js b/ui/app/components/currency-input/currency-input.component.js
deleted file mode 100644
index 30e0e919b..000000000
--- a/ui/app/components/currency-input/currency-input.component.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import UnitInput from '../unit-input'
-import CurrencyDisplay from '../currency-display'
-import { getValueFromWeiHex, getWeiHexFromDecimalValue } from '../../helpers/conversions.util'
-import { ETH } from '../../constants/common'
-
-/**
- * Component that allows user to enter currency values as a number, and props receive a converted
- * hex value in WEI. props.value, used as a default or forced value, should be a hex value, which
- * gets converted into a decimal value depending on the currency (ETH or Fiat).
- */
-export default class CurrencyInput extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
-    nativeCurrency: PropTypes.string,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    useFiat: PropTypes.bool,
-    hideFiat: PropTypes.bool,
-    value: PropTypes.string,
-    fiatSuffix: PropTypes.string,
-    nativeSuffix: PropTypes.string,
-  }
-
-  constructor (props) {
-    super(props)
-
-    const { value: hexValue } = props
-    const decimalValue = hexValue ? this.getDecimalValue(props) : 0
-
-    this.state = {
-      decimalValue,
-      hexValue,
-      isSwapped: false,
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    const { value: prevPropsHexValue } = prevProps
-    const { value: propsHexValue } = this.props
-    const { hexValue: stateHexValue } = this.state
-
-    if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
-      const decimalValue = this.getDecimalValue(this.props)
-      this.setState({ hexValue: propsHexValue, decimalValue })
-    }
-  }
-
-  getDecimalValue (props) {
-    const { value: hexValue, currentCurrency, conversionRate } = props
-    const decimalValueString = this.shouldUseFiat()
-      ? getValueFromWeiHex({
-        value: hexValue, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
-      })
-      : getValueFromWeiHex({
-        value: hexValue, toCurrency: ETH, numberOfDecimals: 6,
-      })
-
-    return Number(decimalValueString) || 0
-  }
-
-  shouldUseFiat = () => {
-    const { useFiat, hideFiat } = this.props
-    const { isSwapped } = this.state || {}
-
-    if (hideFiat) {
-      return false
-    }
-
-    return isSwapped ? !useFiat : useFiat
-  }
-
-  swap = () => {
-    const { isSwapped, decimalValue } = this.state
-    this.setState({isSwapped: !isSwapped}, () => {
-      this.handleChange(decimalValue)
-    })
-  }
-
-  handleChange = decimalValue => {
-    const { currentCurrency: fromCurrency, conversionRate, onChange } = this.props
-
-    const hexValue = this.shouldUseFiat()
-      ? getWeiHexFromDecimalValue({
-        value: decimalValue, fromCurrency, conversionRate, invertConversionRate: true,
-      })
-      : getWeiHexFromDecimalValue({
-        value: decimalValue, fromCurrency: ETH, fromDenomination: ETH, conversionRate,
-      })
-
-    this.setState({ hexValue, decimalValue })
-    onChange(hexValue)
-  }
-
-  handleBlur = () => {
-    this.props.onBlur(this.state.hexValue)
-  }
-
-  renderConversionComponent () {
-    const { currentCurrency, nativeCurrency, hideFiat } = this.props
-    const { hexValue } = this.state
-    let currency, numberOfDecimals
-
-    if (hideFiat) {
-      return (
-        <div className="currency-input__conversion-component">
-          { this.context.t('noConversionRateAvailable') }
-        </div>
-      )
-    }
-
-    if (this.shouldUseFiat()) {
-      // Display ETH
-      currency = nativeCurrency || ETH
-      numberOfDecimals = 6
-    } else {
-      // Display Fiat
-      currency = currentCurrency
-      numberOfDecimals = 2
-    }
-
-    return (
-      <CurrencyDisplay
-        className="currency-input__conversion-component"
-        currency={currency}
-        value={hexValue}
-        numberOfDecimals={numberOfDecimals}
-      />
-    )
-  }
-
-  render () {
-    const { fiatSuffix, nativeSuffix, ...restProps } = this.props
-    const { decimalValue } = this.state
-
-    return (
-        <UnitInput
-          {...restProps}
-          suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          value={decimalValue}
-          actionComponent={(
-            <div
-              className="currency-input__swap-component"
-              onClick={this.swap}
-            />
-          )}
-        >
-          { this.renderConversionComponent() }
-        </UnitInput>
-    )
-  }
-}
diff --git a/ui/app/components/currency-input/currency-input.container.js b/ui/app/components/currency-input/currency-input.container.js
deleted file mode 100644
index 428be4557..000000000
--- a/ui/app/components/currency-input/currency-input.container.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { connect } from 'react-redux'
-import CurrencyInput from './currency-input.component'
-import { ETH } from '../../constants/common'
-import {getIsMainnet, preferencesSelector} from '../../selectors'
-
-const mapStateToProps = state => {
-  const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    nativeCurrency,
-    currentCurrency,
-    conversionRate,
-    hideFiat: (!isMainnet && !showFiatInTestnets),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { nativeCurrency, currentCurrency } = stateProps
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    nativeSuffix: nativeCurrency || ETH,
-    fiatSuffix: currentCurrency.toUpperCase(),
-  }
-}
-
-export default connect(mapStateToProps, null, mergeProps)(CurrencyInput)
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
deleted file mode 100644
index fd660ead2..000000000
--- a/ui/app/components/customize-gas-modal/index.js
+++ /dev/null
@@ -1,396 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const BigNumber = require('bignumber.js')
-const actions = require('../../actions')
-const GasModalCard = require('./gas-modal-card')
-import Button from '../button'
-
-const ethUtil = require('ethereumjs-util')
-
-import {
-  updateSendErrors,
-} from '../../ducks/send.duck'
-
-const {
-  MIN_GAS_PRICE_DEC,
-  MIN_GAS_LIMIT_DEC,
-  MIN_GAS_PRICE_GWEI,
-} = require('../send/send.constants')
-
-const {
-  isBalanceSufficient,
-} = require('../send/send.utils')
-
-const {
-  conversionUtil,
-  multiplyCurrencies,
-  conversionGreaterThan,
-  conversionMax,
-  subtractCurrencies,
-} = require('../../conversion-util')
-
-const {
-  getGasIsLoading,
-  getForceGasMin,
-  conversionRateSelector,
-  getSendAmount,
-  getSelectedToken,
-  getSendFrom,
-  getCurrentAccountWithSendEtherInfo,
-  getSelectedTokenToFiatRate,
-  getSendMaxModeState,
-} = require('../../selectors')
-
-const {
-  getGasPrice,
-  getGasLimit,
-} = require('../send/send.selectors')
-
-function mapStateToProps (state) {
-  const selectedToken = getSelectedToken(state)
-  const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
-  const conversionRate = conversionRateSelector(state)
-
-  return {
-    gasPrice: getGasPrice(state),
-    gasLimit: getGasLimit(state),
-    gasIsLoading: getGasIsLoading(state),
-    forceGasMin: getForceGasMin(state),
-    conversionRate,
-    amount: getSendAmount(state),
-    maxModeOn: getSendMaxModeState(state),
-    balance: currentAccount.balance,
-    primaryCurrency: selectedToken && selectedToken.symbol,
-    selectedToken,
-    amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => dispatch(actions.hideModal()),
-    setGasPrice: newGasPrice => dispatch(actions.setGasPrice(newGasPrice)),
-    setGasLimit: newGasLimit => dispatch(actions.setGasLimit(newGasLimit)),
-    setGasTotal: newGasTotal => dispatch(actions.setGasTotal(newGasTotal)),
-    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
-    updateSendErrors: error => dispatch(updateSendErrors(error)),
-  }
-}
-
-function getFreshState (props) {
-  const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
-  const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
-
-  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-
-  return {
-    gasPrice,
-    gasLimit,
-    gasTotal,
-    error: null,
-    priceSigZeros: '',
-    priceSigDec: '',
-  }
-}
-
-inherits(CustomizeGasModal, Component)
-function CustomizeGasModal (props) {
-  Component.call(this)
-
-  const originalState = getFreshState(props)
-  this.state = {
-    ...originalState,
-    originalState,
-  }
-}
-
-CustomizeGasModal.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
-
-CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) {
-  const currentState = getFreshState(this.props)
-  const {
-    gasPrice: currentGasPrice,
-    gasLimit: currentGasLimit,
-  } = currentState
-  const newState = getFreshState(nextProps)
-  const {
-    gasPrice: newGasPrice,
-    gasLimit: newGasLimit,
-    gasTotal: newGasTotal,
-  } = newState
-  const gasPriceChanged = currentGasPrice !== newGasPrice
-  const gasLimitChanged = currentGasLimit !== newGasLimit
-
-  if (gasPriceChanged) {
-    this.setState({
-      gasPrice: newGasPrice,
-      gasTotal: newGasTotal,
-      priceSigZeros: '',
-      priceSigDec: '',
-    })
-  }
-  if (gasLimitChanged) {
-    this.setState({ gasLimit: newGasLimit, gasTotal: newGasTotal })
-  }
-  if (gasLimitChanged || gasPriceChanged) {
-    this.validate({ gasLimit: newGasLimit, gasTotal: newGasTotal })
-  }
-}
-
-CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
-  const { metricsEvent } = this.context
-  const {
-    setGasPrice,
-    setGasLimit,
-    hideModal,
-    setGasTotal,
-    maxModeOn,
-    selectedToken,
-    balance,
-    updateSendAmount,
-    updateSendErrors,
-  } = this.props
-  const {
-    originalState,
-  } = this.state
-
-  if (maxModeOn && !selectedToken) {
-    const maxAmount = subtractCurrencies(
-      ethUtil.addHexPrefix(balance),
-      ethUtil.addHexPrefix(gasTotal),
-      { toNumericBase: 'hex' }
-    )
-    updateSendAmount(maxAmount)
-  }
-
-  metricsEvent({
-    eventOpts: {
-      category: 'Activation',
-      action: 'userCloses',
-      name: 'closeCustomizeGas',
-    },
-    pageOpts: {
-      section: 'customizeGasModal',
-      component: 'customizeGasSaveButton',
-    },
-    customVariables: {
-      gasPriceChange: (new BigNumber(ethUtil.addHexPrefix(gasPrice))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasPrice))).toString(10),
-      gasLimitChange: (new BigNumber(ethUtil.addHexPrefix(gasLimit))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasLimit))).toString(10),
-    },
-  })
-
-  setGasPrice(ethUtil.addHexPrefix(gasPrice))
-  setGasLimit(ethUtil.addHexPrefix(gasLimit))
-  setGasTotal(ethUtil.addHexPrefix(gasTotal))
-  updateSendErrors({ insufficientFunds: false })
-  hideModal()
-}
-
-CustomizeGasModal.prototype.revert = function () {
-  this.setState(this.state.originalState)
-}
-
-CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
-  const {
-    amount,
-    balance,
-    selectedToken,
-    amountConversionRate,
-    conversionRate,
-    maxModeOn,
-  } = this.props
-
-  let error = null
-
-  const balanceIsSufficient = isBalanceSufficient({
-    amount: selectedToken || maxModeOn ? '0' : amount,
-    gasTotal,
-    balance,
-    selectedToken,
-    amountConversionRate,
-    conversionRate,
-  })
-
-  if (!balanceIsSufficient) {
-    error = this.context.t('balanceIsInsufficientGas')
-  }
-
-  const gasLimitTooLow = gasLimit && conversionGreaterThan(
-    {
-      value: MIN_GAS_LIMIT_DEC,
-      fromNumericBase: 'dec',
-      conversionRate,
-    },
-    {
-      value: gasLimit,
-      fromNumericBase: 'hex',
-    },
-  )
-
-  if (gasLimitTooLow) {
-    error = this.context.t('gasLimitTooLow')
-  }
-
-  this.setState({ error })
-  return error
-}
-
-CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
-  const { gasPrice } = this.state
-
-  const gasLimit = conversionUtil(newGasLimit, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-  })
-
-  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-
-  this.validate({ gasTotal, gasLimit })
-
-  this.setState({ gasTotal, gasLimit })
-}
-
-CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
-  const { gasLimit } = this.state
-  const sigZeros = String(newGasPrice).match(/^\d+[.]\d*?(0+)$/)
-  const sigDec = String(newGasPrice).match(/^\d+([.])0*$/)
-
-  this.setState({
-    priceSigZeros: sigZeros && sigZeros[1] || '',
-    priceSigDec: sigDec && sigDec[1] || '',
-  })
-
-  const gasPrice = conversionUtil(newGasPrice, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-    fromDenomination: 'GWEI',
-    toDenomination: 'WEI',
-  })
-
-  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-
-  this.validate({ gasTotal })
-
-  this.setState({ gasTotal, gasPrice })
-}
-
-CustomizeGasModal.prototype.render = function () {
-  const { hideModal, forceGasMin, gasIsLoading } = this.props
-  const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
-
-  let convertedGasPrice = conversionUtil(gasPrice, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    toDenomination: 'GWEI',
-  })
-
-  convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
-
-  let newGasPrice = gasPrice
-  if (forceGasMin) {
-    const convertedMinPrice = conversionUtil(forceGasMin, {
-      fromNumericBase: 'hex',
-      toNumericBase: 'dec',
-    })
-    convertedGasPrice = conversionMax(
-      { value: convertedMinPrice, fromNumericBase: 'dec' },
-      { value: convertedGasPrice, fromNumericBase: 'dec' }
-    )
-    newGasPrice = conversionMax(
-      { value: gasPrice, fromNumericBase: 'hex' },
-      { value: forceGasMin, fromNumericBase: 'hex' }
-    )
-  }
-
-  const convertedGasLimit = conversionUtil(gasLimit, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-  })
-
-  return !gasIsLoading && h('div.send-v2__customize-gas', {}, [
-    h('div.send-v2__customize-gas__content', {
-    }, [
-      h('div.send-v2__customize-gas__header', {}, [
-
-        h('div.send-v2__customize-gas__title', this.context.t('customGas')),
-
-        h('div.send-v2__customize-gas__close', {
-          onClick: hideModal,
-        }),
-
-      ]),
-
-      h('div.send-v2__customize-gas__body', {}, [
-
-        h(GasModalCard, {
-          value: convertedGasPrice,
-          min: forceGasMin || MIN_GAS_PRICE_GWEI,
-          step: 1,
-          onChange: value => this.convertAndSetGasPrice(value),
-          title: this.context.t('gasPrice'),
-          copy: this.context.t('gasPriceCalculation'),
-          gasIsLoading,
-        }),
-
-        h(GasModalCard, {
-          value: convertedGasLimit,
-          min: 1,
-          step: 1,
-          onChange: value => this.convertAndSetGasLimit(value),
-          title: this.context.t('gasLimit'),
-          copy: this.context.t('gasLimitCalculation'),
-          gasIsLoading,
-        }),
-
-      ]),
-
-      h('div.send-v2__customize-gas__footer', {}, [
-
-        error && h('div.send-v2__customize-gas__error-message', [
-          error,
-        ]),
-
-        h('div.send-v2__customize-gas__revert', {
-          onClick: () => this.revert(),
-        }, [this.context.t('revert')]),
-
-        h('div.send-v2__customize-gas__buttons', [
-          h(Button, {
-            type: 'default',
-            className: 'send-v2__customize-gas__cancel',
-            onClick: this.props.hideModal,
-          }, [this.context.t('cancel')]),
-          h(Button, {
-            type: 'primary',
-            className: 'send-v2__customize-gas__save',
-            onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
-            disabled: error,
-          }, [this.context.t('save')]),
-        ]),
-
-      ]),
-
-    ]),
-  ])
-}
diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js
deleted file mode 100644
index bda8b9517..000000000
--- a/ui/app/components/dropdowns/account-details-dropdown.js
+++ /dev/null
@@ -1,131 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getSelectedIdentity } = require('../../selectors')
-const genAccountLink = require('../../../lib/account-link.js')
-const { Menu, Item, CloseArea } = require('./components/menu')
-
-AccountDetailsDropdown.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
-
-function mapStateToProps (state) {
-  return {
-    selectedIdentity: getSelectedIdentity(state),
-    network: state.metamask.network,
-    keyrings: state.metamask.keyrings,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
-    viewOnEtherscan: (address, network) => {
-      global.platform.openWindow({ url: genAccountLink(address, network) })
-    },
-    showRemoveAccountConfirmationModal: (identity) => {
-      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
-    },
-  }
-}
-
-inherits(AccountDetailsDropdown, Component)
-function AccountDetailsDropdown () {
-  Component.call(this)
-
-  this.onClose = this.onClose.bind(this)
-}
-
-AccountDetailsDropdown.prototype.onClose = function (e) {
-  e.stopPropagation()
-  this.props.onClose()
-}
-
-AccountDetailsDropdown.prototype.render = function () {
-  const {
-    selectedIdentity,
-    network,
-    keyrings,
-    showAccountDetailModal,
-    viewOnEtherscan,
-    showRemoveAccountConfirmationModal } = this.props
-
-  const address = selectedIdentity.address
-
-  const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(address)
-  })
-
-  const isRemovable = keyring.type !== 'HD Key Tree'
-
-  return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
-    h(CloseArea, {
-      onClick: this.onClose,
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Account Options',
-            name: 'Clicked Expand View',
-          },
-        })
-        global.platform.openExtensionInBrowser()
-        this.props.onClose()
-      },
-      text: this.context.t('expandView'),
-      icon: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }),
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        showAccountDetailModal()
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Account Options',
-            name: 'Viewed Account Details',
-          },
-        })
-        this.props.onClose()
-      },
-      text: this.context.t('accountDetails'),
-      icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }),
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Account Options',
-            name: 'Clicked View on Etherscan',
-          },
-        })
-        viewOnEtherscan(address, network)
-        this.props.onClose()
-      },
-      text: this.context.t('viewOnEtherscan'),
-      icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
-    }),
-    isRemovable ? h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        showRemoveAccountConfirmationModal(selectedIdentity)
-        this.props.onClose()
-      },
-      text: this.context.t('removeAccount'),
-      icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }),
-    }) : null,
-  ])
-}
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
deleted file mode 100644
index e6b3e0c0c..000000000
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ /dev/null
@@ -1,473 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const actions = require('../../../actions')
-const genAccountLink = require('../../../../lib/account-link.js')
-const connect = require('react-redux').connect
-const Dropdown = require('./dropdown').Dropdown
-const DropdownMenuItem = require('./dropdown').DropdownMenuItem
-import Identicon from '../../identicon'
-const { checksumAddress } = require('../../../util')
-const copyToClipboard = require('copy-to-clipboard')
-const { formatBalance } = require('../../../util')
-
-
-class AccountDropdowns extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      accountSelectorActive: false,
-      optionsMenuActive: false,
-    }
-    // Used for orangeaccount selector icon
-    // this.accountSelectorToggleClassName = 'accounts-selector'
-    this.accountSelectorToggleClassName = 'fa-angle-down'
-    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
-  }
-
-  renderAccounts () {
-    const { identities, accounts, selected, menuItemStyles, actions, keyrings, ticker } = this.props
-
-    return Object.keys(identities).map((key, index) => {
-      const identity = identities[key]
-      const isSelected = identity.address === selected
-
-      const balanceValue = accounts[key].balance
-      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, true, ticker) : '...'
-      const simpleAddress = identity.address.substring(2).toLowerCase()
-
-      const keyring = keyrings.find((kr) => {
-        return kr.accounts.includes(simpleAddress) ||
-          kr.accounts.includes(identity.address)
-      })
-
-      return h(
-        DropdownMenuItem,
-        {
-          closeMenu: () => {},
-          onClick: () => {
-            this.props.actions.showAccountDetail(identity.address)
-          },
-          style: Object.assign(
-            {
-              marginTop: index === 0 ? '5px' : '',
-              fontSize: '24px',
-              width: '260px',
-            },
-            menuItemStyles,
-          ),
-        },
-        [
-          h('div.flex-row.flex-center', {}, [
-
-            h('span', {
-              style: {
-                flex: '1 1 0',
-                minWidth: '20px',
-                minHeight: '30px',
-              },
-            }, [
-              h('span', {
-                style: {
-                  flex: '1 1 auto',
-                  fontSize: '14px',
-                },
-              }, isSelected ? h('i.fa.fa-check') : null),
-            ]),
-
-            h(
-              Identicon,
-              {
-                address: identity.address,
-                diameter: 24,
-                style: {
-                  flex: '1 1 auto',
-                  marginLeft: '10px',
-                },
-              },
-            ),
-
-            h('span.flex-column', {
-              style: {
-                flex: '10 10 auto',
-                width: '175px',
-                alignItems: 'flex-start',
-                justifyContent: 'center',
-                marginLeft: '10px',
-                position: 'relative',
-              },
-            }, [
-              this.indicateIfLoose(keyring),
-              h('span.account-dropdown-name', {
-                style: {
-                  fontSize: '18px',
-                  maxWidth: '145px',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                },
-              }, identity.name || ''),
-
-              h('span.account-dropdown-balance', {
-                style: {
-                  fontSize: '14px',
-                  fontFamily: 'Avenir',
-                  fontWeight: 500,
-                },
-              }, formattedBalance),
-            ]),
-
-            h('span', {
-              style: {
-                flex: '3 3 auto',
-              },
-            }, [
-              h('span.account-dropdown-edit-button.allcaps', {
-                style: {
-                  fontSize: '16px',
-                },
-                onClick: () => {
-                  actions.showEditAccountModal(identity)
-                },
-              }, [
-                this.context.t('edit'),
-              ]),
-            ]),
-
-          ]),
-        ]
-      )
-    })
-  }
-
-  indicateIfLoose (keyring) {
-    try { // Sometimes keyrings aren't loaded yet:
-      const type = keyring.type
-      const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
-    } catch (e) { return }
-  }
-
-  renderAccountSelector () {
-    const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
-    const { accountSelectorActive, menuItemStyles } = this.state
-
-    return h(
-      Dropdown,
-      {
-        useCssTransition,
-        style: {
-          marginLeft: '-185px',
-          marginTop: '50px',
-          minWidth: '180px',
-          overflowY: 'auto',
-          maxHeight: '300px',
-          width: '300px',
-        },
-        innerStyle,
-        isOpen: accountSelectorActive,
-        onClickOutside: (event) => {
-          const { classList } = event.target
-          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
-          if (accountSelectorActive && isNotToggleElement) {
-            this.setState({ accountSelectorActive: false })
-          }
-        },
-      },
-      [
-        ...this.renderAccounts(),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            style: Object.assign(
-              {},
-              menuItemStyles,
-            ),
-            onClick: () => actions.showNewAccountPageCreateForm(),
-          },
-          [
-            h(
-              'i.fa.fa-plus.fa-lg',
-              {
-                style: {
-                  marginLeft: '8px',
-                },
-              }
-            ),
-            h('span', {
-              style: {
-                marginLeft: '14px',
-                fontFamily: 'DIN OT',
-                fontSize: '16px',
-                lineHeight: '23px',
-              },
-            }, this.context.t('createAccount')),
-          ],
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {
-              if (sidebarOpen) {
-                actions.hideSidebar()
-              }
-            },
-            onClick: () => actions.showNewAccountPageImportForm(),
-            style: Object.assign(
-              {},
-              menuItemStyles,
-            ),
-          },
-          [
-            h(
-              'i.fa.fa-download.fa-lg',
-              {
-                style: {
-                  marginLeft: '8px',
-                },
-              }
-            ),
-            h('span', {
-              style: {
-                marginLeft: '20px',
-                marginBottom: '5px',
-                fontFamily: 'DIN OT',
-                fontSize: '16px',
-                lineHeight: '23px',
-              },
-            }, this.context.t('importAccount')),
-          ]
-        ),
-      ]
-    )
-  }
-
-  renderAccountOptions () {
-    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
-    const { optionsMenuActive, menuItemStyles } = this.state
-    const dropdownMenuItemStyle = {
-      fontFamily: 'DIN OT',
-      fontSize: 16,
-      lineHeight: '24px',
-      padding: '8px',
-    }
-
-    return h(
-      Dropdown,
-      {
-        useCssTransition,
-        style: Object.assign(
-          {
-            marginLeft: '-10px',
-            position: 'absolute',
-            width: '29vh', // affects both mobile and laptop views
-          },
-          dropdownWrapperStyle,
-        ),
-        isOpen: optionsMenuActive,
-        onClickOutside: (event) => {
-          const { classList } = event.target
-          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
-          if (optionsMenuActive && isNotToggleElement) {
-            this.setState({ optionsMenuActive: false })
-          }
-        },
-      },
-      [
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              this.props.actions.showAccountDetailModal()
-            },
-            style: Object.assign(
-              dropdownMenuItemStyle,
-              menuItemStyles,
-            ),
-          },
-          this.context.t('accountDetails'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected, network } = this.props
-              const url = genAccountLink(selected, network)
-              global.platform.openWindow({ url })
-            },
-            style: Object.assign(
-              dropdownMenuItemStyle,
-              menuItemStyles,
-            ),
-          },
-          this.context.t('etherscanView'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected } = this.props
-              copyToClipboard(checksumAddress(selected))
-            },
-            style: Object.assign(
-              dropdownMenuItemStyle,
-              menuItemStyles,
-            ),
-          },
-          this.context.t('copyAddress'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => this.props.actions.showExportPrivateKeyModal(),
-            style: Object.assign(
-              dropdownMenuItemStyle,
-              menuItemStyles,
-            ),
-          },
-          this.context.t('exportPrivateKey'),
-        ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              actions.hideSidebar()
-              actions.showAddTokenPage()
-            },
-            style: Object.assign(
-              dropdownMenuItemStyle,
-              menuItemStyles,
-            ),
-          },
-          this.context.t('addToken'),
-        ),
-
-      ]
-    )
-  }
-
-  render () {
-    const { style, enableAccountsSelector, enableAccountOptions } = this.props
-    const { optionsMenuActive, accountSelectorActive } = this.state
-
-    return h(
-      'span',
-      {
-        style: style,
-      },
-      [
-        enableAccountsSelector && h(
-          'i.fa.fa-angle-down',
-          {
-            style: {
-              cursor: 'pointer',
-            },
-            onClick: (event) => {
-              event.stopPropagation()
-              this.setState({
-                accountSelectorActive: !accountSelectorActive,
-                optionsMenuActive: false,
-              })
-            },
-          },
-          this.renderAccountSelector(),
-        ),
-        enableAccountOptions && h(
-          'i.fa.fa-ellipsis-h',
-          {
-            style: {
-              fontSize: '135%',
-              cursor: 'pointer',
-            },
-            onClick: (event) => {
-              event.stopPropagation()
-              this.setState({
-                accountSelectorActive: false,
-                optionsMenuActive: !optionsMenuActive,
-              })
-            },
-          },
-          this.renderAccountOptions()
-        ),
-      ]
-    )
-  }
-}
-
-AccountDropdowns.defaultProps = {
-  enableAccountsSelector: false,
-  enableAccountOptions: false,
-}
-
-AccountDropdowns.propTypes = {
-  identities: PropTypes.objectOf(PropTypes.object),
-  selected: PropTypes.string,
-  keyrings: PropTypes.array,
-  accounts: PropTypes.object,
-  menuItemStyles: PropTypes.object,
-  actions: PropTypes.object,
-  // actions.showAccountDetail: ,
-  useCssTransition: PropTypes.bool,
-  innerStyle: PropTypes.object,
-  sidebarOpen: PropTypes.bool,
-  dropdownWrapperStyle: PropTypes.string,
-  // actions.showAccountDetailModal: ,
-  network: PropTypes.number,
-  // actions.showExportPrivateKeyModal: ,
-  style: PropTypes.object,
-  ticker: PropTypes.string,
-  enableAccountsSelector: PropTypes.bool,
-  enableAccountOption: PropTypes.bool,
-  enableAccountOptions: PropTypes.bool,
-    t: PropTypes.func,
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    actions: {
-      hideSidebar: () => dispatch(actions.hideSidebar()),
-      showConfigPage: () => dispatch(actions.showConfigPage()),
-      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
-      showAccountDetailModal: () => {
-        dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-      },
-      showEditAccountModal: (identity) => {
-        dispatch(actions.showModal({
-          name: 'EDIT_ACCOUNT_NAME',
-          identity,
-        }))
-      },
-      showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })),
-      showExportPrivateKeyModal: () => {
-        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-      },
-      showAddTokenPage: () => {
-        dispatch(actions.showAddTokenPage())
-      },
-      addNewAccount: () => dispatch(actions.addNewAccount()),
-      showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })),
-      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    },
-  }
-}
-
-function mapStateToProps (state) {
-  return {
-    ticker: state.metamask.ticker,
-    keyrings: state.metamask.keyrings,
-    sidebarOpen: state.appState.sidebar.isOpen,
-  }
-}
-
-AccountDropdowns.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
-
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
deleted file mode 100644
index 90355a97c..000000000
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ /dev/null
@@ -1,378 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const actions = require('../../actions')
-const Dropdown = require('./components/dropdown').Dropdown
-const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
-const NetworkDropdownIcon = require('./components/network-dropdown-icon')
-const R = require('ramda')
-const { SETTINGS_ROUTE } = require('../../routes')
-
-// classes from nodes of the toggle element.
-const notToggleElementClassnames = [
-  'menu-icon',
-  'network-name',
-  'network-indicator',
-  'network-caret',
-  'network-component',
-]
-
-function mapStateToProps (state) {
-  return {
-    provider: state.metamask.provider,
-    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
-    networkDropdownOpen: state.appState.networkDropdownOpen,
-    network: state.metamask.network,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    setProviderType: (type) => {
-      dispatch(actions.setProviderType(type))
-    },
-    setDefaultRpcTarget: type => {
-      dispatch(actions.setDefaultRpcTarget(type))
-    },
-    setRpcTarget: (target, network, ticker, nickname) => {
-      dispatch(actions.setRpcTarget(target, network, ticker, nickname))
-    },
-    delRpcTarget: (target) => {
-      dispatch(actions.delRpcTarget(target))
-    },
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
-    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
-  }
-}
-
-
-inherits(NetworkDropdown, Component)
-function NetworkDropdown () {
-  Component.call(this)
-}
-
-NetworkDropdown.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(NetworkDropdown)
-
-
-// TODO: specify default props and proptypes
-NetworkDropdown.prototype.render = function () {
-  const props = this.props
-  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
-  const rpcListDetail = props.frequentRpcListDetail
-  const isOpen = this.props.networkDropdownOpen
-  const dropdownMenuItemStyle = {
-    fontSize: '16px',
-    lineHeight: '20px',
-    padding: '12px 0',
-  }
-
-  return h(Dropdown, {
-    isOpen,
-    onClickOutside: (event) => {
-      const { classList } = event.target
-      const isInClassList = className => classList.contains(className)
-      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
-
-      if (notToggleElementIndex === -1) {
-        this.props.hideNetworkDropdown()
-      }
-    },
-    containerClassName: 'network-droppo',
-    zIndex: 55,
-    style: {
-      position: 'absolute',
-      top: '58px',
-      width: '309px',
-      zIndex: '55px',
-    },
-    innerStyle: {
-      padding: '18px 8px',
-    },
-  }, [
-
-    h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, this.context.t('networks')),
-
-      h('div.network-dropdown-divider'),
-
-      h('div.network-dropdown-content',
-        {},
-        this.context.t('defaultNetwork')
-      ),
-    ]),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'main',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('mainnet'),
-        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
-      },
-      [
-        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#29B6AF', // $java
-          isSelected: providerType === 'mainnet',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('mainnet')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'ropsten',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('ropsten'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#ff4a8d', // $wild-strawberry
-          isSelected: providerType === 'ropsten',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('ropsten')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('kovan'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#7057ff', // $cornflower-blue
-          isSelected: providerType === 'kovan',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('kovan')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('rinkeby'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#f6c343', // $saffron
-          isSelected: providerType === 'rinkeby',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('rinkeby')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'default',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('localhost'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          isSelected: providerType === 'localhost',
-          innerBorder: '1px solid #9b9b9b',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('localhost')),
-      ]
-    ),
-
-    this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcListDetail, props.provider),
-
-    h(
-      DropdownMenuItem,
-      {
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.props.history.push(SETTINGS_ROUTE),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          isSelected: activeNetwork === 'custom',
-          innerBorder: '1px solid #9b9b9b',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('customRPC')),
-      ]
-    ),
-
-  ])
-}
-
-NetworkDropdown.prototype.handleClick = function (newProviderType) {
-  const { provider: { type: providerType }, setProviderType } = this.props
-  const { metricsEvent } = this.context
-
-  metricsEvent({
-    eventOpts: {
-      category: 'Navigation',
-      action: 'Home',
-      name: 'Switched Networks',
-    },
-    customVariables: {
-      fromNetwork: providerType,
-      toNetwork: newProviderType,
-    },
-  })
-  setProviderType(newProviderType)
-}
-
-NetworkDropdown.prototype.getNetworkName = function () {
-  const { provider } = this.props
-  const providerName = provider.type
-
-  let name
-
-  if (providerName === 'mainnet') {
-    name = this.context.t('mainnet')
-  } else if (providerName === 'ropsten') {
-    name = this.context.t('ropsten')
-  } else if (providerName === 'kovan') {
-    name = this.context.t('kovan')
-  } else if (providerName === 'rinkeby') {
-    name = this.context.t('rinkeby')
-  } else {
-    name = provider.nickname || this.context.t('unknownNetwork')
-  }
-
-  return name
-}
-
-NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
-  const props = this.props
-  const reversedRpcListDetail = rpcListDetail.slice().reverse()
-
-  return reversedRpcListDetail.map((entry) => {
-    const rpc = entry.rpcUrl
-    const ticker = entry.ticker || 'ETH'
-    const nickname = entry.nickname || ''
-    const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
-
-    if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
-      return null
-    } else {
-      const chainId = entry.chainId
-      return h(
-        DropdownMenuItem,
-        {
-          key: `common${rpc}`,
-          closeMenu: () => this.props.hideNetworkDropdown(),
-          onClick: () => props.setRpcTarget(rpc, chainId, ticker, nickname),
-          style: {
-            fontSize: '16px',
-            lineHeight: '20px',
-            padding: '12px 0',
-          },
-        },
-        [
-          currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
-          h('span.network-name-item', {
-            style: {
-              color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
-            },
-          }, nickname || rpc),
-          h('i.fa.fa-times.delete',
-          {
-            onClick: (e) => {
-              e.stopPropagation()
-              props.delRpcTarget(rpc)
-            },
-          }),
-        ]
-      )
-    }
-  })
-}
-
-NetworkDropdown.prototype.renderCustomOption = function (provider) {
-  const { rpcTarget, type, ticker, nickname } = provider
-  const props = this.props
-  const network = props.network
-
-  if (type !== 'rpc') return null
-
-  switch (rpcTarget) {
-
-    case 'http://localhost:8545':
-      return null
-
-    default:
-      return h(
-        DropdownMenuItem,
-        {
-          key: rpcTarget,
-          onClick: () => props.setRpcTarget(rpcTarget, network, ticker, nickname),
-          closeMenu: () => this.props.hideNetworkDropdown(),
-          style: {
-            fontSize: '16px',
-            lineHeight: '20px',
-            padding: '12px 0',
-          },
-        },
-        [
-          h('i.fa.fa-check'),
-          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
-          h('span.network-name-item', {
-            style: {
-              color: '#ffffff',
-            },
-          }, nickname || rpcTarget),
-        ]
-      )
-  }
-}
diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js
deleted file mode 100644
index 88ad56851..000000000
--- a/ui/app/components/dropdowns/tests/network-dropdown.test.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { createMockStore } from 'redux-test-utils'
-import { mountWithRouter } from '../../../../../test/lib/render-helpers'
-import NetworkDropdown from '../network-dropdown'
-import { DropdownMenuItem } from '../components/dropdown'
-import NetworkDropdownIcon from '../components/network-dropdown-icon'
-
-describe('Network Dropdown', () => {
-  let wrapper
-
-  describe('NetworkDropdown in appState in false', () => {
-    const mockState = {
-      metamask: {
-        provider: {
-          type: 'test',
-        },
-      },
-      appState: {
-        networkDropdown: false,
-      },
-    }
-
-    const store = createMockStore(mockState)
-
-    beforeEach(() => {
-      wrapper = mountWithRouter(
-        <NetworkDropdown store={store} />
-      )
-    })
-
-    it('checks for network droppo class', () => {
-      assert.equal(wrapper.find('.network-droppo').length, 1)
-    })
-
-    it('renders only one child when networkDropdown is false in state', () => {
-      assert.equal(wrapper.children().length, 1)
-    })
-
-  })
-
-  describe('NetworkDropdown in appState is true', () => {
-    const mockState = {
-      metamask: {
-        provider: {
-          'type': 'test',
-        },
-        frequentRpcListDetail: [
-          { rpcUrl: 'http://localhost:7545' },
-        ],
-      },
-      appState: {
-        'networkDropdownOpen': true,
-      },
-    }
-    const store = createMockStore(mockState)
-
-    beforeEach(() => {
-      wrapper = mountWithRouter(
-        <NetworkDropdown store={store}/>,
-      )
-    })
-
-    it('renders 7 DropDownMenuItems ', () => {
-      assert.equal(wrapper.find(DropdownMenuItem).length, 7)
-    })
-
-    it('checks background color for first NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main Ethereum Network Teal
-    })
-
-    it('checks background color for second NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(1).prop('backgroundColor'), '#ff4a8d') // Ropsten Red
-    })
-
-    it('checks background color for third NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(2).prop('backgroundColor'), '#7057ff') // Kovan Purple
-    })
-
-    it('checks background color for fourth NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow
-    })
-
-    it('checks background color for fifth NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
-    })
-
-    it('checks dropdown for frequestRPCList from  state ', () => {
-      assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
-    })
-
-    it('checks background color for sixth NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
-    })
-
-  })
-})
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
deleted file mode 100644
index 8a072b1bc..000000000
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const genAccountLink = require('etherscan-link').createAccountLink
-const { Menu, Item, CloseArea } = require('./components/menu')
-
-TokenMenuDropdown.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenMenuDropdown)
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showHideTokenConfirmationModal: (token) => {
-      dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
-    },
-  }
-}
-
-
-inherits(TokenMenuDropdown, Component)
-function TokenMenuDropdown () {
-  Component.call(this)
-
-  this.onClose = this.onClose.bind(this)
-}
-
-TokenMenuDropdown.prototype.onClose = function (e) {
-  e.stopPropagation()
-  this.props.onClose()
-}
-
-TokenMenuDropdown.prototype.render = function () {
-  const { showHideTokenConfirmationModal } = this.props
-
-  return h(Menu, { className: 'token-menu-dropdown', isShowing: true }, [
-    h(CloseArea, {
-      onClick: this.onClose,
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        showHideTokenConfirmationModal(this.props.token)
-        this.props.onClose()
-      },
-      text: this.context.t('hideToken'),
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
-        const url = genAccountLink(this.props.token.address, this.props.network)
-        global.platform.openWindow({ url })
-        this.props.onClose()
-      },
-      text: this.context.t('viewOnEtherscan'),
-    }),
-  ])
-}
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
deleted file mode 100644
index a9167e3b2..000000000
--- a/ui/app/components/ens-input.js
+++ /dev/null
@@ -1,181 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const extend = require('xtend')
-const debounce = require('debounce')
-const copyToClipboard = require('copy-to-clipboard')
-const ENS = require('ethjs-ens')
-const networkMap = require('ethjs-ens/lib/network-map.json')
-const ensRE = /.+\..+$/
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const connect = require('react-redux').connect
-const ToAutoComplete = require('./send/to-autocomplete').default
-const log = require('loglevel')
-const { isValidENSAddress } = require('../util')
-
-EnsInput.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(EnsInput)
-
-
-inherits(EnsInput, Component)
-function EnsInput () {
-  Component.call(this)
-}
-
-EnsInput.prototype.onChange = function (recipient) {
-
-  const network = this.props.network
-  const networkHasEnsSupport = getNetworkEnsSupport(network)
-
-  this.props.onChange({ toAddress: recipient })
-
-  if (!networkHasEnsSupport) return
-
-  if (recipient.match(ensRE) === null) {
-    return this.setState({
-      loadingEns: false,
-      ensResolution: null,
-      ensFailure: null,
-      toError: null,
-    })
-  }
-
-  this.setState({
-    loadingEns: true,
-  })
-  this.checkName(recipient)
-}
-
-EnsInput.prototype.render = function () {
-  const props = this.props
-  const opts = extend(props, {
-    list: 'addresses',
-    onChange: this.onChange.bind(this),
-    qrScanner: true,
-  })
-  return h('div', {
-    style: { width: '100%', position: 'relative' },
-  }, [
-    h(ToAutoComplete, { ...opts }),
-    this.ensIcon(),
-  ])
-}
-
-EnsInput.prototype.componentDidMount = function () {
-  const network = this.props.network
-  const networkHasEnsSupport = getNetworkEnsSupport(network)
-  this.setState({ ensResolution: ZERO_ADDRESS })
-
-  if (networkHasEnsSupport) {
-    const provider = global.ethereumProvider
-    this.ens = new ENS({ provider, network })
-    this.checkName = debounce(this.lookupEnsName.bind(this), 200)
-  }
-}
-
-EnsInput.prototype.lookupEnsName = function (recipient) {
-  const { ensResolution } = this.state
-
-  log.info(`ENS attempting to resolve name: ${recipient}`)
-  this.ens.lookup(recipient.trim())
-  .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
-    if (address !== ensResolution) {
-      this.setState({
-        loadingEns: false,
-        ensResolution: address,
-        nickname: recipient.trim(),
-        hoverText: address + '\n' + this.context.t('clickCopy'),
-        ensFailure: false,
-        toError: null,
-      })
-    }
-  })
-  .catch((reason) => {
-    const setStateObj = {
-      loadingEns: false,
-      ensResolution: recipient,
-      ensFailure: true,
-      toError: null,
-    }
-    if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') {
-      setStateObj.hoverText = this.context.t('ensNameNotFound')
-      setStateObj.toError = 'ensNameNotFound'
-      setStateObj.ensFailure = false
-    } else {
-      log.error(reason)
-      setStateObj.hoverText = reason.message
-    }
-
-    return this.setState(setStateObj)
-  })
-}
-
-EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
-  const state = this.state || {}
-  const ensResolution = state.ensResolution
-  // If an address is sent without a nickname, meaning not from ENS or from
-  // the user's own accounts, a default of a one-space string is used.
-  const nickname = state.nickname || ' '
-  if (prevProps.network !== this.props.network) {
-    const provider = global.ethereumProvider
-    this.ens = new ENS({ provider, network: this.props.network })
-    this.onChange(ensResolution)
-  }
-  if (prevState && ensResolution && this.props.onChange &&
-      ensResolution !== prevState.ensResolution) {
-    this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning })
-  }
-}
-
-EnsInput.prototype.ensIcon = function (recipient) {
-  const { hoverText } = this.state || {}
-  return h('span.#ensIcon', {
-    title: hoverText,
-    style: {
-      position: 'absolute',
-      top: '16px',
-      left: '-25px',
-    },
-  }, this.ensIconContents(recipient))
-}
-
-EnsInput.prototype.ensIconContents = function (recipient) {
-  const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS }
-
-  if (toError) return
-
-  if (loadingEns) {
-    return h('img', {
-      src: 'images/loading.svg',
-      style: {
-        width: '30px',
-        height: '30px',
-        transform: 'translateY(-6px)',
-      },
-    })
-  }
-
-  if (ensFailure) {
-    return h('i.fa.fa-warning.fa-lg.warning')
-  }
-
-  if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
-    return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
-      style: { color: 'green' },
-      onClick: (event) => {
-        event.preventDefault()
-        event.stopPropagation()
-        copyToClipboard(ensResolution)
-      },
-    })
-  }
-}
-
-function getNetworkEnsSupport (network) {
-  return Boolean(networkMap[network])
-}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
deleted file mode 100644
index 2f6395a2d..000000000
--- a/ui/app/components/eth-balance.js
+++ /dev/null
@@ -1,102 +0,0 @@
-const { Component } = require('react')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const { inherits } = require('util')
-const {
-  formatBalance,
-  generateBalanceObject,
-} = require('../util')
-const Tooltip = require('./tooltip.js')
-const FiatValue = require('./fiat-value.js')
-
-module.exports = connect(mapStateToProps)(EthBalanceComponent)
-function mapStateToProps (state) {
-  return {
-    ticker: state.metamask.ticker,
-  }
-}
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  const props = this.props
-  const { ticker, value, style, width, needsParse = true } = props
-
-  const formattedValue = value ? formatBalance(value, 6, needsParse, ticker) : '...'
-
-  return (
-
-    h('.ether-balance.ether-balance-amount', {
-      style,
-    }, [
-      h('div', {
-        style: {
-          display: 'inline',
-          width,
-        },
-      }, this.renderBalance(formattedValue)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value) {
-  if (value === 'None') return value
-  if (value === '...') return value
-
-  const {
-    conversionRate,
-    shorten,
-    incoming,
-    currentCurrency,
-    hideTooltip,
-    styleOveride = {},
-    showFiat = true,
-  } = this.props
-  const { fontSize, color, fontFamily, lineHeight } = styleOveride
-
-  const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
-  const balanceToRender = shorten ? shortBalance : balance
-
-  const [ethNumber, ethSuffix] = value.split(' ')
-  const containerProps = hideTooltip ? {} : {
-    position: 'bottom',
-    title: `${ethNumber} ${ethSuffix}`,
-  }
-
-  return (
-    h(hideTooltip ? 'div' : Tooltip,
-      containerProps,
-      h('div.flex-column', [
-        h('.flex-row', {
-          style: {
-            alignItems: 'flex-end',
-            lineHeight: lineHeight || '13px',
-            fontFamily: fontFamily || 'Montserrat Light',
-            textRendering: 'geometricPrecision',
-          },
-        }, [
-          h('div', {
-            style: {
-              width: '100%',
-              textAlign: 'right',
-              fontSize: fontSize || 'inherit',
-              color: color || 'inherit',
-            },
-          }, incoming ? `+${balanceToRender}` : balanceToRender),
-          h('div', {
-            style: {
-              color: color || '#AEAEAE',
-              fontSize: fontSize || '12px',
-              marginLeft: '5px',
-            },
-          }, label),
-        ]),
-
-        showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
-      ])
-    )
-  )
-}
diff --git a/ui/app/components/export-text-container/export-text-container.component.js b/ui/app/components/export-text-container/export-text-container.component.js
deleted file mode 100644
index c2546fa9b..000000000
--- a/ui/app/components/export-text-container/export-text-container.component.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const copyToClipboard = require('copy-to-clipboard')
-const { exportAsFile } = require('../../util')
-
-class ExportTextContainer extends Component {
-  render () {
-    const { text = '', filename = '' } = this.props
-    const { t } = this.context
-
-    return (
-      h('.export-text-container', [
-        h('.export-text-container__text-container', [
-          h('.export-text-container__text', text),
-        ]),
-        h('.export-text-container__buttons-container', [
-          h('.export-text-container__button.export-text-container__button--copy', {
-            onClick: () => copyToClipboard(text),
-          }, [
-            h('img', { src: 'images/copy-to-clipboard.svg' }),
-            h('.export-text-container__button-text', t('copyToClipboard')),
-          ]),
-          h('.export-text-container__button', {
-            onClick: () => exportAsFile(filename, text),
-          }, [
-            h('img', { src: 'images/download.svg' }),
-            h('.export-text-container__button-text', t('saveAsCsvFile')),
-          ]),
-        ]),
-      ])
-    )
-  }
-}
-
-ExportTextContainer.propTypes = {
-  text: PropTypes.string,
-  filename: PropTypes.string,
-}
-
-ExportTextContainer.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = ExportTextContainer
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
deleted file mode 100644
index 56465fc9d..000000000
--- a/ui/app/components/fiat-value.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const formatBalance = require('../util').formatBalance
-
-module.exports = FiatValue
-
-inherits(FiatValue, Component)
-function FiatValue () {
-  Component.call(this)
-}
-
-FiatValue.prototype.render = function () {
-  const props = this.props
-  const { conversionRate, currentCurrency, style } = props
-  const renderedCurrency = currentCurrency || ''
-
-  const value = formatBalance(props.value, 6)
-
-  if (value === 'None') return value
-  var fiatDisplayNumber, fiatTooltipNumber
-  var splitBalance = value.split(' ')
-
-  if (conversionRate !== 0) {
-    fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
-    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
-  } else {
-    fiatDisplayNumber = 'N/A'
-    fiatTooltipNumber = 'Unknown'
-  }
-
-  return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase(), style)
-}
-
-function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
-  const { fontSize, color, fontFamily, lineHeight } = styleOveride
-
-  if (fiatDisplayNumber !== 'N/A') {
-    return h('.flex-row', {
-      style: {
-        alignItems: 'flex-end',
-        lineHeight: lineHeight || '13px',
-        fontFamily: fontFamily || 'Montserrat Light',
-        textRendering: 'geometricPrecision',
-      },
-    }, [
-      h('div', {
-        style: {
-          width: '100%',
-          textAlign: 'right',
-          fontSize: fontSize || '12px',
-          color: color || '#333333',
-        },
-      }, fiatDisplayNumber),
-      h('div', {
-        style: {
-          color: color || '#AEAEAE',
-          marginLeft: '5px',
-          fontSize: fontSize || '12px',
-        },
-      }, fiatSuffix),
-    ])
-  } else {
-    return h('div')
-  }
-}
diff --git a/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js b/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
deleted file mode 100644
index a71d37b43..000000000
--- a/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { connect } from 'react-redux'
-import { showModal } from '../../../actions'
-import {
-  decGWEIToHexWEI,
-  decimalToHex,
-  hexWEIToDecGWEI,
-} from '../../../helpers/conversions.util'
-import AdvancedGasInputs from './advanced-gas-inputs.component'
-
-function convertGasPriceForInputs (gasPriceInHexWEI) {
-  return Number(hexWEIToDecGWEI(gasPriceInHexWEI))
-}
-
-function convertGasLimitForInputs (gasLimitInHexWEI) {
-  return parseInt(gasLimitInHexWEI, 16)
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    showGasPriceInfoModal: modalName => dispatch(showModal({ name: 'GAS_PRICE_INFO_MODAL' })),
-    showGasLimitInfoModal: modalName => dispatch(showModal({ name: 'GAS_LIMIT_INFO_MODAL' })),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const {customGasPrice, customGasLimit, updateCustomGasPrice, updateCustomGasLimit} = ownProps
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    customGasPrice: convertGasPriceForInputs(customGasPrice),
-    customGasLimit: convertGasLimitForInputs(customGasLimit),
-    updateCustomGasPrice: (price) => updateCustomGasPrice(decGWEIToHexWEI(price)),
-    updateCustomGasLimit: (limit) => updateCustomGasLimit(decimalToHex(limit)),
-  }
-}
-
-export default connect(null, mapDispatchToProps, mergeProps)(AdvancedGasInputs)
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
deleted file mode 100644
index a3a3f96d8..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Loading from '../../../loading-screen'
-import GasPriceChart from '../../gas-price-chart'
-import debounce from 'lodash.debounce'
-
-export default class AdvancedTabContent extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    updateCustomGasPrice: PropTypes.func,
-    updateCustomGasLimit: PropTypes.func,
-    customGasPrice: PropTypes.number,
-    customGasLimit: PropTypes.number,
-    gasEstimatesLoading: PropTypes.bool,
-    millisecondsRemaining: PropTypes.number,
-    transactionFee: PropTypes.string,
-    timeRemaining: PropTypes.string,
-    gasChartProps: PropTypes.object,
-    insufficientBalance: PropTypes.bool,
-    customPriceIsSafe: PropTypes.bool,
-    isSpeedUp: PropTypes.bool,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.debouncedGasLimitReset = debounce((dVal) => {
-      if (dVal < 21000) {
-        props.updateCustomGasLimit(21000)
-      }
-    }, 1000, { trailing: true })
-    this.onChangeGasLimit = (val) => {
-      props.updateCustomGasLimit(val)
-      this.debouncedGasLimitReset(val)
-    }
-  }
-
-  gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) {
-    const { t } = this.context
-    let errorText
-    let errorType
-    let isInError = true
-
-
-    if (insufficientBalance) {
-      errorText = t('insufficientBalance')
-      errorType = 'error'
-    } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) {
-      errorText = t('zeroGasPriceOnSpeedUpError')
-      errorType = 'error'
-    } else if (labelKey === 'gasPrice' && !customPriceIsSafe) {
-      errorText = t('gasPriceExtremelyLow')
-      errorType = 'warning'
-    } else {
-      isInError = false
-    }
-
-    return {
-      isInError,
-      errorText,
-      errorType,
-    }
-  }
-
-  gasInput ({ labelKey, value, onChange, insufficientBalance, showGWEI, customPriceIsSafe, isSpeedUp }) {
-    const {
-      isInError,
-      errorText,
-      errorType,
-    } = this.gasInputError({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value })
-
-    return (
-      <div className="advanced-tab__gas-edit-row__input-wrapper">
-        <input
-          className={classnames('advanced-tab__gas-edit-row__input', {
-            'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
-            'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
-          })}
-          type="number"
-          value={value}
-          onChange={event => onChange(Number(event.target.value))}
-        />
-        <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
-          'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
-          'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
-        })}>
-          <div
-            className="advanced-tab__gas-edit-row__input-arrows__i-wrap"
-            onClick={() => onChange(value + 1)}
-          >
-            <i className="fa fa-sm fa-angle-up" />
-          </div>
-          <div
-            className="advanced-tab__gas-edit-row__input-arrows__i-wrap"
-            onClick={() => onChange(Math.max(value - 1, 0))}
-          >
-            <i className="fa fa-sm fa-angle-down" />
-          </div>
-        </div>
-        { isInError
-          ? <div className={`advanced-tab__gas-edit-row__${errorType}-text`}>
-              { errorText }
-            </div>
-          : null }
-      </div>
-    )
-  }
-
-  infoButton (onClick) {
-    return <i className="fa fa-info-circle" onClick={onClick} />
-  }
-
-  renderDataSummary (transactionFee, timeRemaining) {
-    return (
-      <div className="advanced-tab__transaction-data-summary">
-        <div className="advanced-tab__transaction-data-summary__titles">
-          <span>{ this.context.t('newTransactionFee') }</span>
-          <span>~{ this.context.t('transactionTime') }</span>
-        </div>
-        <div className="advanced-tab__transaction-data-summary__container">
-          <div className="advanced-tab__transaction-data-summary__fee">
-            {transactionFee}
-          </div>
-          <div className="time-remaining">{timeRemaining}</div>
-        </div>
-      </div>
-    )
-  }
-
-  renderGasEditRow (gasInputArgs) {
-    return (
-      <div className="advanced-tab__gas-edit-row">
-        <div className="advanced-tab__gas-edit-row__label">
-          { this.context.t(gasInputArgs.labelKey) }
-          { this.infoButton(() => {}) }
-        </div>
-        { this.gasInput(gasInputArgs) }
-      </div>
-    )
-  }
-
-  renderGasEditRows ({
-    customGasPrice,
-    updateCustomGasPrice,
-    customGasLimit,
-    updateCustomGasLimit,
-    insufficientBalance,
-    customPriceIsSafe,
-    isSpeedUp,
-  }) {
-    return (
-      <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow({
-          labelKey: 'gasPrice',
-          value: customGasPrice,
-          onChange: updateCustomGasPrice,
-          insufficientBalance,
-          customPriceIsSafe,
-          showGWEI: true,
-          isSpeedUp,
-        }) }
-        { this.renderGasEditRow({
-          labelKey: 'gasLimit',
-          value: customGasLimit,
-          onChange: this.onChangeGasLimit,
-          insufficientBalance,
-          customPriceIsSafe,
-        }) }
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-    const {
-      updateCustomGasPrice,
-      updateCustomGasLimit,
-      timeRemaining,
-      customGasPrice,
-      customGasLimit,
-      insufficientBalance,
-      gasChartProps,
-      gasEstimatesLoading,
-      customPriceIsSafe,
-      isSpeedUp,
-      transactionFee,
-    } = this.props
-
-    return (
-      <div className="advanced-tab">
-        { this.renderDataSummary(transactionFee, timeRemaining) }
-        <div className="advanced-tab__fee-chart">
-          { this.renderGasEditRows({
-            customGasPrice,
-            updateCustomGasPrice,
-            customGasLimit,
-            updateCustomGasLimit,
-            insufficientBalance,
-            customPriceIsSafe,
-            isSpeedUp,
-          }) }
-          <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
-          {!gasEstimatesLoading
-            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
-            : <Loading />
-          }
-          <div className="advanced-tab__fee-chart__speed-buttons">
-            <span>{ t('slower') }</span>
-            <span>{ t('faster') }</span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
deleted file mode 100644
index 2500ee267..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ /dev/null
@@ -1,364 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../../lib/shallow-with-context'
-import sinon from 'sinon'
-import AdvancedTabContent from '../advanced-tab-content.component.js'
-
-import GasPriceChart from '../../../gas-price-chart'
-import Loading from '../../../../loading-screen'
-
-const propsMethodSpies = {
-  updateCustomGasPrice: sinon.spy(),
-  updateCustomGasLimit: sinon.spy(),
-}
-
-sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
-sinon.spy(AdvancedTabContent.prototype, 'gasInput')
-sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRows')
-sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
-sinon.spy(AdvancedTabContent.prototype, 'gasInputError')
-
-describe('AdvancedTabContent Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<AdvancedTabContent
-      updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
-      updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
-      customGasPrice={11}
-      customGasLimit={23456}
-      timeRemaining={21500}
-      transactionFee={'$0.25'}
-      insufficientBalance={false}
-      customPriceIsSafe={true}
-      isSpeedUp={false}
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.updateCustomGasPrice.resetHistory()
-    propsMethodSpies.updateCustomGasLimit.resetHistory()
-    AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
-    AdvancedTabContent.prototype.gasInput.resetHistory()
-    AdvancedTabContent.prototype.renderGasEditRows.resetHistory()
-    AdvancedTabContent.prototype.renderDataSummary.resetHistory()
-  })
-
-  describe('render()', () => {
-    it('should render the advanced-tab root node', () => {
-      assert(wrapper.hasClass('advanced-tab'))
-    })
-
-    it('should render the expected four children of the advanced-tab div', () => {
-      const advancedTabChildren = wrapper.children()
-      assert.equal(advancedTabChildren.length, 2)
-
-      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
-      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
-
-      const feeChartDiv = advancedTabChildren.at(1)
-
-      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
-      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
-      assert(feeChartDiv.childAt(2).is(GasPriceChart))
-      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
-    })
-
-    it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
-      wrapper.setProps({ gasEstimatesLoading: true })
-      const advancedTabChildren = wrapper.children()
-      assert.equal(advancedTabChildren.length, 2)
-
-      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
-      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
-
-      const feeChartDiv = advancedTabChildren.at(1)
-
-      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
-      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
-      assert(feeChartDiv.childAt(2).is(Loading))
-      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
-    })
-
-    it('should call renderDataSummary with the expected params', () => {
-      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
-      const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
-      assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
-    })
-
-    it('should call renderGasEditRows with the expected params', () => {
-      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
-      const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
-      assert.deepEqual(renderGasEditRowArgs, [{
-        customGasPrice: 11,
-        customGasLimit: 23456,
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
-        updateCustomGasLimit: propsMethodSpies.updateCustomGasLimit,
-        isSpeedUp: false,
-      }])
-    })
-  })
-
-  describe('renderDataSummary()', () => {
-    let dataSummary
-
-    beforeEach(() => {
-      dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining'))
-    })
-
-    it('should render the transaction-data-summary root node', () => {
-      assert(dataSummary.hasClass('advanced-tab__transaction-data-summary'))
-    })
-
-    it('should render titles of the data', () => {
-      const titlesNode = dataSummary.children().at(0)
-      assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles'))
-      assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee')
-      assert.equal(titlesNode.children().at(1).text(), '~transactionTime')
-    })
-
-    it('should render the data', () => {
-      const dataNode = dataSummary.children().at(1)
-      assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
-      assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
-      assert(dataNode.children().at(1).hasClass('time-remaining'))
-      assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining')
-    })
-  })
-
-  describe('renderGasEditRow()', () => {
-    let gasEditRow
-
-    beforeEach(() => {
-      AdvancedTabContent.prototype.gasInput.resetHistory()
-      gasEditRow = shallow(wrapper.instance().renderGasEditRow({
-        labelKey: 'mockLabelKey',
-        someArg: 'argA',
-      }))
-    })
-
-    it('should render the gas-edit-row root node', () => {
-      assert(gasEditRow.hasClass('advanced-tab__gas-edit-row'))
-    })
-
-    it('should render a label and an input', () => {
-      const gasEditRowChildren = gasEditRow.children()
-      assert.equal(gasEditRowChildren.length, 2)
-      assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label'))
-      assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper'))
-    })
-
-    it('should render the label key and info button', () => {
-      const gasRowLabelChildren = gasEditRow.children().at(0).children()
-      assert.equal(gasRowLabelChildren.length, 2)
-      assert(gasRowLabelChildren.at(0), 'mockLabelKey')
-      assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle'))
-    })
-
-    it('should call this.gasInput with the correct args', () => {
-      const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args
-      assert.deepEqual(gasInputSpyArgs[0], [ { labelKey: 'mockLabelKey', someArg: 'argA' } ])
-    })
-  })
-
-  describe('renderGasEditRows()', () => {
-    let gasEditRows
-    let tempOnChangeGasLimit
-
-    beforeEach(() => {
-      tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit
-      wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit'
-      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
-      gasEditRows = shallow(wrapper.instance().renderGasEditRows(
-        'mockGasPrice',
-        () => 'mockUpdateCustomGasPriceReturn',
-        'mockGasLimit',
-        () => 'mockUpdateCustomGasLimitReturn',
-        false
-      ))
-    })
-
-    afterEach(() => {
-      wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit
-    })
-
-    it('should render the gas-edit-rows root node', () => {
-      assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
-    })
-
-    it('should render two rows', () => {
-      const gasEditRowsChildren = gasEditRows.children()
-      assert.equal(gasEditRowsChildren.length, 2)
-      assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row'))
-      assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row'))
-    })
-
-    it('should call this.renderGasEditRow twice, with the expected args', () => {
-      const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
-      assert.equal(renderGasEditRowSpyArgs.length, 2)
-      assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [{
-        labelKey: 'gasPrice',
-        value: 'mockGasLimit',
-        onChange: () => 'mockOnChangeGasLimit',
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        showGWEI: true,
-      }].map(String))
-      assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [{
-        labelKey: 'gasPrice',
-        value: 'mockGasPrice',
-        onChange: () => 'mockUpdateCustomGasPriceReturn',
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        showGWEI: true,
-      }].map(String))
-    })
-  })
-
-  describe('infoButton()', () => {
-    let infoButton
-
-    beforeEach(() => {
-      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
-      infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn'))
-    })
-
-    it('should render the i element', () => {
-      assert(infoButton.hasClass('fa-info-circle'))
-    })
-
-    it('should pass the onClick argument to the i tag onClick prop', () => {
-      assert(infoButton.props().onClick(), 'mockOnClickReturn')
-    })
-  })
-
-  describe('gasInput()', () => {
-    let gasInput
-
-    beforeEach(() => {
-      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
-      AdvancedTabContent.prototype.gasInputError.resetHistory()
-      gasInput = shallow(wrapper.instance().gasInput({
-        labelKey: 'gasPrice',
-        value: 321,
-        onChange: value => value + 7,
-        insufficientBalance: false,
-        showGWEI: true,
-        customPriceIsSafe: true,
-        isSpeedUp: false,
-      }))
-    })
-
-    it('should render the input-wrapper root node', () => {
-      assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
-    })
-
-    it('should render two children, including an input', () => {
-      assert.equal(gasInput.children().length, 2)
-      assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
-    })
-
-    it('should call the passed onChange method with the value of the input onChange event', () => {
-      const inputOnChange = gasInput.find('input').props().onChange
-      assert.equal(inputOnChange({ target: { value: 8} }), 15)
-    })
-
-    it('should have two input arrows', () => {
-      const upArrow = gasInput.find('.fa-angle-up')
-      assert.equal(upArrow.length, 1)
-      const downArrow = gasInput.find('.fa-angle-down')
-      assert.equal(downArrow.length, 1)
-    })
-
-    it('should call onChange with the value incremented decremented when its onchange method is called', () => {
-      const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0)
-      assert.equal(upArrow.props().onClick(), 329)
-      const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1)
-      assert.equal(downArrow.props().onClick(), 327)
-    })
-
-    it('should call gasInputError with the expected params', () => {
-      assert.equal(AdvancedTabContent.prototype.gasInputError.callCount, 1)
-      const gasInputErrorArgs = AdvancedTabContent.prototype.gasInputError.getCall(0).args
-      assert.deepEqual(gasInputErrorArgs, [{
-        labelKey: 'gasPrice',
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        value: 321,
-        isSpeedUp: false,
-      }])
-    })
-  })
-
-  describe('gasInputError()', () => {
-    let gasInputError
-
-    beforeEach(() => {
-      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
-      gasInputError = wrapper.instance().gasInputError({
-        labelKey: '',
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        isSpeedUp: false,
-      })
-    })
-
-    it('should return an insufficientBalance error', () => {
-      const gasInputError = wrapper.instance().gasInputError({
-        labelKey: 'gasPrice',
-        insufficientBalance: true,
-        customPriceIsSafe: true,
-        isSpeedUp: false,
-        value: 1,
-      })
-      assert.deepEqual(gasInputError, {
-        isInError: true,
-        errorText: 'insufficientBalance',
-        errorType: 'error',
-      })
-    })
-
-    it('should return a zero gas on retry error', () => {
-      const gasInputError = wrapper.instance().gasInputError({
-        labelKey: 'gasPrice',
-        insufficientBalance: false,
-        customPriceIsSafe: false,
-        isSpeedUp: true,
-        value: 0,
-      })
-      assert.deepEqual(gasInputError, {
-        isInError: true,
-        errorText: 'zeroGasPriceOnSpeedUpError',
-        errorType: 'error',
-      })
-    })
-
-    it('should return a low gas warning', () => {
-      const gasInputError = wrapper.instance().gasInputError({
-        labelKey: 'gasPrice',
-        insufficientBalance: false,
-        customPriceIsSafe: false,
-        isSpeedUp: false,
-        value: 1,
-      })
-      assert.deepEqual(gasInputError, {
-        isInError: true,
-        errorText: 'gasPriceExtremelyLow',
-        errorType: 'warning',
-      })
-    })
-
-    it('should return isInError false if there is no error', () => {
-      gasInputError = wrapper.instance().gasInputError({
-        labelKey: 'gasPrice',
-        insufficientBalance: false,
-        customPriceIsSafe: true,
-        value: 1,
-      })
-      assert.equal(gasInputError.isInError, false)
-    })
-  })
-
-})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
deleted file mode 100644
index d8490272f..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../../../lib/shallow-with-context'
-import TimeRemaining from '../time-remaining.component.js'
-
-describe('TimeRemaining Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<TimeRemaining
-      milliseconds={495000}
-    />)
-  })
-
-  describe('render()', () => {
-    it('should render the time-remaining root node', () => {
-      assert(wrapper.hasClass('time-remaining'))
-    })
-
-    it('should render minutes and seconds numbers and labels', () => {
-      const timeRemainingChildren = wrapper.children()
-      assert.equal(timeRemainingChildren.length, 4)
-      assert.equal(timeRemainingChildren.at(0).text(), 8)
-      assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
-      assert.equal(timeRemainingChildren.at(2).text(), 15)
-      assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
-    })
-  })
-
-})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
deleted file mode 100644
index 05b8f700b..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Loading from '../../../loading-screen'
-import GasPriceButtonGroup from '../../gas-price-button-group'
-
-export default class BasicTabContent extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    gasPriceButtonGroupProps: PropTypes.object,
-  }
-
-  render () {
-    const { t } = this.context
-    const { gasPriceButtonGroupProps } = this.props
-
-    return (
-      <div className="basic-tab-content">
-        <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
-        <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
-        {!gasPriceButtonGroupProps.loading
-            ? <GasPriceButtonGroup
-              className="gas-price-button-group--alt"
-              showCheck={true}
-              {...gasPriceButtonGroupProps}
-            />
-            : <Loading />
-        }
-        <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
deleted file mode 100644
index 47864fcab..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../../lib/shallow-with-context'
-import BasicTabContent from '../basic-tab-content.component'
-
-import GasPriceButtonGroup from '../../../gas-price-button-group/'
-import Loading from '../../../../loading-screen'
-
-const mockGasPriceButtonGroupProps = {
-  buttonDataLoading: false,
-  className: 'gas-price-button-group',
-  gasButtonInfo: [
-    {
-      feeInPrimaryCurrency: '$0.52',
-      feeInSecondaryCurrency: '0.0048 ETH',
-      timeEstimate: '~ 1 min 0 sec',
-      priceInHexWei: '0xa1b2c3f',
-    },
-    {
-      feeInPrimaryCurrency: '$0.39',
-      feeInSecondaryCurrency: '0.004 ETH',
-      timeEstimate: '~ 1 min 30 sec',
-      priceInHexWei: '0xa1b2c39',
-    },
-    {
-      feeInPrimaryCurrency: '$0.30',
-      feeInSecondaryCurrency: '0.00354 ETH',
-      timeEstimate: '~ 2 min 1 sec',
-      priceInHexWei: '0xa1b2c30',
-    },
-  ],
-  handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
-  noButtonActiveByDefault: true,
-  showCheck: true,
-}
-
-describe('BasicTabContent Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<BasicTabContent
-      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-    />)
-  })
-
-  describe('render', () => {
-    it('should have a title', () => {
-      assert(wrapper.find('.basic-tab-content').childAt(0).hasClass('basic-tab-content__title'))
-    })
-
-    it('should render a GasPriceButtonGroup compenent', () => {
-      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
-    })
-
-    it('should pass correct props to GasPriceButtonGroup', () => {
-      const {
-        buttonDataLoading,
-        className,
-        gasButtonInfo,
-        handleGasPriceSelection,
-        noButtonActiveByDefault,
-        showCheck,
-      } = wrapper.find(GasPriceButtonGroup).props()
-      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
-      assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading)
-      assert.equal(className, mockGasPriceButtonGroupProps.className)
-      assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault)
-      assert.equal(showCheck, mockGasPriceButtonGroupProps.showCheck)
-      assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo)
-      assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection))
-    })
-
-    it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => {
-      wrapper.setProps({
-        gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true },
-      })
-
-      assert.equal(wrapper.find(GasPriceButtonGroup).length, 0)
-      assert.equal(wrapper.find(Loading).length, 1)
-    })
-  })
-})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
deleted file mode 100644
index 174bd8ea8..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainer from '../../page-container'
-import { Tabs, Tab } from '../../tabs'
-import AdvancedTabContent from './advanced-tab-content'
-import BasicTabContent from './basic-tab-content'
-
-export default class GasModalPageContainer extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    hideModal: PropTypes.func,
-    hideBasic: PropTypes.bool,
-    updateCustomGasPrice: PropTypes.func,
-    updateCustomGasLimit: PropTypes.func,
-    customGasPrice: PropTypes.number,
-    customGasLimit: PropTypes.number,
-    fetchBasicGasAndTimeEstimates: PropTypes.func,
-    fetchGasEstimates: PropTypes.func,
-    gasPriceButtonGroupProps: PropTypes.object,
-    infoRowProps: PropTypes.shape({
-      originalTotalFiat: PropTypes.string,
-      originalTotalEth: PropTypes.string,
-      newTotalFiat: PropTypes.string,
-      newTotalEth: PropTypes.string,
-    }),
-    onSubmit: PropTypes.func,
-    customModalGasPriceInHex: PropTypes.string,
-    customModalGasLimitInHex: PropTypes.string,
-    cancelAndClose: PropTypes.func,
-    transactionFee: PropTypes.string,
-    blockTime: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    customPriceIsSafe: PropTypes.bool,
-    isSpeedUp: PropTypes.bool,
-    disableSave: PropTypes.bool,
-  }
-
-  state = {}
-
-  componentDidMount () {
-    const promise = this.props.hideBasic
-      ? Promise.resolve(this.props.blockTime)
-      : this.props.fetchBasicGasAndTimeEstimates()
-          .then(basicEstimates => basicEstimates.blockTime)
-
-    promise
-      .then(blockTime => {
-        this.props.fetchGasEstimates(blockTime)
-      })
-  }
-
-  renderBasicTabContent (gasPriceButtonGroupProps) {
-    return (
-      <BasicTabContent
-        gasPriceButtonGroupProps={gasPriceButtonGroupProps}
-      />
-    )
-  }
-
-  renderAdvancedTabContent ({
-    convertThenUpdateCustomGasPrice,
-    convertThenUpdateCustomGasLimit,
-    customGasPrice,
-    customGasLimit,
-    newTotalFiat,
-    gasChartProps,
-    currentTimeEstimate,
-    insufficientBalance,
-    gasEstimatesLoading,
-    customPriceIsSafe,
-    isSpeedUp,
-    transactionFee,
-  }) {
-    return (
-      <AdvancedTabContent
-        updateCustomGasPrice={convertThenUpdateCustomGasPrice}
-        updateCustomGasLimit={convertThenUpdateCustomGasLimit}
-        customGasPrice={customGasPrice}
-        customGasLimit={customGasLimit}
-        timeRemaining={currentTimeEstimate}
-        transactionFee={transactionFee}
-        totalFee={newTotalFiat}
-        gasChartProps={gasChartProps}
-        insufficientBalance={insufficientBalance}
-        gasEstimatesLoading={gasEstimatesLoading}
-        customPriceIsSafe={customPriceIsSafe}
-        isSpeedUp={isSpeedUp}
-      />
-    )
-  }
-
-  renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) {
-    return (
-      <div className="gas-modal-content__info-row-wrapper">
-        <div className="gas-modal-content__info-row">
-          <div className="gas-modal-content__info-row__send-info">
-            <span className="gas-modal-content__info-row__send-info__label">{this.context.t('sendAmount')}</span>
-            <span className="gas-modal-content__info-row__send-info__value">{sendAmount}</span>
-          </div>
-          <div className="gas-modal-content__info-row__transaction-info">
-            <span className={'gas-modal-content__info-row__transaction-info__label'}>{this.context.t('transactionFee')}</span>
-            <span className="gas-modal-content__info-row__transaction-info__value">{transactionFee}</span>
-          </div>
-          <div className="gas-modal-content__info-row__total-info">
-            <span className="gas-modal-content__info-row__total-info__label">{this.context.t('newTotal')}</span>
-            <span className="gas-modal-content__info-row__total-info__value">{newTotalEth}</span>
-          </div>
-          <div className="gas-modal-content__info-row__fiat-total-info">
-            <span className="gas-modal-content__info-row__fiat-total-info__value">{newTotalFiat}</span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderTabs ({
-    originalTotalFiat,
-    originalTotalEth,
-    newTotalFiat,
-    newTotalEth,
-    sendAmount,
-    transactionFee,
-  },
-  {
-    gasPriceButtonGroupProps,
-    hideBasic,
-    ...advancedTabProps
-  }) {
-    let tabsToRender = [
-      { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
-      { name: 'advanced', content: this.renderAdvancedTabContent({ transactionFee, ...advancedTabProps }) },
-    ]
-
-    if (hideBasic) {
-      tabsToRender = tabsToRender.slice(1)
-    }
-
-    return (
-      <Tabs>
-        {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
-            <div className="gas-modal-content">
-              { content }
-              { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
-            </div>
-          </Tab>
-        )}
-      </Tabs>
-    )
-  }
-
-  render () {
-    const {
-      cancelAndClose,
-      infoRowProps,
-      onSubmit,
-      customModalGasPriceInHex,
-      customModalGasLimitInHex,
-      disableSave,
-      ...tabProps
-    } = this.props
-
-    return (
-      <div className="gas-modal-page-container">
-        <PageContainer
-          title={this.context.t('customGas')}
-          subtitle={this.context.t('customGasSubTitle')}
-          tabsComponent={this.renderTabs(infoRowProps, tabProps)}
-          disabled={disableSave}
-          onCancel={() => cancelAndClose()}
-          onClose={() => cancelAndClose()}
-          onSubmit={() => {
-            onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
-          }}
-          submitText={this.context.t('save')}
-          headerCloseText={'Close'}
-          hideCancel={true}
-        />
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
deleted file mode 100644
index 6692fb363..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import { connect } from 'react-redux'
-import { pipe, partialRight } from 'ramda'
-import GasModalPageContainer from './gas-modal-page-container.component'
-import {
-  hideModal,
-  setGasLimit,
-  setGasPrice,
-  createSpeedUpTransaction,
-  hideSidebar,
-} from '../../../actions'
-import {
-  setCustomGasPrice,
-  setCustomGasLimit,
-  resetCustomData,
-  setCustomTimeEstimate,
-  fetchGasEstimates,
-  fetchBasicGasAndTimeEstimates,
-} from '../../../ducks/gas.duck'
-import {
-  hideGasButtonGroup,
-} from '../../../ducks/send.duck'
-import {
-  updateGasAndCalculate,
-} from '../../../ducks/confirm-transaction.duck'
-import {
-  getCurrentCurrency,
-  conversionRateSelector as getConversionRate,
-  getSelectedToken,
-  getCurrentEthBalance,
-} from '../../../selectors.js'
-import {
-  formatTimeEstimate,
-  getFastPriceEstimateInHexWEI,
-  getBasicGasEstimateLoadingStatus,
-  getGasEstimatesLoadingStatus,
-  getCustomGasLimit,
-  getCustomGasPrice,
-  getDefaultActiveButtonIndex,
-  getEstimatedGasPrices,
-  getEstimatedGasTimes,
-  getRenderableBasicEstimateData,
-  getBasicGasEstimateBlockTime,
-  isCustomPriceSafe,
-} from '../../../selectors/custom-gas'
-import {
-  submittedPendingTransactionsSelector,
-} from '../../../selectors/transactions'
-import {
-  formatCurrency,
-} from '../../../helpers/confirm-transaction/util'
-import {
-  addHexWEIsToDec,
-  decEthToConvertedCurrency as ethTotalToConvertedCurrency,
-  decGWEIToHexWEI,
-  hexWEIToDecGWEI,
-} from '../../../helpers/conversions.util'
-import {
-  formatETHFee,
-} from '../../../helpers/formatters'
-import {
-  calcGasTotal,
-  isBalanceSufficient,
-} from '../../send/send.utils'
-import { addHexPrefix } from 'ethereumjs-util'
-import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
-import {getIsMainnet, preferencesSelector} from '../../../selectors'
-
-const mapStateToProps = (state, ownProps) => {
-  const { transaction = {} } = ownProps
-  const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
-  const gasEstimatesLoading = getGasEstimatesLoadingStatus(state)
-
-  const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
-  const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
-  const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
-  const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
-
-  const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
-
-  const gasButtonInfo = getRenderableBasicEstimateData(state, customModalGasLimitInHex)
-
-  const currentCurrency = getCurrentCurrency(state)
-  const conversionRate = getConversionRate(state)
-
-  const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
-
-  const hideBasic = state.appState.modal.modalState.props.hideBasic
-
-  const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
-
-  const gasPrices = getEstimatedGasPrices(state)
-  const estimatedTimes = getEstimatedGasTimes(state)
-  const balance = getCurrentEthBalance(state)
-
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-  const showFiat = Boolean(isMainnet || showFiatInTestnets)
-
-  const insufficientBalance = !isBalanceSufficient({
-    amount: value,
-    gasTotal,
-    balance,
-    conversionRate,
-  })
-
-  return {
-    hideBasic,
-    isConfirm: isConfirm(state),
-    customModalGasPriceInHex,
-    customModalGasLimitInHex,
-    customGasPrice,
-    customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
-    newTotalFiat,
-    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
-    blockTime: getBasicGasEstimateBlockTime(state),
-    customPriceIsSafe: isCustomPriceSafe(state),
-    gasPriceButtonGroupProps: {
-      buttonDataLoading,
-      defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
-      gasButtonInfo,
-    },
-    gasChartProps: {
-      currentPrice: customGasPrice,
-      gasPrices,
-      estimatedTimes,
-      gasPricesMax: gasPrices[gasPrices.length - 1],
-      estimatedTimesMax: estimatedTimes[0],
-    },
-    infoRowProps: {
-      originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
-      originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
-      newTotalFiat: showFiat ? newTotalFiat : '',
-      newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
-      transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
-      sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
-    },
-    isSpeedUp: transaction.status === 'submitted',
-    txId: transaction.id,
-    insufficientBalance,
-    gasEstimatesLoading,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
-
-  return {
-    cancelAndClose: () => {
-      dispatch(resetCustomData())
-      dispatch(hideModal())
-    },
-    hideModal: () => dispatch(hideModal()),
-    updateCustomGasPrice,
-    convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
-    convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
-    setGasData: (newLimit, newPrice) => {
-      dispatch(setGasLimit(newLimit))
-      dispatch(setGasPrice(newPrice))
-    },
-    updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
-      updateCustomGasPrice(gasPrice)
-      dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))))
-      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
-    },
-    createSpeedUpTransaction: (txId, gasPrice) => {
-      return dispatch(createSpeedUpTransaction(txId, gasPrice))
-    },
-    hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
-    setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)),
-    hideSidebar: () => dispatch(hideSidebar()),
-    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
-    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { gasPriceButtonGroupProps, isConfirm, txId, isSpeedUp, insufficientBalance, customGasPrice } = stateProps
-  const {
-    updateCustomGasPrice: dispatchUpdateCustomGasPrice,
-    hideGasButtonGroup: dispatchHideGasButtonGroup,
-    setGasData: dispatchSetGasData,
-    updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
-    createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
-    hideSidebar: dispatchHideSidebar,
-    cancelAndClose: dispatchCancelAndClose,
-    hideModal: dispatchHideModal,
-    ...otherDispatchProps
-  } = dispatchProps
-
-  return {
-    ...stateProps,
-    ...otherDispatchProps,
-    ...ownProps,
-    onSubmit: (gasLimit, gasPrice) => {
-      if (isConfirm) {
-        dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice)
-        dispatchHideModal()
-      } else if (isSpeedUp) {
-        dispatchCreateSpeedUpTransaction(txId, gasPrice)
-        dispatchHideSidebar()
-        dispatchCancelAndClose()
-      } else {
-        dispatchSetGasData(gasLimit, gasPrice)
-        dispatchHideGasButtonGroup()
-        dispatchCancelAndClose()
-      }
-    },
-    gasPriceButtonGroupProps: {
-      ...gasPriceButtonGroupProps,
-      handleGasPriceSelection: dispatchUpdateCustomGasPrice,
-    },
-    cancelAndClose: () => {
-      dispatchCancelAndClose()
-      if (isSpeedUp) {
-        dispatchHideSidebar()
-      }
-    },
-    disableSave: insufficientBalance || (isSpeedUp && customGasPrice === 0),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer)
-
-function isConfirm (state) {
-  return Boolean(Object.keys(state.confirmTransaction.txData).length)
-}
-
-function calcCustomGasPrice (customGasPriceInHex) {
-  return Number(hexWEIToDecGWEI(customGasPriceInHex))
-}
-
-function calcCustomGasLimit (customGasLimitInHex) {
-  return parseInt(customGasLimitInHex, 16)
-}
-
-function getTxParams (state, transactionId) {
-  const { confirmTransaction: { txData }, metamask: { send } } = state
-  const pendingTransactions = submittedPendingTransactionsSelector(state)
-  const pendingTransaction = pendingTransactions.find(({ id }) => id === transactionId)
-  const { txParams: pendingTxParams } = pendingTransaction || {}
-  return txData.txParams || pendingTxParams || {
-    from: send.from,
-    gas: send.gasLimit || '0x5208',
-    gasPrice: send.gasPrice || getFastPriceEstimateInHexWEI(state, true),
-    to: send.to,
-    value: getSelectedToken(state) ? '0x0' : send.amount,
-  }
-}
-
-function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
-  return pipe(
-    addHexWEIsToDec,
-    formatETHFee
-  )(aHexWEI, bHexWEI)
-}
-
-function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
-  return pipe(
-    addHexWEIsToDec,
-    partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]),
-    partialRight(formatCurrency, [convertedCurrency]),
-  )(aHexWEI, bHexWEI)
-}
-
-function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
-  const minGasPrice = gasPrices[0]
-  const maxGasPrice = gasPrices[gasPrices.length - 1]
-  let priceForEstimation = currentGasPrice
-  if (currentGasPrice < minGasPrice) {
-    priceForEstimation = minGasPrice
-  } else if (currentGasPrice > maxGasPrice) {
-    priceForEstimation = maxGasPrice
-  }
-
-  const {
-    closestLowerValueIndex,
-    closestHigherValueIndex,
-    closestHigherValue,
-    closestLowerValue,
-  } = getAdjacentGasPrices({ gasPrices, priceToPosition: priceForEstimation })
-
-  const newTimeEstimate = extrapolateY({
-    higherY: estimatedTimes[closestHigherValueIndex],
-    lowerY: estimatedTimes[closestLowerValueIndex],
-    higherX: closestHigherValue,
-    lowerX: closestLowerValue,
-    xForExtrapolation: priceForEstimation,
-  })
-
-  return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice)
-}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
deleted file mode 100644
index 1761ad2b0..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
+++ /dev/null
@@ -1,274 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../lib/shallow-with-context'
-import sinon from 'sinon'
-import GasModalPageContainer from '../gas-modal-page-container.component.js'
-import timeout from '../../../../../lib/test-timeout'
-
-import PageContainer from '../../../page-container'
-
-import { Tab } from '../../../tabs'
-
-const mockBasicGasEstimates = {
-  blockTime: 'mockBlockTime',
-}
-
-const propsMethodSpies = {
-  cancelAndClose: sinon.spy(),
-  onSubmit: sinon.spy(),
-  fetchBasicGasAndTimeEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
-  fetchGasEstimates: sinon.spy(),
-}
-
-const mockGasPriceButtonGroupProps = {
-  buttonDataLoading: false,
-  className: 'gas-price-button-group',
-  gasButtonInfo: [
-    {
-      feeInPrimaryCurrency: '$0.52',
-      feeInSecondaryCurrency: '0.0048 ETH',
-      timeEstimate: '~ 1 min 0 sec',
-      priceInHexWei: '0xa1b2c3f',
-    },
-    {
-      feeInPrimaryCurrency: '$0.39',
-      feeInSecondaryCurrency: '0.004 ETH',
-      timeEstimate: '~ 1 min 30 sec',
-      priceInHexWei: '0xa1b2c39',
-    },
-    {
-      feeInPrimaryCurrency: '$0.30',
-      feeInSecondaryCurrency: '0.00354 ETH',
-      timeEstimate: '~ 2 min 1 sec',
-      priceInHexWei: '0xa1b2c30',
-    },
-  ],
-  handleGasPriceSelection: 'mockSelectionFunction',
-  noButtonActiveByDefault: true,
-  showCheck: true,
-  newTotalFiat: 'mockNewTotalFiat',
-  newTotalEth: 'mockNewTotalEth',
-}
-const mockInfoRowProps = {
-  originalTotalFiat: 'mockOriginalTotalFiat',
-  originalTotalEth: 'mockOriginalTotalEth',
-  newTotalFiat: 'mockNewTotalFiat',
-  newTotalEth: 'mockNewTotalEth',
-  sendAmount: 'mockSendAmount',
-  transactionFee: 'mockTransactionFee',
-}
-
-const GP = GasModalPageContainer.prototype
-describe('GasModalPageContainer Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<GasModalPageContainer
-      cancelAndClose={propsMethodSpies.cancelAndClose}
-      onSubmit={propsMethodSpies.onSubmit}
-      fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
-      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
-      updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
-      customGasPrice={21}
-      customGasLimit={54321}
-      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-      infoRowProps={mockInfoRowProps}
-      currentTimeEstimate={'1 min 31 sec'}
-      customGasPriceInHex={'mockCustomGasPriceInHex'}
-      customGasLimitInHex={'mockCustomGasLimitInHex'}
-      insufficientBalance={false}
-      disableSave={false}
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.cancelAndClose.resetHistory()
-  })
-
-  describe('componentDidMount', () => {
-    it('should call props.fetchBasicGasAndTimeEstimates', () => {
-      propsMethodSpies.fetchBasicGasAndTimeEstimates.resetHistory()
-      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 0)
-      wrapper.instance().componentDidMount()
-      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 1)
-    })
-
-    it('should call props.fetchGasEstimates with the block time returned by fetchBasicGasAndTimeEstimates', async () => {
-      propsMethodSpies.fetchGasEstimates.resetHistory()
-      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
-      wrapper.instance().componentDidMount()
-      await timeout(250)
-      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
-      assert.equal(propsMethodSpies.fetchGasEstimates.getCall(0).args[0], 'mockBlockTime')
-    })
-  })
-
-  describe('render', () => {
-    it('should render a PageContainer compenent', () => {
-      assert.equal(wrapper.find(PageContainer).length, 1)
-    })
-
-    it('should pass correct props to PageContainer', () => {
-      const {
-        title,
-        subtitle,
-        disabled,
-      } = wrapper.find(PageContainer).props()
-      assert.equal(title, 'customGas')
-      assert.equal(subtitle, 'customGasSubTitle')
-      assert.equal(disabled, false)
-    })
-
-    it('should pass the correct onCancel and onClose methods to PageContainer', () => {
-      const {
-        onCancel,
-        onClose,
-      } = wrapper.find(PageContainer).props()
-      assert.equal(propsMethodSpies.cancelAndClose.callCount, 0)
-      onCancel()
-      assert.equal(propsMethodSpies.cancelAndClose.callCount, 1)
-      onClose()
-      assert.equal(propsMethodSpies.cancelAndClose.callCount, 2)
-    })
-
-    it('should pass the correct renderTabs property to PageContainer', () => {
-      sinon.stub(GP, 'renderTabs').returns('mockTabs')
-      const renderTabsWrapperTester = shallow(<GasModalPageContainer
-        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
-        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
-      const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
-      assert.equal(tabsComponent, 'mockTabs')
-      GasModalPageContainer.prototype.renderTabs.restore()
-    })
-  })
-
-  describe('renderTabs', () => {
-    beforeEach(() => {
-      sinon.spy(GP, 'renderBasicTabContent')
-      sinon.spy(GP, 'renderAdvancedTabContent')
-      sinon.spy(GP, 'renderInfoRows')
-    })
-
-    afterEach(() => {
-      GP.renderBasicTabContent.restore()
-      GP.renderAdvancedTabContent.restore()
-      GP.renderInfoRows.restore()
-    })
-
-    it('should render a Tabs component with "Basic" and "Advanced" tabs', () => {
-      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
-        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
-        otherProps: 'mockAdvancedTabProps',
-      })
-      const renderedTabs = shallow(renderTabsResult)
-      assert.equal(renderedTabs.props().className, 'tabs')
-
-      const tabs = renderedTabs.find(Tab)
-      assert.equal(tabs.length, 2)
-
-      assert.equal(tabs.at(0).props().name, 'basic')
-      assert.equal(tabs.at(1).props().name, 'advanced')
-
-      assert.equal(tabs.at(0).childAt(0).props().className, 'gas-modal-content')
-      assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content')
-    })
-
-    it('should call renderBasicTabContent and renderAdvancedTabContent with the expected props', () => {
-      assert.equal(GP.renderBasicTabContent.callCount, 0)
-      assert.equal(GP.renderAdvancedTabContent.callCount, 0)
-
-      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
-
-      assert.equal(GP.renderBasicTabContent.callCount, 1)
-      assert.equal(GP.renderAdvancedTabContent.callCount, 1)
-
-      assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
-      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { transactionFee: 'mockTransactionFee', otherProps: 'mockAdvancedTabProps' })
-    })
-
-    it('should call renderInfoRows with the expected props', () => {
-      assert.equal(GP.renderInfoRows.callCount, 0)
-
-      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
-
-      assert.equal(GP.renderInfoRows.callCount, 2)
-
-      assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
-      assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
-    })
-
-    it('should not render the basic tab if hideBasic is true', () => {
-      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
-        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
-        otherProps: 'mockAdvancedTabProps',
-        hideBasic: true,
-      })
-
-      const renderedTabs = shallow(renderTabsResult)
-      const tabs = renderedTabs.find(Tab)
-      assert.equal(tabs.length, 1)
-      assert.equal(tabs.at(0).props().name, 'advanced')
-    })
-  })
-
-  describe('renderBasicTabContent', () => {
-    it('should render', () => {
-      const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps)
-
-      assert.deepEqual(
-        renderBasicTabContentResult.props.gasPriceButtonGroupProps,
-        mockGasPriceButtonGroupProps
-      )
-    })
-  })
-
-  describe('renderAdvancedTabContent', () => {
-    it('should render with the correct props', () => {
-      const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({
-        convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice',
-        convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit',
-        customGasPrice: 123,
-        customGasLimit: 456,
-        newTotalFiat: '$0.30',
-        currentTimeEstimate: '1 min 31 sec',
-        gasEstimatesLoading: 'mockGasEstimatesLoading',
-      })
-      const advancedTabContentProps = renderAdvancedTabContentResult.props
-      assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
-      assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit')
-      assert.equal(advancedTabContentProps.customGasPrice, 123)
-      assert.equal(advancedTabContentProps.customGasLimit, 456)
-      assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec')
-      assert.equal(advancedTabContentProps.totalFee, '$0.30')
-      assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading')
-    })
-  })
-
-  describe('renderInfoRows', () => {
-    it('should render the info rows with the passed data', () => {
-      const baseClassName = 'gas-modal-content__info-row'
-      const renderedInfoRowsContainer = shallow(wrapper.instance().renderInfoRows(
-        'mockNewTotalFiat',
-        ' mockNewTotalEth',
-        ' mockSendAmount',
-        ' mockTransactionFee'
-      ))
-
-      assert(renderedInfoRowsContainer.childAt(0).hasClass(baseClassName))
-
-      const renderedInfoRows = renderedInfoRowsContainer.childAt(0).children()
-      assert.equal(renderedInfoRows.length, 4)
-      assert(renderedInfoRows.at(0).hasClass(`${baseClassName}__send-info`))
-      assert(renderedInfoRows.at(1).hasClass(`${baseClassName}__transaction-info`))
-      assert(renderedInfoRows.at(2).hasClass(`${baseClassName}__total-info`))
-      assert(renderedInfoRows.at(3).hasClass(`${baseClassName}__fiat-total-info`))
-
-      assert.equal(renderedInfoRows.at(0).text(), 'sendAmount mockSendAmount')
-      assert.equal(renderedInfoRows.at(1).text(), 'transactionFee mockTransactionFee')
-      assert.equal(renderedInfoRows.at(2).text(), 'newTotal mockNewTotalEth')
-      assert.equal(renderedInfoRows.at(3).text(), 'mockNewTotalFiat')
-    })
-  })
-})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
deleted file mode 100644
index fb6a01fff..000000000
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ /dev/null
@@ -1,425 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-let mergeProps
-
-const actionSpies = {
-  hideModal: sinon.spy(),
-  setGasLimit: sinon.spy(),
-  setGasPrice: sinon.spy(),
-}
-
-const gasActionSpies = {
-  setCustomGasPrice: sinon.spy(),
-  setCustomGasLimit: sinon.spy(),
-  resetCustomData: sinon.spy(),
-}
-
-const confirmTransactionActionSpies = {
-  updateGasAndCalculate: sinon.spy(),
-}
-
-const sendActionSpies = {
-  hideGasButtonGroup: sinon.spy(),
-}
-
-proxyquire('../gas-modal-page-container.container.js', {
-  'react-redux': {
-    connect: (ms, md, mp) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      mergeProps = mp
-      return () => ({})
-    },
-  },
-  '../../../selectors/custom-gas': {
-    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`,
-    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
-    getDefaultActiveButtonIndex: (a, b) => a + b,
-  },
-  '../../../actions': actionSpies,
-  '../../../ducks/gas.duck': gasActionSpies,
-  '../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies,
-  '../../../ducks/send.duck': sendActionSpies,
-  '../../../selectors.js': {
-    getCurrentEthBalance: (state) => state.metamask.balance || '0x0',
-  },
-})
-
-describe('gas-modal-page-container container', () => {
-
-  describe('mapStateToProps()', () => {
-    it('should map the correct properties to props', () => {
-      const baseMockState = {
-        appState: {
-          modal: {
-            modalState: {
-              props: {
-                hideBasic: true,
-              },
-            },
-          },
-        },
-        metamask: {
-          send: {
-            gasLimit: '16',
-            gasPrice: '32',
-            amount: '64',
-          },
-          currentCurrency: 'abc',
-          conversionRate: 50,
-          preferences: {
-            showFiatInTestnets: false,
-          },
-          provider: {
-            type: 'mainnet',
-          },
-        },
-        gas: {
-          basicEstimates: {
-            blockTime: 12,
-            safeLow: 2,
-          },
-          customData: {
-            limit: 'aaaaaaaa',
-            price: 'ffffffff',
-          },
-          gasEstimatesLoading: false,
-          priceAndTimeEstimates: [
-            { gasprice: 3, expectedTime: 31 },
-            { gasprice: 4, expectedTime: 62 },
-            { gasprice: 5, expectedTime: 93 },
-            { gasprice: 6, expectedTime: 124 },
-          ],
-        },
-        confirmTransaction: {
-          txData: {
-            txParams: {
-              gas: '0x1600000',
-              gasPrice: '0x3200000',
-              value: '0x640000000000000',
-            },
-          },
-        },
-      }
-      const baseExpectedResult = {
-        isConfirm: true,
-        customGasPrice: 4.294967295,
-        customGasLimit: 2863311530,
-        currentTimeEstimate: '~1 min 11 sec',
-        newTotalFiat: '637.41',
-        blockTime: 12,
-        customModalGasLimitInHex: 'aaaaaaaa',
-        customModalGasPriceInHex: 'ffffffff',
-        customPriceIsSafe: true,
-        gasChartProps: {
-          'currentPrice': 4.294967295,
-          estimatedTimes: [31, 62, 93, 124],
-          estimatedTimesMax: '31',
-          gasPrices: [3, 4, 5, 6],
-          gasPricesMax: 6,
-        },
-        gasPriceButtonGroupProps: {
-          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',
-          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff',
-          gasButtonInfo: 'mockRenderableBasicEstimateData:4',
-        },
-        gasEstimatesLoading: false,
-        hideBasic: true,
-        infoRowProps: {
-          originalTotalFiat: '637.41',
-          originalTotalEth: '12.748189 ETH',
-          newTotalFiat: '637.41',
-          newTotalEth: '12.748189 ETH',
-          sendAmount: '0.45036 ETH',
-          transactionFee: '12.297829 ETH',
-        },
-        insufficientBalance: true,
-        isSpeedUp: false,
-        txId: 34,
-      }
-      const baseMockOwnProps = { transaction: { id: 34 } }
-      const tests = [
-        { mockState: baseMockState, expectedResult: baseExpectedResult, mockOwnProps: baseMockOwnProps },
-        {
-          mockState: Object.assign({}, baseMockState, {
-            metamask: { ...baseMockState.metamask, balance: '0xfffffffffffffffffffff' },
-          }),
-          expectedResult: Object.assign({}, baseExpectedResult, { insufficientBalance: false }),
-          mockOwnProps: baseMockOwnProps,
-        },
-        {
-          mockState: baseMockState,
-          mockOwnProps: Object.assign({}, baseMockOwnProps, {
-            transaction: { id: 34, status: 'submitted' },
-          }),
-          expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }),
-        },
-        {
-          mockState: Object.assign({}, baseMockState, {
-            metamask: {
-              ...baseMockState.metamask,
-              preferences: {
-                ...baseMockState.metamask.preferences,
-                showFiatInTestnets: false,
-              },
-              provider: {
-                ...baseMockState.metamask.provider,
-                type: 'rinkeby',
-              },
-            },
-          }),
-          mockOwnProps: baseMockOwnProps,
-          expectedResult: {
-            ...baseExpectedResult,
-            infoRowProps: {
-              ...baseExpectedResult.infoRowProps,
-              newTotalFiat: '',
-            },
-          },
-        },
-        {
-          mockState: Object.assign({}, baseMockState, {
-            metamask: {
-              ...baseMockState.metamask,
-              preferences: {
-                ...baseMockState.metamask.preferences,
-                showFiatInTestnets: true,
-              },
-              provider: {
-                ...baseMockState.metamask.provider,
-                type: 'rinkeby',
-              },
-            },
-          }),
-          mockOwnProps: baseMockOwnProps,
-          expectedResult: baseExpectedResult,
-        },
-        {
-          mockState: Object.assign({}, baseMockState, {
-            metamask: {
-              ...baseMockState.metamask,
-              preferences: {
-                ...baseMockState.metamask.preferences,
-                showFiatInTestnets: true,
-              },
-              provider: {
-                ...baseMockState.metamask.provider,
-                type: 'mainnet',
-              },
-            },
-          }),
-          mockOwnProps: baseMockOwnProps,
-          expectedResult: baseExpectedResult,
-        },
-      ]
-
-      let result
-      tests.forEach(({ mockState, mockOwnProps, expectedResult}) => {
-        result = mapStateToProps(mockState, mockOwnProps)
-        assert.deepEqual(result, expectedResult)
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    afterEach(() => {
-      actionSpies.hideModal.resetHistory()
-      gasActionSpies.setCustomGasPrice.resetHistory()
-      gasActionSpies.setCustomGasLimit.resetHistory()
-    })
-
-    describe('hideGasButtonGroup()', () => {
-      it('should dispatch a hideGasButtonGroup action', () => {
-        mapDispatchToPropsObject.hideGasButtonGroup()
-        assert(dispatchSpy.calledOnce)
-        assert(sendActionSpies.hideGasButtonGroup.calledOnce)
-      })
-    })
-
-    describe('cancelAndClose()', () => {
-      it('should dispatch a hideModal action', () => {
-        mapDispatchToPropsObject.cancelAndClose()
-        assert(dispatchSpy.calledTwice)
-        assert(actionSpies.hideModal.calledOnce)
-        assert(gasActionSpies.resetCustomData.calledOnce)
-      })
-    })
-
-    describe('updateCustomGasPrice()', () => {
-      it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => {
-        mapDispatchToPropsObject.updateCustomGasPrice('ffff')
-        assert(dispatchSpy.calledOnce)
-        assert(gasActionSpies.setCustomGasPrice.calledOnce)
-        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff')
-      })
-    })
-
-    describe('convertThenUpdateCustomGasPrice()', () => {
-      it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => {
-        mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff')
-        assert(dispatchSpy.calledOnce)
-        assert(gasActionSpies.setCustomGasPrice.calledOnce)
-        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0x3b9a8e653600')
-      })
-    })
-
-
-    describe('convertThenUpdateCustomGasLimit()', () => {
-      it('should dispatch a setCustomGasLimit action with the arg passed to convertThenUpdateCustomGasLimit converted to hex', () => {
-        mapDispatchToPropsObject.convertThenUpdateCustomGasLimit(16)
-        assert(dispatchSpy.calledOnce)
-        assert(gasActionSpies.setCustomGasLimit.calledOnce)
-        assert.equal(gasActionSpies.setCustomGasLimit.getCall(0).args[0], '0x10')
-      })
-    })
-
-    describe('setGasData()', () => {
-      it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
-        mapDispatchToPropsObject.setGasData('ffff', 'aaaa')
-        assert(dispatchSpy.calledTwice)
-        assert(actionSpies.setGasPrice.calledOnce)
-        assert(actionSpies.setGasLimit.calledOnce)
-        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'ffff')
-        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'aaaa')
-      })
-    })
-
-    describe('updateConfirmTxGasAndCalculate()', () => {
-      it('should dispatch a updateGasAndCalculate action with the correct props', () => {
-        mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
-        assert.equal(dispatchSpy.callCount, 3)
-        assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
-        assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
-      })
-    })
-
-  })
-
-  describe('mergeProps', () => {
-      let stateProps
-      let dispatchProps
-      let ownProps
-
-      beforeEach(() => {
-        stateProps = {
-          gasPriceButtonGroupProps: {
-            someGasPriceButtonGroupProp: 'foo',
-            anotherGasPriceButtonGroupProp: 'bar',
-          },
-          isConfirm: true,
-          someOtherStateProp: 'baz',
-        }
-        dispatchProps = {
-          updateCustomGasPrice: sinon.spy(),
-          hideGasButtonGroup: sinon.spy(),
-          setGasData: sinon.spy(),
-          updateConfirmTxGasAndCalculate: sinon.spy(),
-          someOtherDispatchProp: sinon.spy(),
-          createSpeedUpTransaction: sinon.spy(),
-          hideSidebar: sinon.spy(),
-          hideModal: sinon.spy(),
-          cancelAndClose: sinon.spy(),
-        }
-        ownProps = { someOwnProp: 123 }
-      })
-
-      afterEach(() => {
-        dispatchProps.updateCustomGasPrice.resetHistory()
-        dispatchProps.hideGasButtonGroup.resetHistory()
-        dispatchProps.setGasData.resetHistory()
-        dispatchProps.updateConfirmTxGasAndCalculate.resetHistory()
-        dispatchProps.someOtherDispatchProp.resetHistory()
-        dispatchProps.createSpeedUpTransaction.resetHistory()
-        dispatchProps.hideSidebar.resetHistory()
-        dispatchProps.hideModal.resetHistory()
-      })
-    it('should return the expected props when isConfirm is true', () => {
-      const result = mergeProps(stateProps, dispatchProps, ownProps)
-
-      assert.equal(result.isConfirm, true)
-      assert.equal(result.someOtherStateProp, 'baz')
-      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
-      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
-      assert.equal(result.someOwnProp, 123)
-
-      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
-      assert.equal(dispatchProps.setGasData.callCount, 0)
-      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
-      assert.equal(dispatchProps.hideModal.callCount, 0)
-
-      result.onSubmit()
-
-      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1)
-      assert.equal(dispatchProps.setGasData.callCount, 0)
-      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
-      assert.equal(dispatchProps.hideModal.callCount, 1)
-
-      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
-      result.gasPriceButtonGroupProps.handleGasPriceSelection()
-      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
-
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
-      result.someOtherDispatchProp()
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
-    })
-
-    it('should return the expected props when isConfirm is false', () => {
-      const result = mergeProps(Object.assign({}, stateProps, { isConfirm: false }), dispatchProps, ownProps)
-
-      assert.equal(result.isConfirm, false)
-      assert.equal(result.someOtherStateProp, 'baz')
-      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
-      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
-      assert.equal(result.someOwnProp, 123)
-
-      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
-      assert.equal(dispatchProps.setGasData.callCount, 0)
-      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
-      assert.equal(dispatchProps.cancelAndClose.callCount, 0)
-
-      result.onSubmit('mockNewLimit', 'mockNewPrice')
-
-      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
-      assert.equal(dispatchProps.setGasData.callCount, 1)
-      assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice'])
-      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1)
-      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
-
-      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
-      result.gasPriceButtonGroupProps.handleGasPriceSelection()
-      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
-
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
-      result.someOtherDispatchProp()
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
-    })
-
-    it('should dispatch the expected actions from obSubmit when isConfirm is false and isSpeedUp is true', () => {
-      const result = mergeProps(Object.assign({}, stateProps, { isSpeedUp: true, isConfirm: false }), dispatchProps, ownProps)
-
-      result.onSubmit()
-
-      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
-      assert.equal(dispatchProps.setGasData.callCount, 0)
-      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
-      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
-
-      assert.equal(dispatchProps.createSpeedUpTransaction.callCount, 1)
-      assert.equal(dispatchProps.hideSidebar.callCount, 1)
-    })
-  })
-
-})
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
deleted file mode 100644
index 8ad063b21..000000000
--- a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ButtonGroup from '../../button-group'
-import Button from '../../button'
-
-const GAS_OBJECT_PROPTYPES_SHAPE = {
-  label: PropTypes.string,
-  feeInPrimaryCurrency: PropTypes.string,
-  feeInSecondaryCurrency: PropTypes.string,
-  timeEstimate: PropTypes.string,
-  priceInHexWei: PropTypes.string,
-}
-
-export default class GasPriceButtonGroup extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    buttonDataLoading: PropTypes.bool,
-    className: PropTypes.string,
-    defaultActiveButtonIndex: PropTypes.number,
-    gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
-    handleGasPriceSelection: PropTypes.func,
-    newActiveButtonIndex: PropTypes.number,
-    noButtonActiveByDefault: PropTypes.bool,
-    showCheck: PropTypes.bool,
-  }
-
-  renderButtonContent ({
-    labelKey,
-    feeInPrimaryCurrency,
-    feeInSecondaryCurrency,
-    timeEstimate,
-  }, {
-    className,
-    showCheck,
-  }) {
-    return (<div>
-      { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
-      { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
-      { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
-      { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
-      { showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
-    </div>)
-  }
-
-  renderButton ({
-    priceInHexWei,
-    ...renderableGasInfo
-  }, {
-    buttonDataLoading,
-    handleGasPriceSelection,
-    ...buttonContentPropsAndFlags
-  }, index) {
-    return (
-      <Button
-        onClick={() => handleGasPriceSelection(priceInHexWei)}
-        key={`gas-price-button-${index}`}
-      >
-        {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
-      </Button>
-    )
-  }
-
-  render () {
-    const {
-      gasButtonInfo,
-      defaultActiveButtonIndex = 1,
-      newActiveButtonIndex,
-      noButtonActiveByDefault = false,
-      buttonDataLoading,
-      ...buttonPropsAndFlags
-    } = this.props
-
-    return (
-      !buttonDataLoading
-        ? <ButtonGroup
-          className={buttonPropsAndFlags.className}
-          defaultActiveButtonIndex={defaultActiveButtonIndex}
-          newActiveButtonIndex={newActiveButtonIndex}
-          noButtonActiveByDefault={noButtonActiveByDefault}
-        >
-          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
-        </ButtonGroup>
-        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
-    )
-  }
-}
diff --git a/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js b/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
deleted file mode 100644
index 79f74f8e4..000000000
--- a/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../lib/shallow-with-context'
-import sinon from 'sinon'
-import GasPriceButtonGroup from '../gas-price-button-group.component'
-
-import ButtonGroup from '../../../button-group/'
-
-const mockGasPriceButtonGroupProps = {
-  buttonDataLoading: false,
-  className: 'gas-price-button-group',
-  gasButtonInfo: [
-    {
-      feeInPrimaryCurrency: '$0.52',
-      feeInSecondaryCurrency: '0.0048 ETH',
-      timeEstimate: '~ 1 min 0 sec',
-      priceInHexWei: '0xa1b2c3f',
-    },
-    {
-      feeInPrimaryCurrency: '$0.39',
-      feeInSecondaryCurrency: '0.004 ETH',
-      timeEstimate: '~ 1 min 30 sec',
-      priceInHexWei: '0xa1b2c39',
-    },
-    {
-      feeInPrimaryCurrency: '$0.30',
-      feeInSecondaryCurrency: '0.00354 ETH',
-      timeEstimate: '~ 2 min 1 sec',
-      priceInHexWei: '0xa1b2c30',
-    },
-  ],
-  handleGasPriceSelection: sinon.spy(),
-  noButtonActiveByDefault: true,
-  defaultActiveButtonIndex: 2,
-  showCheck: true,
-}
-
-const mockButtonPropsAndFlags = Object.assign({}, {
-  className: mockGasPriceButtonGroupProps.className,
-  handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
-  showCheck: mockGasPriceButtonGroupProps.showCheck,
-})
-
-sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
-sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
-
-describe('GasPriceButtonGroup Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<GasPriceButtonGroup
-      {...mockGasPriceButtonGroupProps}
-    />)
-  })
-
-  afterEach(() => {
-    GasPriceButtonGroup.prototype.renderButton.resetHistory()
-    GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
-    mockGasPriceButtonGroupProps.handleGasPriceSelection.resetHistory()
-  })
-
-  describe('render', () => {
-    it('should render a ButtonGroup', () => {
-      assert(wrapper.is(ButtonGroup))
-    })
-
-    it('should render the correct props on the ButtonGroup', () => {
-      const {
-        className,
-        defaultActiveButtonIndex,
-        noButtonActiveByDefault,
-      } = wrapper.props()
-      assert.equal(className, 'gas-price-button-group')
-      assert.equal(defaultActiveButtonIndex, 2)
-      assert.equal(noButtonActiveByDefault, true)
-    })
-
-    function renderButtonArgsTest (i, mockButtonPropsAndFlags) {
-      assert.deepEqual(
-        GasPriceButtonGroup.prototype.renderButton.getCall(i).args,
-        [
-          Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[i]),
-          mockButtonPropsAndFlags,
-          i,
-        ]
-      )
-    }
-
-    it('should call this.renderButton 3 times, with the correct args', () => {
-      assert.equal(GasPriceButtonGroup.prototype.renderButton.callCount, 3)
-      renderButtonArgsTest(0, mockButtonPropsAndFlags)
-      renderButtonArgsTest(1, mockButtonPropsAndFlags)
-      renderButtonArgsTest(2, mockButtonPropsAndFlags)
-    })
-
-    it('should show loading if buttonDataLoading', () => {
-      wrapper.setProps({ buttonDataLoading: true })
-      assert(wrapper.is('div'))
-      assert(wrapper.hasClass('gas-price-button-group__loading-container'))
-      assert.equal(wrapper.text(), 'loading')
-    })
-  })
-
-  describe('renderButton', () => {
-    let wrappedRenderButtonResult
-
-    beforeEach(() => {
-      GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
-      const renderButtonResult = GasPriceButtonGroup.prototype.renderButton(
-        Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[0]),
-        mockButtonPropsAndFlags
-      )
-      wrappedRenderButtonResult = shallow(renderButtonResult)
-    })
-
-    it('should render a button', () => {
-      assert.equal(wrappedRenderButtonResult.type(), 'button')
-    })
-
-    it('should call the correct method when clicked', () => {
-      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 0)
-      wrappedRenderButtonResult.props().onClick()
-      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 1)
-      assert.deepEqual(
-        mockGasPriceButtonGroupProps.handleGasPriceSelection.getCall(0).args,
-        [mockGasPriceButtonGroupProps.gasButtonInfo[0].priceInHexWei]
-      )
-    })
-
-    it('should call this.renderButtonContent with the correct args', () => {
-      assert.equal(GasPriceButtonGroup.prototype.renderButtonContent.callCount, 1)
-      const {
-        feeInPrimaryCurrency,
-        feeInSecondaryCurrency,
-        timeEstimate,
-      } = mockGasPriceButtonGroupProps.gasButtonInfo[0]
-      const {
-        showCheck,
-        className,
-      } = mockGasPriceButtonGroupProps
-      assert.deepEqual(
-        GasPriceButtonGroup.prototype.renderButtonContent.getCall(0).args,
-        [
-          {
-            feeInPrimaryCurrency,
-            feeInSecondaryCurrency,
-            timeEstimate,
-          },
-          {
-            showCheck,
-            className,
-          },
-        ]
-      )
-    })
-  })
-
-  describe('renderButtonContent', () => {
-    it('should render a label if passed a labelKey', () => {
-      const renderButtonContentResult = wrapper.instance().renderButtonContent({
-        labelKey: 'mockLabelKey',
-      }, {
-        className: 'someClass',
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
-      assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabelKey')
-    })
-
-    it('should render a feeInPrimaryCurrency if passed a feeInPrimaryCurrency', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
-        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
-      }, {
-        className: 'someClass',
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
-      assert.equal(wrappedRenderButtonContentResult.find('.someClass__primary-currency').text(), 'mockFeeInPrimaryCurrency')
-    })
-
-    it('should render a feeInSecondaryCurrency if passed a feeInSecondaryCurrency', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
-        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
-      }, {
-        className: 'someClass',
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
-      assert.equal(wrappedRenderButtonContentResult.find('.someClass__secondary-currency').text(), 'mockFeeInSecondaryCurrency')
-    })
-
-    it('should render a timeEstimate if passed a timeEstimate', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
-        timeEstimate: 'mockTimeEstimate',
-      }, {
-        className: 'someClass',
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
-      assert.equal(wrappedRenderButtonContentResult.find('.someClass__time-estimate').text(), 'mockTimeEstimate')
-    })
-
-    it('should render a check if showCheck is true', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {
-        className: 'someClass',
-        showCheck: true,
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.find('.fa-check').length, 1)
-    })
-
-    it('should render all elements if all args passed', () => {
-      const renderButtonContentResult = wrapper.instance().renderButtonContent({
-        labelKey: 'mockLabel',
-        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
-        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
-        timeEstimate: 'mockTimeEstimate',
-      }, {
-        className: 'someClass',
-        showCheck: true,
-      })
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.children().length, 5)
-    })
-
-
-    it('should render no elements if all args passed', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {})
-      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
-      assert.equal(wrappedRenderButtonContentResult.children().length, 0)
-    })
-  })
-})
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
deleted file mode 100644
index 74eddae42..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-import shallow from '../../../../../lib/shallow-with-context'
-import * as d3 from 'd3'
-
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time)
-  })
-}
-
-const propsMethodSpies = {
-  updateCustomGasPrice: sinon.spy(),
-}
-
-const selectReturnSpies = {
-  empty: sinon.spy(),
-  remove: sinon.spy(),
-  style: sinon.spy(),
-  select: d3.select,
-  attr: sinon.spy(),
-  on: sinon.spy(),
-  datum: sinon.stub().returns({ x: 'mockX' }),
-}
-
-const mockSelectReturn = {
-  ...d3.select('div'),
-  node: () => ({
-    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
-  }),
-  ...selectReturnSpies,
-}
-
-const gasPriceChartUtilsSpies = {
-  appendOrUpdateCircle: sinon.spy(),
-  generateChart: sinon.stub().returns({ mockChart: true }),
-  generateDataUIObj: sinon.spy(),
-  getAdjacentGasPrices: sinon.spy(),
-  getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }),
-  getNewXandTimeEstimate: sinon.spy(),
-  handleChartUpdate: sinon.spy(),
-  hideDataUI: sinon.spy(),
-  setSelectedCircle: sinon.spy(),
-  setTickPosition: sinon.spy(),
-  handleMouseMove: sinon.spy(),
-}
-
-const testProps = {
-  gasPrices: [1.5, 2.5, 4, 8],
-  estimatedTimes: [100, 80, 40, 10],
-  gasPricesMax: 9,
-  estimatedTimesMax: '100',
-  currentPrice: 6,
-  updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
-}
-
-const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
-  './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
-  'd3': {
-    ...d3,
-    select: function (...args) {
-      const result = d3.select(...args)
-      return result.empty()
-        ? mockSelectReturn
-        : result
-    },
-    event: {
-      clientX: 'mockClientX',
-    },
-  },
-}).default
-
-sinon.spy(GasPriceChart.prototype, 'renderChart')
-
-describe('GasPriceChart Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<GasPriceChart {...testProps} />)
-  })
-
-  describe('render()', () => {
-    it('should render', () => {
-      assert(wrapper.hasClass('gas-price-chart'))
-    })
-
-    it('should render the chart div', () => {
-      assert(wrapper.childAt(0).hasClass('gas-price-chart__root'))
-      assert.equal(wrapper.childAt(0).props().id, 'chart')
-    })
-  })
-
-  describe('componentDidMount', () => {
-    it('should call this.renderChart with the components props', () => {
-      assert(GasPriceChart.prototype.renderChart.callCount, 1)
-      wrapper.instance().componentDidMount()
-      assert(GasPriceChart.prototype.renderChart.callCount, 2)
-      assert.deepEqual(GasPriceChart.prototype.renderChart.getCall(1).args, [{...testProps}])
-    })
-  })
-
-  describe('componentDidUpdate', () => {
-    it('should call handleChartUpdate if props.currentPrice has changed', () => {
-      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
-      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
-      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 1)
-    })
-
-    it('should call handleChartUpdate with the correct props', () => {
-      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
-      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
-      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
-        chart: { mockChart: true },
-        gasPrices: [1.5, 2.5, 4, 8],
-        newPrice: 6,
-        cssId: '#set-circle',
-      }])
-    })
-
-    it('should not call handleChartUpdate if props.currentPrice has not changed', () => {
-      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
-      wrapper.instance().componentDidUpdate({ currentPrice: 6 })
-      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 0)
-    })
-  })
-
-  describe('renderChart', () => {
-    it('should call setTickPosition 4 times, with the expected props', async () => {
-      await timeout(0)
-      gasPriceChartUtilsSpies.setTickPosition.resetHistory()
-      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 0)
-      wrapper.instance().renderChart(testProps)
-      await timeout(0)
-      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4)
-      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8])
-      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5])
-      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3])
-      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8])
-    })
-
-    it('should call handleChartUpdate with the correct props', async () => {
-      await timeout(0)
-      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
-      wrapper.instance().renderChart(testProps)
-      await timeout(0)
-      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
-        chart: { mockChart: true },
-        gasPrices: [1.5, 2.5, 4, 8],
-        newPrice: 6,
-        cssId: '#set-circle',
-      }])
-    })
-
-    it('should add three events to the chart', async () => {
-      await timeout(0)
-      selectReturnSpies.on.resetHistory()
-      assert.equal(selectReturnSpies.on.callCount, 0)
-      wrapper.instance().renderChart(testProps)
-      await timeout(0)
-      assert.equal(selectReturnSpies.on.callCount, 3)
-
-      const firstOnEventArgs = selectReturnSpies.on.getCall(0).args
-      assert.equal(firstOnEventArgs[0], 'mouseout')
-      const secondOnEventArgs = selectReturnSpies.on.getCall(1).args
-      assert.equal(secondOnEventArgs[0], 'click')
-      const thirdOnEventArgs = selectReturnSpies.on.getCall(2).args
-      assert.equal(thirdOnEventArgs[0], 'mousemove')
-    })
-
-    it('should hide the data UI on mouseout', async () => {
-      await timeout(0)
-      selectReturnSpies.on.resetHistory()
-      wrapper.instance().renderChart(testProps)
-      gasPriceChartUtilsSpies.hideDataUI.resetHistory()
-      await timeout(0)
-      const mouseoutEventArgs = selectReturnSpies.on.getCall(0).args
-      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 0)
-      mouseoutEventArgs[1]()
-      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 1)
-      assert.deepEqual(gasPriceChartUtilsSpies.hideDataUI.getCall(0).args, [{ mockChart: true }, '#overlayed-circle'])
-    })
-
-    it('should updateCustomGasPrice on click', async () => {
-      await timeout(0)
-      selectReturnSpies.on.resetHistory()
-      wrapper.instance().renderChart(testProps)
-      propsMethodSpies.updateCustomGasPrice.resetHistory()
-      await timeout(0)
-      const mouseoutEventArgs = selectReturnSpies.on.getCall(1).args
-      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 0)
-      mouseoutEventArgs[1]()
-      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 1)
-      assert.equal(propsMethodSpies.updateCustomGasPrice.getCall(0).args[0], 'mockX')
-    })
-
-    it('should handle mousemove', async () => {
-      await timeout(0)
-      selectReturnSpies.on.resetHistory()
-      wrapper.instance().renderChart(testProps)
-      gasPriceChartUtilsSpies.handleMouseMove.resetHistory()
-      await timeout(0)
-      const mouseoutEventArgs = selectReturnSpies.on.getCall(2).args
-      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 0)
-      mouseoutEventArgs[1]()
-      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 1)
-      assert.deepEqual(gasPriceChartUtilsSpies.handleMouseMove.getCall(0).args, [{
-        xMousePos: 'mockClientX',
-        chartXStart: 'mockCoordinateX',
-        chartWidth: 'mockWidth',
-        gasPrices: testProps.gasPrices,
-        estimatedTimes: testProps.estimatedTimes,
-        chart: { mockChart: true },
-      }])
-    })
-  })
-})
diff --git a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
deleted file mode 100644
index 6847a6919..000000000
--- a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { hexToDecimal } from '../../helpers/conversions.util'
-
-export default class HexToDecimal extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    value: PropTypes.string,
-  }
-
-  render () {
-    const { className, value } = this.props
-    const decimalValue = hexToDecimal(value)
-
-    return (
-      <div className={className}>
-        { decimalValue }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/identicon/identicon.component.js b/ui/app/components/identicon/identicon.component.js
deleted file mode 100644
index b892e5ae5..000000000
--- a/ui/app/components/identicon/identicon.component.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { toDataUrl } from '../../../lib/blockies'
-import contractMap from 'eth-contract-metadata'
-import { checksumAddress } from '../../../app/util'
-import Jazzicon from '../jazzicon'
-
-const getStyles = diameter => (
-  {
-    height: diameter,
-    width: diameter,
-    borderRadius: diameter / 2,
-  }
-)
-
-export default class Identicon extends PureComponent {
-  static propTypes = {
-    address: PropTypes.string,
-    className: PropTypes.string,
-    diameter: PropTypes.number,
-    image: PropTypes.string,
-    useBlockie: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    diameter: 46,
-  }
-
-  renderImage () {
-    const { className, diameter, image } = this.props
-
-    return (
-      <img
-        className={classnames('identicon', className)}
-        src={image}
-        style={getStyles(diameter)}
-      />
-    )
-  }
-
-  renderJazzicon () {
-    const { address, className, diameter } = this.props
-
-    return (
-      <Jazzicon
-        address={address}
-        diameter={diameter}
-        className={classnames('identicon', className)}
-        style={getStyles(diameter)}
-      />
-    )
-  }
-
-  renderBlockie () {
-    const { address, className, diameter } = this.props
-
-    return (
-      <div
-        className={classnames('identicon', className)}
-        style={getStyles(diameter)}
-      >
-        <img
-          src={toDataUrl(address)}
-          height={diameter}
-          width={diameter}
-        />
-      </div>
-    )
-  }
-
-  render () {
-    const { className, address, image, diameter, useBlockie } = this.props
-
-    if (image) {
-      return this.renderImage()
-    }
-
-    if (address) {
-      const checksummedAddress = checksumAddress(address)
-
-      if (contractMap[checksummedAddress] && contractMap[checksummedAddress].logo) {
-        return this.renderJazzicon()
-      }
-
-      return useBlockie
-        ? this.renderBlockie()
-        : this.renderJazzicon()
-    }
-
-    return (
-      <img
-        className={classnames('balance-icon', className)}
-        src="./images/eth_logo.svg"
-        style={getStyles(diameter)}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
deleted file mode 100644
index 96cc74c79..000000000
--- a/ui/app/components/index.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import './account-menu/index';
-
-@import './add-token-button/index';
-
-@import './app-header/index';
-
-@import './breadcrumbs/index';
-
-@import './button-group/index';
-
-@import './card/index';
-
-@import './confirm-page-container/index';
-
-@import './currency-input/index';
-
-@import './currency-display/index';
-
-@import './error-message/index';
-
-@import './export-text-container/index';
-
-@import './identicon/index';
-
-@import './info-box/index';
-
-@import './menu-bar/index';
-
-@import './modal/index';
-
-@import './modals/index';
-
-@import './network-display/index';
-
-@import './page-container/index';
-
-@import './pages/index';
-
-@import './provider-page-container/index';
-
-@import './selected-account/index';
-
-@import './sender-to-recipient/index';
-
-@import './tabs/index';
-
-@import './token-balance/index';
-
-@import './transaction-activity-log/index';
-
-@import './transaction-breakdown/index';
-
-@import './transaction-view/index';
-
-@import './transaction-view-balance/index';
-
-@import './transaction-list/index';
-
-@import './transaction-list-item/index';
-
-@import './transaction-list-item-details/index';
-
-@import './transaction-status/index';
-
-@import './app-header/index';
-
-@import './sidebars/index';
-
-@import './unit-input/index';
-
-@import './gas-customization/gas-modal-page-container/index';
-
-@import './gas-customization/gas-modal-page-container/index';
-
-@import './gas-customization/gas-modal-page-container/index';
-
-@import './gas-customization/index';
-
-@import './gas-customization/gas-price-button-group/index';
-
-@import './ui-migration-annoucement/index';
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
deleted file mode 100644
index eec5e3740..000000000
--- a/ui/app/components/input-number.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const {
-  addCurrencies,
-  conversionGTE,
-  conversionLTE,
-  subtractCurrencies,
-} = require('../conversion-util')
-
-module.exports = InputNumber
-
-inherits(InputNumber, Component)
-function InputNumber () {
-  Component.call(this)
-
-  this.setValue = this.setValue.bind(this)
-}
-
-function isValidInput (text) {
-  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
-  return re.test(text)
-}
-
-function removeLeadingZeroes (str) {
-  return str.replace(/^0*(?=\d)/, '')
-}
-
-InputNumber.prototype.setValue = function (newValue) {
-  newValue = removeLeadingZeroes(newValue)
-  if (newValue && !isValidInput(newValue)) return
-  const { fixed, min = -1, max = Infinity, onChange } = this.props
-
-  newValue = fixed ? newValue.toFixed(4) : newValue
-  const newValueGreaterThanMin = conversionGTE(
-    { value: newValue || '0', fromNumericBase: 'dec' },
-    { value: min, fromNumericBase: 'hex' },
-  )
-
-  const newValueLessThanMax = conversionLTE(
-    { value: newValue || '0', fromNumericBase: 'dec' },
-    { value: max, fromNumericBase: 'hex' },
-  )
-  if (newValueGreaterThanMin && newValueLessThanMax) {
-    onChange(newValue)
-  } else if (!newValueGreaterThanMin) {
-    onChange(min)
-  } else if (!newValueLessThanMax) {
-    onChange(max)
-  }
-}
-
-InputNumber.prototype.render = function () {
-  const { unitLabel, step = 1, placeholder, value } = this.props
-
-  return h('div.customize-gas-input-wrapper', {}, [
-    h('input', {
-      className: 'customize-gas-input',
-      value,
-      placeholder,
-      type: 'number',
-      onChange: e => {
-        this.setValue(e.target.value)
-      },
-      min: 0,
-    }),
-    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
-    h('div.gas-tooltip-input-arrows', {}, [
-      h('div.gas-tooltip-input-arrow-wrapper', {
-        onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
-      }, [
-        h('i.fa.fa-angle-up'),
-      ]),
-      h('div.gas-tooltip-input-arrow-wrapper', {
-        onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
-      }, [
-        h('i.fa.fa-angle-down'),
-      ]),
-    ]),
-  ])
-}
diff --git a/ui/app/components/jazzicon/jazzicon.component.js b/ui/app/components/jazzicon/jazzicon.component.js
deleted file mode 100644
index fcb1c59b1..000000000
--- a/ui/app/components/jazzicon/jazzicon.component.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import isNode from 'detect-node'
-import { findDOMNode } from 'react-dom'
-import jazzicon from 'jazzicon'
-import iconFactoryGenerator from '../../../lib/icon-factory'
-const iconFactory = iconFactoryGenerator(jazzicon)
-
-/**
- * Wrapper around the jazzicon library to return a React component, as the library returns an
- * HTMLDivElement which needs to be appended.
- */
-export default class Jazzicon extends PureComponent {
-  static propTypes = {
-    address: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    diameter: PropTypes.number,
-    style: PropTypes.object,
-  }
-
-  static defaultProps = {
-    diameter: 46,
-  }
-
-  componentDidMount () {
-    if (!isNode) {
-      this.appendJazzicon()
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    const { address: prevAddress } = prevProps
-    const { address } = this.props
-
-    if (!isNode && address !== prevAddress) {
-      this.removeExistingChildren()
-      this.appendJazzicon()
-    }
-  }
-
-  removeExistingChildren () {
-    // eslint-disable-next-line react/no-find-dom-node
-    const container = findDOMNode(this)
-    const { children } = container
-
-    for (let i = 0; i < children.length; i++) {
-      container.removeChild(children[i])
-    }
-  }
-
-  appendJazzicon () {
-    // eslint-disable-next-line react/no-find-dom-node
-    const container = findDOMNode(this)
-    const { address, diameter } = this.props
-    const image = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(image)
-  }
-
-  render () {
-    const { className, style } = this.props
-
-    return (
-      <div
-        className={className}
-        style={style}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/loading-network-screen/loading-network-screen.component.js b/ui/app/components/loading-network-screen/loading-network-screen.component.js
deleted file mode 100644
index bf1c141e0..000000000
--- a/ui/app/components/loading-network-screen/loading-network-screen.component.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Spinner from '../spinner'
-import Button from '../button'
-
-export default class LoadingNetworkScreen extends PureComponent {
-  state = {
-    showErrorScreen: false,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    loadingMessage: PropTypes.string,
-    cancelTime: PropTypes.number,
-    provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    showNetworkDropdown: PropTypes.func,
-    setProviderArgs: PropTypes.array,
-    lastSelectedProvider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    setProviderType: PropTypes.func,
-    isLoadingNetwork: PropTypes.bool,
-  }
-
-  componentDidMount = () => {
-    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
-  }
-
-  getConnectingLabel = function (loadingMessage) {
-    if (loadingMessage) {
-      return loadingMessage
-    }
-    const { provider, providerId } = this.props
-    const providerName = provider.type
-
-    let name
-
-    if (providerName === 'mainnet') {
-      name = this.context.t('connectingToMainnet')
-    } else if (providerName === 'ropsten') {
-      name = this.context.t('connectingToRopsten')
-    } else if (providerName === 'kovan') {
-      name = this.context.t('connectingToKovan')
-    } else if (providerName === 'rinkeby') {
-      name = this.context.t('connectingToRinkeby')
-    } else {
-      name = this.context.t('connectingTo', [providerId])
-    }
-
-    return name
-  }
-
-  renderMessage = () => {
-    return <span>{ this.getConnectingLabel(this.props.loadingMessage) }</span>
-  }
-
-  renderLoadingScreenContent = () => {
-    return <div className="loading-overlay__screen-content">
-      <Spinner color="#F7C06C" />
-      {this.renderMessage()}
-    </div>
-  }
-
-  renderErrorScreenContent = () => {
-    const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
-
-    return <div className="loading-overlay__error-screen">
-      <span className="loading-overlay__emoji">&#128542;</span>
-      <span>{ this.context.t('somethingWentWrong') }</span>
-      <div className="loading-overlay__error-buttons">
-        <Button
-          type="default"
-          onClick={() => {
-            window.clearTimeout(this.cancelCallTimeout)
-            showNetworkDropdown()
-          }}
-        >
-          { this.context.t('switchNetworks') }
-        </Button>
-
-        <Button
-          type="primary"
-          onClick={() => {
-            this.setState({ showErrorScreen: false })
-            setProviderType(...setProviderArgs)
-            window.clearTimeout(this.cancelCallTimeout)
-            this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
-          }}
-        >
-          { this.context.t('tryAgain') }
-        </Button>
-      </div>
-    </div>
-  }
-
-  cancelCall = () => {
-    const { isLoadingNetwork } = this.props
-
-    if (isLoadingNetwork) {
-      this.setState({ showErrorScreen: true })
-    }
-  }
-
-  componentDidUpdate = (prevProps) => {
-    const { provider } = this.props
-    const { provider: prevProvider } = prevProps
-    if (provider.type !== prevProvider.type) {
-      window.clearTimeout(this.cancelCallTimeout)
-      this.setState({ showErrorScreen: false })
-      this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
-    }
-  }
-
-  componentWillUnmount = () => {
-    window.clearTimeout(this.cancelCallTimeout)
-  }
-
-  render () {
-    const { lastSelectedProvider, setProviderType } = this.props
-
-    return (
-      <div className="loading-overlay">
-        <div
-          className="page-container__header-close"
-          onClick={() => setProviderType(lastSelectedProvider || 'ropsten')}
-        />
-        <div className="loading-overlay__container">
-          { this.state.showErrorScreen
-            ? this.renderErrorScreenContent()
-            : this.renderLoadingScreenContent()
-          }
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/loading-network-screen/loading-network-screen.container.js b/ui/app/components/loading-network-screen/loading-network-screen.container.js
deleted file mode 100644
index d0623e574..000000000
--- a/ui/app/components/loading-network-screen/loading-network-screen.container.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { connect } from 'react-redux'
-import LoadingNetworkScreen from './loading-network-screen.component'
-import actions from '../../actions'
-import { getNetworkIdentifier } from '../../selectors'
-
-const mapStateToProps = state => {
-  const {
-    loadingMessage,
-    currentView,
-  } = state.appState
-  const {
-    provider,
-    lastSelectedProvider,
-    network,
-  } = state.metamask
-  const { rpcTarget, chainId, ticker, nickname, type } = provider
-
-  const setProviderArgs = type === 'rpc'
-    ? [rpcTarget, chainId, ticker, nickname]
-    : [provider.type]
-
-  return {
-    isLoadingNetwork: network === 'loading' && currentView.name !== 'config',
-    loadingMessage,
-    lastSelectedProvider,
-    setProviderArgs,
-    provider,
-    providerId: getNetworkIdentifier(state),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setProviderType: (type) => {
-      dispatch(actions.setProviderType(type))
-    },
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(LoadingNetworkScreen)
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
deleted file mode 100644
index 29c56953d..000000000
--- a/ui/app/components/menu-bar/menu-bar.component.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Tooltip from '../tooltip'
-import SelectedAccount from '../selected-account'
-import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
-
-export default class MenuBar extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    hideSidebar: PropTypes.func,
-    sidebarOpen: PropTypes.bool,
-    showSidebar: PropTypes.func,
-  }
-
-  state = { accountDetailsMenuOpen: false }
-
-  render () {
-    const { t } = this.context
-    const { sidebarOpen, hideSidebar, showSidebar } = this.props
-    const { accountDetailsMenuOpen } = this.state
-
-    return (
-      <div className="menu-bar">
-        <Tooltip
-          title={t('menu')}
-          position="bottom"
-        >
-          <div
-            className="fa fa-bars menu-bar__sidebar-button"
-            onClick={() => {
-              this.context.metricsEvent({
-                eventOpts: {
-                  category: 'Navigation',
-                  action: 'Home',
-                  name: 'Opened Hamburger',
-                },
-              })
-              sidebarOpen ? hideSidebar() : showSidebar()
-            }}
-          />
-        </Tooltip>
-        <SelectedAccount />
-
-        <Tooltip
-          title={t('accountOptions')}
-          position="bottom"
-        >
-          <div
-            className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
-            onClick={() => {
-              this.context.metricsEvent({
-                eventOpts: {
-                  category: 'Navigation',
-                  action: 'Home',
-                  name: 'Opened Account Options',
-                },
-              })
-              this.setState({ accountDetailsMenuOpen: true })
-            }}
-          >
-          </div>
-        </Tooltip>
-
-        {
-          accountDetailsMenuOpen && (
-            <AccountDetailsDropdown
-              className="menu-bar__account-details-dropdown"
-              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
-            />
-          )
-        }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/menu-bar/menu-bar.container.js b/ui/app/components/menu-bar/menu-bar.container.js
deleted file mode 100644
index 0305f17d3..000000000
--- a/ui/app/components/menu-bar/menu-bar.container.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { connect } from 'react-redux'
-import { WALLET_VIEW_SIDEBAR } from '../sidebars/sidebar.constants'
-import MenuBar from './menu-bar.component'
-import { showSidebar, hideSidebar } from '../../actions'
-
-const mapStateToProps = state => {
-  const { appState: { sidebar: { isOpen } } } = state
-
-  return {
-    sidebarOpen: isOpen,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    showSidebar: () => {
-      dispatch(showSidebar({
-        transitionName: 'sidebar-right',
-        type: WALLET_VIEW_SIDEBAR,
-      }))
-    },
-    hideSidebar: () => dispatch(hideSidebar()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
deleted file mode 100644
index 2beb14633..000000000
--- a/ui/app/components/modal/index.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import './modal-content/index';
-
-.modal-container {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  flex-flow: column;
-  border-radius: 8px;
-
-  @media screen and (max-width: 575px) {
-    max-height: 450px;
-  }
-
-  &__content {
-    overflow-y: auto;
-    flex: 1;
-    padding: 16px 32px;
-
-    @media screen and (max-width: 575px) {
-      justify-content: center;
-      padding: 28px 20px;
-    }
-  }
-
-  &__header {
-    position: relative;
-    display: flex;
-    padding: 12px;
-    justify-content: center;
-    border-bottom: 1px solid #d2d8dd;
-    flex: 0 0 auto;
-  }
-
-  &__header-close::after {
-    content: '\00D7';
-    font-size: 40px;
-    color: $dusty-gray;
-    position: absolute;
-    top: -5px;
-    right: 10px;
-    cursor: pointer;
-  }
-
-  &__footer {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-    border-top: 1px solid #d2d8dd;
-    padding: 16px;
-    flex: 0 0 auto;
-
-    &-button {
-      min-width: 0;
-      margin-right: 16px;
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-}
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
deleted file mode 100644
index c73f8d903..000000000
--- a/ui/app/components/modal/modal.component.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Button from '../button'
-
-export default class Modal extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    // Header text
-    headerText: PropTypes.string,
-    onClose: PropTypes.func,
-    // Submit button (right button)
-    onSubmit: PropTypes.func,
-    submitType: PropTypes.string,
-    submitText: PropTypes.string,
-    submitDisabled: PropTypes.bool,
-    // Cancel button (left button)
-    onCancel: PropTypes.func,
-    cancelType: PropTypes.string,
-    cancelText: PropTypes.string,
-  }
-
-  static defaultProps = {
-    submitType: 'primary',
-    cancelType: 'default',
-  }
-
-  render () {
-    const {
-      children,
-      headerText,
-      onClose,
-      onSubmit,
-      submitType,
-      submitText,
-      submitDisabled,
-      onCancel,
-      cancelType,
-      cancelText,
-    } = this.props
-
-    return (
-      <div className="modal-container">
-        {
-          headerText && (
-            <div className="modal-container__header">
-              <div className="modal-container__header-text">
-                { headerText }
-              </div>
-              <div
-                className="modal-container__header-close"
-                onClick={onClose}
-              />
-            </div>
-          )
-        }
-        <div className="modal-container__content">
-          { children }
-        </div>
-        <div className="modal-container__footer">
-          {
-            onCancel && (
-              <Button
-                type={cancelType}
-                onClick={onCancel}
-                className="modal-container__footer-button"
-              >
-                { cancelText }
-              </Button>
-            )
-          }
-          <Button
-            type={submitType}
-            onClick={onSubmit}
-            disabled={submitDisabled}
-            className="modal-container__footer-button"
-          >
-            { submitText }
-          </Button>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
deleted file mode 100644
index 2ced3f32d..000000000
--- a/ui/app/components/modal/tests/modal.component.test.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { mount, shallow } from 'enzyme'
-import sinon from 'sinon'
-import Modal from '../modal.component'
-import Button from '../../button'
-
-describe('Modal Component', () => {
-  it('should render a modal with a submit button', () => {
-    const wrapper = shallow(<Modal />)
-
-    assert.equal(wrapper.find('.modal-container').length, 1)
-    const buttons = wrapper.find(Button)
-    assert.equal(buttons.length, 1)
-    assert.equal(buttons.at(0).props().type, 'primary')
-  })
-
-  it('should render a modal with a cancel and a submit button', () => {
-    const handleCancel = sinon.spy()
-    const handleSubmit = sinon.spy()
-    const wrapper = shallow(
-      <Modal
-        onCancel={handleCancel}
-        cancelText="Cancel"
-        onSubmit={handleSubmit}
-        submitText="Submit"
-      />
-    )
-
-    const buttons = wrapper.find(Button)
-    assert.equal(buttons.length, 2)
-    const cancelButton = buttons.at(0)
-    const submitButton = buttons.at(1)
-
-    assert.equal(cancelButton.props().type, 'default')
-    assert.equal(cancelButton.props().children, 'Cancel')
-    assert.equal(handleCancel.callCount, 0)
-    cancelButton.simulate('click')
-    assert.equal(handleCancel.callCount, 1)
-
-    assert.equal(submitButton.props().type, 'primary')
-    assert.equal(submitButton.props().children, 'Submit')
-    assert.equal(handleSubmit.callCount, 0)
-    submitButton.simulate('click')
-    assert.equal(handleSubmit.callCount, 1)
-  })
-
-  it('should render a modal with different button types', () => {
-    const wrapper = shallow(
-      <Modal
-        onCancel={() => {}}
-        cancelText="Cancel"
-        cancelType="secondary"
-        onSubmit={() => {}}
-        submitText="Submit"
-        submitType="confirm"
-      />
-    )
-
-    const buttons = wrapper.find(Button)
-    assert.equal(buttons.length, 2)
-    assert.equal(buttons.at(0).props().type, 'secondary')
-    assert.equal(buttons.at(1).props().type, 'confirm')
-  })
-
-  it('should render a modal with children', () => {
-    const wrapper = shallow(
-      <Modal
-        onCancel={() => {}}
-        cancelText="Cancel"
-        onSubmit={() => {}}
-        submitText="Submit"
-      >
-        <div className="test-child" />
-      </Modal>
-    )
-
-    assert.ok(wrapper.find('.test-class'))
-  })
-
-  it('should render a modal with a header', () => {
-    const handleCancel = sinon.spy()
-    const handleSubmit = sinon.spy()
-    const wrapper = shallow(
-      <Modal
-        onCancel={handleCancel}
-        cancelText="Cancel"
-        onSubmit={handleSubmit}
-        submitText="Submit"
-        headerText="My Header"
-        onClose={handleCancel}
-      />
-    )
-
-    assert.ok(wrapper.find('.modal-container__header'))
-    assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
-    assert.equal(handleCancel.callCount, 0)
-    assert.equal(handleSubmit.callCount, 0)
-    wrapper.find('.modal-container__header-close').simulate('click')
-    assert.equal(handleCancel.callCount, 1)
-    assert.equal(handleSubmit.callCount, 0)
-  })
-
-  it('should disable the submit button if submitDisabled is true', () => {
-    const handleCancel = sinon.spy()
-    const handleSubmit = sinon.spy()
-    const wrapper = mount(
-      <Modal
-        onCancel={handleCancel}
-        cancelText="Cancel"
-        onSubmit={handleSubmit}
-        submitText="Submit"
-        submitDisabled={true}
-        headerText="My Header"
-        onClose={handleCancel}
-      />
-    )
-
-    const buttons = wrapper.find(Button)
-    assert.equal(buttons.length, 2)
-    const cancelButton = buttons.at(0)
-    const submitButton = buttons.at(1)
-
-    assert.equal(handleCancel.callCount, 0)
-    cancelButton.simulate('click')
-    assert.equal(handleCancel.callCount, 1)
-
-    assert.equal(submitButton.props().disabled, true)
-    assert.equal(handleSubmit.callCount, 0)
-    submitButton.simulate('click')
-    assert.equal(handleSubmit.callCount, 0)
-  })
-})
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
deleted file mode 100644
index 67d8eb0fd..000000000
--- a/ui/app/components/modals/account-details-modal.js
+++ /dev/null
@@ -1,101 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const AccountModalContainer = require('./account-modal-container')
-const { getSelectedIdentity } = require('../../selectors')
-const genAccountLink = require('../../../lib/account-link.js')
-const QrView = require('../qr-code')
-const EditableLabel = require('../editable-label')
-
-import Button from '../button'
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    selectedIdentity: getSelectedIdentity(state),
-    keyrings: state.metamask.keyrings,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    // Is this supposed to be used somewhere?
-    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    showExportPrivateKeyModal: () => {
-      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-    },
-    hideModal: () => dispatch(actions.hideModal()),
-    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
-  }
-}
-
-inherits(AccountDetailsModal, Component)
-function AccountDetailsModal () {
-  Component.call(this)
-}
-
-AccountDetailsModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
-
-
-// Not yet pixel perfect todos:
-  // fonts of qr-header
-
-AccountDetailsModal.prototype.render = function () {
-  const {
-    selectedIdentity,
-    network,
-    showExportPrivateKeyModal,
-    setAccountLabel,
-    keyrings,
-  } = this.props
-  const { name, address } = selectedIdentity
-
-  const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(address)
-  })
-
-  let exportPrivateKeyFeatureEnabled = true
-  // This feature is disabled for hardware wallets
-  if (keyring && keyring.type.search('Hardware') !== -1) {
-    exportPrivateKeyFeatureEnabled = false
-  }
-
-  return h(AccountModalContainer, {}, [
-      h(EditableLabel, {
-        className: 'account-modal__name',
-        defaultValue: name,
-        onSubmit: label => setAccountLabel(address, label),
-      }),
-
-      h(QrView, {
-        Qr: {
-          data: address,
-          network: network,
-        },
-      }),
-
-      h('div.account-modal-divider'),
-
-      h(Button, {
-        type: 'primary',
-        className: 'account-modal__button',
-        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, this.context.t('etherscanView')),
-
-      // Holding on redesign for Export Private Key functionality
-
-      exportPrivateKeyFeatureEnabled ? h(Button, {
-        type: 'primary',
-        className: 'account-modal__button',
-        onClick: () => showExportPrivateKeyModal(),
-      }, this.context.t('exportPrivateKey')) : null,
-
-  ])
-}
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
deleted file mode 100644
index 2a6c655e1..000000000
--- a/ui/app/components/modals/account-modal-container.js
+++ /dev/null
@@ -1,80 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getSelectedIdentity } = require('../../selectors')
-import Identicon from '../identicon'
-
-function mapStateToProps (state, ownProps) {
-  return {
-    selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-  }
-}
-
-inherits(AccountModalContainer, Component)
-function AccountModalContainer () {
-  Component.call(this)
-}
-
-AccountModalContainer.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
-
-
-AccountModalContainer.prototype.render = function () {
-  const {
-    selectedIdentity,
-    showBackButton = false,
-    backButtonAction,
-  } = this.props
-  let { children } = this.props
-
-  if (children.constructor !== Array) {
-    children = [children]
-  }
-
-  return h('div', { style: { borderRadius: '4px' }}, [
-    h('div.account-modal-container', [
-
-      h('div', [
-
-        // Needs a border; requires changes to svg
-        h(Identicon, {
-          address: selectedIdentity.address,
-          diameter: 64,
-          style: {},
-        }),
-
-      ]),
-
-      showBackButton && h('div.account-modal-back', {
-        onClick: backButtonAction,
-      }, [
-
-        h('i.fa.fa-angle-left.fa-lg'),
-
-        h('span.account-modal-back__text', ' ' + this.context.t('back')),
-
-      ]),
-
-      h('div.account-modal-close', {
-        onClick: this.props.hideModal,
-      }),
-
-      ...children,
-
-    ]),
-  ])
-}
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
deleted file mode 100644
index c70510b5f..000000000
--- a/ui/app/components/modals/buy-options-modal.js
+++ /dev/null
@@ -1,101 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    address: state.metamask.selectedAddress,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
-    toFaucet: network => dispatch(actions.buyEth({ network })),
-  }
-}
-
-inherits(BuyOptions, Component)
-function BuyOptions () {
-  Component.call(this)
-}
-
-BuyOptions.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
-
-
-BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
-  return h('div.buy-modal-content-option', {
-    onClick,
-  }, [
-    h('div.buy-modal-content-option-title', {}, title),
-    h('div.buy-modal-content-option-subtitle', {}, header),
-  ])
-}
-
-BuyOptions.prototype.render = function () {
-  const { network, toCoinbase, address, toFaucet } = this.props
-  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
-  const networkName = getNetworkDisplayName(network)
-
-  return h('div', {}, [
-    h('div.buy-modal-content.transfers-subview', {
-    }, [
-      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.buy-modal-content-title', {
-          style: {},
-        }, this.context.t('transfers')),
-        h('div', {}, this.context.t('howToDeposit')),
-      ]),
-
-      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
-
-        isTestNetwork
-          ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)),
-
-        // h('div.buy-modal-content-option', {}, [
-        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
-        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        // ]),,
-
-        this.renderModalContentOption(
-          this.context.t('directDeposit'),
-          this.context.t('depositFromAccount'),
-          () => this.goToAccountDetailsModal()
-        ),
-
-      ]),
-
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))),
-    ]),
-  ])
-}
-
-BuyOptions.prototype.goToAccountDetailsModal = function () {
-  this.props.hideModal()
-  this.props.showAccountDetailModal()
-}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
deleted file mode 100644
index b973f221c..000000000
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../../constants/common'
-
-export default class CancelTransaction extends PureComponent {
-  static propTypes = {
-    value: PropTypes.string,
-  }
-
-  render () {
-    const { value } = this.props
-
-    return (
-      <div className="cancel-transaction-gas-fee">
-        <UserPreferencedCurrencyDisplay
-          className="cancel-transaction-gas-fee__eth"
-          value={value}
-          type={PRIMARY}
-        />
-        <UserPreferencedCurrencyDisplay
-          className="cancel-transaction-gas-fee__fiat"
-          value={value}
-          type={SECONDARY}
-        />
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
deleted file mode 100644
index 8fd7b2679..000000000
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Modal from '../../modal'
-import CancelTransactionGasFee from './cancel-transaction-gas-fee'
-import { SUBMITTED_STATUS } from '../../../constants/transactions'
-
-export default class CancelTransaction extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    createCancelTransaction: PropTypes.func,
-    hideModal: PropTypes.func,
-    showTransactionConfirmedModal: PropTypes.func,
-    transactionStatus: PropTypes.string,
-    newGasFee: PropTypes.string,
-  }
-
-  state = {
-    busy: false,
-  }
-
-  componentDidUpdate () {
-    const { transactionStatus, showTransactionConfirmedModal } = this.props
-
-    if (transactionStatus !== SUBMITTED_STATUS) {
-      showTransactionConfirmedModal()
-      return
-    }
-  }
-
-  handleSubmit = async () => {
-    const { createCancelTransaction, hideModal } = this.props
-
-    this.setState({ busy: true })
-
-    await createCancelTransaction()
-    this.setState({ busy: false }, () => hideModal())
-  }
-
-  handleCancel = () => {
-    this.props.hideModal()
-  }
-
-  render () {
-    const { t } = this.context
-    const { newGasFee } = this.props
-    const { busy } = this.state
-
-    return (
-      <Modal
-        headerText={t('attemptToCancel')}
-        onClose={this.handleCancel}
-        onSubmit={this.handleSubmit}
-        onCancel={this.handleCancel}
-        submitText={t('yesLetsTry')}
-        cancelText={t('nevermind')}
-        submitType="secondary"
-        submitDisabled={busy}
-      >
-        <div>
-          <div className="cancel-transaction__title">
-            { t('cancellationGasFee') }
-          </div>
-          <div className="cancel-transaction__cancel-transaction-gas-fee-container">
-            <CancelTransactionGasFee value={newGasFee} />
-          </div>
-          <div className="cancel-transaction__description">
-            { t('attemptToCancelDescription') }
-          </div>
-        </div>
-      </Modal>
-    )
-  }
-}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
deleted file mode 100644
index 10931a001..000000000
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import ethUtil from 'ethereumjs-util'
-import { multiplyCurrencies } from '../../../conversion-util'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-import CancelTransaction from './cancel-transaction.component'
-import { showModal, createCancelTransaction } from '../../../actions'
-import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
-
-const mapStateToProps = (state, ownProps) => {
-  const { metamask } = state
-  const { transactionId, originalGasPrice } = ownProps
-  const { selectedAddressTxList } = metamask
-  const transaction = selectedAddressTxList.find(({ id }) => id === transactionId)
-  const transactionStatus = transaction ? transaction.status : ''
-
-  const defaultNewGasPrice = ethUtil.addHexPrefix(
-    multiplyCurrencies(originalGasPrice, 1.1, {
-      toNumericBase: 'hex',
-      multiplicandBase: 16,
-      multiplierBase: 10,
-    })
-  )
-
-  const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' })
-
-  return {
-    transactionId,
-    transactionStatus,
-    originalGasPrice,
-    defaultNewGasPrice,
-    newGasFee,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    createCancelTransaction: (txId, customGasPrice) => {
-      return dispatch(createCancelTransaction(txId, customGasPrice))
-    },
-    showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { transactionId, defaultNewGasPrice, ...restStateProps } = stateProps
-  const { createCancelTransaction, ...restDispatchProps } = dispatchProps
-
-  return {
-    ...restStateProps,
-    ...restDispatchProps,
-    ...ownProps,
-    createCancelTransaction: () => createCancelTransaction(transactionId, defaultNewGasPrice),
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-)(CancelTransaction)
diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss
deleted file mode 100644
index 62e8e36fd..000000000
--- a/ui/app/components/modals/cancel-transaction/index.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import './cancel-transaction-gas-fee/index';
-
-.cancel-transaction {
-  &__title {
-    font-weight: 500;
-    padding-bottom: 16px;
-    text-align: center;
-  }
-
-  &__description {
-    text-align: center;
-    font-size: .875rem;
-  }
-
-  &__cancel-transaction-gas-fee-container {
-    margin-bottom: 16px;
-  }
-}
\ No newline at end of file
diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js
deleted file mode 100644
index 3a801a062..000000000
--- a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-import ClearApprovedOriginsComponent from './clear-approved-origins.component'
-import { clearApprovedOrigins } from '../../../actions'
-
-const mapDispatchToProps = dispatch => {
-  return {
-    clearApprovedOrigins: () => dispatch(clearApprovedOrigins()),
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(null, mapDispatchToProps)
-)(ClearApprovedOriginsComponent)
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
deleted file mode 100644
index 195c55421..000000000
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Modal from '../../modal'
-import { addressSummary } from '../../../util'
-import Identicon from '../../identicon'
-import genAccountLink from '../../../../lib/account-link'
-
-export default class ConfirmRemoveAccount extends Component {
-  static propTypes = {
-    hideModal: PropTypes.func.isRequired,
-    removeAccount: PropTypes.func.isRequired,
-    identity: PropTypes.object.isRequired,
-    network: PropTypes.string.isRequired,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  handleRemove = () => {
-    this.props.removeAccount(this.props.identity.address)
-      .then(() => this.props.hideModal())
-  }
-
-  handleCancel = () => {
-    this.props.hideModal()
-  }
-
-  renderSelectedAccount () {
-    const { identity } = this.props
-    return (
-      <div className="confirm-remove-account__account">
-        <div className="confirm-remove-account__account__identicon">
-          <Identicon
-            address={identity.address}
-            diameter={32}
-          />
-        </div>
-        <div className="confirm-remove-account__account__name">
-          <span className="confirm-remove-account__account__label">Name</span>
-          <span className="account_value">{identity.name}</span>
-        </div>
-        <div className="confirm-remove-account__account__address">
-          <span className="confirm-remove-account__account__label">Public Address</span>
-          <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
-        </div>
-        <div className="confirm-remove-account__account__link">
-          <a
-            className=""
-            href={genAccountLink(identity.address, this.props.network)}
-            target={'_blank'}
-            title={this.context.t('etherscanView')}
-          >
-            <img src="images/popout.svg" />
-          </a>
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-
-    return (
-      <Modal
-        headerText={`${t('removeAccount')}?`}
-        onClose={this.handleCancel}
-        onSubmit={this.handleRemove}
-        onCancel={this.handleCancel}
-        submitText={t('remove')}
-        cancelText={t('nevermind')}
-        submitType="secondary"
-      >
-        <div>
-          { this.renderSelectedAccount() }
-          <div className="confirm-remove-account__description">
-            { t('removeAccountDescription') }
-            <a
-              className="confirm-remove-account__link"
-              rel="noopener noreferrer"
-              target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
-              { t('learnMore') }
-            </a>
-          </div>
-        </div>
-      </Modal>
-    )
-  }
-}
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
deleted file mode 100644
index 45c6654ab..000000000
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import ConfirmRemoveAccount from './confirm-remove-account.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-import { removeAccount } from '../../../actions'
-
-const mapStateToProps = state => {
-  return {
-    network: state.metamask.network,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    removeAccount: (address) => dispatch(removeAccount(address)),
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfirmRemoveAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
deleted file mode 100644
index c8a7b8478..000000000
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-import ConfirmResetAccount from './confirm-reset-account.component'
-import { resetAccount } from '../../../actions'
-
-const mapDispatchToProps = dispatch => {
-  return {
-    resetAccount: () => dispatch(resetAccount()),
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(null, mapDispatchToProps)
-)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
deleted file mode 100644
index 4e2e20660..000000000
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import BigNumber from 'bignumber.js'
-import GasModalCard from '../../customize-gas-modal/gas-modal-card'
-import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
-import Button from '../../button'
-
-import {
-  getDecimalGasLimit,
-  getDecimalGasPrice,
-  getPrefixedHexGasLimit,
-  getPrefixedHexGasPrice,
-} from './customize-gas.util'
-
-export default class CustomizeGas extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    txData: PropTypes.object.isRequired,
-    hideModal: PropTypes.func,
-    validate: PropTypes.func,
-    onSubmit: PropTypes.func,
-  }
-
-  state = {
-    gasPrice: 0,
-    gasLimit: 0,
-    originalGasPrice: 0,
-    originalGasLimit: 0,
-  }
-
-  componentDidMount () {
-    const { txData = {} } = this.props
-    const { txParams: { gas: hexGasLimit, gasPrice: hexGasPrice } = {} } = txData
-
-    const gasLimit = getDecimalGasLimit(hexGasLimit)
-    const gasPrice = getDecimalGasPrice(hexGasPrice)
-
-    this.setState({
-      gasPrice,
-      gasLimit,
-      originalGasPrice: gasPrice,
-      originalGasLimit: gasLimit,
-    })
-  }
-
-  handleRevert () {
-    const { originalGasPrice, originalGasLimit } = this.state
-
-    this.setState({
-      gasPrice: originalGasPrice,
-      gasLimit: originalGasLimit,
-    })
-  }
-
-  handleSave () {
-    const { onSubmit, hideModal } = this.props
-    const { gasLimit, gasPrice } = this.state
-    const prefixedHexGasPrice = getPrefixedHexGasPrice(gasPrice)
-    const prefixedHexGasLimit = getPrefixedHexGasLimit(gasLimit)
-
-    Promise.resolve(onSubmit({ gasPrice: prefixedHexGasPrice, gasLimit: prefixedHexGasLimit }))
-      .then(() => hideModal())
-  }
-
-  validate () {
-    const { gasLimit, gasPrice } = this.state
-    return this.props.validate({
-      gasPrice: getPrefixedHexGasPrice(gasPrice),
-      gasLimit: getPrefixedHexGasLimit(gasLimit),
-    })
-  }
-
-  render () {
-    const { t, metricsEvent } = this.context
-    const { hideModal } = this.props
-    const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state
-    const { valid, errorKey } = this.validate()
-
-    return (
-      <div className="customize-gas">
-        <div className="customize-gas__content">
-          <div className="customize-gas__header">
-            <div className="customize-gas__title">
-              { this.context.t('customGas') }
-            </div>
-            <div
-              className="customize-gas__close"
-              onClick={() => hideModal()}
-            />
-          </div>
-          <div className="customize-gas__body">
-            <GasModalCard
-              value={gasPrice}
-              min={MIN_GAS_PRICE_GWEI}
-              step={1}
-              onChange={value => this.setState({ gasPrice: value })}
-              title={t('gasPrice')}
-              copy={t('gasPriceCalculation')}
-            />
-            <GasModalCard
-              value={gasLimit}
-              min={1}
-              step={1}
-              onChange={value => this.setState({ gasLimit: value })}
-              title={t('gasLimit')}
-              copy={t('gasLimitCalculation')}
-            />
-          </div>
-          <div className="customize-gas__footer">
-            { !valid && <div className="customize-gas__error-message">{ t(errorKey) }</div> }
-            <div
-              className="customize-gas__revert"
-              onClick={() => this.handleRevert()}
-            >
-              { t('revert') }
-            </div>
-            <div className="customize-gas__buttons">
-              <Button
-                type="default"
-                className="customize-gas__cancel"
-                onClick={() => hideModal()}
-                style={{ marginRight: '10px' }}
-              >
-                { t('cancel') }
-              </Button>
-              <Button
-                type="primary"
-                className="customize-gas__save"
-                onClick={() => {
-                  metricsEvent({
-                    eventOpts: {
-                      category: 'Activation',
-                      action: 'userCloses',
-                      name: 'closeCustomizeGas',
-                    },
-                    pageOpts: {
-                      section: 'customizeGasModal',
-                      component: 'customizeGasSaveButton',
-                    },
-                    customVariables: {
-                      gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10),
-                      gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10),
-                    },
-                  })
-                  this.handleSave()
-                }}
-                style={{ marginRight: '10px' }}
-                disabled={!valid}
-              >
-                { t('save') }
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/modals/customize-gas/customize-gas.container.js b/ui/app/components/modals/customize-gas/customize-gas.container.js
deleted file mode 100644
index 46a799795..000000000
--- a/ui/app/components/modals/customize-gas/customize-gas.container.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { connect } from 'react-redux'
-import CustomizeGas from './customize-gas.component'
-import { hideModal } from '../../../actions'
-
-const mapStateToProps = state => {
-  const { appState: { modal: { modalState: { props } } } } = state
-  const { txData, onSubmit, validate } = props
-
-  return {
-    txData,
-    onSubmit,
-    validate,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => dispatch(hideModal()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CustomizeGas)
diff --git a/ui/app/components/modals/customize-gas/customize-gas.util.js b/ui/app/components/modals/customize-gas/customize-gas.util.js
deleted file mode 100644
index 6ba4a7705..000000000
--- a/ui/app/components/modals/customize-gas/customize-gas.util.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import ethUtil from 'ethereumjs-util'
-import { conversionUtil } from '../../../conversion-util'
-
-export function getDecimalGasLimit (hexGasLimit) {
-  return conversionUtil(hexGasLimit, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-  })
-}
-
-export function getDecimalGasPrice (hexGasPrice) {
-  return conversionUtil(hexGasPrice, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    toDenomination: 'GWEI',
-  })
-}
-
-export function getPrefixedHexGasLimit (gasLimit) {
-  return ethUtil.addHexPrefix(conversionUtil(gasLimit, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-  }))
-}
-
-export function getPrefixedHexGasPrice (gasPrice) {
-  return ethUtil.addHexPrefix(conversionUtil(gasPrice, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-    fromDenomination: 'GWEI',
-    toDenomination: 'WEI',
-  }))
-}
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
deleted file mode 100644
index 09137d39a..000000000
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ /dev/null
@@ -1,220 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
-const ShapeshiftForm = require('../shapeshift-form')
-
-import Button from '../button'
-
-let DIRECT_DEPOSIT_ROW_TITLE
-let DIRECT_DEPOSIT_ROW_TEXT
-let COINBASE_ROW_TITLE
-let COINBASE_ROW_TEXT
-let SHAPESHIFT_ROW_TITLE
-let SHAPESHIFT_ROW_TEXT
-let FAUCET_ROW_TITLE
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    address: state.metamask.selectedAddress,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    hideWarning: () => {
-      dispatch(actions.hideWarning())
-    },
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
-    toFaucet: network => dispatch(actions.buyEth({ network })),
-  }
-}
-
-inherits(DepositEtherModal, Component)
-function DepositEtherModal (props, context) {
-  Component.call(this)
-
-  // need to set after i18n locale has loaded
-  DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther')
-  DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer')
-  COINBASE_ROW_TITLE = context.t('buyCoinbase')
-  COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer')
-  SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift')
-  SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer')
-  FAUCET_ROW_TITLE = context.t('testFaucet')
-
-  this.state = {
-    buyingWithShapeshift: false,
-  }
-}
-
-DepositEtherModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
-
-
-DepositEtherModal.prototype.facuetRowText = function (networkName) {
-  return this.context.t('getEtherFromFaucet', [networkName])
-}
-
-DepositEtherModal.prototype.renderRow = function ({
-  logo,
-  title,
-  text,
-  buttonLabel,
-  onButtonClick,
-  hide,
-  className,
-  hideButton,
-  hideTitle,
-  onBackClick,
-  showBackButton,
-}) {
-  if (hide) {
-    return null
-  }
-
-  return h('div', {
-      className: className || 'deposit-ether-modal__buy-row',
-    }, [
-
-    onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
-      onClick: onBackClick,
-    }, [
-
-      h('i.fa.fa-arrow-left.cursor-pointer'),
-
-    ]),
-
-    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
-
-      h('div.deposit-ether-modal__buy-row__description', [
-
-        !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
-
-        h('div.deposit-ether-modal__buy-row__description__text', [text]),
-
-      ]),
-
-      !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h(Button, {
-          type: 'primary',
-          className: 'deposit-ether-modal__deposit-button',
-          large: true,
-          onClick: onButtonClick,
-        }, [buttonLabel]),
-      ]),
-
-  ])
-}
-
-DepositEtherModal.prototype.render = function () {
-  const { network, toCoinbase, address, toFaucet } = this.props
-  const { buyingWithShapeshift } = this.state
-
-  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
-  const networkName = getNetworkDisplayName(network)
-
-  return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
-
-    h('div.page-container__header', [
-
-      h('div.page-container__title', [this.context.t('depositEther')]),
-
-      h('div.page-container__subtitle', [
-        this.context.t('needEtherInWallet'),
-      ]),
-
-      h('div.page-container__header-close', {
-        onClick: () => {
-          this.setState({ buyingWithShapeshift: false })
-          this.props.hideWarning()
-          this.props.hideModal()
-        },
-      }),
-
-    ]),
-
-    h('.page-container__content', {}, [
-
-      h('div.deposit-ether-modal__buy-rows', [
-
-        this.renderRow({
-          logo: h('img.deposit-ether-modal__logo', {
-            src: './images/deposit-eth.svg',
-          }),
-          title: DIRECT_DEPOSIT_ROW_TITLE,
-          text: DIRECT_DEPOSIT_ROW_TEXT,
-          buttonLabel: this.context.t('viewAccount'),
-          onButtonClick: () => this.goToAccountDetailsModal(),
-          hide: buyingWithShapeshift,
-        }),
-
-        this.renderRow({
-          logo: h('i.fa.fa-tint.fa-2x'),
-          title: FAUCET_ROW_TITLE,
-          text: this.facuetRowText(networkName),
-          buttonLabel: this.context.t('getEther'),
-          onButtonClick: () => toFaucet(network),
-          hide: !isTestNetwork || buyingWithShapeshift,
-        }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/coinbase logo.png\')',
-              height: '40px',
-            },
-          }),
-          title: COINBASE_ROW_TITLE,
-          text: COINBASE_ROW_TEXT,
-          buttonLabel: this.context.t('continueToCoinbase'),
-          onButtonClick: () => toCoinbase(address),
-          hide: isTestNetwork || buyingWithShapeshift,
-        }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
-            },
-          }),
-          title: SHAPESHIFT_ROW_TITLE,
-          text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: this.context.t('shapeshiftBuy'),
-          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-          hide: isTestNetwork,
-          hideButton: buyingWithShapeshift,
-          hideTitle: buyingWithShapeshift,
-          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-          showBackButton: this.state.buyingWithShapeshift,
-          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-        }),
-
-        buyingWithShapeshift && h(ShapeshiftForm),
-
-      ]),
-
-    ]),
-  ])
-}
-
-DepositEtherModal.prototype.goToAccountDetailsModal = function () {
-  this.props.hideWarning()
-  this.props.hideModal()
-  this.props.showAccountDetailModal()
-}
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
deleted file mode 100644
index edced8725..000000000
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getSelectedAccount } = require('../../selectors')
-
-function mapStateToProps (state) {
-  return {
-    selectedAccount: getSelectedAccount(state),
-    identity: state.appState.modal.modalState.props.identity,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    setAccountLabel: (account, label) => {
-      dispatch(actions.setAccountLabel(account, label))
-    },
-  }
-}
-
-inherits(EditAccountNameModal, Component)
-function EditAccountNameModal (props) {
-  Component.call(this)
-
-  this.state = {
-    inputText: props.identity.name,
-  }
-}
-
-EditAccountNameModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
-
-
-EditAccountNameModal.prototype.render = function () {
-  const { hideModal, setAccountLabel, identity } = this.props
-
-  return h('div', {}, [
-    h('div.flex-column.edit-account-name-modal-content', {
-    }, [
-
-      h('div.edit-account-name-modal-cancel', {
-        onClick: () => {
-          hideModal()
-        },
-      }, [
-        h('i.fa.fa-times'),
-      ]),
-
-      h('div.edit-account-name-modal-title', {
-      }, [this.context.t('editAccountName')]),
-
-      h('input.edit-account-name-modal-input', {
-        placeholder: identity.name,
-        onChange: (event) => {
-          this.setState({ inputText: event.target.value })
-        },
-        value: this.state.inputText,
-      }, []),
-
-      h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
-        onClick: () => {
-          if (this.state.inputText.length !== 0) {
-            setAccountLabel(identity.address, this.state.inputText)
-            hideModal()
-          }
-        },
-        disabled: this.state.inputText.length === 0,
-      }, [
-        this.context.t('save'),
-      ]),
-
-    ]),
-  ])
-}
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
deleted file mode 100644
index d3e3c9a56..000000000
--- a/ui/app/components/modals/export-private-key-modal.js
+++ /dev/null
@@ -1,177 +0,0 @@
-const log = require('loglevel')
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const { stripHexPrefix } = require('ethereumjs-util')
-const actions = require('../../actions')
-const AccountModalContainer = require('./account-modal-container')
-const { getSelectedIdentity } = require('../../selectors')
-const ReadOnlyInput = require('../readonly-input')
-const copyToClipboard = require('copy-to-clipboard')
-const { checksumAddress } = require('../../util')
-import Button from '../button'
-
-function mapStateToPropsFactory () {
-  let selectedIdentity = null
-  return function mapStateToProps (state) {
-    // We should **not** change the identity displayed here even if it changes from underneath us.
-    // If we do, we will be showing the user one private key and a **different** address and name.
-    // Note that the selected identity **will** change from underneath us when we unlock the keyring
-    // which is the expected behavior that we are side-stepping.
-    selectedIdentity = selectedIdentity || getSelectedIdentity(state)
-    return {
-      warning: state.appState.warning,
-      privateKey: state.appState.accountDetail.privateKey,
-      network: state.metamask.network,
-      selectedIdentity,
-      previousModalState: state.appState.modal.previousModalState.name,
-    }
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    exportAccount: (password, address) => {
-      return dispatch(actions.exportAccount(password, address))
-        .then((res) => {
-          dispatch(actions.hideWarning())
-          return res
-        })
-    },
-    showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
-    hideModal: () => dispatch(actions.hideModal()),
-  }
-}
-
-inherits(ExportPrivateKeyModal, Component)
-function ExportPrivateKeyModal () {
-  Component.call(this)
-
-  this.state = {
-    password: '',
-    privateKey: null,
-    showWarning: true,
-  }
-}
-
-ExportPrivateKeyModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal)
-
-
-ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
-  const { exportAccount } = this.props
-
-  exportAccount(password, address)
-    .then(privateKey => this.setState({
-      privateKey,
-      showWarning: false,
-    }))
-    .catch((e) => log.error(e))
-}
-
-ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
-  return h('span.private-key-password-label', privateKey
-    ? this.context.t('copyPrivateKey')
-    : this.context.t('typePassword')
-  )
-}
-
-ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
-  const plainKey = privateKey && stripHexPrefix(privateKey)
-
-  return privateKey
-    ? h(ReadOnlyInput, {
-        wrapperClass: 'private-key-password-display-wrapper',
-        inputClass: 'private-key-password-display-textarea',
-        textarea: true,
-        value: plainKey,
-        onClick: () => copyToClipboard(plainKey),
-      })
-    : h('input.private-key-password-input', {
-      type: 'password',
-      onChange: event => this.setState({ password: event.target.value }),
-    })
-}
-
-ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
-  return h('div.export-private-key-buttons', {}, [
-    !privateKey && h(Button, {
-      type: 'default',
-      large: true,
-      className: 'export-private-key__button export-private-key__button--cancel',
-      onClick: () => hideModal(),
-    }, this.context.t('cancel')),
-
-    (privateKey
-      ? (
-          h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'export-private-key__button',
-          onClick: () => hideModal(),
-        }, this.context.t('done'))
-      ) : (
-          h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'export-private-key__button',
-          onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
-        }, this.context.t('confirm'))
-      )
-    ),
-
-  ])
-}
-
-ExportPrivateKeyModal.prototype.render = function () {
-  const {
-    selectedIdentity,
-    warning,
-    showAccountDetailModal,
-    hideModal,
-    previousModalState,
-  } = this.props
-  const { name, address } = selectedIdentity
-
-  const {
-    privateKey,
-    showWarning,
-  } = this.state
-
-  return h(AccountModalContainer, {
-    selectedIdentity,
-    showBackButton: previousModalState === 'ACCOUNT_DETAILS',
-    backButtonAction: () => showAccountDetailModal(),
-  }, [
-
-      h('span.account-name', name),
-
-      h(ReadOnlyInput, {
-        wrapperClass: 'ellip-address-wrapper',
-        inputClass: 'qr-ellip-address ellip-address',
-        value: checksumAddress(address),
-      }),
-
-      h('div.account-modal-divider'),
-
-      h('span.modal-body-title', this.context.t('showPrivateKeys')),
-
-      h('div.private-key-password', {}, [
-        this.renderPasswordLabel(privateKey),
-
-        this.renderPasswordInput(privateKey),
-
-        showWarning && warning ? h('span.private-key-password-error', warning) : null,
-      ]),
-
-      h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
-
-      this.renderButtons(privateKey, this.state.password, address, hideModal),
-
-  ])
-}
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
deleted file mode 100644
index 43f3009a5..000000000
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-import Identicon from '../identicon'
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    token: state.appState.modal.modalState.props.token,
-    assetImages: state.metamask.assetImages,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => dispatch(actions.hideModal()),
-    hideToken: address => {
-      dispatch(actions.removeToken(address))
-        .then(() => {
-          dispatch(actions.hideModal())
-        })
-    },
-  }
-}
-
-inherits(HideTokenConfirmationModal, Component)
-function HideTokenConfirmationModal () {
-  Component.call(this)
-
-  this.state = {}
-}
-
-HideTokenConfirmationModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
-
-
-HideTokenConfirmationModal.prototype.render = function () {
-  const { token, network, hideToken, hideModal, assetImages } = this.props
-  const { symbol, address } = token
-  const image = assetImages[address]
-
-  return h('div.hide-token-confirmation', {}, [
-    h('div.hide-token-confirmation__container', {
-    }, [
-      h('div.hide-token-confirmation__title', {}, [
-        this.context.t('hideTokenPrompt'),
-      ]),
-
-      h(Identicon, {
-        className: 'hide-token-confirmation__identicon',
-        diameter: 45,
-        address,
-        network,
-        image,
-      }),
-
-      h('div.hide-token-confirmation__symbol', {}, symbol),
-
-      h('div.hide-token-confirmation__copy', {}, [
-        this.context.t('readdToken'),
-      ]),
-
-      h('div.hide-token-confirmation__buttons', {}, [
-        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
-          onClick: () => hideModal(),
-        }, [
-          this.context.t('cancel'),
-        ]),
-        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
-          onClick: () => hideToken(address),
-        }, [
-          this.context.t('hide'),
-        ]),
-      ]),
-    ]),
-  ])
-}
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
deleted file mode 100644
index 555da87ef..000000000
--- a/ui/app/components/modals/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import './cancel-transaction/index';
-
-@import './confirm-remove-account/index';
-
-@import './customize-gas/index';
-
-@import './qr-scanner/index';
-
-@import './transaction-confirmed/index';
-
-@import './metametrics-opt-in-modal/index';
diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.container.js b/ui/app/components/modals/loading-network-error/loading-network-error.container.js
deleted file mode 100644
index 3fcba20aa..000000000
--- a/ui/app/components/modals/loading-network-error/loading-network-error.container.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import LoadingNetworkError from './loading-network-error.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-
-export default withModalProps(LoadingNetworkError)
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
deleted file mode 100644
index 1a224eb12..000000000
--- a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerFooter from '../../page-container/page-container-footer'
-
-export default class MetaMetricsOptInModal extends Component {
-  static propTypes = {
-    setParticipateInMetaMetrics: PropTypes.func,
-    hideModal: PropTypes.func,
-  }
-
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-  }
-
-  render () {
-    const { metricsEvent } = this.context
-    const { setParticipateInMetaMetrics, hideModal } = this.props
-
-    return (
-      <div className="metametrics-opt-in metametrics-opt-in-modal">
-        <div className="metametrics-opt-in__main">
-          <div className="metametrics-opt-in__content">
-            <div className="app-header__logo-container">
-              <img
-                className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-                src="/images/logo/metamask-logo-horizontal.svg"
-                height={30}
-              />
-              <img
-                className="app-header__metafox-logo app-header__metafox-logo--icon"
-                src="/images/logo/metamask-fox.svg"
-                height={42}
-                width={42}
-              />
-            </div>
-            <div className="metametrics-opt-in__body-graphic">
-              <img src="images/metrics-chart.svg" />
-            </div>
-            <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
-            <div className="metametrics-opt-in__body">
-              <div className="metametrics-opt-in__description">
-               MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
-               will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem.
-              </div>
-              <div className="metametrics-opt-in__description">
-               MetaMask will..
-              </div>
-
-              <div className="metametrics-opt-in__committments">
-                <div className="metametrics-opt-in__row">
-                  <i className="fa fa-check" />
-                  <div className="metametrics-opt-in__row-description">
-                    Always allow you to opt-out via Settings
-                  </div>
-                </div>
-                <div className="metametrics-opt-in__row">
-                  <i className="fa fa-check" />
-                  <div className="metametrics-opt-in__row-description">
-                    Send anonymized click & pageview events
-                  </div>
-                </div>
-                <div className="metametrics-opt-in__row">
-                  <i className="fa fa-check" />
-                  <div className="metametrics-opt-in__row-description">
-                    Maintain a public aggregate dashboard to educate the community
-                  </div>
-                </div>
-                <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
-                  <i className="fa fa-times" />
-                  <div className="metametrics-opt-in__row-description">
-                    <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
-                  </div>
-                </div>
-                <div className="metametrics-opt-in__row">
-                  <i className="fa fa-times" />
-                  <div className="metametrics-opt-in__row-description">
-                    <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
-                  </div>
-                </div>
-                <div className="metametrics-opt-in__row">
-                  <i className="fa fa-times" />
-                  <div className="metametrics-opt-in__row-description">
-                    <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="metametrics-opt-in__bottom-text">
-              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
-                href="https://metamask.io/privacy.html"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Privacy Policy here
-              </a>.
-            </div>
-          </div>
-          <div className="metametrics-opt-in__footer">
-            <PageContainerFooter
-              onCancel={() => {
-                setParticipateInMetaMetrics(false)
-                  .then(() => {
-                    metricsEvent({
-                      eventOpts: {
-                        category: 'Onboarding',
-                        action: 'Metrics Option',
-                        name: 'Metrics Opt Out',
-                      },
-                      isOptIn: true,
-                    }, {
-                      excludeMetaMetricsId: true,
-                    })
-                    hideModal()
-                  })
-              }}
-              cancelText={'No Thanks'}
-              hideCancel={false}
-              onSubmit={() => {
-                setParticipateInMetaMetrics(true)
-                  .then(() => {
-                    metricsEvent({
-                      eventOpts: {
-                        category: 'Onboarding',
-                        action: 'Metrics Option',
-                        name: 'Metrics Opt In',
-                      },
-                      isOptIn: true,
-                    })
-                    hideModal()
-                  })
-              }}
-              submitText={'I agree'}
-              submitButtonType={'confirm'}
-              disabled={false}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
deleted file mode 100644
index 525806b75..000000000
--- a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import MetaMetricsOptInModal from './metametrics-opt-in-modal.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-import { setParticipateInMetaMetrics } from '../../../actions'
-
-const mapStateToProps = (state, ownProps) => {
-  const { unapprovedTxCount } = ownProps
-
-  return {
-    unapprovedTxCount,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(mapStateToProps, mapDispatchToProps),
-)(MetaMetricsOptInModal)
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
deleted file mode 100644
index 8ab599a71..000000000
--- a/ui/app/components/modals/modal.js
+++ /dev/null
@@ -1,511 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const FadeModal = require('boron').FadeModal
-const actions = require('../../actions')
-const { resetCustomData: resetCustomGasData } = require('../../ducks/gas.duck')
-const isMobileView = require('../../../lib/is-mobile-view')
-const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
-
-// Modal Components
-const BuyOptions = require('./buy-options-modal')
-const DepositEtherModal = require('./deposit-ether-modal')
-const AccountDetailsModal = require('./account-details-modal')
-const EditAccountNameModal = require('./edit-account-name-modal')
-const ExportPrivateKeyModal = require('./export-private-key-modal')
-const NewAccountModal = require('./new-account-modal')
-const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
-const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
-const NotifcationModal = require('./notification-modal')
-const QRScanner = require('./qr-scanner')
-
-import ConfirmRemoveAccount from './confirm-remove-account'
-import ConfirmResetAccount from './confirm-reset-account'
-import TransactionConfirmed from './transaction-confirmed'
-import CancelTransaction from './cancel-transaction'
-
-import MetaMetricsOptInModal from './metametrics-opt-in-modal'
-import RejectTransactions from './reject-transactions'
-import ClearApprovedOrigins from './clear-approved-origins'
-import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
-
-const modalContainerBaseStyle = {
-  transform: 'translate3d(-50%, 0, 0px)',
-  border: '1px solid #CCCFD1',
-  borderRadius: '8px',
-  backgroundColor: '#FFFFFF',
-  boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
-}
-
-const modalContainerLaptopStyle = {
-  ...modalContainerBaseStyle,
-  width: '344px',
-  top: '15%',
-}
-
-const modalContainerMobileStyle = {
-  ...modalContainerBaseStyle,
-  width: '309px',
-  top: '12.5%',
-}
-
-const accountModalStyle = {
-  mobileModalStyle: {
-    width: '95%',
-    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-    borderRadius: '4px',
-    top: '10%',
-    transform: 'none',
-    left: '0',
-    right: '0',
-    margin: '0 auto',
-  },
-  laptopModalStyle: {
-    width: '360px',
-    // top: 'calc(33% + 45px)',
-    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-    borderRadius: '4px',
-    top: '10%',
-    transform: 'none',
-    left: '0',
-    right: '0',
-    margin: '0 auto',
-  },
-  contentStyle: {
-    borderRadius: '4px',
-  },
-}
-
-const MODALS = {
-  BUY: {
-    contents: [
-      h(BuyOptions, {}, []),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
-      top: '10%',
-    },
-    laptopModalStyle: {
-      width: '66%',
-      maxWidth: '550px',
-      top: 'calc(10% + 10px)',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
-      transform: 'none',
-    },
-  },
-
-  DEPOSIT_ETHER: {
-    contents: [
-      h(DepositEtherModal, {}, []),
-    ],
-    onHide: (props) => props.hideWarning(),
-    mobileModalStyle: {
-      width: '100%',
-      height: '100%',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
-      top: '0',
-      display: 'flex',
-    },
-    laptopModalStyle: {
-      width: 'initial',
-      maxWidth: '850px',
-      top: 'calc(10% + 10px)',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-      boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
-      borderRadius: '7px',
-      transform: 'none',
-      height: 'calc(80% - 20px)',
-      overflowY: 'hidden',
-    },
-    contentStyle: {
-      borderRadius: '7px',
-      height: '100%',
-    },
-  },
-
-  EDIT_ACCOUNT_NAME: {
-    contents: [
-      h(EditAccountNameModal, {}, []),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
-      top: '10%',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-    },
-    laptopModalStyle: {
-      width: '375px',
-      // top: 'calc(30% + 10px)',
-      top: '10%',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-    },
-  },
-
-  ACCOUNT_DETAILS: {
-    contents: [
-      h(AccountDetailsModal, {}, []),
-    ],
-    ...accountModalStyle,
-  },
-
-  EXPORT_PRIVATE_KEY: {
-    contents: [
-      h(ExportPrivateKeyModal, {}, []),
-    ],
-    ...accountModalStyle,
-  },
-
-  SHAPESHIFT_DEPOSIT_TX: {
-    contents: [
-      h(ShapeshiftDepositTxModal),
-    ],
-    ...accountModalStyle,
-  },
-
-  HIDE_TOKEN_CONFIRMATION: {
-    contents: [
-      h(HideTokenConfirmationModal, {}, []),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
-    },
-    laptopModalStyle: {
-      width: '449px',
-      top: 'calc(33% + 45px)',
-    },
-  },
-
-  CLEAR_APPROVED_ORIGINS: {
-    contents: h(ClearApprovedOrigins),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  METAMETRICS_OPT_IN_MODAL: {
-    contents: h(MetaMetricsOptInModal),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-      width: '100%',
-      height: '100%',
-      top: '0px',
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-      top: '10%',
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  OLD_UI_NOTIFICATION_MODAL: {
-    contents: [
-      h(NotifcationModal, {
-        header: 'oldUI',
-        message: 'oldUIMessage',
-      }),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
-    },
-    laptopModalStyle: {
-      width: '449px',
-      top: 'calc(33% + 45px)',
-    },
-  },
-
-  GAS_PRICE_INFO_MODAL: {
-    contents: [
-      h(NotifcationModal, {
-        header: 'gasPriceNoDenom',
-        message: 'gasPriceInfoModalContent',
-      }),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
-    },
-    laptopModalStyle: {
-      width: '449px',
-      top: 'calc(33% + 45px)',
-    },
-  },
-
-  GAS_LIMIT_INFO_MODAL: {
-    contents: [
-      h(NotifcationModal, {
-        header: 'gasLimit',
-        message: 'gasLimitInfoModalContent',
-      }),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
-    },
-    laptopModalStyle: {
-      width: '449px',
-      top: 'calc(33% + 45px)',
-    },
-  },
-
-  CONFIRM_RESET_ACCOUNT: {
-    contents: h(ConfirmResetAccount),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  CONFIRM_REMOVE_ACCOUNT: {
-    contents: h(ConfirmRemoveAccount),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  NEW_ACCOUNT: {
-    contents: [
-      h(NewAccountModal, {}, []),
-    ],
-    mobileModalStyle: {
-      width: '95%',
-      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-      top: '10%',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-    },
-    laptopModalStyle: {
-      width: '449px',
-      // top: 'calc(33% + 45px)',
-      top: '10%',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-    },
-  },
-
-  CUSTOMIZE_GAS: {
-    contents: [
-      h(ConfirmCustomizeGasModal),
-    ],
-    mobileModalStyle: {
-      width: '100vw',
-      height: '100vh',
-      top: '0',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-    },
-    laptopModalStyle: {
-      width: 'auto',
-      height: '0px',
-      top: '80px',
-      left: '0px',
-      transform: 'none',
-      margin: '0 auto',
-      position: 'relative',
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-    customOnHideOpts: {
-      action: resetCustomGasData,
-      args: [],
-    },
-  },
-
-  TRANSACTION_CONFIRMED: {
-    disableBackdropClick: true,
-    contents: h(TransactionConfirmed),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  QR_SCANNER: {
-    contents: h(QRScanner),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  CANCEL_TRANSACTION: {
-    contents: h(CancelTransaction),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  REJECT_TRANSACTIONS: {
-    contents: h(RejectTransactions),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
-  DEFAULT: {
-    contents: [],
-    mobileModalStyle: {},
-    laptopModalStyle: {},
-  },
-}
-
-const BACKDROPSTYLE = {
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
-}
-
-function mapStateToProps (state) {
-  return {
-    active: state.appState.modal.open,
-    modalState: state.appState.modal.modalState,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: (customOnHideOpts) => {
-      dispatch(actions.hideModal())
-      if (customOnHideOpts && customOnHideOpts.action) {
-        dispatch(customOnHideOpts.action(...customOnHideOpts.args))
-      }
-    },
-    hideWarning: () => {
-      dispatch(actions.hideWarning())
-    },
-
-  }
-}
-
-// Global Modal Component
-inherits(Modal, Component)
-function Modal () {
-  Component.call(this)
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
-
-Modal.prototype.render = function () {
-  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
-
-  const { contents: children, disableBackdropClick = false } = modal
-  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
-  const contentStyle = modal.contentStyle || {}
-
-  return h(FadeModal,
-    {
-      className: 'modal',
-      keyboard: false,
-      onHide: () => {
-        if (modal.onHide) {
-          modal.onHide(this.props)
-        }
-        this.onHide(modal.customOnHideOpts)
-      },
-      ref: (ref) => {
-        this.modalRef = ref
-      },
-      modalStyle,
-      contentStyle,
-      backdropStyle: BACKDROPSTYLE,
-      closeOnClick: !disableBackdropClick,
-    },
-    children,
-  )
-}
-
-Modal.prototype.componentWillReceiveProps = function (nextProps) {
-  if (nextProps.active) {
-    this.show()
-  } else if (this.props.active) {
-    this.hide()
-  }
-}
-
-Modal.prototype.onHide = function (customOnHideOpts) {
-  if (this.props.onHideCallback) {
-    this.props.onHideCallback()
-  }
-  this.props.hideModal(customOnHideOpts)
-}
-
-Modal.prototype.hide = function () {
-  this.modalRef.hide()
-}
-
-Modal.prototype.show = function () {
-  this.modalRef.show()
-}
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
deleted file mode 100644
index a66a3ed4a..000000000
--- a/ui/app/components/modals/new-account-modal.js
+++ /dev/null
@@ -1,112 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-
-class NewAccountModal extends Component {
-  constructor (props) {
-    super(props)
-    const { numberOfExistingAccounts = 0 } = props
-    const newAccountNumber = numberOfExistingAccounts + 1
-
-    this.state = {
-      newAccountName: `${this.context.t('account')} ${newAccountNumber}`,
-    }
-  }
-
-  render () {
-    const { newAccountName } = this.state
-
-    return h('div', [
-      h('div.new-account-modal-wrapper', {
-      }, [
-        h('div.new-account-modal-header', {}, [
-          this.context.t('newAccount'),
-        ]),
-
-        h('div.modal-close-x', {
-          onClick: this.props.hideModal,
-        }),
-
-        h('div.new-account-modal-content', {}, [
-          this.context.t('accountName'),
-        ]),
-
-        h('div.new-account-input-wrapper', {}, [
-          h('input.new-account-input', {
-            value: this.state.newAccountName,
-            placeholder: this.context.t('sampleAccountName'),
-            onChange: event => this.setState({ newAccountName: event.target.value }),
-          }, []),
-        ]),
-
-        h('div.new-account-modal-content.after-input', {}, [
-          this.context.t('or'),
-        ]),
-
-        h('div.new-account-modal-content.after-input.pointer', {
-          onClick: () => {
-            this.props.hideModal()
-            this.props.showImportPage()
-          },
-        }, this.context.t('importAnAccount')),
-
-        h('div.new-account-modal-content.button.allcaps', {}, [
-          h('button.btn-clear', {
-            onClick: () => this.props.createAccount(newAccountName),
-          }, [
-            this.context.t('save'),
-          ]),
-        ]),
-      ]),
-    ])
-  }
-}
-
-NewAccountModal.propTypes = {
-  hideModal: PropTypes.func,
-  showImportPage: PropTypes.func,
-  createAccount: PropTypes.func,
-  numberOfExistingAccounts: PropTypes.number,
-    t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  const { metamask: { network, selectedAddress, identities = {} } } = state
-  const numberOfExistingAccounts = Object.keys(identities).length
-
-  return {
-    network,
-    address: selectedAddress,
-    numberOfExistingAccounts,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    createAccount: (newAccountName) => {
-      dispatch(actions.addNewAccount())
-        .then((newAccountAddress) => {
-          if (newAccountName) {
-            dispatch(actions.setAccountLabel(newAccountAddress, newAccountName))
-          }
-          dispatch(actions.hideModal())
-        })
-    },
-    showImportPage: () => dispatch(actions.showImportPage()),
-  }
-}
-
-NewAccountModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
-
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
deleted file mode 100644
index 46a4c8a21..000000000
--- a/ui/app/components/modals/notification-modal.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-
-class NotificationModal extends Component {
-  render () {
-    const {
-      header,
-      message,
-      showCancelButton = false,
-      showConfirmButton = false,
-      hideModal,
-      onConfirm,
-    } = this.props
-
-    const showButtons = showCancelButton || showConfirmButton
-
-    return h('div', [
-      h('div.notification-modal__wrapper', {
-      }, [
-
-        h('div.notification-modal__header', {}, [
-          this.context.t(header),
-        ]),
-
-        h('div.notification-modal__message-wrapper', {}, [
-          h('div.notification-modal__message', {}, [
-            this.context.t(message),
-          ]),
-        ]),
-
-        h('div.modal-close-x', {
-          onClick: hideModal,
-        }),
-
-        showButtons && h('div.notification-modal__buttons', [
-
-          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
-            onClick: hideModal,
-          }, 'Cancel'),
-
-          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
-            onClick: () => {
-              onConfirm()
-              hideModal()
-            },
-          }, 'Confirm'),
-
-        ]),
-
-      ]),
-    ])
-  }
-}
-
-NotificationModal.propTypes = {
-  hideModal: PropTypes.func,
-  header: PropTypes.string,
-  message: PropTypes.node,
-  showCancelButton: PropTypes.bool,
-  showConfirmButton: PropTypes.bool,
-  onConfirm: PropTypes.func,
-    t: PropTypes.func,
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-  }
-}
-
-NotificationModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(null, mapDispatchToProps)(NotificationModal)
-
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
deleted file mode 100644
index cb8d07d83..000000000
--- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { BrowserQRCodeReader } from '@zxing/library'
-import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
-import Spinner from '../../spinner'
-import WebcamUtils from '../../../../lib/webcam-utils'
-import PageContainerFooter from '../../page-container/page-container-footer/page-container-footer.component'
-
-export default class QrScanner extends Component {
-  static propTypes = {
-    hideModal: PropTypes.func.isRequired,
-    qrCodeDetected: PropTypes.func,
-    scanQrCode: PropTypes.func,
-    error: PropTypes.bool,
-    errorType: PropTypes.string,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  constructor (props, context) {
-    super(props)
-
-    this.state = {
-      ready: false,
-      msg: context.t('accessingYourCamera'),
-    }
-    this.codeReader = null
-    this.permissionChecker = null
-    this.needsToReinit = false
-
-    // Clear pre-existing qr code data before scanning
-    this.props.qrCodeDetected(null)
-  }
-
-  componentDidMount () {
-    this.initCamera()
-  }
-
-  async checkPermisisions () {
-    const { permissions } = await WebcamUtils.checkStatus()
-    if (permissions) {
-      clearTimeout(this.permissionChecker)
-      // Let the video stream load first...
-      setTimeout(_ => {
-        this.setState({
-          ready: true,
-          msg: this.context.t('scanInstructions'),
-        })
-        if (this.needsToReinit) {
-          this.initCamera()
-          this.needsToReinit = false
-        }
-      }, 2000)
-    } else {
-      // Keep checking for permissions
-      this.permissionChecker = setTimeout(_ => {
-        this.checkPermisisions()
-      }, 1000)
-    }
-  }
-
-  componentWillUnmount () {
-    clearTimeout(this.permissionChecker)
-    if (this.codeReader) {
-      this.codeReader.reset()
-    }
-  }
-
-  initCamera () {
-    this.codeReader = new BrowserQRCodeReader()
-    this.codeReader.getVideoInputDevices()
-      .then(videoInputDevices => {
-        clearTimeout(this.permissionChecker)
-        this.checkPermisisions()
-        this.codeReader.decodeFromInputVideoDevice(undefined, 'video')
-        .then(content => {
-          const result = this.parseContent(content.text)
-          if (result.type !== 'unknown') {
-            this.props.qrCodeDetected(result)
-            this.stopAndClose()
-          } else {
-            this.setState({msg: this.context.t('unknownQrCode')})
-          }
-        })
-        .catch(err => {
-          if (err && err.name === 'NotAllowedError') {
-            this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
-            clearTimeout(this.permissionChecker)
-            this.needsToReinit = true
-            this.checkPermisisions()
-          }
-        })
-      }).catch(err => {
-        console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err)
-      })
-  }
-
-  parseContent (content) {
-    let type = 'unknown'
-    let values = {}
-
-    // Here we could add more cases
-    // To parse other type of links
-    // For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681)
-
-
-    // Ethereum address links - fox ex. ethereum:0x.....1111
-    if (content.split('ethereum:').length > 1) {
-
-      type = 'address'
-      values = {'address': content.split('ethereum:')[1] }
-
-    // Regular ethereum addresses - fox ex. 0x.....1111
-    } else if (content.substring(0, 2).toLowerCase() === '0x') {
-
-      type = 'address'
-      values = {'address': content }
-
-    }
-    return {type, values}
-  }
-
-
-  stopAndClose = () => {
-    if (this.codeReader) {
-      this.codeReader.reset()
-    }
-    this.setState({ ready: false })
-    this.props.hideModal()
-  }
-
-  tryAgain = () => {
-    // close the modal
-    this.stopAndClose()
-    // wait for the animation and try again
-    setTimeout(_ => {
-      this.props.scanQrCode()
-    }, 1000)
-  }
-
-  renderVideo () {
-    return (
-      <div className={'qr-scanner__content__video-wrapper'}>
-        <video
-          id="video"
-          style={{
-            display: this.state.ready ? 'block' : 'none',
-          }}
-        />
-        { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
-      </div>
-    )
-  }
-
-  renderErrorModal () {
-    let title, msg
-
-    if (this.props.error) {
-      if (this.props.errorType === 'NO_WEBCAM_FOUND') {
-        title = this.context.t('noWebcamFoundTitle')
-        msg = this.context.t('noWebcamFound')
-      } else {
-        title = this.context.t('unknownCameraErrorTitle')
-        msg = this.context.t('unknownCameraError')
-      }
-    }
-
-    return (
-      <div className="qr-scanner">
-        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
-
-        <div className="qr-scanner__image">
-          <img src={'images/webcam.svg'} width={70} height={70} />
-        </div>
-        <div className="qr-scanner__title">
-          { title }
-        </div>
-        <div className={'qr-scanner__error'}>
-          {msg}
-        </div>
-        <PageContainerFooter
-          onCancel={this.stopAndClose}
-          onSubmit={this.tryAgain}
-          cancelText={this.context.t('cancel')}
-          submitText={this.context.t('tryAgain')}
-          submitButtonType="confirm"
-        />
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-
-    if (this.props.error) {
-      return this.renderErrorModal()
-    }
-
-    return (
-      <div className="qr-scanner">
-        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
-        <div className="qr-scanner__title">
-          { `${t('scanQrCode')}` }
-        </div>
-        <div className="qr-scanner__content">
-          { this.renderVideo() }
-        </div>
-        <div className={'qr-scanner__status'}>
-          {this.state.msg}
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
deleted file mode 100644
index d0a35e03b..000000000
--- a/ui/app/components/modals/qr-scanner/qr-scanner.container.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { connect } from 'react-redux'
-import QrScanner from './qr-scanner.component'
-
-const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions')
-import {
-  SEND_ROUTE,
-} from '../../../routes'
-
-const mapStateToProps = state => {
-  return {
-    error: state.appState.modal.modalState.props.error,
-    errorType: state.appState.modal.modalState.props.errorType,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => dispatch(hideModal()),
-    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(QrScanner)
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
deleted file mode 100644
index 81e98d3ff..000000000
--- a/ui/app/components/modals/reject-transactions/reject-transactions.container.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import RejectTransactionsModal from './reject-transactions.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-
-const mapStateToProps = (state, ownProps) => {
-  const { unapprovedTxCount } = ownProps
-
-  return {
-    unapprovedTxCount,
-  }
-}
-
-export default compose(
-  withModalProps,
-  connect(mapStateToProps),
-)(RejectTransactionsModal)
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
deleted file mode 100644
index 242c7b89d..000000000
--- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js
+++ /dev/null
@@ -1,40 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const QrView = require('../qr-code')
-const AccountModalContainer = require('./account-modal-container')
-
-function mapStateToProps (state) {
-  return {
-    Qr: state.appState.modal.modalState.props.Qr,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-  }
-}
-
-inherits(ShapeshiftDepositTxModal, Component)
-function ShapeshiftDepositTxModal () {
-  Component.call(this)
-
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal)
-
-ShapeshiftDepositTxModal.prototype.render = function () {
-  const { Qr } = this.props
-
-  return h(AccountModalContainer, {
-  }, [
-    h('div', {}, [
-      h(QrView, {key: 'qr', Qr}),
-    ]),
-  ])
-}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
deleted file mode 100644
index d4e39681a..000000000
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransactionConfirmed from './transaction-confirmed.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-
-export default withModalProps(TransactionConfirmed)
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
deleted file mode 100644
index 22d617099..000000000
--- a/ui/app/components/network-display/network-display.component.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import {
-  MAINNET_CODE,
-  ROPSTEN_CODE,
-  RINKEYBY_CODE,
-  KOVAN_CODE,
-} from '../../../../app/scripts/controllers/network/enums'
-
-const networkToClassHash = {
-  [MAINNET_CODE]: 'mainnet',
-  [ROPSTEN_CODE]: 'ropsten',
-  [RINKEYBY_CODE]: 'rinkeby',
-  [KOVAN_CODE]: 'kovan',
-}
-
-export default class NetworkDisplay extends Component {
-  static defaultProps = {
-    colored: true,
-  }
-
-  static propTypes = {
-    colored: PropTypes.bool,
-    network: PropTypes.string,
-    provider: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  renderNetworkIcon () {
-    const { network } = this.props
-    const networkClass = networkToClassHash[network]
-
-    return networkClass
-      ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
-      : <div
-          className="i fa fa-question-circle fa-med"
-          style={{
-            margin: '0 4px',
-            color: 'rgb(125, 128, 130)',
-          }}
-        />
-  }
-
-  render () {
-    const { colored, network, provider: { type, nickname } } = this.props
-    const networkClass = networkToClassHash[network]
-
-    return (
-      <div
-        className={classnames('network-display__container', {
-          'network-display__container--colored': colored,
-          ['network-display__container--' + networkClass]: colored && networkClass,
-        })}
-      >
-        {
-          networkClass
-            ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
-            : <div
-                className="i fa fa-question-circle fa-med"
-                style={{
-                  margin: '0 4px',
-                  color: 'rgb(125, 128, 130)',
-                }}
-              />
-        }
-        <div className="network-display__name">
-          { type === 'rpc' && nickname ? nickname : this.context.t(type) }
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
deleted file mode 100644
index 198889cf2..000000000
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ethUtil from 'ethereumjs-util'
-import { checkExistingAddresses } from './util'
-import { tokenInfoGetter } from '../../../token-util'
-import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../../routes'
-import TextField from '../../text-field'
-import TokenList from './token-list'
-import TokenSearch from './token-search'
-import PageContainer from '../../page-container'
-import { Tabs, Tab } from '../../tabs'
-
-const emptyAddr = '0x0000000000000000000000000000000000000000'
-const SEARCH_TAB = 'SEARCH'
-const CUSTOM_TOKEN_TAB = 'CUSTOM_TOKEN'
-
-class AddToken extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    setPendingTokens: PropTypes.func,
-    pendingTokens: PropTypes.object,
-    clearPendingTokens: PropTypes.func,
-    tokens: PropTypes.array,
-    identities: PropTypes.object,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      customAddress: '',
-      customSymbol: '',
-      customDecimals: 0,
-      searchResults: [],
-      selectedTokens: {},
-      tokenSelectorError: null,
-      customAddressError: null,
-      customSymbolError: null,
-      customDecimalsError: null,
-      autoFilled: false,
-      displayedTab: SEARCH_TAB,
-      forceEditSymbol: false,
-    }
-  }
-
-  componentDidMount () {
-    this.tokenInfoGetter = tokenInfoGetter()
-    const { pendingTokens = {} } = this.props
-    const pendingTokenKeys = Object.keys(pendingTokens)
-
-    if (pendingTokenKeys.length > 0) {
-      let selectedTokens = {}
-      let customToken = {}
-
-      pendingTokenKeys.forEach(tokenAddress => {
-        const token = pendingTokens[tokenAddress]
-        const { isCustom } = token
-
-        if (isCustom) {
-          customToken = { ...token }
-        } else {
-          selectedTokens = { ...selectedTokens, [tokenAddress]: { ...token } }
-        }
-      })
-
-      const {
-        address: customAddress = '',
-        symbol: customSymbol = '',
-        decimals: customDecimals = 0,
-      } = customToken
-
-      const displayedTab = Object.keys(selectedTokens).length > 0 ? SEARCH_TAB : CUSTOM_TOKEN_TAB
-      this.setState({ selectedTokens, customAddress, customSymbol, customDecimals, displayedTab })
-    }
-  }
-
-  handleToggleToken (token) {
-    const { address } = token
-    const { selectedTokens = {} } = this.state
-    const selectedTokensCopy = { ...selectedTokens }
-
-    if (address in selectedTokensCopy) {
-      delete selectedTokensCopy[address]
-    } else {
-      selectedTokensCopy[address] = token
-    }
-
-    this.setState({
-      selectedTokens: selectedTokensCopy,
-      tokenSelectorError: null,
-    })
-  }
-
-  hasError () {
-    const {
-      tokenSelectorError,
-      customAddressError,
-      customSymbolError,
-      customDecimalsError,
-    } = this.state
-
-    return tokenSelectorError || customAddressError || customSymbolError || customDecimalsError
-  }
-
-  hasSelected () {
-    const { customAddress = '', selectedTokens = {} } = this.state
-    return customAddress || Object.keys(selectedTokens).length > 0
-  }
-
-  handleNext () {
-    if (this.hasError()) {
-      return
-    }
-
-    if (!this.hasSelected()) {
-      this.setState({ tokenSelectorError: this.context.t('mustSelectOne') })
-      return
-    }
-
-    const { setPendingTokens, history } = this.props
-    const {
-      customAddress: address,
-      customSymbol: symbol,
-      customDecimals: decimals,
-      selectedTokens,
-    } = this.state
-
-    const customToken = {
-      address,
-      symbol,
-      decimals,
-    }
-
-    setPendingTokens({ customToken, selectedTokens })
-    history.push(CONFIRM_ADD_TOKEN_ROUTE)
-  }
-
-  async attemptToAutoFillTokenParams (address) {
-    const { symbol = '', decimals = 0 } = await this.tokenInfoGetter(address)
-
-    const autoFilled = Boolean(symbol && decimals)
-    this.setState({ autoFilled })
-    this.handleCustomSymbolChange(symbol || '')
-    this.handleCustomDecimalsChange(decimals)
-  }
-
-  handleCustomAddressChange (value) {
-    const customAddress = value.trim()
-    this.setState({
-      customAddress,
-      customAddressError: null,
-      tokenSelectorError: null,
-      autoFilled: false,
-    })
-
-    const isValidAddress = ethUtil.isValidAddress(customAddress)
-    const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase()
-
-    switch (true) {
-      case !isValidAddress:
-        this.setState({
-          customAddressError: this.context.t('invalidAddress'),
-          customSymbol: '',
-          customDecimals: 0,
-          customSymbolError: null,
-          customDecimalsError: null,
-        })
-
-        break
-      case Boolean(this.props.identities[standardAddress]):
-        this.setState({
-          customAddressError: this.context.t('personalAddressDetected'),
-        })
-
-        break
-      case checkExistingAddresses(customAddress, this.props.tokens):
-        this.setState({
-          customAddressError: this.context.t('tokenAlreadyAdded'),
-        })
-
-        break
-      default:
-        if (customAddress !== emptyAddr) {
-          this.attemptToAutoFillTokenParams(customAddress)
-        }
-    }
-  }
-
-  handleCustomSymbolChange (value) {
-    const customSymbol = value.trim()
-    const symbolLength = customSymbol.length
-    let customSymbolError = null
-
-    if (symbolLength <= 0 || symbolLength >= 12) {
-      customSymbolError = this.context.t('symbolBetweenZeroTwelve')
-    }
-
-    this.setState({ customSymbol, customSymbolError })
-  }
-
-  handleCustomDecimalsChange (value) {
-    const customDecimals = value.trim()
-    const validDecimals = customDecimals !== null &&
-      customDecimals !== '' &&
-      customDecimals >= 0 &&
-      customDecimals <= 36
-    let customDecimalsError = null
-
-    if (!validDecimals) {
-      customDecimalsError = this.context.t('decimalsMustZerotoTen')
-    }
-
-    this.setState({ customDecimals, customDecimalsError })
-  }
-
-  renderCustomTokenForm () {
-    const {
-      customAddress,
-      customSymbol,
-      customDecimals,
-      customAddressError,
-      customSymbolError,
-      customDecimalsError,
-      autoFilled,
-      forceEditSymbol,
-    } = this.state
-
-    return (
-      <div className="add-token__custom-token-form">
-        <TextField
-          id="custom-address"
-          label={this.context.t('tokenContractAddress')}
-          type="text"
-          value={customAddress}
-          onChange={e => this.handleCustomAddressChange(e.target.value)}
-          error={customAddressError}
-          fullWidth
-          margin="normal"
-        />
-        <TextField
-          id="custom-symbol"
-          label={(
-            <div className="add-token__custom-symbol__label-wrapper">
-              <span className="add-token__custom-symbol__label">
-                {this.context.t('tokenSymbol')}
-              </span>
-              {(autoFilled && !forceEditSymbol) && (
-                <div
-                  className="add-token__custom-symbol__edit"
-                  onClick={() => this.setState({ forceEditSymbol: true })}
-                >
-                  {this.context.t('edit')}
-                </div>
-              )}
-            </div>
-          )}
-          type="text"
-          value={customSymbol}
-          onChange={e => this.handleCustomSymbolChange(e.target.value)}
-          error={customSymbolError}
-          fullWidth
-          margin="normal"
-          disabled={autoFilled && !forceEditSymbol}
-        />
-        <TextField
-          id="custom-decimals"
-          label={this.context.t('decimal')}
-          type="number"
-          value={customDecimals}
-          onChange={e => this.handleCustomDecimalsChange(e.target.value)}
-          error={customDecimalsError}
-          fullWidth
-          margin="normal"
-          disabled={autoFilled}
-        />
-      </div>
-    )
-  }
-
-  renderSearchToken () {
-    const { tokenSelectorError, selectedTokens, searchResults } = this.state
-
-    return (
-      <div className="add-token__search-token">
-        <TokenSearch
-          onSearch={({ results = [] }) => this.setState({ searchResults: results })}
-          error={tokenSelectorError}
-        />
-        <div className="add-token__token-list">
-          <TokenList
-            results={searchResults}
-            selectedTokens={selectedTokens}
-            onToggleToken={token => this.handleToggleToken(token)}
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderTabs () {
-    return (
-      <Tabs>
-        <Tab name={this.context.t('search')}>
-          { this.renderSearchToken() }
-        </Tab>
-        <Tab name={this.context.t('customToken')}>
-          { this.renderCustomTokenForm() }
-        </Tab>
-      </Tabs>
-    )
-  }
-
-  render () {
-    const { history, clearPendingTokens } = this.props
-
-    return (
-      <PageContainer
-        title={this.context.t('addTokens')}
-        tabsComponent={this.renderTabs()}
-        onSubmit={() => this.handleNext()}
-        disabled={this.hasError() || !this.hasSelected()}
-        onCancel={() => {
-          clearPendingTokens()
-          history.push(DEFAULT_ROUTE)
-        }}
-      />
-    )
-  }
-}
-
-export default AddToken
diff --git a/ui/app/components/pages/add-token/add-token.container.js b/ui/app/components/pages/add-token/add-token.container.js
deleted file mode 100644
index 87671b156..000000000
--- a/ui/app/components/pages/add-token/add-token.container.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { connect } from 'react-redux'
-import AddToken from './add-token.component'
-
-const { setPendingTokens, clearPendingTokens } = require('../../../actions')
-
-const mapStateToProps = ({ metamask }) => {
-  const { identities, tokens, pendingTokens } = metamask
-  return {
-    identities,
-    tokens,
-    pendingTokens,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setPendingTokens: tokens => dispatch(setPendingTokens(tokens)),
-    clearPendingTokens: () => dispatch(clearPendingTokens()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AddToken)
diff --git a/ui/app/components/pages/add-token/index.scss b/ui/app/components/pages/add-token/index.scss
deleted file mode 100644
index 1690c7654..000000000
--- a/ui/app/components/pages/add-token/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import './token-list/index';
-
-.add-token {
-  &__custom-token-form {
-    padding: 8px 16px 16px;
-
-    input[type="number"]::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      display: none;
-    }
-
-    input[type="number"]:hover::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      display: none;
-    }
-  }
-
-  &__search-token {
-    padding: 16px;
-  }
-
-  &__token-list {
-    margin-top: 16px;
-  }
-
-  &__custom-symbol {
-
-    &__label-wrapper {
-      display: flex;
-      flex-flow: row nowrap;
-    }
-
-    &__label {
-      flex: 0 0 auto;
-    }
-
-    &__edit {
-      flex: 1 1 auto;
-      text-align: right;
-      color: $curious-blue;
-      padding-right: 4px;
-      cursor: pointer;
-    }
-  }
-}
diff --git a/ui/app/components/pages/add-token/token-list/index.scss b/ui/app/components/pages/add-token/token-list/index.scss
deleted file mode 100644
index e32739d59..000000000
--- a/ui/app/components/pages/add-token/token-list/index.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import './token-list-placeholder/index';
-
-.token-list {
-  &__title {
-    font-size: .75rem;
-  }
-
-  &__tokens-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__token {
-    transition: 200ms ease-in-out;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    padding: 8px;
-    margin-top: 8px;
-    box-sizing: border-box;
-    border-radius: 10px;
-    cursor: pointer;
-    border: 2px solid transparent;
-    position: relative;
-
-    &:hover {
-      border: 2px solid rgba($malibu-blue, .5);
-    }
-
-    &--selected {
-      border: 2px solid $malibu-blue !important;
-    }
-
-    &--disabled {
-      opacity: .4;
-      pointer-events: none;
-    }
-  }
-
-  &__token-icon {
-    width: 48px;
-    height: 48px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    border-radius: 50%;
-    background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba($black, .24);
-    margin-right: 12px;
-    flex: 0 0 auto;
-  }
-
-  &__token-data {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__token-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
diff --git a/ui/app/components/pages/add-token/token-search/token-search.component.js b/ui/app/components/pages/add-token/token-search/token-search.component.js
deleted file mode 100644
index 036b2db1e..000000000
--- a/ui/app/components/pages/add-token/token-search/token-search.component.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import contractMap from 'eth-contract-metadata'
-import Fuse from 'fuse.js'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import TextField from '../../../text-field'
-
-const contractList = Object.entries(contractMap)
-  .map(([ _, tokenData]) => tokenData)
-  .filter(tokenData => Boolean(tokenData.erc20))
-
-const fuse = new Fuse(contractList, {
-  shouldSort: true,
-  threshold: 0.45,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    { name: 'name', weight: 0.5 },
-    { name: 'symbol', weight: 0.5 },
-  ],
-})
-
-export default class TokenSearch extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static defaultProps = {
-    error: null,
-  }
-
-  static propTypes = {
-    onSearch: PropTypes.func,
-    error: PropTypes.string,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      searchQuery: '',
-    }
-  }
-
-  handleSearch (searchQuery) {
-    this.setState({ searchQuery })
-    const fuseSearchResult = fuse.search(searchQuery)
-    const addressSearchResult = contractList.filter(token => {
-      return token.address.toLowerCase() === searchQuery.toLowerCase()
-    })
-    const results = [...addressSearchResult, ...fuseSearchResult]
-    this.props.onSearch({ searchQuery, results })
-  }
-
-  renderAdornment () {
-    return (
-      <InputAdornment
-        position="start"
-        style={{ marginRight: '12px' }}
-      >
-        <img src="images/search.svg" />
-      </InputAdornment>
-    )
-  }
-
-  render () {
-    const { error } = this.props
-    const { searchQuery } = this.state
-
-    return (
-      <TextField
-        id="search-tokens"
-        placeholder={this.context.t('searchTokens')}
-        type="text"
-        value={searchQuery}
-        onChange={e => this.handleSearch(e.target.value)}
-        error={error}
-        fullWidth
-        startAdornment={this.renderAdornment()}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
deleted file mode 100644
index ee5d6fa64..000000000
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { DEFAULT_ROUTE } from '../../../routes'
-import Button from '../../button'
-import Identicon from '../../../components/identicon'
-import TokenBalance from '../../token-balance'
-
-export default class ConfirmAddSuggestedToken extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    clearPendingTokens: PropTypes.func,
-    addToken: PropTypes.func,
-    pendingTokens: PropTypes.object,
-    removeSuggestedTokens: PropTypes.func,
-  }
-
-  componentDidMount () {
-    const { pendingTokens = {}, history } = this.props
-
-    if (Object.keys(pendingTokens).length === 0) {
-      history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  getTokenName (name, symbol) {
-    return typeof name === 'undefined'
-      ? symbol
-      : `${name} (${symbol})`
-  }
-
-  render () {
-    const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
-    const pendingTokenKey = Object.keys(pendingTokens)[0]
-    const pendingToken = pendingTokens[pendingTokenKey]
-
-    return (
-      <div className="page-container">
-        <div className="page-container__header">
-          <div className="page-container__title">
-            { this.context.t('addSuggestedTokens') }
-          </div>
-          <div className="page-container__subtitle">
-            { this.context.t('likeToAddTokens') }
-          </div>
-        </div>
-        <div className="page-container__content">
-          <div className="confirm-add-token">
-            <div className="confirm-add-token__header">
-              <div className="confirm-add-token__token">
-                { this.context.t('token') }
-              </div>
-              <div className="confirm-add-token__balance">
-                { this.context.t('balance') }
-              </div>
-            </div>
-            <div className="confirm-add-token__token-list">
-              {
-                Object.entries(pendingTokens)
-                  .map(([ address, token ]) => {
-                    const { name, symbol, image } = token
-
-                    return (
-                      <div
-                        className="confirm-add-token__token-list-item"
-                        key={address}
-                      >
-                        <div className="confirm-add-token__token confirm-add-token__data">
-                          <Identicon
-                            className="confirm-add-token__token-icon"
-                            diameter={48}
-                            address={address}
-                            image={image}
-                          />
-                          <div className="confirm-add-token__name">
-                            { this.getTokenName(name, symbol) }
-                          </div>
-                        </div>
-                        <div className="confirm-add-token__balance">
-                          <TokenBalance token={token} />
-                        </div>
-                      </div>
-                    )
-                })
-              }
-            </div>
-          </div>
-        </div>
-        <div className="page-container__footer">
-          <header>
-            <Button
-              type="default"
-              large
-              className="page-container__footer-button"
-              onClick={() => {
-                removeSuggestedTokens()
-                  .then(() => history.push(DEFAULT_ROUTE))
-              }}
-            >
-              { this.context.t('cancel') }
-            </Button>
-            <Button
-              type="primary"
-              large
-              className="page-container__footer-button"
-              onClick={() => {
-                addToken(pendingToken)
-                  .then(() => removeSuggestedTokens())
-                  .then(() => history.push(DEFAULT_ROUTE))
-              }}
-            >
-              { this.context.t('addToken') }
-            </Button>
-          </header>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
deleted file mode 100644
index 1f2737e52..000000000
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
-import { withRouter } from 'react-router-dom'
-
-const extend = require('xtend')
-
-const { addToken, removeSuggestedTokens } = require('../../../actions')
-
-const mapStateToProps = ({ metamask }) => {
-  const { pendingTokens, suggestedTokens } = metamask
-  const params = extend(pendingTokens, suggestedTokens)
-
-  return {
-    pendingTokens: params,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)),
-    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
deleted file mode 100644
index d3fec79d7..000000000
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes'
-import Button from '../../button'
-import Identicon from '../../identicon'
-import TokenBalance from '../../token-balance'
-
-export default class ConfirmAddToken extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    clearPendingTokens: PropTypes.func,
-    addTokens: PropTypes.func,
-    pendingTokens: PropTypes.object,
-  }
-
-  componentDidMount () {
-    const { pendingTokens = {}, history } = this.props
-
-    if (Object.keys(pendingTokens).length === 0) {
-      history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  getTokenName (name, symbol) {
-    return typeof name === 'undefined'
-      ? symbol
-      : `${name} (${symbol})`
-  }
-
-  render () {
-    const { history, addTokens, clearPendingTokens, pendingTokens } = this.props
-
-    return (
-      <div className="page-container">
-        <div className="page-container__header">
-          <div className="page-container__title">
-            { this.context.t('addTokens') }
-          </div>
-          <div className="page-container__subtitle">
-            { this.context.t('likeToAddTokens') }
-          </div>
-        </div>
-        <div className="page-container__content">
-          <div className="confirm-add-token">
-            <div className="confirm-add-token__header">
-              <div className="confirm-add-token__token">
-                { this.context.t('token') }
-              </div>
-              <div className="confirm-add-token__balance">
-                { this.context.t('balance') }
-              </div>
-            </div>
-            <div className="confirm-add-token__token-list">
-              {
-                Object.entries(pendingTokens)
-                  .map(([ address, token ]) => {
-                    const { name, symbol } = token
-
-                    return (
-                      <div
-                        className="confirm-add-token__token-list-item"
-                        key={address}
-                      >
-                        <div className="confirm-add-token__token confirm-add-token__data">
-                          <Identicon
-                            className="confirm-add-token__token-icon"
-                            diameter={48}
-                            address={address}
-                          />
-                          <div className="confirm-add-token__name">
-                            { this.getTokenName(name, symbol) }
-                          </div>
-                        </div>
-                        <div className="confirm-add-token__balance">
-                          <TokenBalance token={token} />
-                        </div>
-                      </div>
-                    )
-                })
-              }
-            </div>
-          </div>
-        </div>
-        <div className="page-container__footer">
-          <header>
-            <Button
-              type="default"
-              large
-              className="page-container__footer-button"
-              onClick={() => history.push(ADD_TOKEN_ROUTE)}
-            >
-              { this.context.t('back') }
-            </Button>
-            <Button
-              type="primary"
-              large
-              className="page-container__footer-button"
-              onClick={() => {
-                addTokens(pendingTokens)
-                  .then(() => {
-                    clearPendingTokens()
-                    history.push(DEFAULT_ROUTE)
-                  })
-              }}
-            >
-              { this.context.t('addTokens') }
-            </Button>
-          </header>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
deleted file mode 100644
index 0190024d9..000000000
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { connect } from 'react-redux'
-import ConfirmAddToken from './confirm-add-token.component'
-
-const { addTokens, clearPendingTokens } = require('../../../actions')
-
-const mapStateToProps = ({ metamask }) => {
-  const { pendingTokens } = metamask
-  return {
-    pendingTokens,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    addTokens: tokens => dispatch(addTokens(tokens)),
-    clearPendingTokens: () => dispatch(clearPendingTokens()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddToken)
diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.container.js b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
deleted file mode 100644
index 4ef9f4ced..000000000
--- a/ui/app/components/pages/confirm-approve/confirm-approve.container.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { connect } from 'react-redux'
-import ConfirmApprove from './confirm-approve.component'
-import { approveTokenAmountAndToAddressSelector } from '../../../selectors/confirm-transaction'
-
-const mapStateToProps = state => {
-  const { confirmTransaction: { tokenProps: { tokenSymbol } = {} } } = state
-  const { tokenAmount } = approveTokenAmountAndToAddressSelector(state)
-
-  return {
-    tokenAmount,
-    tokenSymbol,
-  }
-}
-
-export default connect(mapStateToProps)(ConfirmApprove)
diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
deleted file mode 100644
index 442a478b8..000000000
--- a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ConfirmTransactionBase from '../confirm-transaction-base'
-import { SEND_ROUTE } from '../../../routes'
-
-export default class ConfirmSendEther extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    editTransaction: PropTypes.func,
-    history: PropTypes.object,
-    txParams: PropTypes.object,
-  }
-
-  handleEdit ({ txData }) {
-    const { editTransaction, history } = this.props
-    editTransaction(txData)
-    history.push(SEND_ROUTE)
-  }
-
-  shouldHideData () {
-    const { txParams = {} } = this.props
-    return !txParams.data
-  }
-
-  render () {
-    const hideData = this.shouldHideData()
-
-    return (
-      <ConfirmTransactionBase
-        action={this.context.t('confirm')}
-        hideData={hideData}
-        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
deleted file mode 100644
index e48ef54a8..000000000
--- a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
-import { updateSend } from '../../../actions'
-import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
-import ConfirmSendEther from './confirm-send-ether.component'
-
-const mapStateToProps = state => {
-  const { confirmTransaction: { txData: { txParams } = {} } } = state
-
-  return {
-    txParams,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    editTransaction: txData => {
-      const { id, txParams } = txData
-      const {
-        gas: gasLimit,
-        gasPrice,
-        to,
-        value: amount,
-      } = txParams
-
-      dispatch(updateSend({
-        gasLimit,
-        gasPrice,
-        gasTotal: null,
-        to,
-        amount,
-        errors: { to: null, amount: null },
-        editingTransactionId: id && id.toString(),
-      }))
-
-      dispatch(clearConfirmTransaction())
-    },
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfirmSendEther)
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
deleted file mode 100644
index cb39e3d7b..000000000
--- a/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
-import { SEND_ROUTE } from '../../../routes'
-
-export default class ConfirmSendToken extends Component {
-  static propTypes = {
-    history: PropTypes.object,
-    editTransaction: PropTypes.func,
-    tokenAmount: PropTypes.number,
-  }
-
-  handleEdit (confirmTransactionData) {
-    const { editTransaction, history } = this.props
-    editTransaction(confirmTransactionData)
-    history.push(SEND_ROUTE)
-  }
-
-  render () {
-    const { tokenAmount } = this.props
-
-    return (
-      <ConfirmTokenTransactionBase
-        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
-        tokenAmount={tokenAmount}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
deleted file mode 100644
index d60911e59..000000000
--- a/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
-import ConfirmSendToken from './confirm-send-token.component'
-import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
-import { setSelectedToken, updateSend, showSendTokenPage } from '../../../actions'
-import { conversionUtil } from '../../../conversion-util'
-import { sendTokenTokenAmountAndToAddressSelector } from '../../../selectors/confirm-transaction'
-
-const mapStateToProps = state => {
-  const { tokenAmount } = sendTokenTokenAmountAndToAddressSelector(state)
-
-  return {
-    tokenAmount,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    editTransaction: ({ txData, tokenData, tokenProps }) => {
-      const { txParams: { to: tokenAddress, gas: gasLimit, gasPrice } = {}, id } = txData
-      const { params = [] } = tokenData
-      const { value: to } = params[0] || {}
-      const { value: tokenAmountInDec } = params[1] || {}
-      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
-        fromNumericBase: 'dec',
-        toNumericBase: 'hex',
-      })
-      dispatch(setSelectedToken(tokenAddress))
-      dispatch(updateSend({
-        gasLimit,
-        gasPrice,
-        gasTotal: null,
-        to,
-        amount: tokenAmountInHex,
-        errors: { to: null, amount: null },
-        editingTransactionId: id && id.toString(),
-        token: {
-          ...tokenProps,
-          address: tokenAddress,
-        },
-      }))
-      dispatch(clearConfirmTransaction())
-      dispatch(showSendTokenPage())
-    },
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfirmSendToken)
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
deleted file mode 100644
index 7f1fb4e49..000000000
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ConfirmTransactionBase from '../confirm-transaction-base'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import {
-  formatCurrency,
-  convertTokenToFiat,
-  addFiat,
-  roundExponential,
-} from '../../../helpers/confirm-transaction/util'
-import { getWeiHexFromDecimalValue } from '../../../helpers/conversions.util'
-import { ETH, PRIMARY } from '../../../constants/common'
-
-export default class ConfirmTokenTransactionBase extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    tokenAddress: PropTypes.string,
-    toAddress: PropTypes.string,
-    tokenAmount: PropTypes.number,
-    tokenSymbol: PropTypes.string,
-    fiatTransactionTotal: PropTypes.string,
-    ethTransactionTotal: PropTypes.string,
-    contractExchangeRate: PropTypes.number,
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
-  }
-
-  getFiatTransactionAmount () {
-    const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props
-
-    return convertTokenToFiat({
-      value: tokenAmount,
-      toCurrency: currentCurrency,
-      conversionRate,
-      contractExchangeRate,
-    })
-  }
-
-  renderSubtitleComponent () {
-    const { contractExchangeRate, tokenAmount } = this.props
-
-    const decimalEthValue = (tokenAmount * contractExchangeRate) || 0
-    const hexWeiValue = getWeiHexFromDecimalValue({
-      value: decimalEthValue,
-      fromCurrency: ETH,
-      fromDenomination: ETH,
-    })
-
-    return typeof contractExchangeRate === 'undefined'
-      ? (
-        <span>
-          { this.context.t('noConversionRateAvailable') }
-        </span>
-      ) : (
-        <UserPreferencedCurrencyDisplay
-          value={hexWeiValue}
-          type={PRIMARY}
-          showEthLogo
-          hideLabel
-        />
-      )
-  }
-
-  renderPrimaryTotalTextOverride () {
-    const { tokenAmount, tokenSymbol, ethTransactionTotal } = this.props
-    const tokensText = `${tokenAmount} ${tokenSymbol}`
-
-    return (
-      <div>
-        <span>{ `${tokensText} + ` }</span>
-        <img
-          src="/images/eth.svg"
-          height="18"
-        />
-        <span>{ ethTransactionTotal }</span>
-      </div>
-    )
-  }
-
-  getSecondaryTotalTextOverride () {
-    const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props
-
-    if (typeof contractExchangeRate === 'undefined') {
-      return formatCurrency(fiatTransactionTotal, currentCurrency)
-    } else {
-      const fiatTransactionAmount = this.getFiatTransactionAmount()
-      const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
-      const roundedFiatTotal = roundExponential(fiatTotal)
-      return formatCurrency(roundedFiatTotal, currentCurrency)
-    }
-  }
-
-  render () {
-    const {
-      toAddress,
-      tokenAddress,
-      tokenSymbol,
-      tokenAmount,
-      ...restProps
-    } = this.props
-
-    const tokensText = `${tokenAmount} ${tokenSymbol}`
-
-    return (
-      <ConfirmTransactionBase
-        toAddress={toAddress}
-        identiconAddress={tokenAddress}
-        title={tokensText}
-        subtitleComponent={this.renderSubtitleComponent()}
-        primaryTotalTextOverride={this.renderPrimaryTotalTextOverride()}
-        secondaryTotalTextOverride={this.getSecondaryTotalTextOverride()}
-        {...restProps}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
deleted file mode 100644
index be38acdb0..000000000
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { connect } from 'react-redux'
-import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
-import {
-  tokenAmountAndToAddressSelector,
-  contractExchangeRateSelector,
-} from '../../../selectors/confirm-transaction'
-
-const mapStateToProps = (state, ownProps) => {
-  const { tokenAmount: ownTokenAmount } = ownProps
-  const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state
-  const {
-    txData: { txParams: { to: tokenAddress } = {} } = {},
-    tokenProps: { tokenSymbol } = {},
-    fiatTransactionTotal,
-    ethTransactionTotal,
-  } = confirmTransaction
-
-  const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state)
-  const contractExchangeRate = contractExchangeRateSelector(state)
-
-  return {
-    toAddress,
-    tokenAddress,
-    tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount,
-    tokenSymbol,
-    currentCurrency,
-    conversionRate,
-    contractExchangeRate,
-    fiatTransactionTotal,
-    ethTransactionTotal,
-  }
-}
-
-export default connect(mapStateToProps)(ConfirmTokenTransactionBase)
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
deleted file mode 100644
index 8b101b1ba..000000000
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ /dev/null
@@ -1,574 +0,0 @@
-import ethUtil from 'ethereumjs-util'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ConfirmPageContainer, { ConfirmDetailRow } from '../../confirm-page-container'
-import { isBalanceSufficient } from '../../send/send.utils'
-import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../../routes'
-import {
-  INSUFFICIENT_FUNDS_ERROR_KEY,
-  TRANSACTION_ERROR_KEY,
-} from '../../../constants/error-keys'
-import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../constants/common'
-import AdvancedGasInputs from '../../gas-customization/advanced-gas-inputs'
-
-export default class ConfirmTransactionBase extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    // react-router props
-    match: PropTypes.object,
-    history: PropTypes.object,
-    // Redux props
-    balance: PropTypes.string,
-    cancelTransaction: PropTypes.func,
-    cancelAllTransactions: PropTypes.func,
-    clearConfirmTransaction: PropTypes.func,
-    clearSend: PropTypes.func,
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
-    editTransaction: PropTypes.func,
-    ethTransactionAmount: PropTypes.string,
-    ethTransactionFee: PropTypes.string,
-    ethTransactionTotal: PropTypes.string,
-    fiatTransactionAmount: PropTypes.string,
-    fiatTransactionFee: PropTypes.string,
-    fiatTransactionTotal: PropTypes.string,
-    fromAddress: PropTypes.string,
-    fromName: PropTypes.string,
-    hexTransactionAmount: PropTypes.string,
-    hexTransactionFee: PropTypes.string,
-    hexTransactionTotal: PropTypes.string,
-    isTxReprice: PropTypes.bool,
-    methodData: PropTypes.object,
-    nonce: PropTypes.string,
-    assetImage: PropTypes.string,
-    sendTransaction: PropTypes.func,
-    showCustomizeGasModal: PropTypes.func,
-    showTransactionConfirmedModal: PropTypes.func,
-    showRejectTransactionsConfirmationModal: PropTypes.func,
-    toAddress: PropTypes.string,
-    tokenData: PropTypes.object,
-    tokenProps: PropTypes.object,
-    toName: PropTypes.string,
-    transactionStatus: PropTypes.string,
-    txData: PropTypes.object,
-    unapprovedTxCount: PropTypes.number,
-    currentNetworkUnapprovedTxs: PropTypes.object,
-    updateGasAndCalculate: PropTypes.func,
-    customGas: PropTypes.object,
-    // Component props
-    action: PropTypes.string,
-    contentComponent: PropTypes.node,
-    dataComponent: PropTypes.node,
-    detailsComponent: PropTypes.node,
-    errorKey: PropTypes.string,
-    errorMessage: PropTypes.string,
-    primaryTotalTextOverride: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    secondaryTotalTextOverride: PropTypes.string,
-    hideData: PropTypes.bool,
-    hideDetails: PropTypes.bool,
-    hideSubtitle: PropTypes.bool,
-    identiconAddress: PropTypes.string,
-    onCancel: PropTypes.func,
-    onEdit: PropTypes.func,
-    onEditGas: PropTypes.func,
-    onSubmit: PropTypes.func,
-    setMetaMetricsSendCount: PropTypes.func,
-    metaMetricsSendCount: PropTypes.number,
-    subtitle: PropTypes.string,
-    subtitleComponent: PropTypes.node,
-    summaryComponent: PropTypes.node,
-    title: PropTypes.string,
-    titleComponent: PropTypes.node,
-    valid: PropTypes.bool,
-    warning: PropTypes.string,
-    advancedInlineGasShown: PropTypes.bool,
-    insufficientBalance: PropTypes.bool,
-    hideFiatConversion: PropTypes.bool,
-  }
-
-  state = {
-    submitting: false,
-    submitError: null,
-  }
-
-  componentDidUpdate () {
-    const {
-      transactionStatus,
-      showTransactionConfirmedModal,
-      history,
-      clearConfirmTransaction,
-    } = this.props
-
-    if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
-      showTransactionConfirmedModal({
-        onSubmit: () => {
-          clearConfirmTransaction()
-          history.push(DEFAULT_ROUTE)
-        },
-      })
-
-      return
-    }
-  }
-
-  getErrorKey () {
-    const {
-      balance,
-      conversionRate,
-      hexTransactionFee,
-      txData: {
-        simulationFails,
-        txParams: {
-          value: amount,
-        } = {},
-      } = {},
-    } = this.props
-
-    const insufficientBalance = balance && !isBalanceSufficient({
-      amount,
-      gasTotal: hexTransactionFee || '0x0',
-      balance,
-      conversionRate,
-    })
-
-    if (insufficientBalance) {
-      return {
-        valid: false,
-        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
-      }
-    }
-
-    if (simulationFails) {
-      return {
-        valid: true,
-        errorKey: simulationFails.errorKey ? simulationFails.errorKey : TRANSACTION_ERROR_KEY,
-      }
-    }
-
-    return {
-      valid: true,
-    }
-  }
-
-  handleEditGas () {
-    const { onEditGas, showCustomizeGasModal, action, txData: { origin }, methodData = {} } = this.props
-
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Confirm Screen',
-        name: 'User clicks "Edit" on gas',
-      },
-      customVariables: {
-        recipientKnown: null,
-        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
-        origin,
-      },
-    })
-
-    if (onEditGas) {
-      onEditGas()
-    } else {
-      showCustomizeGasModal()
-    }
-  }
-
-  renderDetails () {
-    const {
-      detailsComponent,
-      primaryTotalTextOverride,
-      secondaryTotalTextOverride,
-      hexTransactionFee,
-      hexTransactionTotal,
-      hideDetails,
-      advancedInlineGasShown,
-      customGas,
-      insufficientBalance,
-      updateGasAndCalculate,
-      hideFiatConversion,
-    } = this.props
-
-    if (hideDetails) {
-      return null
-    }
-
-    return (
-      detailsComponent || (
-        <div className="confirm-page-container-content__details">
-          <div className="confirm-page-container-content__gas-fee">
-            <ConfirmDetailRow
-              label="Gas Fee"
-              value={hexTransactionFee}
-              headerText="Edit"
-              headerTextClassName="confirm-detail-row__header-text--edit"
-              onHeaderClick={() => this.handleEditGas()}
-              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
-            />
-            {advancedInlineGasShown
-              ? <AdvancedGasInputs
-                updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
-                updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
-                customGasPrice={customGas.gasPrice}
-                customGasLimit={customGas.gasLimit}
-                insufficientBalance={insufficientBalance}
-                customPriceIsSafe={true}
-                isSpeedUp={false}
-              />
-              : null
-            }
-          </div>
-          <div>
-            <ConfirmDetailRow
-              label="Total"
-              value={hexTransactionTotal}
-              primaryText={primaryTotalTextOverride}
-              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : secondaryTotalTextOverride}
-              headerText="Amount + Gas Fee"
-              headerTextClassName="confirm-detail-row__header-text--total"
-              primaryValueTextColor="#2f9ae0"
-            />
-          </div>
-        </div>
-      )
-    )
-  }
-
-  renderData () {
-    const { t } = this.context
-    const {
-      txData: {
-        txParams: {
-          data,
-        } = {},
-      } = {},
-      methodData: {
-        name,
-        params,
-      } = {},
-      hideData,
-      dataComponent,
-    } = this.props
-
-    if (hideData) {
-      return null
-    }
-
-    return dataComponent || (
-      <div className="confirm-page-container-content__data">
-        <div className="confirm-page-container-content__data-box-label">
-          {`${t('functionType')}:`}
-          <span className="confirm-page-container-content__function-type">
-            { name || t('notFound') }
-          </span>
-        </div>
-        {
-          params && (
-            <div className="confirm-page-container-content__data-box">
-              <div className="confirm-page-container-content__data-field-label">
-                { `${t('parameters')}:` }
-              </div>
-              <div>
-                <pre>{ JSON.stringify(params, null, 2) }</pre>
-              </div>
-            </div>
-          )
-        }
-        <div className="confirm-page-container-content__data-box-label">
-          {`${t('hexData')}: ${ethUtil.toBuffer(data).length} bytes`}
-        </div>
-        <div className="confirm-page-container-content__data-box">
-          { data }
-        </div>
-      </div>
-    )
-  }
-
-  handleEdit () {
-    const { txData, tokenData, tokenProps, onEdit, action, txData: { origin }, methodData = {} } = this.props
-
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Confirm Screen',
-        name: 'Edit Transaction',
-      },
-      customVariables: {
-        recipientKnown: null,
-        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
-        origin,
-      },
-    })
-
-    onEdit({ txData, tokenData, tokenProps })
-  }
-
-  handleCancelAll () {
-    const {
-      cancelAllTransactions,
-      clearConfirmTransaction,
-      history,
-      showRejectTransactionsConfirmationModal,
-      unapprovedTxCount,
-    } = this.props
-
-    showRejectTransactionsConfirmationModal({
-      unapprovedTxCount,
-      async onSubmit () {
-        await cancelAllTransactions()
-        clearConfirmTransaction()
-        history.push(DEFAULT_ROUTE)
-      },
-    })
-  }
-
-  handleCancel () {
-    const { metricsEvent } = this.context
-    const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, action, txData: { origin }, methodData = {} } = this.props
-
-    if (onCancel) {
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Confirm Screen',
-          name: 'Cancel',
-        },
-        customVariables: {
-          recipientKnown: null,
-          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
-          origin,
-        },
-      })
-      onCancel(txData)
-    } else {
-      cancelTransaction(txData)
-        .then(() => {
-          clearConfirmTransaction()
-          history.push(DEFAULT_ROUTE)
-        })
-    }
-  }
-
-  handleSubmit () {
-    const { metricsEvent } = this.context
-    const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, action, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props
-    const { submitting } = this.state
-
-    if (submitting) {
-      return
-    }
-
-    this.setState({
-      submitting: true,
-      submitError: null,
-    }, () => {
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Confirm Screen',
-          name: 'Transaction Completed',
-        },
-        customVariables: {
-          recipientKnown: null,
-          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
-          origin,
-        },
-      })
-
-      setMetaMetricsSendCount(metaMetricsSendCount + 1)
-        .then(() => {
-          if (onSubmit) {
-            Promise.resolve(onSubmit(txData))
-              .then(() => {
-                this.setState({
-                  submitting: false,
-                })
-              })
-          } else {
-            sendTransaction(txData)
-              .then(() => {
-                clearConfirmTransaction()
-                this.setState({
-                  submitting: false,
-                }, () => {
-                  history.push(DEFAULT_ROUTE)
-                })
-              })
-              .catch(error => {
-                this.setState({
-                  submitting: false,
-                  submitError: error.message,
-                })
-              })
-          }
-        })
-    })
-  }
-
-  renderTitleComponent () {
-    const { title, titleComponent, hexTransactionAmount } = this.props
-
-    // Title string passed in by props takes priority
-    if (title) {
-      return null
-    }
-
-    return titleComponent || (
-      <UserPreferencedCurrencyDisplay
-        value={hexTransactionAmount}
-        type={PRIMARY}
-        showEthLogo
-        ethLogoHeight="26"
-        hideLabel
-      />
-    )
-  }
-
-  renderSubtitleComponent () {
-    const { subtitle, subtitleComponent, hexTransactionAmount } = this.props
-
-    // Subtitle string passed in by props takes priority
-    if (subtitle) {
-      return null
-    }
-
-    return subtitleComponent || (
-      <UserPreferencedCurrencyDisplay
-        value={hexTransactionAmount}
-        type={SECONDARY}
-        showEthLogo
-        hideLabel
-      />
-    )
-  }
-
-  handleNextTx (txId) {
-    const { history, clearConfirmTransaction } = this.props
-    if (txId) {
-      clearConfirmTransaction()
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`)
-    }
-  }
-
-  getNavigateTxData () {
-    const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props
-    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs).reverse()
-    const currentPosition = enumUnapprovedTxs.indexOf(id.toString())
-
-    return {
-      totalTx: enumUnapprovedTxs.length,
-      positionOfCurrentTx: currentPosition + 1,
-      nextTxId: enumUnapprovedTxs[currentPosition + 1],
-      prevTxId: enumUnapprovedTxs[currentPosition - 1],
-      showNavigation: enumUnapprovedTxs.length > 1,
-      firstTx: enumUnapprovedTxs[0],
-      lastTx: enumUnapprovedTxs[enumUnapprovedTxs.length - 1],
-      ofText: this.context.t('ofTextNofM'),
-      requestsWaitingText: this.context.t('requestsAwaitingAcknowledgement'),
-    }
-  }
-
-  componentDidMount () {
-    const { txData: { origin } = {} } = this.props
-    const { metricsEvent } = this.context
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Confirm Screen',
-        name: 'Confirm: Started',
-      },
-      customVariables: {
-        origin,
-      },
-    })
-  }
-
-  render () {
-    const {
-      isTxReprice,
-      fromName,
-      fromAddress,
-      toName,
-      toAddress,
-      methodData,
-      valid: propsValid = true,
-      errorMessage,
-      errorKey: propsErrorKey,
-      action,
-      title,
-      subtitle,
-      hideSubtitle,
-      identiconAddress,
-      summaryComponent,
-      contentComponent,
-      onEdit,
-      nonce,
-      assetImage,
-      warning,
-      unapprovedTxCount,
-    } = this.props
-    const { submitting, submitError } = this.state
-
-    const { name } = methodData
-    const { valid, errorKey } = this.getErrorKey()
-    const { totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = this.getNavigateTxData()
-
-    return (
-      <ConfirmPageContainer
-        fromName={fromName}
-        fromAddress={fromAddress}
-        toName={toName}
-        toAddress={toAddress}
-        showEdit={onEdit && !isTxReprice}
-        action={action || getMethodName(name) || this.context.t('contractInteraction')}
-        title={title}
-        titleComponent={this.renderTitleComponent()}
-        subtitle={subtitle}
-        subtitleComponent={this.renderSubtitleComponent()}
-        hideSubtitle={hideSubtitle}
-        summaryComponent={summaryComponent}
-        detailsComponent={this.renderDetails()}
-        dataComponent={this.renderData()}
-        contentComponent={contentComponent}
-        nonce={nonce}
-        unapprovedTxCount={unapprovedTxCount}
-        assetImage={assetImage}
-        identiconAddress={identiconAddress}
-        errorMessage={errorMessage || submitError}
-        errorKey={propsErrorKey || errorKey}
-        warning={warning}
-        totalTx={totalTx}
-        positionOfCurrentTx={positionOfCurrentTx}
-        nextTxId={nextTxId}
-        prevTxId={prevTxId}
-        showNavigation={showNavigation}
-        onNextTx={(txId) => this.handleNextTx(txId)}
-        firstTx={firstTx}
-        lastTx={lastTx}
-        ofText={ofText}
-        requestsWaitingText={requestsWaitingText}
-        disabled={!propsValid || !valid || submitting}
-        onEdit={() => this.handleEdit()}
-        onCancelAll={() => this.handleCancelAll()}
-        onCancel={() => this.handleCancel()}
-        onSubmit={() => this.handleSubmit()}
-      />
-    )
-  }
-}
-
-export function getMethodName (camelCase) {
-  if (!camelCase || typeof camelCase !== 'string') {
-    return ''
-  }
-
-  return camelCase
-    .replace(/([a-z])([A-Z])/g, '$1 $2')
-    .replace(/([A-Z])([a-z])/g, ' $1$2')
-    .replace(/ +/g, ' ')
-}
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
deleted file mode 100644
index 22f509905..000000000
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
-import R from 'ramda'
-import contractMap from 'eth-contract-metadata'
-import ConfirmTransactionBase from './confirm-transaction-base.component'
-import {
-  clearConfirmTransaction,
-  updateGasAndCalculate,
-} from '../../../ducks/confirm-transaction.duck'
-import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal, setMetaMetricsSendCount } from '../../../actions'
-import {
-  INSUFFICIENT_FUNDS_ERROR_KEY,
-  GAS_LIMIT_TOO_LOW_ERROR_KEY,
-} from '../../../constants/error-keys'
-import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
-import { isBalanceSufficient, calcGasTotal } from '../../send/send.utils'
-import { conversionGreaterThan } from '../../../conversion-util'
-import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
-import { checksumAddress, addressSlicer, valuesFor } from '../../../util'
-import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../../selectors'
-
-const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
-  return {
-    ...acc,
-    [base.toLowerCase()]: contractMap[base],
-  }
-}, {})
-
-const mapStateToProps = (state, props) => {
-  const { toAddress: propsToAddress } = props
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-  const { confirmTransaction, metamask, gas } = state
-  const {
-    ethTransactionAmount,
-    ethTransactionFee,
-    ethTransactionTotal,
-    fiatTransactionAmount,
-    fiatTransactionFee,
-    fiatTransactionTotal,
-    hexTransactionAmount,
-    hexTransactionFee,
-    hexTransactionTotal,
-    tokenData,
-    methodData,
-    txData,
-    tokenProps,
-    nonce,
-  } = confirmTransaction
-  const { txParams = {}, lastGasPrice, id: transactionId } = txData
-  const {
-    from: fromAddress,
-    to: txParamsToAddress,
-    gasPrice,
-    gas: gasLimit,
-    value: amount,
-  } = txParams
-  const accounts = getMetaMaskAccounts(state)
-  const {
-    conversionRate,
-    identities,
-    currentCurrency,
-    selectedAddress,
-    selectedAddressTxList,
-    assetImages,
-    network,
-    unapprovedTxs,
-    metaMetricsSendCount,
-  } = metamask
-  const assetImage = assetImages[txParamsToAddress]
-
-  const {
-    customGasLimit,
-    customGasPrice,
-  } = gas
-
-  const { balance } = accounts[selectedAddress]
-  const { name: fromName } = identities[selectedAddress]
-  const toAddress = propsToAddress || txParamsToAddress
-  const toName = identities[toAddress]
-    ? identities[toAddress].name
-    : (
-      casedContractMap[toAddress]
-        ? casedContractMap[toAddress].name
-        : addressSlicer(checksumAddress(toAddress))
-    )
-
-  const isTxReprice = Boolean(lastGasPrice)
-
-  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
-  const transactionStatus = transaction ? transaction.status : ''
-
-  const currentNetworkUnapprovedTxs = R.filter(
-    ({ metamaskNetworkId }) => metamaskNetworkId === network,
-    unapprovedTxs,
-  )
-  const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length
-
-  const insufficientBalance = !isBalanceSufficient({
-    amount,
-    gasTotal: calcGasTotal(gasLimit, gasPrice),
-    balance,
-    conversionRate,
-  })
-
-  return {
-    balance,
-    fromAddress,
-    fromName,
-    toAddress,
-    toName,
-    ethTransactionAmount,
-    ethTransactionFee,
-    ethTransactionTotal,
-    fiatTransactionAmount,
-    fiatTransactionFee,
-    fiatTransactionTotal,
-    hexTransactionAmount,
-    hexTransactionFee,
-    hexTransactionTotal,
-    txData,
-    tokenData,
-    methodData,
-    tokenProps,
-    isTxReprice,
-    currentCurrency,
-    conversionRate,
-    transactionStatus,
-    nonce,
-    assetImage,
-    unapprovedTxs,
-    unapprovedTxCount,
-    currentNetworkUnapprovedTxs,
-    customGas: {
-      gasLimit: customGasLimit || gasLimit,
-      gasPrice: customGasPrice || gasPrice,
-    },
-    advancedInlineGasShown: getAdvancedInlineGasShown(state),
-    insufficientBalance,
-    hideSubtitle: (!isMainnet && !showFiatInTestnets),
-    hideFiatConversion: (!isMainnet && !showFiatInTestnets),
-    metaMetricsSendCount,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-    clearSend: () => dispatch(clearSend()),
-    showTransactionConfirmedModal: ({ onSubmit }) => {
-      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }))
-    },
-    showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
-      return dispatch(showModal({ name: 'CUSTOMIZE_GAS', txData, onSubmit, validate }))
-    },
-    updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
-      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
-    },
-    showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
-      return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
-    },
-    cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
-    cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
-    sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
-    setMetaMetricsSendCount: val => dispatch(setMetaMetricsSendCount(val)),
-  }
-}
-
-const getValidateEditGas = ({ balance, conversionRate, txData }) => {
-  const { txParams: { value: amount } = {} } = txData
-
-  return ({ gasLimit, gasPrice }) => {
-    const gasTotal = getHexGasTotal({ gasLimit, gasPrice })
-    const hasSufficientBalance = isBalanceSufficient({
-      amount,
-      gasTotal,
-      balance,
-      conversionRate,
-    })
-
-    if (!hasSufficientBalance) {
-      return {
-        valid: false,
-        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
-      }
-    }
-
-    const gasLimitTooLow = gasLimit && conversionGreaterThan(
-      {
-        value: MIN_GAS_LIMIT_DEC,
-        fromNumericBase: 'dec',
-        conversionRate,
-      },
-      {
-        value: gasLimit,
-        fromNumericBase: 'hex',
-      },
-    )
-
-    if (gasLimitTooLow) {
-      return {
-        valid: false,
-        errorKey: GAS_LIMIT_TOO_LOW_ERROR_KEY,
-      }
-    }
-
-    return {
-      valid: true,
-    }
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { balance, conversionRate, txData, unapprovedTxs } = stateProps
-  const {
-    cancelAllTransactions: dispatchCancelAllTransactions,
-    showCustomizeGasModal: dispatchShowCustomizeGasModal,
-    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
-    ...otherDispatchProps
-  } = dispatchProps
-
-  const validateEditGas = getValidateEditGas({ balance, conversionRate, txData })
-
-  return {
-    ...stateProps,
-    ...otherDispatchProps,
-    ...ownProps,
-    showCustomizeGasModal: () => dispatchShowCustomizeGasModal({
-      txData,
-      onSubmit: customGas => dispatchUpdateGasAndCalculate(customGas),
-      validate: validateEditGas,
-    }),
-    cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
-    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(ConfirmTransactionBase)
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
deleted file mode 100644
index cf79b94bc..000000000
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Redirect } from 'react-router-dom'
-import Loading from '../../loading-screen'
-import {
-  CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_DEPLOY_CONTRACT_PATH,
-  CONFIRM_SEND_ETHER_PATH,
-  CONFIRM_SEND_TOKEN_PATH,
-  CONFIRM_APPROVE_PATH,
-  CONFIRM_TRANSFER_FROM_PATH,
-  CONFIRM_TOKEN_METHOD_PATH,
-  SIGNATURE_REQUEST_PATH,
-} from '../../../routes'
-import { isConfirmDeployContract } from '../../../helpers/transactions.util'
-import {
-  TOKEN_METHOD_TRANSFER,
-  TOKEN_METHOD_APPROVE,
-  TOKEN_METHOD_TRANSFER_FROM,
-} from '../../../constants/transactions'
-
-export default class ConfirmTransactionSwitch extends Component {
-  static propTypes = {
-    txData: PropTypes.object,
-    methodData: PropTypes.object,
-    fetchingData: PropTypes.bool,
-    isEtherTransaction: PropTypes.bool,
-  }
-
-  redirectToTransaction () {
-    const {
-      txData,
-      methodData: { name },
-      fetchingData,
-      isEtherTransaction,
-    } = this.props
-    const { id, txParams: { data } = {} } = txData
-
-    if (fetchingData) {
-      return <Loading />
-    }
-
-    if (isConfirmDeployContract(txData)) {
-      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
-      return <Redirect to={{ pathname }} />
-    }
-
-    if (isEtherTransaction) {
-      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
-      return <Redirect to={{ pathname }} />
-    }
-
-    if (data) {
-      const methodName = name && name.toLowerCase()
-
-      switch (methodName) {
-        case TOKEN_METHOD_TRANSFER: {
-          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
-          return <Redirect to={{ pathname }} />
-        }
-        case TOKEN_METHOD_APPROVE: {
-          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
-          return <Redirect to={{ pathname }} />
-        }
-        case TOKEN_METHOD_TRANSFER_FROM: {
-          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TRANSFER_FROM_PATH}`
-          return <Redirect to={{ pathname }} />
-        }
-        default: {
-          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
-          return <Redirect to={{ pathname }} />
-        }
-      }
-    }
-
-    const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
-    return <Redirect to={{ pathname }} />
-  }
-
-  render () {
-    const { txData } = this.props
-
-    if (txData.txParams) {
-      return this.redirectToTransaction()
-    } else if (txData.msgParams) {
-      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
-      return <Redirect to={{ pathname }} />
-    }
-
-    return <Loading />
-  }
-}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
deleted file mode 100644
index 2e460f377..000000000
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Switch, Route } from 'react-router-dom'
-import Loading from '../../loading-screen'
-import ConfirmTransactionSwitch from '../confirm-transaction-switch'
-import ConfirmTransactionBase from '../confirm-transaction-base'
-import ConfirmSendEther from '../confirm-send-ether'
-import ConfirmSendToken from '../confirm-send-token'
-import ConfirmDeployContract from '../confirm-deploy-contract'
-import ConfirmApprove from '../confirm-approve'
-import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
-import ConfTx from '../../../conf-tx'
-import {
-  DEFAULT_ROUTE,
-  CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_DEPLOY_CONTRACT_PATH,
-  CONFIRM_SEND_ETHER_PATH,
-  CONFIRM_SEND_TOKEN_PATH,
-  CONFIRM_APPROVE_PATH,
-  CONFIRM_TRANSFER_FROM_PATH,
-  CONFIRM_TOKEN_METHOD_PATH,
-  SIGNATURE_REQUEST_PATH,
-} from '../../../routes'
-
-export default class ConfirmTransaction extends Component {
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-    totalUnapprovedCount: PropTypes.number.isRequired,
-    match: PropTypes.object,
-    send: PropTypes.object,
-    unconfirmedTransactions: PropTypes.array,
-    setTransactionToConfirm: PropTypes.func,
-    confirmTransaction: PropTypes.object,
-    clearConfirmTransaction: PropTypes.func,
-    fetchBasicGasAndTimeEstimates: PropTypes.func,
-  }
-
-  getParamsTransactionId () {
-    const { match: { params: { id } = {} } } = this.props
-    return id || null
-  }
-
-  componentDidMount () {
-    const {
-      totalUnapprovedCount = 0,
-      send = {},
-      history,
-      confirmTransaction: { txData: { id: transactionId } = {} },
-      fetchBasicGasAndTimeEstimates,
-    } = this.props
-
-    if (!totalUnapprovedCount && !send.to) {
-      history.replace(DEFAULT_ROUTE)
-      return
-    }
-
-    if (!transactionId) {
-      fetchBasicGasAndTimeEstimates()
-      this.setTransactionToConfirm()
-    }
-  }
-
-  componentDidUpdate () {
-    const {
-      setTransactionToConfirm,
-      confirmTransaction: { txData: { id: transactionId } = {} },
-      clearConfirmTransaction,
-    } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
-
-    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
-      clearConfirmTransaction()
-      setTransactionToConfirm(paramsTransactionId)
-      return
-    }
-
-    if (!transactionId) {
-      this.setTransactionToConfirm()
-    }
-  }
-
-  setTransactionToConfirm () {
-    const {
-      history,
-      unconfirmedTransactions,
-      setTransactionToConfirm,
-    } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
-
-    if (paramsTransactionId) {
-      // Check to make sure params ID is valid
-      const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId)
-
-      if (!tx) {
-        history.replace(DEFAULT_ROUTE)
-      } else {
-        setTransactionToConfirm(paramsTransactionId)
-      }
-    } else if (unconfirmedTransactions.length) {
-      const totalUnconfirmed = unconfirmedTransactions.length
-      const transaction = unconfirmedTransactions[totalUnconfirmed - 1]
-      const { id: transactionId, loadingDefaults } = transaction
-
-      if (!loadingDefaults) {
-        setTransactionToConfirm(transactionId)
-      }
-    }
-  }
-
-  render () {
-    const { confirmTransaction: { txData: { id } } = {} } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
-
-    // Show routes when state.confirmTransaction has been set and when either the ID in the params
-    // isn't specified or is specified and matches the ID in state.confirmTransaction in order to
-    // support URLs of /confirm-transaction or /confirm-transaction/<transactionId>
-    return id && (!paramsTransactionId || paramsTransactionId === id + '')
-      ? (
-        <Switch>
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_DEPLOY_CONTRACT_PATH}`}
-            component={ConfirmDeployContract}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
-            component={ConfirmTransactionBase}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_ETHER_PATH}`}
-            component={ConfirmSendEther}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_TOKEN_PATH}`}
-            component={ConfirmSendToken}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
-            component={ConfirmApprove}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TRANSFER_FROM_PATH}`}
-            component={ConfirmTokenTransactionBase}
-          />
-          <Route
-            exact
-            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
-            component={ConfTx}
-          />
-          <Route path="*" component={ConfirmTransactionSwitch} />
-        </Switch>
-      )
-      : <Loading />
-  }
-}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
deleted file mode 100644
index 46342dc76..000000000
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
-import {
-  setTransactionToConfirm,
-  clearConfirmTransaction,
-} from '../../../ducks/confirm-transaction.duck'
-import {
-  fetchBasicGasAndTimeEstimates,
-} from '../../../ducks/gas.duck'
-import ConfirmTransaction from './confirm-transaction.component'
-import { getTotalUnapprovedCount } from '../../../selectors'
-import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
-
-const mapStateToProps = state => {
-  const { metamask: { send }, confirmTransaction } = state
-
-  return {
-    totalUnapprovedCount: getTotalUnapprovedCount(state),
-    send,
-    confirmTransaction,
-    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
-    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps),
-)(ConfirmTransaction)
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
deleted file mode 100644
index c63de234a..000000000
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ /dev/null
@@ -1,205 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const genAccountLink = require('../../../../../lib/account-link.js')
-const Select = require('react-select').default
-import Button from '../../../button'
-
-class AccountList extends Component {
-    constructor (props, context) {
-        super(props)
-    }
-
-    getHdPaths () {
-      return [
-        {
-          label: `Ledger Live`,
-          value: `m/44'/60'/0'/0/0`,
-        },
-        {
-          label: `Legacy (MEW / MyCrypto)`,
-          value: `m/44'/60'/0'`,
-        },
-      ]
-    }
-
-    goToNextPage = () => {
-      // If we have < 5 accounts, it's restricted by BIP-44
-      if (this.props.accounts.length === 5) {
-        this.props.getPage(this.props.device, 1, this.props.selectedPath)
-      } else {
-        this.props.onAccountRestriction()
-      }
-    }
-
-    goToPreviousPage = () => {
-      this.props.getPage(this.props.device, -1, this.props.selectedPath)
-    }
-
-    renderHdPathSelector () {
-      const { onPathChange, selectedPath } = this.props
-
-      const options = this.getHdPaths()
-      return h('div', [
-        h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')),
-        h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')),
-        h('div.hw-connect__hdPath', [
-          h(Select, {
-            className: 'hw-connect__hdPath__select',
-            name: 'hd-path-select',
-            clearable: false,
-            value: selectedPath,
-            options,
-            onChange: (opt) => {
-              onPathChange(opt.value)
-            },
-          }),
-        ]),
-      ])
-    }
-
-    capitalizeDevice (device) {
-      return device.slice(0, 1).toUpperCase() + device.slice(1)
-    }
-
-    renderHeader () {
-      const { device } = this.props
-      return (
-        h('div.hw-connect', [
-
-          h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`),
-
-          device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
-
-          h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')),
-          h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
-        ])
-      )
-    }
-
-    renderAccounts () {
-        return h('div.hw-account-list', [
-            this.props.accounts.map((a, i) => {
-
-                return h('div.hw-account-list__item', { key: a.address }, [
-                h('div.hw-account-list__item__radio', [
-                    h('input', {
-                        type: 'radio',
-                        name: 'selectedAccount',
-                        id: `address-${i}`,
-                        value: a.index,
-                        onChange: (e) => this.props.onAccountChange(e.target.value),
-                        checked: this.props.selectedAccount === a.index.toString(),
-                    }),
-                    h(
-                    'label.hw-account-list__item__label',
-                    {
-                        htmlFor: `address-${i}`,
-                    },
-                    [
-                      h('span.hw-account-list__item__index', a.index + 1),
-                      `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
-                      h('span.hw-account-list__item__balance', `${a.balance}`),
-                    ]),
-                ]),
-                h(
-                    'a.hw-account-list__item__link',
-                    {
-                    href: genAccountLink(a.address, this.props.network),
-                    target: '_blank',
-                    title: this.context.t('etherscanView'),
-                    },
-                    h('img', { src: 'images/popout.svg' })
-                ),
-                ])
-            }),
-        ])
-    }
-
-  renderPagination () {
-    return h('div.hw-list-pagination', [
-      h(
-        'button.hw-list-pagination__button',
-        {
-          onClick: this.goToPreviousPage,
-        },
-        `< ${this.context.t('prev')}`
-      ),
-
-      h(
-        'button.hw-list-pagination__button',
-        {
-          onClick: this.goToNextPage,
-        },
-        `${this.context.t('next')} >`
-      ),
-    ])
-  }
-
-  renderButtons () {
-    const disabled = this.props.selectedAccount === null
-    const buttonProps = {}
-    if (disabled) {
-      buttonProps.disabled = true
-    }
-
-    return h('div.new-account-connect-form__buttons', {}, [
-      h(Button, {
-        type: 'default',
-        large: true,
-        className: 'new-account-connect-form__button',
-        onClick: this.props.onCancel.bind(this),
-      }, [this.context.t('cancel')]),
-
-      h(Button, {
-        type: 'confirm',
-        large: true,
-        className: 'new-account-connect-form__button unlock',
-        disabled,
-        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
-      }, [this.context.t('unlock')]),
-    ])
-  }
-
-  renderForgetDevice () {
-    return h('div.hw-forget-device-container', {}, [
-      h('a', {
-        onClick: this.props.onForgetDevice.bind(this, this.props.device),
-      }, this.context.t('forgetDevice')),
-    ])
-  }
-
-  render () {
-    return h('div.new-account-connect-form.account-list', {}, [
-        this.renderHeader(),
-        this.renderAccounts(),
-        this.renderPagination(),
-        this.renderButtons(),
-        this.renderForgetDevice(),
-    ])
-  }
-
-}
-
-
-AccountList.propTypes = {
-    onPathChange: PropTypes.func.isRequired,
-    selectedPath: PropTypes.string.isRequired,
-    device: PropTypes.string.isRequired,
-    accounts: PropTypes.array.isRequired,
-    onAccountChange: PropTypes.func.isRequired,
-    onForgetDevice: PropTypes.func.isRequired,
-    getPage: PropTypes.func.isRequired,
-    network: PropTypes.string,
-    selectedAccount: PropTypes.string,
-    history: PropTypes.object,
-    onUnlockAccount: PropTypes.func,
-    onCancel: PropTypes.func,
-    onAccountRestriction: PropTypes.func,
-}
-
-AccountList.contextTypes = {
-    t: PropTypes.func,
-}
-
-module.exports = AccountList
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
deleted file mode 100644
index 49a5610c1..000000000
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ /dev/null
@@ -1,197 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-import Button from '../../../button'
-
-class ConnectScreen extends Component {
-    constructor (props, context) {
-        super(props)
-        this.state = {
-          selectedDevice: null,
-        }
-    }
-
-    connect = () => {
-      if (this.state.selectedDevice) {
-        this.props.connectToHardwareWallet(this.state.selectedDevice)
-      }
-      return null
-    }
-
-    renderConnectToTrezorButton () {
-        return h(
-            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
-            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
-            h('img.hw-connect__btn__img', {
-              src: 'images/trezor-logo.svg',
-            })
-        )
-    }
-
-    renderConnectToLedgerButton () {
-        return h(
-          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
-          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
-            h('img.hw-connect__btn__img', {
-              src: 'images/ledger-logo.svg',
-            })
-        )
-    }
-
-    renderButtons () {
-      return (
-        h('div', {}, [
-          h('div.hw-connect__btn-wrapper', {}, [
-            this.renderConnectToLedgerButton(),
-            this.renderConnectToTrezorButton(),
-          ]),
-          h(Button, {
-            type: 'confirm',
-            large: true,
-            className: 'hw-connect__connect-btn',
-            onClick: this.connect,
-            disabled: !this.state.selectedDevice,
-          }, this.context.t('connect')),
-        ])
-      )
-    }
-
-    renderUnsupportedBrowser () {
-        return (
-            h('div.new-account-connect-form.unsupported-browser', {}, [
-                h('div.hw-connect', [
-                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
-                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
-                ]),
-                h(Button, {
-                  type: 'primary',
-                  large: true,
-                  onClick: () => global.platform.openWindow({
-                    url: 'https://google.com/chrome',
-                  }),
-                }, this.context.t('downloadGoogleChrome')),
-            ])
-        )
-    }
-
-    renderHeader () {
-        return (
-            h('div.hw-connect__header', {}, [
-                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
-                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
-            ])
-        )
-    }
-
-    getAffiliateLinks () {
-      const links = {
-        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
-        ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
-      }
-
-      const text = this.context.t('orderOneHere')
-      const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
-
-      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
-    }
-
-    renderTrezorAffiliateLink () {
-        return h('div.hw-connect__get-hw', {}, [
-            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
-            this.getAffiliateLinks(),
-          ])
-    }
-
-
-    scrollToTutorial = (e) => {
-      if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
-    }
-
-    renderLearnMore () {
-        return (
-            h('p.hw-connect__learn-more', {
-                onClick: this.scrollToTutorial,
-            }, [
-                this.context.t('learnMore'),
-                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
-            ])
-        )
-    }
-
-    renderTutorialSteps () {
-        const steps = [
-            {
-                asset: 'hardware-wallet-step-1',
-                dimensions: {width: '225px', height: '75px'},
-             },
-             {
-                asset: 'hardware-wallet-step-2',
-                dimensions: {width: '300px', height: '100px'},
-             },
-             {
-                asset: 'hardware-wallet-step-3',
-                dimensions: {width: '120px', height: '90px'},
-             },
-        ]
-
-        return h('.hw-tutorial', {
-          ref: node => { this.referenceNode = node },
-        },
-            steps.map((step, i) => (
-            h('div.hw-connect', {}, [
-                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
-                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
-                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
-            ])
-            ))
-        )
-    }
-
-    renderFooter () {
-        return (
-            h('div.hw-connect__footer', {}, [
-                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
-                this.renderButtons(),
-                h('p.hw-connect__footer__msg', {}, [
-                    this.context.t(`havingTroubleConnecting`),
-                    h('a.hw-connect__footer__link', {
-                        href: 'https://support.metamask.io/',
-                        target: '_blank',
-                      }, this.context.t('getHelp')),
-                ]),
-            ])
-        )
-    }
-
-    renderConnectScreen () {
-        return (
-            h('div.new-account-connect-form', {}, [
-                this.renderHeader(),
-                this.renderButtons(),
-                this.renderTrezorAffiliateLink(),
-                this.renderLearnMore(),
-                this.renderTutorialSteps(),
-                this.renderFooter(),
-            ])
-        )
-    }
-
-    render () {
-        if (this.props.browserSupported) {
-            return this.renderConnectScreen()
-        }
-        return this.renderUnsupportedBrowser()
-    }
-}
-
-ConnectScreen.propTypes = {
-    connectToHardwareWallet: PropTypes.func.isRequired,
-    browserSupported: PropTypes.bool.isRequired,
-}
-
-ConnectScreen.contextTypes = {
-    t: PropTypes.func,
-}
-
-module.exports = ConnectScreen
-
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
deleted file mode 100644
index 712cc5cbb..000000000
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ /dev/null
@@ -1,293 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../../actions')
-const { getMetaMaskAccounts } = require('../../../../selectors')
-const ConnectScreen = require('./connect-screen')
-const AccountList = require('./account-list')
-const { DEFAULT_ROUTE } = require('../../../../routes')
-const { formatBalance } = require('../../../../util')
-const { getPlatform } = require('../../../../../../app/scripts/lib/util')
-const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums')
-
-class ConnectHardwareForm extends Component {
-  constructor (props, context) {
-    super(props)
-    this.state = {
-      error: null,
-      selectedAccount: null,
-      accounts: [],
-      browserSupported: true,
-      unlocked: false,
-      device: null,
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const { accounts } = nextProps
-    const newAccounts = this.state.accounts.map(a => {
-      const normalizedAddress = a.address.toLowerCase()
-      const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null
-      a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
-      return a
-    })
-    this.setState({accounts: newAccounts})
-  }
-
-
-  componentDidMount () {
-    this.checkIfUnlocked()
-  }
-
-  async checkIfUnlocked () {
-    ['trezor', 'ledger'].forEach(async device => {
-      const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
-      if (unlocked) {
-        this.setState({unlocked: true})
-        this.getPage(device, 0, this.props.defaultHdPaths[device])
-      }
-    })
-  }
-
-  connectToHardwareWallet = (device) => {
-    // Ledger hardware wallets are not supported on firefox
-    if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') {
-      this.setState({ browserSupported: false, error: null})
-      return null
-    }
-
-    if (this.state.accounts.length) {
-      return null
-    }
-
-    // Default values
-    this.getPage(device, 0, this.props.defaultHdPaths[device])
-  }
-
-  onPathChange = (path) => {
-    this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
-    this.getPage(this.state.device, 0, path)
-  }
-
-  onAccountChange = (account) => {
-    this.setState({selectedAccount: account.toString(), error: null})
-  }
-
-  onAccountRestriction = () => {
-    this.setState({error: this.context.t('ledgerAccountRestriction') })
-  }
-
-  showTemporaryAlert () {
-    this.props.showAlert(this.context.t('hardwareWalletConnected'))
-    // Autohide the alert after 5 seconds
-    setTimeout(_ => {
-      this.props.hideAlert()
-    }, 5000)
-  }
-
-  getPage = (device, page, hdPath) => {
-    this.props
-      .connectHardware(device, page, hdPath)
-      .then(accounts => {
-        if (accounts.length) {
-
-          // If we just loaded the accounts for the first time
-          // (device previously locked) show the global alert
-          if (this.state.accounts.length === 0 && !this.state.unlocked) {
-            this.showTemporaryAlert()
-          }
-
-          const newState = { unlocked: true, device, error: null }
-          // Default to the first account
-          if (this.state.selectedAccount === null) {
-            accounts.forEach((a, i) => {
-              if (a.address.toLowerCase() === this.props.address) {
-                newState.selectedAccount = a.index.toString()
-              }
-            })
-          // If the page doesn't contain the selected account, let's deselect it
-          } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
-            newState.selectedAccount = null
-          }
-
-
-          // Map accounts with balances
-          newState.accounts = accounts.map(account => {
-            const normalizedAddress = account.address.toLowerCase()
-            const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null
-            account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
-            return account
-          })
-
-          this.setState(newState)
-        }
-      })
-      .catch(e => {
-        if (e === 'Window blocked') {
-          this.setState({ browserSupported: false, error: null})
-        } else if (e !== 'Window closed' && e !== 'Popup closed') {
-          this.setState({ error: e.toString() })
-        }
-      })
-  }
-
-  onForgetDevice = (device) => {
-    this.props.forgetDevice(device)
-    .then(_ => {
-      this.setState({
-        error: null,
-        selectedAccount: null,
-        accounts: [],
-        unlocked: false,
-      })
-    }).catch(e => {
-      this.setState({ error: e.toString() })
-    })
-  }
-
-  onUnlockAccount = (device) => {
-
-    if (this.state.selectedAccount === null) {
-      this.setState({ error: this.context.t('accountSelectionRequired') })
-    }
-
-    this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
-    .then(_ => {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Accounts',
-          action: 'Connected Hardware Wallet',
-          name: 'Connected Account with: ' + device,
-        },
-      })
-      this.props.history.push(DEFAULT_ROUTE)
-    }).catch(e => {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Accounts',
-          action: 'Connected Hardware Wallet',
-          name: 'Error connecting hardware wallet',
-        },
-        customVariables: {
-          error: e.toString(),
-        },
-      })
-      this.setState({ error: e.toString() })
-    })
-  }
-
-  onCancel = () => {
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-
-  renderError () {
-    return this.state.error
-      ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
-      : null
-  }
-
-  renderContent () {
-    if (!this.state.accounts.length) {
-      return h(ConnectScreen, {
-        connectToHardwareWallet: this.connectToHardwareWallet,
-        browserSupported: this.state.browserSupported,
-      })
-    }
-
-    return h(AccountList, {
-      onPathChange: this.onPathChange,
-      selectedPath: this.props.defaultHdPaths[this.state.device],
-      device: this.state.device,
-      accounts: this.state.accounts,
-      selectedAccount: this.state.selectedAccount,
-      onAccountChange: this.onAccountChange,
-      network: this.props.network,
-      getPage: this.getPage,
-      history: this.props.history,
-      onUnlockAccount: this.onUnlockAccount,
-      onForgetDevice: this.onForgetDevice,
-      onCancel: this.onCancel,
-      onAccountRestriction: this.onAccountRestriction,
-    })
-  }
-
-  render () {
-    return h('div', [
-      this.renderError(),
-      this.renderContent(),
-    ])
-  }
-}
-
-ConnectHardwareForm.propTypes = {
-  hideModal: PropTypes.func,
-  showImportPage: PropTypes.func,
-  showConnectPage: PropTypes.func,
-  connectHardware: PropTypes.func,
-  checkHardwareStatus: PropTypes.func,
-  forgetDevice: PropTypes.func,
-  showAlert: PropTypes.func,
-  hideAlert: PropTypes.func,
-  unlockHardwareWalletAccount: PropTypes.func,
-  setHardwareWalletDefaultHdPath: PropTypes.func,
-  numberOfExistingAccounts: PropTypes.number,
-  history: PropTypes.object,
-  t: PropTypes.func,
-  network: PropTypes.string,
-  accounts: PropTypes.object,
-  address: PropTypes.string,
-  defaultHdPaths: PropTypes.object,
-}
-
-const mapStateToProps = state => {
-  const {
-    metamask: { network, selectedAddress, identities = {} },
-  } = state
-  const accounts = getMetaMaskAccounts(state)
-  const numberOfExistingAccounts = Object.keys(identities).length
-  const {
-    appState: { defaultHdPaths },
-  } = state
-
-  return {
-    network,
-    accounts,
-    address: selectedAddress,
-    numberOfExistingAccounts,
-    defaultHdPaths,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setHardwareWalletDefaultHdPath: ({device, path}) => {
-      return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
-    },
-    connectHardware: (deviceName, page, hdPath) => {
-      return dispatch(actions.connectHardware(deviceName, page, hdPath))
-    },
-    checkHardwareStatus: (deviceName, hdPath) => {
-      return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
-    },
-    forgetDevice: (deviceName) => {
-      return dispatch(actions.forgetDevice(deviceName))
-    },
-    unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
-      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
-    },
-    showImportPage: () => dispatch(actions.showImportPage()),
-    showConnectPage: () => dispatch(actions.showConnectPage()),
-    showAlert: (msg) => dispatch(actions.showAlert(msg)),
-    hideAlert: () => dispatch(actions.hideAlert()),
-  }
-}
-
-ConnectHardwareForm.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(
-  ConnectHardwareForm
-)
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
deleted file mode 100644
index 9aeea5579..000000000
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ /dev/null
@@ -1,170 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const connect = require('react-redux').connect
-const actions = require('../../../../actions')
-const FileInput = require('react-simple-file-input').default
-const { DEFAULT_ROUTE } = require('../../../../routes')
-const { getMetaMaskAccounts } = require('../../../../selectors')
-const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
-import Button from '../../../button'
-
-class JsonImportSubview extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      file: null,
-      fileContents: '',
-    }
-  }
-
-  render () {
-    const { error } = this.props
-
-    return (
-      h('div.new-account-import-form__json', [
-
-        h('p', this.context.t('usedByClients')),
-        h('a.warning', {
-          href: HELP_LINK,
-          target: '_blank',
-        }, this.context.t('fileImportFail')),
-
-        h(FileInput, {
-          readAs: 'text',
-          onLoad: this.onLoad.bind(this),
-          style: {
-            margin: '20px 0px 12px 34%',
-            fontSize: '15px',
-            display: 'flex',
-            justifyContent: 'center',
-          },
-        }),
-
-        h('input.new-account-import-form__input-password', {
-          type: 'password',
-          placeholder: this.context.t('enterPassword'),
-          id: 'json-password-box',
-          onKeyPress: this.createKeyringOnEnter.bind(this),
-        }),
-
-        h('div.new-account-create-form__buttons', {}, [
-
-          h(Button, {
-            type: 'default',
-            large: true,
-            className: 'new-account-create-form__button',
-            onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, [this.context.t('cancel')]),
-
-          h(Button, {
-            type: 'primary',
-            large: true,
-            className: 'new-account-create-form__button',
-            onClick: () => this.createNewKeychain(),
-          }, [this.context.t('import')]),
-
-        ]),
-
-        error ? h('span.error', error) : null,
-      ])
-    )
-  }
-
-  onLoad (event, file) {
-    this.setState({file: file, fileContents: event.target.result})
-  }
-
-  createKeyringOnEnter (event) {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      this.createNewKeychain()
-    }
-  }
-
-  createNewKeychain () {
-    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
-    const state = this.state
-
-    if (!state) {
-      const message = this.context.t('validFileImport')
-      return displayWarning(message)
-    }
-
-    const { fileContents } = state
-
-    if (!fileContents) {
-      const message = this.context.t('needImportFile')
-      return displayWarning(message)
-    }
-
-    const passwordInput = document.getElementById('json-password-box')
-    const password = passwordInput.value
-
-    importNewJsonAccount([ fileContents, password ])
-      .then(({ selectedAddress }) => {
-        if (selectedAddress) {
-          history.push(DEFAULT_ROUTE)
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Accounts',
-              action: 'Import Account',
-              name: 'Imported Account with JSON',
-            },
-          })
-          displayWarning(null)
-        } else {
-          displayWarning('Error importing account.')
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Accounts',
-              action: 'Import Account',
-              name: 'Error importing JSON',
-            },
-          })
-          setSelectedAddress(firstAddress)
-        }
-      })
-      .catch(err => err && displayWarning(err.message || err))
-  }
-}
-
-JsonImportSubview.propTypes = {
-  error: PropTypes.string,
-  goHome: PropTypes.func,
-  displayWarning: PropTypes.func,
-  firstAddress: PropTypes.string,
-  importNewJsonAccount: PropTypes.func,
-  history: PropTypes.object,
-  setSelectedAddress: PropTypes.func,
-  t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  return {
-    error: state.appState.warning,
-    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    goHome: () => dispatch(actions.goHome()),
-    displayWarning: warning => dispatch(actions.displayWarning(warning)),
-    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
-    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
-  }
-}
-
-JsonImportSubview.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(JsonImportSubview)
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
deleted file mode 100644
index 4ba31806f..000000000
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ /dev/null
@@ -1,128 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const actions = require('../../../../actions')
-const { DEFAULT_ROUTE } = require('../../../../routes')
-const { getMetaMaskAccounts } = require('../../../../selectors')
-import Button from '../../../button'
-
-PrivateKeyImportView.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(PrivateKeyImportView)
-
-
-function mapStateToProps (state) {
-  return {
-    error: state.appState.warning,
-    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    importNewAccount: (strategy, [ privateKey ]) => {
-      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
-    },
-    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
-    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
-  }
-}
-
-inherits(PrivateKeyImportView, Component)
-function PrivateKeyImportView () {
-  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
-  Component.call(this)
-}
-
-PrivateKeyImportView.prototype.render = function () {
-  const { error, displayWarning } = this.props
-
-  return (
-    h('div.new-account-import-form__private-key', [
-
-      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),
-
-      h('div.new-account-import-form__private-key-password-container', [
-
-        h('input.new-account-import-form__input-password', {
-          type: 'password',
-          id: 'private-key-box',
-          onKeyPress: e => this.createKeyringOnEnter(e),
-        }),
-
-      ]),
-
-      h('div.new-account-import-form__buttons', {}, [
-
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: () => {
-            displayWarning(null)
-            this.props.history.push(DEFAULT_ROUTE)
-          },
-        }, [this.context.t('cancel')]),
-
-        h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: () => this.createNewKeychain(),
-        }, [this.context.t('import')]),
-
-      ]),
-
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
-
-PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
-  }
-}
-
-PrivateKeyImportView.prototype.createNewKeychain = function () {
-  const input = document.getElementById('private-key-box')
-  const privateKey = input.value
-  const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
-
-  importNewAccount('Private Key', [ privateKey ])
-    .then(({ selectedAddress }) => {
-      if (selectedAddress) {
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Accounts',
-            action: 'Import Account',
-            name: 'Imported Account with Private Key',
-          },
-        })
-        history.push(DEFAULT_ROUTE)
-        displayWarning(null)
-      } else {
-        displayWarning('Error importing account.')
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Accounts',
-            action: 'Import Account',
-            name: 'Error importing with Private Key',
-          },
-        })
-        setSelectedAddress(firstAddress)
-      }
-    })
-    .catch(err => err && displayWarning(err.message || err))
-}
diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
deleted file mode 100644
index d3de1ea01..000000000
--- a/ui/app/components/pages/create-account/index.js
+++ /dev/null
@@ -1,113 +0,0 @@
-const Component = require('react').Component
-const { Switch, Route, matchPath } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const { getCurrentViewContext } = require('../../../selectors')
-const classnames = require('classnames')
-const NewAccountCreateForm = require('./new-account')
-const NewAccountImportForm = require('./import-account')
-const ConnectHardwareForm = require('./connect-hardware')
-const {
-  NEW_ACCOUNT_ROUTE,
-  IMPORT_ACCOUNT_ROUTE,
-  CONNECT_HARDWARE_ROUTE,
-} = require('../../../routes')
-
-class CreateAccountPage extends Component {
-  renderTabs () {
-    const { history, location } = this.props
-
-    return h('div.new-account__tabs', [
-      h('div.new-account__tabs__tab', {
-        className: classnames('new-account__tabs__tab', {
-          'new-account__tabs__selected': matchPath(location.pathname, {
-            path: NEW_ACCOUNT_ROUTE, exact: true,
-          }),
-        }),
-        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
-      }, [
-        this.context.t('create'),
-      ]),
-
-      h('div.new-account__tabs__tab', {
-        className: classnames('new-account__tabs__tab', {
-          'new-account__tabs__selected': matchPath(location.pathname, {
-            path: IMPORT_ACCOUNT_ROUTE, exact: true,
-          }),
-        }),
-        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
-      }, [
-        this.context.t('import'),
-      ]),
-      h(
-        'div.new-account__tabs__tab',
-        {
-          className: classnames('new-account__tabs__tab', {
-            'new-account__tabs__selected': matchPath(location.pathname, {
-              path: CONNECT_HARDWARE_ROUTE,
-              exact: true,
-            }),
-          }),
-          onClick: () => history.push(CONNECT_HARDWARE_ROUTE),
-        },
-        this.context.t('connect')
-      ),
-    ])
-  }
-
-  render () {
-    return h('div.new-account', {}, [
-      h('div.new-account__header', [
-        h('div.new-account__title', this.context.t('newAccount')),
-        this.renderTabs(),
-      ]),
-      h('div.new-account__form', [
-        h(Switch, [
-          h(Route, {
-            exact: true,
-            path: NEW_ACCOUNT_ROUTE,
-            component: NewAccountCreateForm,
-          }),
-          h(Route, {
-            exact: true,
-            path: IMPORT_ACCOUNT_ROUTE,
-            component: NewAccountImportForm,
-          }),
-          h(Route, {
-            exact: true,
-            path: CONNECT_HARDWARE_ROUTE,
-            component: ConnectHardwareForm,
-          }),
-        ]),
-      ]),
-    ])
-  }
-}
-
-CreateAccountPage.propTypes = {
-  location: PropTypes.object,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-CreateAccountPage.contextTypes = {
-  t: PropTypes.func,
-}
-
-const mapStateToProps = state => ({
-  displayedForm: getCurrentViewContext(state),
-})
-
-const mapDispatchToProps = dispatch => ({
-  displayForm: form => dispatch(actions.setNewAccountForm(form)),
-  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-  showExportPrivateKeyModal: () => {
-    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-  },
-  hideModal: () => dispatch(actions.hideModal()),
-  setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
-})
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
deleted file mode 100644
index a7595e346..000000000
--- a/ui/app/components/pages/create-account/new-account.js
+++ /dev/null
@@ -1,130 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const { DEFAULT_ROUTE } = require('../../../routes')
-import Button from '../../button'
-
-class NewAccountCreateForm extends Component {
-  constructor (props, context) {
-    super(props)
-
-    const { numberOfExistingAccounts = 0 } = props
-    const newAccountNumber = numberOfExistingAccounts + 1
-
-    this.state = {
-      newAccountName: '',
-      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
-    }
-  }
-
-  render () {
-    const { newAccountName, defaultAccountName } = this.state
-    const { history, createAccount } = this.props
-
-    return h('div.new-account-create-form', [
-
-      h('div.new-account-create-form__input-label', {}, [
-        this.context.t('accountName'),
-      ]),
-
-      h('div.new-account-create-form__input-wrapper', {}, [
-        h('input.new-account-create-form__input', {
-          value: newAccountName,
-          placeholder: defaultAccountName,
-          onChange: event => this.setState({ newAccountName: event.target.value }),
-        }, []),
-      ]),
-
-      h('div.new-account-create-form__buttons', {}, [
-
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: () => history.push(DEFAULT_ROUTE),
-        }, [this.context.t('cancel')]),
-
-        h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: () => {
-            createAccount(newAccountName || defaultAccountName)
-              .then(() => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Accounts',
-                    action: 'Add New Account',
-                    name: 'Added New Account',
-                  },
-                })
-                history.push(DEFAULT_ROUTE)
-              })
-              .catch((e) => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Accounts',
-                    action: 'Add New Account',
-                    name: 'Error',
-                  },
-                  customVariables: {
-                    errorMessage: e.message,
-                  },
-                })
-              })
-          },
-        }, [this.context.t('create')]),
-
-      ]),
-
-    ])
-  }
-}
-
-NewAccountCreateForm.propTypes = {
-  hideModal: PropTypes.func,
-  showImportPage: PropTypes.func,
-  showConnectPage: PropTypes.func,
-  createAccount: PropTypes.func,
-  numberOfExistingAccounts: PropTypes.number,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  const { metamask: { network, selectedAddress, identities = {} } } = state
-  const numberOfExistingAccounts = Object.keys(identities).length
-
-  return {
-    network,
-    address: selectedAddress,
-    numberOfExistingAccounts,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
-    hideModal: () => dispatch(actions.hideModal()),
-    createAccount: newAccountName => {
-      return dispatch(actions.addNewAccount())
-        .then(newAccountAddress => {
-          if (newAccountName) {
-            dispatch(actions.setAccountLabel(newAccountAddress, newAccountName))
-          }
-        })
-    },
-    showImportPage: () => dispatch(actions.showImportPage()),
-    showConnectPage: () => dispatch(actions.showConnectPage()),
-  }
-}
-
-NewAccountCreateForm.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
-
diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js
deleted file mode 100644
index 070361652..000000000
--- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Switch, Route } from 'react-router-dom'
-import NewAccount from './new-account'
-import ImportWithSeedPhrase from './import-with-seed-phrase'
-import {
-  INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
-} from '../../../../routes'
-
-export default class CreatePassword extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    isInitialized: PropTypes.bool,
-    onCreateNewAccount: PropTypes.func,
-    onCreateNewAccountFromSeed: PropTypes.func,
-  }
-
-  componentDidMount () {
-    const { isInitialized, history } = this.props
-
-    if (isInitialized) {
-      history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-    }
-  }
-
-  render () {
-    const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props
-
-    return (
-      <div className="first-time-flow__wrapper">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
-        <Switch>
-          <Route
-            exact
-            path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
-            render={props => (
-              <ImportWithSeedPhrase
-                { ...props }
-                onSubmit={onCreateNewAccountFromSeed}
-              />
-            )}
-          />
-          <Route
-            exact
-            path={INITIALIZE_CREATE_PASSWORD_ROUTE}
-            render={props => (
-              <NewAccount
-                { ...props }
-                onSubmit={onCreateNewAccount}
-              />
-            )}
-          />
-        </Switch>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
deleted file mode 100644
index 4ecaa5895..000000000
--- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import {validateMnemonic} from 'bip39'
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import TextField from '../../../../text-field'
-import Button from '../../../../button'
-import {
-  INITIALIZE_SELECT_ACTION_ROUTE,
-  INITIALIZE_END_OF_FLOW_ROUTE,
-} from '../../../../../routes'
-
-export default class ImportWithSeedPhrase extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    onSubmit: PropTypes.func.isRequired,
-  }
-
-  state = {
-    seedPhrase: '',
-    password: '',
-    confirmPassword: '',
-    seedPhraseError: '',
-    passwordError: '',
-    confirmPasswordError: '',
-    termsChecked: false,
-  }
-
-  parseSeedPhrase = (seedPhrase) => {
-    return seedPhrase
-      .trim()
-      .match(/\w+/g)
-      .join(' ')
-  }
-
-  handleSeedPhraseChange (seedPhrase) {
-    let seedPhraseError = ''
-
-    if (seedPhrase) {
-      const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase)
-      if (parsedSeedPhrase.split(' ').length !== 12) {
-        seedPhraseError = this.context.t('seedPhraseReq')
-      } else if (!validateMnemonic(parsedSeedPhrase)) {
-        seedPhraseError = this.context.t('invalidSeedPhrase')
-      }
-    }
-
-    this.setState({ seedPhrase, seedPhraseError })
-  }
-
-  handlePasswordChange (password) {
-    const { t } = this.context
-
-    this.setState(state => {
-      const { confirmPassword } = state
-      let confirmPasswordError = ''
-      let passwordError = ''
-
-      if (password && password.length < 8) {
-        passwordError = t('passwordNotLongEnough')
-      }
-
-      if (confirmPassword && password !== confirmPassword) {
-        confirmPasswordError = t('passwordsDontMatch')
-      }
-
-      return {
-        password,
-        passwordError,
-        confirmPasswordError,
-      }
-    })
-  }
-
-  handleConfirmPasswordChange (confirmPassword) {
-    const { t } = this.context
-
-    this.setState(state => {
-      const { password } = state
-      let confirmPasswordError = ''
-
-      if (password !== confirmPassword) {
-        confirmPasswordError = t('passwordsDontMatch')
-      }
-
-      return {
-        confirmPassword,
-        confirmPasswordError,
-      }
-    })
-  }
-
-  handleImport = async event => {
-    event.preventDefault()
-
-    if (!this.isValid()) {
-      return
-    }
-
-    const { password, seedPhrase } = this.state
-    const { history, onSubmit } = this.props
-
-    try {
-      await onSubmit(password, this.parseSeedPhrase(seedPhrase))
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Onboarding',
-          action: 'Import Seed Phrase',
-          name: 'Import Complete',
-        },
-      })
-      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
-    } catch (error) {
-      this.setState({ seedPhraseError: error.message })
-    }
-  }
-
-  isValid () {
-    const {
-      seedPhrase,
-      password,
-      confirmPassword,
-      passwordError,
-      confirmPasswordError,
-      seedPhraseError,
-    } = this.state
-
-    if (!password || !confirmPassword || !seedPhrase || password !== confirmPassword) {
-      return false
-    }
-
-    if (password.length < 8) {
-      return false
-    }
-
-    return !passwordError && !confirmPasswordError && !seedPhraseError
-  }
-
-  toggleTermsCheck = () => {
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Onboarding',
-        action: 'Import Seed Phrase',
-        name: 'Check ToS',
-      },
-    })
-
-    this.setState((prevState) => ({
-        termsChecked: !prevState.termsChecked,
-    }))
-  }
-
-  render () {
-    const { t } = this.context
-    const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
-
-    return (
-      <form
-        className="first-time-flow__form"
-        onSubmit={this.handleImport}
-      >
-        <div className="first-time-flow__create-back">
-          <a
-            onClick={e => {
-              e.preventDefault()
-              this.context.metricsEvent({
-                eventOpts: {
-                  category: 'Onboarding',
-                  action: 'Import Seed Phrase',
-                  name: 'Go Back from Onboarding Import',
-                },
-              })
-              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-        </div>
-        <div className="first-time-flow__header">
-          { t('importAccountSeedPhrase') }
-        </div>
-        <div className="first-time-flow__text-block">
-          { t('secretPhrase') }
-        </div>
-        <div className="first-time-flow__textarea-wrapper">
-          <label>{ t('walletSeed') }</label>
-          <textarea
-            className="first-time-flow__textarea"
-            onChange={e => this.handleSeedPhraseChange(e.target.value)}
-            value={this.state.seedPhrase}
-            placeholder={t('seedPhrasePlaceholder')}
-          />
-        </div>
-        {
-          seedPhraseError && (
-            <span className="error">
-              { seedPhraseError }
-            </span>
-          )
-        }
-        <TextField
-          id="password"
-          label={t('newPassword')}
-          type="password"
-          className="first-time-flow__input"
-          value={this.state.password}
-          onChange={event => this.handlePasswordChange(event.target.value)}
-          error={passwordError}
-          autoComplete="new-password"
-          margin="normal"
-          largeLabel
-        />
-        <TextField
-          id="confirm-password"
-          label={t('confirmPassword')}
-          type="password"
-          className="first-time-flow__input"
-          value={this.state.confirmPassword}
-          onChange={event => this.handleConfirmPasswordChange(event.target.value)}
-          error={confirmPasswordError}
-          autoComplete="confirm-password"
-          margin="normal"
-          largeLabel
-        />
-        <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
-          <div className="first-time-flow__checkbox">
-            {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
-          </div>
-          <span className="first-time-flow__checkbox-label">
-            I have read and agree to the <a
-              href="https://metamask.io/terms.html"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="first-time-flow__link-text">
-                { 'Terms of Use' }
-              </span>
-            </a>
-          </span>
-        </div>
-        <Button
-          type="confirm"
-          className="first-time-flow__button"
-          disabled={!this.isValid() || !termsChecked}
-          onClick={this.handleImport}
-        >
-          { t('import') }
-        </Button>
-      </form>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js
deleted file mode 100644
index 11d10e2d9..000000000
--- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../../../button'
-import {
-  INITIALIZE_SEED_PHRASE_ROUTE,
-  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
-  INITIALIZE_SELECT_ACTION_ROUTE,
-} from '../../../../../routes'
-import TextField from '../../../../text-field'
-
-export default class NewAccount extends PureComponent {
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
-  }
-
-  state = {
-    password: '',
-    confirmPassword: '',
-    passwordError: '',
-    confirmPasswordError: '',
-    termsChecked: false,
-  }
-
-  isValid () {
-    const {
-      password,
-      confirmPassword,
-      passwordError,
-      confirmPasswordError,
-    } = this.state
-
-    if (!password || !confirmPassword || password !== confirmPassword) {
-      return false
-    }
-
-    if (password.length < 8) {
-      return false
-    }
-
-    return !passwordError && !confirmPasswordError
-  }
-
-  handlePasswordChange (password) {
-    const { t } = this.context
-
-    this.setState(state => {
-      const { confirmPassword } = state
-      let passwordError = ''
-      let confirmPasswordError = ''
-
-      if (password && password.length < 8) {
-        passwordError = t('passwordNotLongEnough')
-      }
-
-      if (confirmPassword && password !== confirmPassword) {
-        confirmPasswordError = t('passwordsDontMatch')
-      }
-
-      return {
-        password,
-        passwordError,
-        confirmPasswordError,
-      }
-    })
-  }
-
-  handleConfirmPasswordChange (confirmPassword) {
-    const { t } = this.context
-
-    this.setState(state => {
-      const { password } = state
-      let confirmPasswordError = ''
-
-      if (password !== confirmPassword) {
-        confirmPasswordError = t('passwordsDontMatch')
-      }
-
-      return {
-        confirmPassword,
-        confirmPasswordError,
-      }
-    })
-  }
-
-  handleCreate = async event => {
-    event.preventDefault()
-
-    if (!this.isValid()) {
-      return
-    }
-
-    const { password } = this.state
-    const { onSubmit, history } = this.props
-
-    try {
-      await onSubmit(password)
-
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Onboarding',
-          action: 'Create Password',
-          name: 'Submit Password',
-        },
-      })
-
-      history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-    } catch (error) {
-      this.setState({ passwordError: error.message })
-    }
-  }
-
-  handleImportWithSeedPhrase = event => {
-    const { history } = this.props
-
-    event.preventDefault()
-    history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
-  }
-
-  toggleTermsCheck = () => {
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Onboarding',
-        action: 'Create Password',
-        name: 'Check ToS',
-      },
-    })
-
-    this.setState((prevState) => ({
-      termsChecked: !prevState.termsChecked,
-    }))
-  }
-
-  render () {
-    const { t } = this.context
-    const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state
-
-    return (
-      <div>
-        <div className="first-time-flow__create-back">
-          <a
-            onClick={e => {
-              e.preventDefault()
-              this.context.metricsEvent({
-                eventOpts: {
-                  category: 'Onboarding',
-                  action: 'Create Password',
-                  name: 'Go Back from Onboarding Create',
-                },
-              })
-              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-        </div>
-        <div className="first-time-flow__header">
-          { t('createPassword') }
-        </div>
-        <form
-          className="first-time-flow__form"
-          onSubmit={this.handleCreate}
-        >
-          <TextField
-            id="create-password"
-            label={t('newPassword')}
-            type="password"
-            className="first-time-flow__input"
-            value={password}
-            onChange={event => this.handlePasswordChange(event.target.value)}
-            error={passwordError}
-            autoFocus
-            autoComplete="new-password"
-            margin="normal"
-            fullWidth
-            largeLabel
-          />
-          <TextField
-            id="confirm-password"
-            label={t('confirmPassword')}
-            type="password"
-            className="first-time-flow__input"
-            value={confirmPassword}
-            onChange={event => this.handleConfirmPasswordChange(event.target.value)}
-            error={confirmPasswordError}
-            autoComplete="confirm-password"
-            margin="normal"
-            fullWidth
-            largeLabel
-          />
-          <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
-            <div className="first-time-flow__checkbox">
-              {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
-            </div>
-            <span className="first-time-flow__checkbox-label">
-              I have read and agree to the <a
-                href="https://metamask.io/terms.html"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span className="first-time-flow__link-text">
-                  { 'Terms of Use' }
-                </span>
-              </a>
-            </span>
-          </div>
-          <Button
-            type="confirm"
-            className="first-time-flow__button"
-            disabled={!this.isValid() || !termsChecked}
-            onClick={this.handleCreate}
-          >
-            { t('create') }
-          </Button>
-        </form>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
deleted file mode 100644
index cbc85c0e4..000000000
--- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../../../button'
-import { INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes'
-
-export default class UniqueImageScreen extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-  }
-
-  render () {
-    const { t } = this.context
-    const { history } = this.props
-
-    return (
-      <div>
-        <img
-          src="/images/sleuth.svg"
-          height={42}
-          width={42}
-        />
-        <div className="first-time-flow__header">
-          { t('protectYourKeys') }
-        </div>
-        <div className="first-time-flow__text-block">
-          { t('protectYourKeysMessage1') }
-        </div>
-        <div className="first-time-flow__text-block">
-          { t('protectYourKeysMessage2') }
-        </div>
-        <Button
-          type="confirm"
-          className="first-time-flow__button"
-          onClick={() => {
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Onboarding',
-                action: 'Agree to Phishing Warning',
-                name: 'Agree to Phishing Warning',
-              },
-            })
-            history.push(INITIALIZE_END_OF_FLOW_ROUTE)
-          }}
-        >
-          { t('next') }
-        </Button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js
deleted file mode 100644
index c0e2f59d9..000000000
--- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../../button'
-import { DEFAULT_ROUTE } from '../../../../routes'
-
-export default class EndOfFlowScreen extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    completeOnboarding: PropTypes.func,
-    completionMetaMetricsName: PropTypes.string,
-  }
-
-  render () {
-    const { t } = this.context
-    const { history, completeOnboarding, completionMetaMetricsName } = this.props
-
-    return (
-      <div className="end-of-flow">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
-        <div className="end-of-flow__emoji">🎉</div>
-        <div className="first-time-flow__header">
-          { t('congratulations') }
-        </div>
-        <div className="first-time-flow__text-block end-of-flow__text-1">
-          { t('endOfFlowMessage1') }
-        </div>
-        <div className="first-time-flow__text-block end-of-flow__text-2">
-          { t('endOfFlowMessage2') }
-        </div>
-        <div className="end-of-flow__text-3">
-          { '• ' + t('endOfFlowMessage3') }
-        </div>
-        <div className="end-of-flow__text-3">
-          { '• ' + t('endOfFlowMessage4') }
-        </div>
-        <div className="end-of-flow__text-3">
-          { '• ' + t('endOfFlowMessage5') }
-        </div>
-        <div className="end-of-flow__text-3">
-          { '• ' + t('endOfFlowMessage6') }
-        </div>
-        <div className="end-of-flow__text-3">
-          { '• ' + t('endOfFlowMessage7') }
-        </div>
-        <div className="first-time-flow__text-block end-of-flow__text-4">
-          *MetaMask cannot recover your seedphrase. <a
-            href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span className="first-time-flow__link-text">
-              Learn More
-            </span>
-          </a>.
-        </div>
-        <Button
-          type="confirm"
-          className="first-time-flow__button"
-          onClick={async () => {
-            await completeOnboarding()
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Onboarding',
-                action: 'Onboarding Complete',
-                name: completionMetaMetricsName,
-              },
-            })
-            history.push(DEFAULT_ROUTE)
-          }}
-        >
-          { 'All Done' }
-        </Button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js
deleted file mode 100644
index 91ae5a941..000000000
--- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { connect } from 'react-redux'
-import EndOfFlow from './end-of-flow.component'
-import { setCompletedOnboarding } from '../../../../actions'
-
-const firstTimeFlowTypeNameMap = {
-  create: 'New Wallet Created',
-  'import': 'New Wallet Imported',
-}
-
-const mapStateToProps = ({ metamask }) => {
-  const { firstTimeFlowType } = metamask
-
-  return {
-    completionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType],
-  }
-}
-
-
-const mapDispatchToProps = dispatch => {
-  return {
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow)
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
deleted file mode 100644
index 5c2294393..000000000
--- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Redirect } from 'react-router-dom'
-import {
-  DEFAULT_ROUTE,
-  LOCK_ROUTE,
-  INITIALIZE_WELCOME_ROUTE,
-  INITIALIZE_UNLOCK_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
-  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
-} from '../../../../routes'
-
-export default class FirstTimeFlowSwitch extends PureComponent {
-  static propTypes = {
-    completedOnboarding: PropTypes.bool,
-    isInitialized: PropTypes.bool,
-    isUnlocked: PropTypes.bool,
-    seedPhrase: PropTypes.string,
-    optInMetaMetrics: PropTypes.bool,
-  }
-
-  render () {
-    const {
-      completedOnboarding,
-      isInitialized,
-      isUnlocked,
-      seedPhrase,
-      optInMetaMetrics,
-    } = this.props
-
-    if (completedOnboarding) {
-      return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
-    }
-
-    if (isUnlocked && !seedPhrase) {
-      return <Redirect to={{ pathname: LOCK_ROUTE }} />
-    }
-
-    if (!isInitialized) {
-      return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} />
-    }
-
-    if (!isUnlocked) {
-      return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} />
-    }
-
-    if (seedPhrase) {
-      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} />
-    }
-
-    if (optInMetaMetrics === null) {
-      return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} />
-    }
-
-    return <Redirect to={{ pathname: INITIALIZE_METAMETRICS_OPT_IN_ROUTE }} />
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js
deleted file mode 100644
index a1f629431..000000000
--- a/ui/app/components/pages/first-time-flow/first-time-flow.component.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Switch, Route } from 'react-router-dom'
-import FirstTimeFlowSwitch from './first-time-flow-switch'
-import Welcome from './welcome'
-import SelectAction from './select-action'
-import EndOfFlow from './end-of-flow'
-import Unlock from '../unlock-page'
-import CreatePassword from './create-password'
-import SeedPhrase from './seed-phrase'
-import MetaMetricsOptInScreen from './metametrics-opt-in'
-import {
-  DEFAULT_ROUTE,
-  INITIALIZE_WELCOME_ROUTE,
-  INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
-  INITIALIZE_UNLOCK_ROUTE,
-  INITIALIZE_SELECT_ACTION_ROUTE,
-  INITIALIZE_END_OF_FLOW_ROUTE,
-  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
-} from '../../../routes'
-
-export default class FirstTimeFlow extends PureComponent {
-  static propTypes = {
-    completedOnboarding: PropTypes.bool,
-    createNewAccount: PropTypes.func,
-    createNewAccountFromSeed: PropTypes.func,
-    history: PropTypes.object,
-    isInitialized: PropTypes.bool,
-    isUnlocked: PropTypes.bool,
-    unlockAccount: PropTypes.func,
-    nextRoute: PropTypes.func,
-  }
-
-  state = {
-    seedPhrase: '',
-    isImportedKeyring: false,
-  }
-
-  componentDidMount () {
-    const { completedOnboarding, history, isInitialized, isUnlocked } = this.props
-
-    if (completedOnboarding) {
-      history.push(DEFAULT_ROUTE)
-      return
-    }
-
-    if (isInitialized && !isUnlocked) {
-      history.push(INITIALIZE_UNLOCK_ROUTE)
-      return
-    }
-  }
-
-  handleCreateNewAccount = async password => {
-    const { createNewAccount } = this.props
-
-    try {
-      const seedPhrase = await createNewAccount(password)
-      this.setState({ seedPhrase })
-    } catch (error) {
-      throw new Error(error.message)
-    }
-  }
-
-  handleImportWithSeedPhrase = async (password, seedPhrase) => {
-    const { createNewAccountFromSeed } = this.props
-
-    try {
-      await createNewAccountFromSeed(password, seedPhrase)
-      this.setState({ isImportedKeyring: true })
-    } catch (error) {
-      throw new Error(error.message)
-    }
-  }
-
-  handleUnlock = async password => {
-    const { unlockAccount, history, nextRoute } = this.props
-
-    try {
-      const seedPhrase = await unlockAccount(password)
-      this.setState({ seedPhrase }, () => {
-        history.push(nextRoute)
-      })
-    } catch (error) {
-      throw new Error(error.message)
-    }
-  }
-
-  render () {
-    const { seedPhrase, isImportedKeyring } = this.state
-
-    return (
-      <div className="first-time-flow">
-        <Switch>
-          <Route
-            path={INITIALIZE_SEED_PHRASE_ROUTE}
-            render={props => (
-              <SeedPhrase
-                { ...props }
-                seedPhrase={seedPhrase}
-              />
-            )}
-          />
-          <Route
-            path={INITIALIZE_CREATE_PASSWORD_ROUTE}
-            render={props => (
-              <CreatePassword
-                { ...props }
-                isImportedKeyring={isImportedKeyring}
-                onCreateNewAccount={this.handleCreateNewAccount}
-                onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase}
-              />
-            )}
-          />
-          <Route
-            path={INITIALIZE_SELECT_ACTION_ROUTE}
-            component={SelectAction}
-          />
-          <Route
-            path={INITIALIZE_UNLOCK_ROUTE}
-            render={props => (
-              <Unlock
-                { ...props }
-                onSubmit={this.handleUnlock}
-              />
-            )}
-          />
-          <Route
-            exact
-            path={INITIALIZE_END_OF_FLOW_ROUTE}
-            component={EndOfFlow}
-          />
-          <Route
-            exact
-            path={INITIALIZE_WELCOME_ROUTE}
-            component={Welcome}
-          />
-          <Route
-            exact
-            path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE}
-            component={MetaMetricsOptInScreen}
-          />
-          <Route
-            exact
-            path="*"
-            component={FirstTimeFlowSwitch}
-          />
-        </Switch>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.container.js b/ui/app/components/pages/first-time-flow/first-time-flow.container.js
deleted file mode 100644
index 293f94c47..000000000
--- a/ui/app/components/pages/first-time-flow/first-time-flow.container.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { connect } from 'react-redux'
-import FirstTimeFlow from './first-time-flow.component'
-import { getFirstTimeFlowTypeRoute } from './first-time-flow.selectors'
-import {
-  createNewVaultAndGetSeedPhrase,
-  createNewVaultAndRestore,
-  unlockAndGetSeedPhrase,
-} from '../../../actions'
-
-const mapStateToProps = state => {
-  const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state
-
-  return {
-    completedOnboarding,
-    isInitialized,
-    isUnlocked,
-    nextRoute: getFirstTimeFlowTypeRoute(state),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    createNewAccount: password => dispatch(createNewVaultAndGetSeedPhrase(password)),
-    createNewAccountFromSeed: (password, seedPhrase) => {
-      return dispatch(createNewVaultAndRestore(password, seedPhrase))
-    },
-    unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(FirstTimeFlow)
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js b/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js
deleted file mode 100644
index 1286afed9..000000000
--- a/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../../routes'
-
-const selectors = {
-  getFirstTimeFlowTypeRoute,
-}
-
-module.exports = selectors
-
-function getFirstTimeFlowTypeRoute (state) {
-  const { firstTimeFlowType } = state.metamask
-
-  let nextRoute
-  if (firstTimeFlowType === 'create') {
-    nextRoute = INITIALIZE_CREATE_PASSWORD_ROUTE
-  } else if (firstTimeFlowType === 'import') {
-    nextRoute = INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE
-  } else {
-    nextRoute = DEFAULT_ROUTE
-  }
-
-  return nextRoute
-}
diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss
deleted file mode 100644
index d41748575..000000000
--- a/ui/app/components/pages/first-time-flow/index.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import './welcome/index';
-
-@import './select-action/index';
-
-@import './seed-phrase/index';
-
-@import './end-of-flow/index';
-
-@import './metametrics-opt-in/index';
-
-
-.first-time-flow {
-  width: 100%;
-  background-color: $white;
-  display: flex;
-  justify-content: center;
-
-  &__wrapper {
-    @media screen and (min-width: $break-large) {
-      max-width: 742px;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      margin-top: 2%;
-    }
-
-    .app-header__metafox-logo {
-      margin-bottom: 40px;
-    }
-  }
-
-  &__form {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__create-back {
-    margin-bottom: 16px;
-  }
-
-  &__header {
-    font-size: 2.5rem;
-    margin-bottom: 24px;
-    color: black;
-  }
-
-  &__subheader {
-    margin-bottom: 16px;
-  }
-
-  &__input {
-    max-width: 350px;
-  }
-
-  &__textarea-wrapper {
-    margin-bottom: 8px;
-    display: inline-flex;
-    padding: 0;
-    position: relative;
-    min-width: 0;
-    flex-direction: column;
-    max-width: 350px;
-  }
-
-  &__textarea-label {
-    margin-bottom: 9px;
-    color: #1B344D;
-    font-size: 18px;
-  }
-
-  &__textarea {
-    font-size: 1rem;
-    font-family: Roboto;
-    height: 190px;
-    border: 1px solid #CDCDCD;
-    border-radius: 6px;
-    background-color: #FFFFFF;
-    padding: 16px;
-    margin-top: 8px;
-  }
-
-  &__breadcrumbs {
-    margin: 36px 0;
-  }
-
-  &__unique-image {
-    margin-bottom: 20px;
-  }
-
-  &__markdown {
-    border: 1px solid #979797;
-    border-radius: 8px;
-    background-color: $white;
-    height: 200px;
-    overflow-y: auto;
-    color: #757575;
-    font-size: .75rem;
-    line-height: 15px;
-    text-align: justify;
-    margin: 0;
-    padding: 16px 20px;
-    height: 30vh;
-  }
-
-  &__text-block {
-    margin-bottom: 24px;
-    color: black;
-
-    @media screen and (max-width: $break-small) {
-      margin-bottom: 16px;
-      font-size: .875rem;
-    }
-  }
-
-  &__button {
-    margin: 35px 0 14px;
-    width: 140px;
-    height: 44px;
-  }
-
-  &__checkbox-container {
-    display: flex;
-    align-items: center;
-    margin-top: 24px;
-  }
-
-  &__checkbox {
-    background: #FFFFFF;
-    border: 1px solid #CDCDCD;
-    box-sizing: border-box;
-    height: 34px;
-    width: 34px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      border: 1.5px solid #2f9ae0;
-    }
-
-    .fa-check {
-      color: #2f9ae0
-    }
-  }
-
-  &__checkbox-label {
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    line-height: normal;
-    font-size: 18px;
-    color: #939090;
-    margin-left: 18px;
-  }
-
-  &__link-text {
-    color: $curious-blue;
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
deleted file mode 100644
index 2b4af27ad..000000000
--- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerFooter from '../../../page-container/page-container-footer'
-
-export default class MetaMetricsOptIn extends Component {
-  static propTypes = {
-    history: PropTypes.object,
-    setParticipateInMetaMetrics: PropTypes.func,
-    nextRoute: PropTypes.string,
-    firstTimeSelectionMetaMetricsName: PropTypes.string,
-    participateInMetaMetrics: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-  }
-
-  render () {
-    const { metricsEvent } = this.context
-    const {
-      nextRoute,
-      history,
-      setParticipateInMetaMetrics,
-      firstTimeSelectionMetaMetricsName,
-      participateInMetaMetrics,
-    } = this.props
-
-    return (
-      <div className="metametrics-opt-in">
-        <div className="metametrics-opt-in__main">
-          <div className="app-header__logo-container">
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
-            />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
-            />
-          </div>
-          <div className="metametrics-opt-in__body-graphic">
-            <img src="images/metrics-chart.svg" />
-          </div>
-          <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
-          <div className="metametrics-opt-in__body">
-            <div className="metametrics-opt-in__description">
-             MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
-             will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem.
-            </div>
-            <div className="metametrics-opt-in__description">
-             MetaMask will..
-            </div>
-
-            <div className="metametrics-opt-in__committments">
-              <div className="metametrics-opt-in__row">
-                <i className="fa fa-check" />
-                <div className="metametrics-opt-in__row-description">
-                  Always allow you to opt-out via Settings
-                </div>
-              </div>
-              <div className="metametrics-opt-in__row">
-                <i className="fa fa-check" />
-                <div className="metametrics-opt-in__row-description">
-                  Send anonymized click & pageview events
-                </div>
-              </div>
-              <div className="metametrics-opt-in__row">
-                <i className="fa fa-check" />
-                <div className="metametrics-opt-in__row-description">
-                  Maintain a public aggregate dashboard to educate the community
-                </div>
-              </div>
-              <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
-                <i className="fa fa-times" />
-                <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
-                </div>
-              </div>
-              <div className="metametrics-opt-in__row">
-                <i className="fa fa-times" />
-                <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
-                </div>
-              </div>
-              <div className="metametrics-opt-in__row">
-                <i className="fa fa-times" />
-                <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="metametrics-opt-in__footer">
-            <PageContainerFooter
-              onCancel={() => {
-                setParticipateInMetaMetrics(false)
-                  .then(() => {
-                    const promise = participateInMetaMetrics !== false
-                      ? metricsEvent({
-                        eventOpts: {
-                          category: 'Onboarding',
-                          action: 'Metrics Option',
-                          name: 'Metrics Opt Out',
-                        },
-                        isOptIn: true,
-                      })
-                      : Promise.resolve()
-
-                    promise
-                      .then(() => {
-                        history.push(nextRoute)
-                      })
-                })
-              }}
-              cancelText={'No Thanks'}
-              hideCancel={false}
-              onSubmit={() => {
-                setParticipateInMetaMetrics(true)
-                  .then(([participateStatus, metaMetricsId]) => {
-                    const promise = participateInMetaMetrics !== true
-                      ? metricsEvent({
-                        eventOpts: {
-                          category: 'Onboarding',
-                          action: 'Metrics Option',
-                          name: 'Metrics Opt In',
-                        },
-                        isOptIn: true,
-                      })
-                      : Promise.resolve()
-
-                    promise
-                      .then(() => {
-                        return metricsEvent({
-                          eventOpts: {
-                            category: 'Onboarding',
-                            action: 'Import or Create',
-                            name: firstTimeSelectionMetaMetricsName,
-                          },
-                          isOptIn: true,
-                          metaMetricsId,
-                        })
-                      })
-                      .then(() => {
-                        history.push(nextRoute)
-                      })
-                })
-              }}
-              submitText={'I agree'}
-              submitButtonType={'confirm'}
-              disabled={false}
-            />
-            <div className="metametrics-opt-in__bottom-text">
-              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
-                href="https://metamask.io/privacy.html"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Privacy Policy here
-              </a>.
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js
deleted file mode 100644
index b13af8bf6..000000000
--- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { connect } from 'react-redux'
-import MetaMetricsOptIn from './metametrics-opt-in.component'
-import { setParticipateInMetaMetrics } from '../../../../actions'
-import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors'
-
-const firstTimeFlowTypeNameMap = {
-  create: 'Selected Create New Wallet',
-  'import': 'Selected Import Wallet',
-}
-
-const mapStateToProps = (state) => {
-  const { firstTimeFlowType, participateInMetaMetrics } = state.metamask
-
-  return {
-    nextRoute: getFirstTimeFlowTypeRoute(state),
-    firstTimeSelectionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType],
-    participateInMetaMetrics,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MetaMetricsOptIn)
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
deleted file mode 100644
index bd5ab8a84..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import shuffle from 'lodash.shuffle'
-import Button from '../../../../button'
-import {
-  INITIALIZE_END_OF_FLOW_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
-} from '../../../../../routes'
-import { exportAsFile } from '../../../../../../app/util'
-import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state'
-
-export default class ConfirmSeedPhrase extends PureComponent {
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-    t: PropTypes.func,
-  }
-
-  static defaultProps = {
-    seedPhrase: '',
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    onSubmit: PropTypes.func,
-    seedPhrase: PropTypes.string,
-  }
-
-  state = {
-    selectedSeedWords: [],
-    shuffledSeedWords: [],
-    // Hash of shuffledSeedWords index {Number} to selectedSeedWords index {Number}
-    selectedSeedWordsHash: {},
-  }
-
-  componentDidMount () {
-    const { seedPhrase = '' } = this.props
-    const shuffledSeedWords = shuffle(seedPhrase.split(' ')) || []
-    this.setState({ shuffledSeedWords })
-  }
-
-  handleExport = () => {
-    exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain')
-  }
-
-  handleSubmit = async () => {
-    const { history } = this.props
-
-    if (!this.isValid()) {
-      return
-    }
-
-    try {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Onboarding',
-          action: 'Seed Phrase Setup',
-          name: 'Verify Complete',
-        },
-      })
-      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
-    } catch (error) {
-      console.error(error.message)
-    }
-  }
-
-  handleSelectSeedWord = (word, shuffledIndex) => {
-    this.setState(selectSeedWord(word, shuffledIndex))
-  }
-
-  handleDeselectSeedWord = shuffledIndex => {
-    this.setState(deselectSeedWord(shuffledIndex))
-  }
-
-  isValid () {
-    const { seedPhrase } = this.props
-    const { selectedSeedWords } = this.state
-    return seedPhrase === selectedSeedWords.join(' ')
-  }
-
-  render () {
-    const { t } = this.context
-    const { history } = this.props
-    const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state
-
-    return (
-      <div className="confirm-seed-phrase">
-        <div className="confirm-seed-phrase__back-button">
-          <a
-            onClick={e => {
-              e.preventDefault()
-              history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-        </div>
-        <div className="first-time-flow__header">
-          { t('confirmSecretBackupPhrase') }
-        </div>
-        <div className="first-time-flow__text-block">
-          { t('selectEachPhrase') }
-        </div>
-        <div className="confirm-seed-phrase__selected-seed-words">
-          {
-            selectedSeedWords.map((word, index) => (
-              <div
-                key={index}
-                className="confirm-seed-phrase__seed-word"
-              >
-                { word }
-              </div>
-            ))
-          }
-        </div>
-        <div className="confirm-seed-phrase__shuffled-seed-words">
-          {
-            shuffledSeedWords.map((word, index) => {
-              const isSelected = index in selectedSeedWordsHash
-
-              return (
-                <div
-                  key={index}
-                  className={classnames(
-                    'confirm-seed-phrase__seed-word',
-                    'confirm-seed-phrase__seed-word--shuffled',
-                    { 'confirm-seed-phrase__seed-word--selected': isSelected }
-                  )}
-                  onClick={() => {
-                    if (!isSelected) {
-                      this.handleSelectSeedWord(word, index)
-                    } else {
-                      this.handleDeselectSeedWord(index)
-                    }
-                  }}
-                >
-                  { word }
-                </div>
-              )
-            })
-          }
-        </div>
-        <Button
-          type="confirm"
-          className="first-time-flow__button"
-          onClick={this.handleSubmit}
-          disabled={!this.isValid()}
-        >
-          { t('confirm') }
-        </Button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
deleted file mode 100644
index e4fd7be4f..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import './confirm-seed-phrase/index';
-
-@import './reveal-seed-phrase/index';
-
-.seed-phrase {
-
-  &__sections {
-    display: flex;
-
-    @media screen and (min-width: $break-large) {
-      flex-direction: row;
-    }
-
-    @media screen and (max-width: $break-small) {
-      flex-direction: column;
-    }
-  }
-
-  &__main {
-    flex: 3;
-    min-width: 0;
-  }
-
-  &__side {
-    flex: 2;
-    min-width: 0;
-
-    @media screen and (min-width: $break-large) {
-      margin-left: 81px;
-    }
-
-    @media screen and (max-width: $break-small) {
-      margin-top: 24px;
-    }
-
-    .first-time-flow__text-block {
-      color: #5A5A5A;
-    }
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
deleted file mode 100644
index cb8a01322..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import LockIcon from '../../../../lock-icon'
-import Button from '../../../../button'
-import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes'
-import { exportAsFile } from '../../../../../../app/util'
-
-export default class RevealSeedPhrase extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    seedPhrase: PropTypes.string,
-  }
-
-  state = {
-    isShowingSeedPhrase: false,
-  }
-
-  handleExport = () => {
-    exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain')
-  }
-
-  handleNext = event => {
-    event.preventDefault()
-    const { isShowingSeedPhrase } = this.state
-    const { history } = this.props
-
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Onboarding',
-        action: 'Seed Phrase Setup',
-        name: 'Advance to Verify',
-      },
-    })
-
-    if (!isShowingSeedPhrase) {
-      return
-    }
-
-    history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE)
-  }
-
-  renderSecretWordsContainer () {
-    const { t } = this.context
-    const { seedPhrase } = this.props
-    const { isShowingSeedPhrase } = this.state
-
-    return (
-      <div className="reveal-seed-phrase__secret">
-        <div className={classnames(
-          'reveal-seed-phrase__secret-words',
-          { 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase }
-        )}>
-          { seedPhrase }
-        </div>
-        {
-          !isShowingSeedPhrase && (
-            <div
-              className="reveal-seed-phrase__secret-blocker"
-              onClick={() => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Onboarding',
-                    action: 'Seed Phrase Setup',
-                    name: 'Revealed Words',
-                  },
-                })
-                this.setState({ isShowingSeedPhrase: true })
-              }}
-            >
-              <LockIcon
-                width="28px"
-                height="35px"
-                fill="#FFFFFF"
-              />
-              <div className="reveal-seed-phrase__reveal-button">
-                { t('clickToRevealSeed') }
-              </div>
-            </div>
-          )
-        }
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-    const { isShowingSeedPhrase } = this.state
-
-    return (
-      <div className="reveal-seed-phrase">
-        <div className="seed-phrase__sections">
-          <div className="seed-phrase__main">
-            <div className="first-time-flow__header">
-              { t('secretBackupPhrase') }
-            </div>
-            <div className="first-time-flow__text-block">
-              { t('secretBackupPhraseDescription') }
-            </div>
-            <div className="first-time-flow__text-block">
-              { t('secretBackupPhraseWarning') }
-            </div>
-            { this.renderSecretWordsContainer() }
-          </div>
-          <div className="seed-phrase__side">
-            <div className="first-time-flow__text-block">
-              { `${t('tips')}:` }
-            </div>
-            <div className="first-time-flow__text-block">
-              { t('storePhrase') }
-            </div>
-            <div className="first-time-flow__text-block">
-              { t('writePhrase') }
-            </div>
-            <div className="first-time-flow__text-block">
-              { t('memorizePhrase') }
-            </div>
-            <div className="first-time-flow__text-block">
-              <a
-                className="reveal-seed-phrase__export-text"
-                onClick={this.handleExport}>
-                { t('downloadSecretBackup') }
-              </a>
-            </div>
-          </div>
-        </div>
-        <Button
-          type="confirm"
-          className="first-time-flow__button"
-          onClick={this.handleNext}
-          disabled={!isShowingSeedPhrase}
-        >
-          { t('next') }
-        </Button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
deleted file mode 100644
index 9eec89cdd..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Switch, Route } from 'react-router-dom'
-import RevealSeedPhrase from './reveal-seed-phrase'
-import ConfirmSeedPhrase from './confirm-seed-phrase'
-import {
-  INITIALIZE_SEED_PHRASE_ROUTE,
-  INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../../../routes'
-
-export default class SeedPhrase extends PureComponent {
-  static propTypes = {
-    address: PropTypes.string,
-    history: PropTypes.object,
-    seedPhrase: PropTypes.string,
-  }
-
-  componentDidMount () {
-    const { seedPhrase, history } = this.props
-
-    if (!seedPhrase) {
-      history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  render () {
-    const { seedPhrase } = this.props
-
-    return (
-      <div className="first-time-flow__wrapper">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
-        <Switch>
-          <Route
-            exact
-            path={INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE}
-            render={props => (
-              <ConfirmSeedPhrase
-                { ...props }
-                seedPhrase={seedPhrase}
-              />
-            )}
-          />
-          <Route
-            exact
-            path={INITIALIZE_SEED_PHRASE_ROUTE}
-            render={props => (
-              <RevealSeedPhrase
-                { ...props }
-                seedPhrase={seedPhrase}
-              />
-            )}
-          />
-        </Switch>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js
deleted file mode 100644
index b6a6942c3..000000000
--- a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../../button'
-import {
-  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
-} from '../../../../routes'
-
-export default class SelectAction extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    isInitialized: PropTypes.bool,
-    setFirstTimeFlowType: PropTypes.func,
-    nextRoute: PropTypes.string,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  componentDidMount () {
-    const { history, isInitialized, nextRoute } = this.props
-
-    if (isInitialized) {
-      history.push(nextRoute)
-    }
-  }
-
-  handleCreate = () => {
-    this.props.setFirstTimeFlowType('create')
-    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE)
-  }
-
-  handleImport = () => {
-    this.props.setFirstTimeFlowType('import')
-    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE)
-  }
-
-  render () {
-    const { t } = this.context
-
-    return (
-       <div className="select-action">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
-
-        <div className="select-action__wrapper">
-
-
-          <div className="select-action__body">
-            <div className="select-action__body-header">
-              { t('newToMetaMask') }
-            </div>
-            <div className="select-action__select-buttons">
-              <div className="select-action__select-button">
-                <div className="select-action__button-content">
-                  <div className="select-action__button-symbol">
-                    <img src="/images/download-alt.svg" />
-                  </div>
-                  <div className="select-action__button-text-big">
-                    { t('noAlreadyHaveSeed') }
-                  </div>
-                  <div className="select-action__button-text-small">
-                    { t('importYourExisting') }
-                  </div>
-                </div>
-                <Button
-                  type="primary"
-                  className="first-time-flow__button"
-                  onClick={this.handleImport}
-                >
-                  { t('importWallet') }
-                </Button>
-              </div>
-              <div className="select-action__select-button">
-                <div className="select-action__button-content">
-                  <div className="select-action__button-symbol">
-                    <img src="/images/thin-plus.svg" />
-                  </div>
-                  <div className="select-action__button-text-big">
-                    { t('letsGoSetUp') }
-                  </div>
-                  <div className="select-action__button-text-small">
-                    { t('thisWillCreate') }
-                  </div>
-                </div>
-                <Button
-                  type="confirm"
-                  className="first-time-flow__button"
-                  onClick={this.handleCreate}
-                >
-                  { t('createAWallet') }
-                </Button>
-              </div>
-            </div>
-          </div>
-
-        </div>
-       </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js
deleted file mode 100644
index 42fac7af2..000000000
--- a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import { setFirstTimeFlowType } from '../../../../actions'
-import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors'
-import Welcome from './select-action.component'
-
-const mapStateToProps = (state) => {
-  return {
-    nextRoute: getFirstTimeFlowTypeRoute(state),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setFirstTimeFlowType: type => dispatch(setFirstTimeFlowType(type)),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Welcome)
diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js
deleted file mode 100644
index 88cdb936c..000000000
--- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import EventEmitter from 'events'
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Mascot from '../../../mascot'
-import Button from '../../../button'
-import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE } from '../../../../routes'
-
-export default class Welcome extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    isInitialized: PropTypes.bool,
-    participateInMetaMetrics: PropTypes.bool,
-    welcomeScreenSeen: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.animationEventEmitter = new EventEmitter()
-  }
-
-  componentDidMount () {
-    const { history, participateInMetaMetrics, welcomeScreenSeen } = this.props
-
-    if (welcomeScreenSeen && participateInMetaMetrics !== null) {
-      history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
-    } else if (welcomeScreenSeen) {
-      history.push(INITIALIZE_SELECT_ACTION_ROUTE)
-    }
-  }
-
-  handleContinue = () => {
-    this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
-  }
-
-  render () {
-    const { t } = this.context
-
-    return (
-      <div className="welcome-page__wrapper">
-        <div className="welcome-page">
-          <Mascot
-            animationEventEmitter={this.animationEventEmitter}
-            width="125"
-            height="125"
-          />
-          <div className="welcome-page__header">
-            { t('welcome') }
-          </div>
-          <div className="welcome-page__description">
-            <div>{ t('metamaskDescription') }</div>
-            <div>{ t('happyToSeeYou') }</div>
-          </div>
-          <Button
-            type="confirm"
-            className="first-time-flow__button"
-            onClick={this.handleContinue}
-          >
-            { t('getStarted') }
-          </Button>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js
deleted file mode 100644
index 47753e16f..000000000
--- a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import { closeWelcomeScreen } from '../../../../actions'
-import Welcome from './welcome.component'
-
-const mapStateToProps = ({ metamask }) => {
-  const { welcomeScreenSeen, isInitialized, participateInMetaMetrics } = metamask
-
-  return {
-    welcomeScreenSeen,
-    isInitialized,
-    participateInMetaMetrics,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Welcome)
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
deleted file mode 100644
index 953d43aba..000000000
--- a/ui/app/components/pages/home/home.component.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Media from 'react-media'
-import { Redirect } from 'react-router-dom'
-import WalletView from '../../wallet-view'
-import TransactionView from '../../transaction-view'
-import ProviderApproval from '../provider-approval'
-
-import {
-  INITIALIZE_SEED_PHRASE_ROUTE,
-  RESTORE_VAULT_ROUTE,
-  CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
-} from '../../../routes'
-
-export default class Home extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    forgottenPassword: PropTypes.bool,
-    seedWords: PropTypes.string,
-    suggestedTokens: PropTypes.object,
-    unconfirmedTransactionsCount: PropTypes.number,
-    providerRequests: PropTypes.array,
-  }
-
-  componentDidMount () {
-    const {
-      history,
-      suggestedTokens = {},
-      unconfirmedTransactionsCount = 0,
-    } = this.props
-
-    // suggested new tokens
-    if (Object.keys(suggestedTokens).length > 0) {
-        history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
-    }
-
-    if (unconfirmedTransactionsCount > 0) {
-      history.push(CONFIRM_TRANSACTION_ROUTE)
-    }
-  }
-
-  render () {
-    const {
-      forgottenPassword,
-      seedWords,
-      providerRequests,
-    } = this.props
-
-    // seed words
-    if (seedWords) {
-      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/>
-    }
-
-    if (forgottenPassword) {
-      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
-    }
-
-    if (providerRequests && providerRequests.length > 0) {
-      return (
-        <ProviderApproval providerRequest={providerRequests[0]} />
-      )
-    }
-
-    return (
-      <div className="main-container">
-        <div className="account-and-transaction-details">
-          <Media
-            query="(min-width: 576px)"
-            render={() => <WalletView />}
-          />
-          <TransactionView />
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
deleted file mode 100644
index bb8cf5e81..000000000
--- a/ui/app/components/pages/home/home.container.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Home from './home.component'
-import { compose } from 'recompose'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { unconfirmedTransactionsCountSelector } from '../../../selectors/confirm-transaction'
-
-const mapStateToProps = state => {
-  const { metamask, appState } = state
-  const {
-    noActiveNotices,
-    lostAccounts,
-    seedWords,
-    suggestedTokens,
-    providerRequests,
-  } = metamask
-  const { forgottenPassword } = appState
-
-  return {
-    noActiveNotices,
-    lostAccounts,
-    forgottenPassword,
-    seedWords,
-    suggestedTokens,
-    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
-    providerRequests,
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps)
-)(Home)
diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
deleted file mode 100644
index 6a0680f32..000000000
--- a/ui/app/components/pages/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import './unlock-page/index';
-
-@import './add-token/index';
-
-@import './confirm-add-token/index';
-
-@import './settings/index';
-
-@import './first-time-flow/index';
-
-@import './keychains/index';
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
deleted file mode 100644
index 73ff5191a..000000000
--- a/ui/app/components/pages/keychains/restore-vault.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {
-  createNewVaultAndRestore,
-  unMarkPasswordForgotten,
-} from '../../../actions'
-import { DEFAULT_ROUTE } from '../../../routes'
-import TextField from '../../text-field'
-import Button from '../../button'
-
-class RestoreVaultPage extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    warning: PropTypes.string,
-    createNewVaultAndRestore: PropTypes.func.isRequired,
-    leaveImportSeedScreenState: PropTypes.func,
-    history: PropTypes.object,
-    isLoading: PropTypes.bool,
-  };
-
-  state = {
-    seedPhrase: '',
-    password: '',
-    confirmPassword: '',
-    seedPhraseError: null,
-    passwordError: null,
-    confirmPasswordError: null,
-  }
-
-  parseSeedPhrase = (seedPhrase) => {
-    return seedPhrase
-      .match(/\w+/g)
-      .join(' ')
-  }
-
-  handleSeedPhraseChange (seedPhrase) {
-    let seedPhraseError = null
-
-    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
-      seedPhraseError = this.context.t('seedPhraseReq')
-    }
-
-    this.setState({ seedPhrase, seedPhraseError })
-  }
-
-  handlePasswordChange (password) {
-    const { confirmPassword } = this.state
-    let confirmPasswordError = null
-    let passwordError = null
-
-    if (password && password.length < 8) {
-      passwordError = this.context.t('passwordNotLongEnough')
-    }
-
-    if (confirmPassword && password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ password, passwordError, confirmPasswordError })
-  }
-
-  handleConfirmPasswordChange (confirmPassword) {
-    const { password } = this.state
-    let confirmPasswordError = null
-
-    if (password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ confirmPassword, confirmPasswordError })
-  }
-
-  onClick = () => {
-    const { password, seedPhrase } = this.state
-    const {
-      createNewVaultAndRestore,
-      leaveImportSeedScreenState,
-      history,
-    } = this.props
-
-    leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
-      .then(() => {
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Retention',
-            action: 'userEntersSeedPhrase',
-            name: 'onboardingRestoredVault',
-          },
-        })
-        history.push(DEFAULT_ROUTE)
-      })
-  }
-
-  hasError () {
-    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
-    return passwordError || confirmPasswordError || seedPhraseError
-  }
-
-  render () {
-    const {
-      seedPhrase,
-      password,
-      confirmPassword,
-      seedPhraseError,
-      passwordError,
-      confirmPasswordError,
-    } = this.state
-    const { t } = this.context
-    const { isLoading } = this.props
-    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
-
-    return (
-      <div className="first-view-main-wrapper">
-        <div className="first-view-main">
-          <div className="import-account">
-            <a
-              className="import-account__back-button"
-              onClick={e => {
-                e.preventDefault()
-                this.props.history.goBack()
-              }}
-              href="#"
-            >
-              {`< Back`}
-            </a>
-            <div className="import-account__title">
-              { this.context.t('restoreAccountWithSeed') }
-            </div>
-            <div className="import-account__selector-label">
-              { this.context.t('secretPhrase') }
-            </div>
-            <div className="import-account__input-wrapper">
-              <label className="import-account__input-label">Wallet Seed</label>
-              <textarea
-                className="import-account__secret-phrase"
-                onChange={e => this.handleSeedPhraseChange(e.target.value)}
-                value={this.state.seedPhrase}
-                placeholder={this.context.t('separateEachWord')}
-              />
-            </div>
-            <span className="error">
-              { seedPhraseError }
-            </span>
-            <TextField
-              id="password"
-              label={t('newPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.password}
-              onChange={event => this.handlePasswordChange(event.target.value)}
-              error={passwordError}
-              autoComplete="new-password"
-              margin="normal"
-              largeLabel
-            />
-            <TextField
-              id="confirm-password"
-              label={t('confirmPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.confirmPassword}
-              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
-              error={confirmPasswordError}
-              autoComplete="confirm-password"
-              margin="normal"
-              largeLabel
-            />
-            <Button
-              type="first-time"
-              className="first-time-flow__button"
-              onClick={() => !disabled && this.onClick()}
-              disabled={disabled}
-            >
-              {this.context.t('restore')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default connect(
-  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
-  dispatch => ({
-    leaveImportSeedScreenState: () => {
-      dispatch(unMarkPasswordForgotten())
-    },
-    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
-  })
-)(RestoreVaultPage)
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
deleted file mode 100644
index 32557066f..000000000
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ /dev/null
@@ -1,177 +0,0 @@
-const { Component } = require('react')
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const classnames = require('classnames')
-
-const { requestRevealSeedWords } = require('../../../actions')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const ExportTextContainer = require('../../export-text-container')
-
-import Button from '../../button'
-
-const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
-const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
-
-class RevealSeedPage extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      screen: PASSWORD_PROMPT_SCREEN,
-      password: '',
-      seedWords: null,
-      error: null,
-    }
-  }
-
-  componentDidMount () {
-    const passwordBox = document.getElementById('password-box')
-    if (passwordBox) {
-      passwordBox.focus()
-    }
-  }
-
-  handleSubmit (event) {
-    event.preventDefault()
-    this.setState({ seedWords: null, error: null })
-    this.props.requestRevealSeedWords(this.state.password)
-      .then(seedWords => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }))
-      .catch(error => this.setState({ error: error.message }))
-  }
-
-  renderWarning () {
-    return (
-      h('.page-container__warning-container', [
-        h('img.page-container__warning-icon', {
-          src: 'images/warning.svg',
-        }),
-        h('.page-container__warning-message', [
-          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
-          h('div', [this.context.t('revealSeedWordsWarning')]),
-        ]),
-      ])
-    )
-  }
-
-  renderContent () {
-    return this.state.screen === PASSWORD_PROMPT_SCREEN
-      ? this.renderPasswordPromptContent()
-      : this.renderRevealSeedContent()
-  }
-
-  renderPasswordPromptContent () {
-    const { t } = this.context
-
-    return (
-      h('form', {
-        onSubmit: event => this.handleSubmit(event),
-      }, [
-        h('label.input-label', {
-          htmlFor: 'password-box',
-        }, t('enterPasswordContinue')),
-        h('.input-group', [
-          h('input.form-control', {
-            type: 'password',
-            placeholder: t('password'),
-            id: 'password-box',
-            value: this.state.password,
-            onChange: event => this.setState({ password: event.target.value }),
-            className: classnames({ 'form-control--error': this.state.error }),
-          }),
-        ]),
-        this.state.error && h('.reveal-seed__error', this.state.error),
-      ])
-    )
-  }
-
-  renderRevealSeedContent () {
-    const { t } = this.context
-
-    return (
-      h('div', [
-        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
-        h(ExportTextContainer, {
-          text: this.state.seedWords,
-          filename: t('metamaskSeedWords'),
-        }),
-      ])
-    )
-  }
-
-  renderFooter () {
-    return this.state.screen === PASSWORD_PROMPT_SCREEN
-      ? this.renderPasswordPromptFooter()
-      : this.renderRevealSeedFooter()
-  }
-
-  renderPasswordPromptFooter () {
-    return (
-      h('.page-container__footer', [
-        h('header', [
-          h(Button, {
-            type: 'default',
-            large: true,
-            className: 'page-container__footer-button',
-            onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, this.context.t('cancel')),
-          h(Button, {
-            type: 'primary',
-            large: true,
-            className: 'page-container__footer-button',
-            onClick: event => this.handleSubmit(event),
-            disabled: this.state.password === '',
-          }, this.context.t('next')),
-        ]),
-      ])
-    )
-  }
-
-  renderRevealSeedFooter () {
-    return (
-      h('.page-container__footer', [
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'page-container__footer-button',
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('close')),
-      ])
-    )
-  }
-
-  render () {
-    return (
-      h('.page-container', [
-        h('.page-container__header', [
-          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
-          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
-        ]),
-        h('.page-container__content', [
-          this.renderWarning(),
-          h('.reveal-seed__content', [
-            this.renderContent(),
-          ]),
-        ]),
-        this.renderFooter(),
-      ])
-    )
-  }
-}
-
-RevealSeedPage.propTypes = {
-  requestRevealSeedWords: PropTypes.func,
-  history: PropTypes.object,
-}
-
-RevealSeedPage.contextTypes = {
-  t: PropTypes.func,
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
-  }
-}
-
-module.exports = connect(null, mapDispatchToProps)(RevealSeedPage)
diff --git a/ui/app/components/pages/lock/lock.component.js b/ui/app/components/pages/lock/lock.component.js
deleted file mode 100644
index 51f8742ed..000000000
--- a/ui/app/components/pages/lock/lock.component.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Loading from '../../loading-screen'
-import { DEFAULT_ROUTE } from '../../../routes'
-
-export default class Lock extends PureComponent {
-  static propTypes = {
-    history: PropTypes.object,
-    isUnlocked: PropTypes.bool,
-    lockMetamask: PropTypes.func,
-  }
-
-  componentDidMount () {
-    const { lockMetamask, isUnlocked, history } = this.props
-
-    if (isUnlocked) {
-      lockMetamask().then(() => history.push(DEFAULT_ROUTE))
-    } else {
-      history.replace(DEFAULT_ROUTE)
-    }
-  }
-
-  render () {
-    return <Loading />
-  }
-}
diff --git a/ui/app/components/pages/lock/lock.container.js b/ui/app/components/pages/lock/lock.container.js
deleted file mode 100644
index 81d89ba21..000000000
--- a/ui/app/components/pages/lock/lock.container.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Lock from './lock.component'
-import { compose } from 'recompose'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { lockMetamask } from '../../../actions'
-
-const mapStateToProps = state => {
-  const { metamask: { isUnlocked } } = state
-
-  return {
-    isUnlocked,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    lockMetamask: () => dispatch(lockMetamask()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Lock)
diff --git a/ui/app/components/pages/mobile-sync/index.js b/ui/app/components/pages/mobile-sync/index.js
deleted file mode 100644
index 22a69d092..000000000
--- a/ui/app/components/pages/mobile-sync/index.js
+++ /dev/null
@@ -1,387 +0,0 @@
-const { Component } = require('react')
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const classnames = require('classnames')
-const PubNub = require('pubnub')
-
-const { requestRevealSeedWords, fetchInfoToSync } = require('../../../actions')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const actions = require('../../../actions')
-
-const qrCode = require('qrcode-generator')
-
-import Button from '../../button'
-import LoadingScreen from '../../loading-screen'
-
-const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
-const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
-
-class MobileSyncPage extends Component {
-  static propTypes = {
-    history: PropTypes.object,
-    selectedAddress: PropTypes.string,
-    displayWarning: PropTypes.func,
-    fetchInfoToSync: PropTypes.func,
-    requestRevealSeedWords: PropTypes.func,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      screen: PASSWORD_PROMPT_SCREEN,
-      password: '',
-      seedWords: null,
-      error: null,
-      syncing: false,
-      completed: false,
-    }
-
-    this.syncing = false
-  }
-
-  componentDidMount () {
-    const passwordBox = document.getElementById('password-box')
-    if (passwordBox) {
-      passwordBox.focus()
-    }
-  }
-
-  handleSubmit (event) {
-    event.preventDefault()
-    this.setState({ seedWords: null, error: null })
-    this.props.requestRevealSeedWords(this.state.password)
-      .then(seedWords => {
-        this.generateCipherKeyAndChannelName()
-        this.setState({ seedWords, screen: REVEAL_SEED_SCREEN })
-        this.initWebsockets()
-      })
-      .catch(error => this.setState({ error: error.message }))
-  }
-
-  generateCipherKeyAndChannelName () {
-    this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}`
-    this.channelName = `mm-${PubNub.generateUUID()}`
-  }
-
-  initWebsockets () {
-    this.pubnub = new PubNub({
-      subscribeKey: process.env.PUBNUB_SUB_KEY,
-      publishKey: process.env.PUBNUB_PUB_KEY,
-      cipherKey: this.cipherKey,
-      ssl: true,
-    })
-
-    this.pubnubListener = this.pubnub.addListener({
-      message: (data) => {
-        const {channel, message} = data
-        // handle message
-        if (channel !== this.channelName || !message) {
-          return false
-        }
-
-        if (message.event === 'start-sync') {
-            this.startSyncing()
-        } else if (message.event === 'end-sync') {
-            this.disconnectWebsockets()
-            this.setState({syncing: false, completed: true})
-        }
-      },
-    })
-
-    this.pubnub.subscribe({
-      channels: [this.channelName],
-      withPresence: false,
-    })
-
-  }
-
-  disconnectWebsockets () {
-    if (this.pubnub && this.pubnubListener) {
-      this.pubnub.disconnect(this.pubnubListener)
-    }
-  }
-
-    // Calculating a PubNub Message Payload Size.
-  calculatePayloadSize (channel, message) {
-    return encodeURIComponent(
-        channel + JSON.stringify(message)
-    ).length + 100
-  }
-
-  chunkString (str, size) {
-    const numChunks = Math.ceil(str.length / size)
-    const chunks = new Array(numChunks)
-    for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
-      chunks[i] = str.substr(o, size)
-    }
-    return chunks
-  }
-
-  notifyError (errorMsg) {
-    return new Promise((resolve, reject) => {
-      this.pubnub.publish(
-        {
-          message: {
-            event: 'error-sync',
-            data: errorMsg,
-          },
-          channel: this.channelName,
-          sendByPost: false, // true to send via post
-          storeInHistory: false,
-      },
-      (status, response) => {
-        if (!status.error) {
-          resolve()
-        } else {
-          reject(response)
-        }
-      })
-    })
-  }
-
-  async startSyncing () {
-    if (this.syncing) return false
-    this.syncing = true
-    this.setState({syncing: true})
-
-    const { accounts, network, preferences, transactions } = await this.props.fetchInfoToSync()
-
-    const allDataStr = JSON.stringify({
-      accounts,
-      network,
-      preferences,
-      transactions,
-      udata: {
-        pwd: this.state.password,
-        seed: this.state.seedWords,
-      },
-    })
-
-    const chunks = this.chunkString(allDataStr, 17000)
-    const totalChunks = chunks.length
-    try {
-      for (let i = 0; i < totalChunks; i++) {
-        await this.sendMessage(chunks[i], i + 1, totalChunks)
-      }
-    } catch (e) {
-      this.props.displayWarning('Sync failed :(')
-      this.setState({syncing: false})
-      this.syncing = false
-      this.notifyError(e.toString())
-    }
-  }
-
-  sendMessage (data, pkg, count) {
-    return new Promise((resolve, reject) => {
-      this.pubnub.publish(
-         {
-            message: {
-              event: 'syncing-data',
-              data,
-              totalPkg: count,
-              currentPkg: pkg,
-            },
-            channel: this.channelName,
-            sendByPost: false, // true to send via post
-            storeInHistory: false,
-        },
-        (status, response) => {
-          if (!status.error) {
-            resolve()
-          } else {
-            reject(response)
-          }
-        }
-      )
-    })
-  }
-
-
-  componentWillUnmount () {
-    this.disconnectWebsockets()
-  }
-
-  renderWarning (text) {
-    return (
-      h('.page-container__warning-container', [
-       h('.page-container__warning-message', [
-          h('div', [text]),
-        ]),
-      ])
-    )
-  }
-
-  renderContent () {
-    const { t } = this.context
-
-    if (this.state.syncing) {
-      return h(LoadingScreen, {loadingMessage: 'Sync in progress'})
-    }
-
-    if (this.state.completed) {
-      return h('div.reveal-seed__content', {},
-          h('label.reveal-seed__label', {
-            style: {
-             width: '100%',
-             textAlign: 'center',
-            },
-          }, t('syncWithMobileComplete')),
-      )
-    }
-
-    return this.state.screen === PASSWORD_PROMPT_SCREEN
-      ? h('div', {}, [
-        this.renderWarning(this.context.t('mobileSyncText')),
-        h('.reveal-seed__content', [
-          this.renderPasswordPromptContent(),
-        ]),
-      ])
-      : h('div', {}, [
-        this.renderWarning(this.context.t('syncWithMobileBeCareful')),
-        h('.reveal-seed__content', [ this.renderRevealSeedContent() ]),
-      ])
-  }
-
-  renderPasswordPromptContent () {
-    const { t } = this.context
-
-    return (
-      h('form', {
-        onSubmit: event => this.handleSubmit(event),
-      }, [
-        h('label.input-label', {
-          htmlFor: 'password-box',
-        }, t('enterPasswordContinue')),
-        h('.input-group', [
-          h('input.form-control', {
-            type: 'password',
-            placeholder: t('password'),
-            id: 'password-box',
-            value: this.state.password,
-            onChange: event => this.setState({ password: event.target.value }),
-            className: classnames({ 'form-control--error': this.state.error }),
-          }),
-        ]),
-        this.state.error && h('.reveal-seed__error', this.state.error),
-      ])
-    )
-  }
-
-  renderRevealSeedContent () {
-
-    const qrImage = qrCode(0, 'M')
-    qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`)
-    qrImage.make()
-
-    const { t } = this.context
-    return (
-      h('div', [
-        h('label.reveal-seed__label', {
-          style: {
-           width: '100%',
-           textAlign: 'center',
-          },
-        }, t('syncWithMobileScanThisCode')),
-        h('.div.qr-wrapper', {
-          style: {
-            display: 'flex',
-            justifyContent: 'center',
-          },
-          dangerouslySetInnerHTML: {
-            __html: qrImage.createTableTag(4),
-          },
-        }),
-      ])
-    )
-  }
-
-  renderFooter () {
-    return this.state.screen === PASSWORD_PROMPT_SCREEN
-      ? this.renderPasswordPromptFooter()
-      : this.renderRevealSeedFooter()
-  }
-
-  renderPasswordPromptFooter () {
-    return (
-      h('div.new-account-import-form__buttons', {style: {padding: 30}}, [
-
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('cancel')),
-
-        h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'new-account-create-form__button',
-          onClick: event => this.handleSubmit(event),
-          disabled: this.state.password === '',
-        }, this.context.t('next')),
-      ])
-    )
-  }
-
-  renderRevealSeedFooter () {
-    return (
-      h('.page-container__footer', {style: {padding: 30}}, [
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'page-container__footer-button',
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('close')),
-      ])
-    )
-  }
-
-  render () {
-    return (
-      h('.page-container', [
-        h('.page-container__header', [
-          h('.page-container__title', this.context.t('syncWithMobileTitle')),
-          this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDesc')) : null,
-          this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null,
-        ]),
-        h('.page-container__content', [
-            this.renderContent(),
-        ]),
-        this.renderFooter(),
-      ])
-    )
-  }
-}
-
-MobileSyncPage.propTypes = {
-  requestRevealSeedWords: PropTypes.func,
-  fetchInfoToSync: PropTypes.func,
-  history: PropTypes.object,
-}
-
-MobileSyncPage.contextTypes = {
-  t: PropTypes.func,
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
-    fetchInfoToSync: () => dispatch(fetchInfoToSync()),
-    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
-  }
-
-}
-
-const mapStateToProps = state => {
-  const {
-    metamask: { selectedAddress },
-  } = state
-
-  return {
-    selectedAddress,
-  }
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(MobileSyncPage)
diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js
deleted file mode 100644
index a9077b98b..000000000
--- a/ui/app/components/pages/notice.js
+++ /dev/null
@@ -1,203 +0,0 @@
-const { Component } = require('react')
-const h = require('react-hyperscript')
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const ReactMarkdown = require('react-markdown')
-const linker = require('extension-link-enabler')
-const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice')
-const findDOMNode = require('react-dom').findDOMNode
-const actions = require('../../actions')
-const { DEFAULT_ROUTE } = require('../../routes')
-
-class Notice extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      disclaimerDisabled: true,
-    }
-  }
-
-  componentWillMount () {
-    if (!this.props.notice) {
-      this.props.history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  componentDidMount () {
-    // eslint-disable-next-line react/no-find-dom-node
-    var node = findDOMNode(this)
-    linker.setupListener(node)
-    if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
-      this.setState({ disclaimerDisabled: false })
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (!nextProps.notice) {
-      this.props.history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  componentWillUnmount () {
-    // eslint-disable-next-line react/no-find-dom-node
-    var node = findDOMNode(this)
-    linker.teardownListener(node)
-  }
-
-  handleAccept () {
-    this.setState({ disclaimerDisabled: true })
-    this.props.onConfirm()
-  }
-
-  render () {
-    const { notice = {} } = this.props
-    const { title, date, body } = notice
-    const { disclaimerDisabled } = this.state
-
-    return (
-      h('.flex-column.flex-center.flex-grow', {
-        style: {
-          width: '100%',
-        },
-      }, [
-        h('h3.flex-center.text-transform-uppercase.terms-header', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            width: '100%',
-            fontSize: '20px',
-            textAlign: 'center',
-            padding: 6,
-          },
-        }, [
-          title,
-        ]),
-
-        h('h5.flex-center.text-transform-uppercase.terms-header', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            marginBottom: 24,
-            width: '100%',
-            fontSize: '20px',
-            textAlign: 'center',
-            padding: 6,
-          },
-        }, [
-          date,
-        ]),
-
-        h('style', `
-
-          .markdown {
-            overflow-x: hidden;
-          }
-
-          .markdown h1, .markdown h2, .markdown h3 {
-            margin: 10px 0;
-            font-weight: bold;
-          }
-
-          .markdown strong {
-            font-weight: bold;
-          }
-          .markdown em {
-            font-style: italic;
-          }
-
-          .markdown p {
-            margin: 10px 0;
-          }
-
-          .markdown a {
-            color: #df6b0e;
-          }
-
-        `),
-
-        h('div.markdown', {
-          onScroll: (e) => {
-            var object = e.currentTarget
-            if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
-              this.setState({ disclaimerDisabled: false })
-            }
-          },
-          style: {
-            background: 'rgb(235, 235, 235)',
-            height: '310px',
-            padding: '6px',
-            width: '90%',
-            overflowY: 'scroll',
-            scroll: 'auto',
-          },
-        }, [
-          h(ReactMarkdown, {
-            className: 'notice-box',
-            source: body,
-            skipHtml: true,
-          }),
-        ]),
-
-        h('button.primary', {
-          disabled: disclaimerDisabled,
-          onClick: () => this.handleAccept(),
-          style: {
-            marginTop: '18px',
-          },
-        }, 'Accept'),
-      ])
-    )
-  }
-
-}
-
-const mapStateToProps = state => {
-  const { metamask } = state
-  const { noActiveNotices, nextUnreadNotice, lostAccounts } = metamask
-
-  return {
-    noActiveNotices,
-    nextUnreadNotice,
-    lostAccounts,
-  }
-}
-
-Notice.propTypes = {
-  notice: PropTypes.object,
-  onConfirm: PropTypes.func,
-  history: PropTypes.object,
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    markNoticeRead: nextUnreadNotice => dispatch(actions.markNoticeRead(nextUnreadNotice)),
-    markAccountsFound: () => dispatch(actions.markAccountsFound()),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { noActiveNotices, nextUnreadNotice, lostAccounts } = stateProps
-  const { markNoticeRead, markAccountsFound } = dispatchProps
-
-  let notice
-  let onConfirm
-
-  if (!noActiveNotices) {
-    notice = nextUnreadNotice
-    onConfirm = () => markNoticeRead(nextUnreadNotice)
-  } else if (lostAccounts && lostAccounts.length > 0) {
-    notice = generateLostAccountsNotice(lostAccounts)
-    onConfirm = () => markAccountsFound()
-  }
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    notice,
-    onConfirm,
-  }
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice)
diff --git a/ui/app/components/pages/provider-approval/provider-approval.component.js b/ui/app/components/pages/provider-approval/provider-approval.component.js
deleted file mode 100644
index 11895327a..000000000
--- a/ui/app/components/pages/provider-approval/provider-approval.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import ProviderPageContainer from '../../provider-page-container'
-
-export default class ProviderApproval extends Component {
-  static propTypes = {
-    approveProviderRequest: PropTypes.func.isRequired,
-    providerRequest: PropTypes.object.isRequired,
-    rejectProviderRequest: PropTypes.func.isRequired,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const { approveProviderRequest, providerRequest, rejectProviderRequest } = this.props
-    return (
-      <ProviderPageContainer
-        approveProviderRequest={approveProviderRequest}
-        origin={providerRequest.origin}
-        tabID={providerRequest.tabID}
-        rejectProviderRequest={rejectProviderRequest}
-        siteImage={providerRequest.siteImage}
-        siteTitle={providerRequest.siteTitle}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/pages/provider-approval/provider-approval.container.js b/ui/app/components/pages/provider-approval/provider-approval.container.js
deleted file mode 100644
index 28e4531a9..000000000
--- a/ui/app/components/pages/provider-approval/provider-approval.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import ProviderApproval from './provider-approval.component'
-import { approveProviderRequest, rejectProviderRequest } from '../../../actions'
-
-function mapDispatchToProps (dispatch) {
-  return {
-    approveProviderRequest: tabID => dispatch(approveProviderRequest(tabID)),
-    rejectProviderRequest: tabID => dispatch(rejectProviderRequest(tabID)),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(ProviderApproval)
diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss
deleted file mode 100644
index 138ebcfc5..000000000
--- a/ui/app/components/pages/settings/index.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import './info-tab/index';
-
-@import './settings-tab/index';
-
-.settings-page {
-  position: relative;
-  background: $white;
-  display: flex;
-  flex-flow: column nowrap;
-
-  &__header {
-    padding: 25px 25px 0;
-  }
-
-  &__close-button::after {
-    content: '\00D7';
-    font-size: 40px;
-    color: $dusty-gray;
-    position: absolute;
-    top: 25px;
-    right: 30px;
-    cursor: pointer;
-  }
-
-  &__content {
-    padding: 25px;
-    height: auto;
-    overflow: auto;
-  }
-
-  &__content-row {
-    display: flex;
-    flex-direction: row;
-    padding: 10px 0 20px;
-
-    @media screen and (max-width: 575px) {
-      flex-direction: column;
-      padding: 10px 0;
-    }
-  }
-
-  &__content-item {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 0 5px;
-    min-height: 71px;
-
-    @media screen and (max-width: 575px) {
-      height: initial;
-      padding: 5px 0;
-    }
-
-    &--without-height {
-      height: initial;
-    }
-  }
-
-  &__content-label {
-    text-transform: capitalize;
-  }
-
-  &__content-description {
-    font-size: 14px;
-    color: $dusty-gray;
-    padding-top: 5px;
-  }
-
-  &__content-item-col {
-    max-width: 300px;
-    display: flex;
-    flex-direction: column;
-
-    @media screen and (max-width: 575px) {
-      max-width: 100%;
-      width: 100%;
-    }
-  }
-}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
deleted file mode 100644
index ba2e81754..000000000
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ /dev/null
@@ -1,674 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import infuraCurrencies from '../../../../infura-conversion.json'
-import validUrl from 'valid-url'
-import { exportAsFile } from '../../../../util'
-import SimpleDropdown from '../../../dropdowns/simple-dropdown'
-import ToggleButton from 'react-toggle-button'
-import { REVEAL_SEED_ROUTE, MOBILE_SYNC_ROUTE } from '../../../../routes'
-import locales from '../../../../../../app/_locales/index.json'
-import TextField from '../../../text-field'
-import Button from '../../../button'
-
-const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
-  return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
-})
-
-const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
-  return {
-    displayValue: `${code.toUpperCase()} - ${name}`,
-    key: code,
-    value: code,
-  }
-})
-
-const localeOptions = locales.map(locale => {
-  return {
-    displayValue: `${locale.name}`,
-    key: locale.code,
-    value: locale.code,
-  }
-})
-
-export default class SettingsTab extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    metamask: PropTypes.object,
-    setUseBlockie: PropTypes.func,
-    setHexDataFeatureFlag: PropTypes.func,
-    setPrivacyMode: PropTypes.func,
-    privacyMode: PropTypes.bool,
-    setCurrentCurrency: PropTypes.func,
-    setRpcTarget: PropTypes.func,
-    delRpcTarget: PropTypes.func,
-    displayWarning: PropTypes.func,
-    revealSeedConfirmation: PropTypes.func,
-    setFeatureFlagToBeta: PropTypes.func,
-    showClearApprovalModal: PropTypes.func,
-    showResetAccountConfirmationModal: PropTypes.func,
-    warning: PropTypes.string,
-    history: PropTypes.object,
-    updateCurrentLocale: PropTypes.func,
-    currentLocale: PropTypes.string,
-    useBlockie: PropTypes.bool,
-    sendHexData: PropTypes.bool,
-    currentCurrency: PropTypes.string,
-    conversionDate: PropTypes.number,
-    nativeCurrency: PropTypes.string,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
-    setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func,
-    setAdvancedInlineGasFeatureFlag: PropTypes.func,
-    advancedInlineGas: PropTypes.bool,
-    showFiatInTestnets: PropTypes.bool,
-    setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
-    participateInMetaMetrics: PropTypes.bool,
-    setParticipateInMetaMetrics: PropTypes.func,
-  }
-
-  state = {
-    newRpc: '',
-    chainId: '',
-    showOptions: false,
-    ticker: '',
-    nickname: '',
-  }
-
-  renderCurrentConversion () {
-    const { t } = this.context
-    const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('currencyConversion') }</span>
-          <span className="settings-page__content-description">
-            { t('updatedWithDate', [Date(conversionDate)]) }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <SimpleDropdown
-              placeholder={t('selectCurrency')}
-              options={infuraCurrencyOptions}
-              selectedOption={currentCurrency}
-              onSelect={newCurrency => setCurrentCurrency(newCurrency)}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderCurrentLocale () {
-    const { t } = this.context
-    const { updateCurrentLocale, currentLocale } = this.props
-    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
-    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span className="settings-page__content-label">
-            { t('currentLanguage') }
-          </span>
-          <span className="settings-page__content-description">
-            { currentLocaleName }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <SimpleDropdown
-              placeholder={t('selectLocale')}
-              options={localeOptions}
-              selectedOption={currentLocale}
-              onSelect={async newLocale => updateCurrentLocale(newLocale)}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderNewRpcUrl () {
-    const { t } = this.context
-    const { newRpc, chainId, ticker, nickname } = this.state
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('newNetwork') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <TextField
-              type="text"
-              id="new-rpc"
-              placeholder={t('rpcURL')}
-              value={newRpc}
-              onChange={e => this.setState({ newRpc: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="chainid"
-              placeholder={t('optionalChainId')}
-              value={chainId}
-              onChange={e => this.setState({ chainId: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="ticker"
-              placeholder={t('optionalSymbol')}
-              value={ticker}
-              onChange={e => this.setState({ ticker: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="nickname"
-              placeholder={t('optionalNickname')}
-              value={nickname}
-              onChange={e => this.setState({ nickname: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <div className="flex-row flex-align-center space-between">
-              <span className="settings-tab__advanced-link"
-                onClick={e => {
-                  e.preventDefault()
-                  this.setState({ showOptions: !this.state.showOptions })
-                }}
-              >
-                { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
-              </span>
-              <button
-                className="button btn-primary settings-tab__rpc-save-button"
-                onClick={e => {
-                  e.preventDefault()
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }}
-              >
-                { t('save') }
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  validateRpc (newRpc, chainId, ticker = 'ETH', nickname) {
-    const { setRpcTarget, displayWarning } = this.props
-    if (validUrl.isWebUri(newRpc)) {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Success',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      if (!!chainId && Number.isNaN(parseInt(chainId))) {
-        return displayWarning(`${this.context.t('invalidInput')} chainId`)
-      }
-
-      setRpcTarget(newRpc, chainId, ticker, nickname)
-    } else {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Error',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      const appendedRpc = `http://${newRpc}`
-
-      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.context.t('uriErrorMsg'))
-      } else {
-        displayWarning(this.context.t('invalidRPC'))
-      }
-    }
-  }
-
-  renderStateLogs () {
-    const { t } = this.context
-    const { displayWarning } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('stateLogs') }</span>
-          <span className="settings-page__content-description">
-            { t('stateLogsDescription') }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="primary"
-              large
-              onClick={() => {
-                window.logStateString((err, result) => {
-                  if (err) {
-                    displayWarning(t('stateLogError'))
-                  } else {
-                    exportAsFile('MetaMask State Logs.json', result)
-                  }
-                })
-              }}
-            >
-              { t('downloadStateLogs') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderClearApproval () {
-    const { t } = this.context
-    const { showClearApprovalModal } = this.props
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('approvalData') }</span>
-          <span className="settings-page__content-description">
-            { t('approvalDataDescription') }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              className="settings-tab__button--orange"
-              onClick={event => {
-                event.preventDefault()
-                showClearApprovalModal()
-              }}
-            >
-              { t('clearApprovalData') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderSeedWords () {
-    const { t } = this.context
-    const { history } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('revealSeedWords') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              onClick={event => {
-                event.preventDefault()
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Settings',
-                    action: 'Reveal Seed Phrase',
-                    name: 'Reveal Seed Phrase',
-                  },
-                })
-                history.push(REVEAL_SEED_ROUTE)
-              }}
-            >
-              { t('revealSeedWords') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-
-  renderMobileSync () {
-    const { t } = this.context
-    const { history } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('syncWithMobile') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="primary"
-              large
-              onClick={event => {
-                event.preventDefault()
-                history.push(MOBILE_SYNC_ROUTE)
-              }}
-            >
-              { t('syncWithMobile') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-
-  renderResetAccount () {
-    const { t } = this.context
-    const { showResetAccountConfirmationModal } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('resetAccount') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              className="settings-tab__button--orange"
-              onClick={event => {
-                event.preventDefault()
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Settings',
-                    action: 'Reset Account',
-                    name: 'Reset Account',
-                  },
-                })
-                showResetAccountConfirmationModal()
-              }}
-            >
-              { t('resetAccount') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderBlockieOptIn () {
-    const { useBlockie, setUseBlockie } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ this.context.t('blockiesIdenticon') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={useBlockie}
-              onToggle={value => setUseBlockie(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderHexDataOptIn () {
-    const { t } = this.context
-    const { sendHexData, setHexDataFeatureFlag } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showHexData') }</span>
-          <div className="settings-page__content-description">
-            { t('showHexDataDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={sendHexData}
-              onToggle={value => setHexDataFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderAdvancedGasInputInline () {
-    const { t } = this.context
-    const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showAdvancedGasInline') }</span>
-          <div className="settings-page__content-description">
-            { t('showAdvancedGasInlineDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={advancedInlineGas}
-              onToggle={value => setAdvancedInlineGasFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderUsePrimaryCurrencyOptions () {
-    const { t } = this.context
-    const {
-      nativeCurrency,
-      setUseNativeCurrencyAsPrimaryCurrencyPreference,
-      useNativeCurrencyAsPrimaryCurrency,
-    } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('primaryCurrencySetting') }</span>
-          <div className="settings-page__content-description">
-            { t('primaryCurrencySettingDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <div className="settings-tab__radio-buttons">
-              <div className="settings-tab__radio-button">
-                <input
-                  type="radio"
-                  id="native-primary-currency"
-                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(true)}
-                  checked={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-                />
-                <label
-                  htmlFor="native-primary-currency"
-                  className="settings-tab__radio-label"
-                >
-                  { nativeCurrency }
-                </label>
-              </div>
-              <div className="settings-tab__radio-button">
-                <input
-                  type="radio"
-                  id="fiat-primary-currency"
-                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(false)}
-                  checked={!useNativeCurrencyAsPrimaryCurrency}
-                />
-                <label
-                  htmlFor="fiat-primary-currency"
-                  className="settings-tab__radio-label"
-                >
-                  { t('fiat') }
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderShowConversionInTestnets () {
-    const { t } = this.context
-    const {
-      showFiatInTestnets,
-      setShowFiatConversionOnTestnetsPreference,
-    } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showFiatConversionInTestnets') }</span>
-          <div className="settings-page__content-description">
-            { t('showFiatConversionInTestnetsDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={showFiatInTestnets}
-              onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderPrivacyOptIn () {
-    const { t } = this.context
-    const { privacyMode, setPrivacyMode } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('privacyMode') }</span>
-          <div className="settings-page__content-description">
-            { t('privacyModeDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={privacyMode}
-              onToggle={value => setPrivacyMode(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderMetaMetricsOptIn () {
-    const { t } = this.context
-    const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('participateInMetaMetrics') }</span>
-          <div className="settings-page__content-description">
-            <span>{ t('participateInMetaMetricsDescription') }</span>
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={participateInMetaMetrics}
-              onToggle={value => setParticipateInMetaMetrics(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { warning } = this.props
-
-    return (
-      <div className="settings-page__content">
-        { warning && <div className="settings-tab__error">{ warning }</div> }
-        { this.renderCurrentConversion() }
-        { this.renderUsePrimaryCurrencyOptions() }
-        { this.renderShowConversionInTestnets() }
-        { this.renderCurrentLocale() }
-        { this.renderNewRpcUrl() }
-        { this.renderStateLogs() }
-        { this.renderSeedWords() }
-        { this.renderResetAccount() }
-        { this.renderClearApproval() }
-        { this.renderPrivacyOptIn() }
-        { this.renderHexDataOptIn() }
-        { this.renderAdvancedGasInputInline() }
-        { this.renderBlockieOptIn() }
-        { this.renderMobileSync() }
-        { this.renderMetaMetricsOptIn() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
deleted file mode 100644
index e266c8c9a..000000000
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import SettingsTab from './settings-tab.component'
-import { compose } from 'recompose'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import {
-  setCurrentCurrency,
-  updateAndSetCustomRpc,
-  displayWarning,
-  revealSeedConfirmation,
-  setUseBlockie,
-  updateCurrentLocale,
-  setFeatureFlag,
-  showModal,
-  setUseNativeCurrencyAsPrimaryCurrencyPreference,
-  setShowFiatConversionOnTestnetsPreference,
-  setParticipateInMetaMetrics,
-} from '../../../../actions'
-import { preferencesSelector } from '../../../../selectors'
-
-const mapStateToProps = state => {
-  const { appState: { warning }, metamask } = state
-  const {
-    currentCurrency,
-    conversionDate,
-    nativeCurrency,
-    useBlockie,
-    featureFlags: {
-      sendHexData,
-      privacyMode,
-      advancedInlineGas,
-    } = {},
-    provider = {},
-    currentLocale,
-    participateInMetaMetrics,
-  } = metamask
-  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state)
-
-  return {
-    warning,
-    currentLocale,
-    currentCurrency,
-    conversionDate,
-    nativeCurrency,
-    useBlockie,
-    sendHexData,
-    advancedInlineGas,
-    privacyMode,
-    provider,
-    useNativeCurrencyAsPrimaryCurrency,
-    showFiatInTestnets,
-    participateInMetaMetrics,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
-    setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname)),
-    displayWarning: warning => dispatch(displayWarning(warning)),
-    revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
-    setUseBlockie: value => dispatch(setUseBlockie(value)),
-    updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
-    setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
-    setAdvancedInlineGasFeatureFlag: shouldShow => dispatch(setFeatureFlag('advancedInlineGas', shouldShow)),
-    setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)),
-    showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
-    setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
-      return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
-    },
-    setShowFiatConversionOnTestnetsPreference: value => {
-      return dispatch(setShowFiatConversionOnTestnetsPreference(value))
-    },
-    showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
-    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(SettingsTab)
diff --git a/ui/app/components/pages/settings/settings.component.js b/ui/app/components/pages/settings/settings.component.js
deleted file mode 100644
index 94a97bba1..000000000
--- a/ui/app/components/pages/settings/settings.component.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Switch, Route, matchPath } from 'react-router-dom'
-import TabBar from '../../tab-bar'
-import SettingsTab from './settings-tab'
-import InfoTab from './info-tab'
-import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes'
-
-export default class SettingsPage extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    history: PropTypes.object,
-    t: PropTypes.func,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  render () {
-    const { history, location } = this.props
-
-    return (
-      <div className="main-container settings-page">
-        <div className="settings-page__header">
-          <div
-            className="settings-page__close-button"
-            onClick={() => history.push(DEFAULT_ROUTE)}
-          />
-          <TabBar
-            tabs={[
-              { content: this.context.t('settings'), key: SETTINGS_ROUTE },
-              { content: this.context.t('info'), key: INFO_ROUTE },
-            ]}
-            isActive={key => matchPath(location.pathname, { path: key, exact: true })}
-            onSelect={key => history.push(key)}
-          />
-        </div>
-        <Switch>
-          <Route
-            exact
-            path={INFO_ROUTE}
-            component={InfoTab}
-          />
-          <Route
-            exact
-            path={SETTINGS_ROUTE}
-            component={SettingsTab}
-          />
-        </Switch>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
deleted file mode 100644
index cc86d5872..000000000
--- a/ui/app/components/pages/unlock-page/unlock-page.component.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Button from '@material-ui/core/Button'
-import TextField from '../../text-field'
-import getCaretCoordinates from 'textarea-caret'
-import { EventEmitter } from 'events'
-import Mascot from '../../mascot'
-import { DEFAULT_ROUTE } from '../../../routes'
-
-export default class UnlockPage extends Component {
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object,
-    isUnlocked: PropTypes.bool,
-    onImport: PropTypes.func,
-    onRestore: PropTypes.func,
-    onSubmit: PropTypes.func,
-    forceUpdateMetamaskState: PropTypes.func,
-    showOptInModal: PropTypes.func,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      password: '',
-      error: null,
-    }
-
-    this.submitting = false
-    this.animationEventEmitter = new EventEmitter()
-  }
-
-  componentWillMount () {
-    const { isUnlocked, history } = this.props
-
-    if (isUnlocked) {
-      history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  handleSubmit = async event => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const { password } = this.state
-    const { onSubmit, forceUpdateMetamaskState, showOptInModal } = this.props
-
-    if (password === '' || this.submitting) {
-      return
-    }
-
-    this.setState({ error: null })
-    this.submitting = true
-
-    try {
-      await onSubmit(password)
-      const newState = await forceUpdateMetamaskState()
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Navigation',
-          action: 'Unlock',
-          name: 'Success',
-        },
-        isNewVisit: true,
-      })
-
-      if (newState.participateInMetaMetrics === null || newState.participateInMetaMetrics === undefined) {
-        showOptInModal()
-      }
-    } catch ({ message }) {
-      if (message === 'Incorrect password') {
-        const newState = await forceUpdateMetamaskState()
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Unlock',
-            name: 'Incorrect Passowrd',
-          },
-          customVariables: {
-            numberOfTokens: newState.tokens.length,
-            numberOfAccounts: Object.keys(newState.accounts).length,
-          },
-        })
-      }
-
-      this.setState({ error: message })
-      this.submitting = false
-    }
-  }
-
-  handleInputChange ({ target }) {
-    this.setState({ password: target.value, error: null })
-
-    // tell mascot to look at page action
-    const element = target
-    const boundingRect = element.getBoundingClientRect()
-    const coordinates = getCaretCoordinates(element, element.selectionEnd)
-    this.animationEventEmitter.emit('point', {
-      x: boundingRect.left + coordinates.left - element.scrollLeft,
-      y: boundingRect.top + coordinates.top - element.scrollTop,
-    })
-  }
-
-  renderSubmitButton () {
-    const style = {
-      backgroundColor: '#f7861c',
-      color: 'white',
-      marginTop: '20px',
-      height: '60px',
-      fontWeight: '400',
-      boxShadow: 'none',
-      borderRadius: '4px',
-    }
-
-    return (
-      <Button
-        type="submit"
-        style={style}
-        disabled={!this.state.password}
-        fullWidth
-        variant="raised"
-        size="large"
-        onClick={this.handleSubmit}
-        disableRipple
-      >
-        { this.context.t('login') }
-      </Button>
-    )
-  }
-
-  render () {
-    const { password, error } = this.state
-    const { t } = this.context
-    const { onImport, onRestore } = this.props
-
-    return (
-      <div className="unlock-page__container">
-        <div className="unlock-page">
-          <div className="unlock-page__mascot-container">
-            <Mascot
-              animationEventEmitter={this.animationEventEmitter}
-              width="120"
-              height="120"
-            />
-          </div>
-          <h1 className="unlock-page__title">
-            { t('welcomeBack') }
-          </h1>
-          <div>{ t('unlockMessage') }</div>
-          <form
-            className="unlock-page__form"
-            onSubmit={this.handleSubmit}
-          >
-            <TextField
-              id="password"
-              label={t('password')}
-              type="password"
-              value={password}
-              onChange={event => this.handleInputChange(event)}
-              error={error}
-              autoFocus
-              autoComplete="current-password"
-              material
-              fullWidth
-            />
-          </form>
-          { this.renderSubmitButton() }
-          <div className="unlock-page__links">
-            <div
-              className="unlock-page__link"
-              onClick={() => onRestore()}
-            >
-              { t('restoreFromSeed') }
-            </div>
-            <div
-              className="unlock-page__link unlock-page__link--import"
-              onClick={() => onImport()}
-            >
-              { t('importUsingSeed') }
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js
deleted file mode 100644
index fe51c8095..000000000
--- a/ui/app/components/pages/unlock-page/unlock-page.container.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
-import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../../routes'
-import {
-  tryUnlockMetamask,
-  forgotPassword,
-  markPasswordForgotten,
-  forceUpdateMetamaskState,
-  showModal,
-} from '../../../actions'
-import UnlockPage from './unlock-page.component'
-
-const mapStateToProps = state => {
-  const { metamask: { isUnlocked } } = state
-  return {
-    isUnlocked,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    forgotPassword: () => dispatch(forgotPassword()),
-    tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
-    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
-    forceUpdateMetamaskState: () => forceUpdateMetamaskState(dispatch),
-    showOptInModal: () => dispatch(showModal({ name: 'METAMETRICS_OPT_IN_MODAL' })),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { markPasswordForgotten, tryUnlockMetamask, ...restDispatchProps } = dispatchProps
-  const { history, onSubmit: ownPropsSubmit, ...restOwnProps } = ownProps
-
-  const onImport = () => {
-    markPasswordForgotten()
-    history.push(RESTORE_VAULT_ROUTE)
-
-    if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-      global.platform.openExtensionInBrowser()
-    }
-  }
-
-  const onSubmit = async password => {
-    await tryUnlockMetamask(password)
-    history.push(DEFAULT_ROUTE)
-  }
-
-  return {
-    ...stateProps,
-    ...restDispatchProps,
-    ...restOwnProps,
-    onImport,
-    onRestore: onImport,
-    onSubmit: ownPropsSubmit || onSubmit,
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(UnlockPage)
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
deleted file mode 100644
index 268db613f..000000000
--- a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import PropTypes from 'prop-types'
-import React, {PureComponent} from 'react'
-import Identicon from '../../identicon'
-
-export default class ProviderPageContainerContent extends PureComponent {
-  static propTypes = {
-    origin: PropTypes.string.isRequired,
-    selectedIdentity: PropTypes.string.isRequired,
-    siteImage: PropTypes.string,
-    siteTitle: PropTypes.string.isRequired,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  renderConnectVisual = () => {
-    const { origin, selectedIdentity, siteImage, siteTitle } = this.props
-
-    return (
-      <div className="provider-approval-visual">
-        <section>
-          {siteImage ? (
-            <img
-              className="provider-approval-visual__identicon"
-              src={siteImage}
-            />
-          ) : (
-            <i className="provider-approval-visual__identicon--default">
-              {siteTitle.charAt(0).toUpperCase()}
-            </i>
-          )}
-          <h1>{siteTitle}</h1>
-          <h2>{origin}</h2>
-        </section>
-        <span className="provider-approval-visual__check" />
-        <section>
-          <Identicon
-            className="provider-approval-visual__identicon"
-            address={selectedIdentity.address}
-            diameter={64}
-          />
-          <h1>{selectedIdentity.name}</h1>
-        </section>
-      </div>
-    )
-  }
-
-  render () {
-    const { siteTitle } = this.props
-    const { t } = this.context
-
-    return (
-      <div className="provider-approval-container__content">
-        <section>
-          <h2>{t('connectRequest')}</h2>
-          {this.renderConnectVisual()}
-          <h1>{t('providerRequest', [siteTitle])}</h1>
-          <p>
-            {t('providerRequestInfo')}
-            <br/>
-            <a
-              href="https://medium.com/metamask/introducing-privacy-mode-42549d4870fa"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('learnMore')}.
-            </a>
-          </p>
-        </section>
-        <section className="secure-badge">
-          <img src="/images/mm-secure.svg" />
-        </section>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
deleted file mode 100644
index 3ea1ce20e..000000000
--- a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux'
-import ProviderPageContainerContent from './provider-page-container-content.component'
-import { getSelectedIdentity } from '../../../selectors'
-
-const mapStateToProps = (state) => {
-  return {
-    selectedIdentity: getSelectedIdentity(state),
-  }
-}
-
-export default connect(mapStateToProps)(ProviderPageContainerContent)
diff --git a/ui/app/components/provider-page-container/provider-page-container.component.js b/ui/app/components/provider-page-container/provider-page-container.component.js
deleted file mode 100644
index ff063166d..000000000
--- a/ui/app/components/provider-page-container/provider-page-container.component.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import PropTypes from 'prop-types'
-import React, {PureComponent} from 'react'
-import { ProviderPageContainerContent, ProviderPageContainerHeader } from './'
-import { PageContainerFooter } from '../page-container'
-
-export default class ProviderPageContainer extends PureComponent {
-  static propTypes = {
-    approveProviderRequest: PropTypes.func.isRequired,
-    origin: PropTypes.string.isRequired,
-    rejectProviderRequest: PropTypes.func.isRequired,
-    siteImage: PropTypes.string,
-    siteTitle: PropTypes.string.isRequired,
-    tabID: PropTypes.string.isRequired,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  componentDidMount () {
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Auth',
-        action: 'Connect',
-        name: 'Popup Opened',
-      },
-    })
-  }
-
-  onCancel = () => {
-    const { tabID, rejectProviderRequest } = this.props
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Auth',
-        action: 'Connect',
-        name: 'Canceled',
-      },
-    })
-    rejectProviderRequest(tabID)
-  }
-
-  onSubmit = () => {
-    const { approveProviderRequest, tabID } = this.props
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Auth',
-        action: 'Connect',
-        name: 'Confirmed',
-      },
-    })
-    approveProviderRequest(tabID)
-  }
-
-  render () {
-    const {origin, siteImage, siteTitle} = this.props
-
-    return (
-      <div className="page-container provider-approval-container">
-        <ProviderPageContainerHeader />
-        <ProviderPageContainerContent
-          origin={origin}
-          siteImage={siteImage}
-          siteTitle={siteTitle}
-        />
-        <PageContainerFooter
-          onCancel={() => this.onCancel()}
-          cancelText={this.context.t('cancel')}
-          onSubmit={() => this.onSubmit()}
-          submitText={this.context.t('connect')}
-          submitButtonType="confirm"
-        />
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
deleted file mode 100644
index 312815891..000000000
--- a/ui/app/components/qr-code.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const qrCode = require('qrcode-generator')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const { isHexPrefixed } = require('ethereumjs-util')
-const ReadOnlyInput = require('./readonly-input')
-const { checksumAddress } = require('../util')
-
-module.exports = connect(mapStateToProps)(QrCodeView)
-
-function mapStateToProps (state) {
-  return {
-    // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
-    buyView: state.appState.buyView,
-    warning: state.appState.warning,
-  }
-}
-
-inherits(QrCodeView, Component)
-
-function QrCodeView () {
-  Component.call(this)
-}
-
-QrCodeView.prototype.render = function () {
-  const props = this.props
-  const { message, data, network } = props.Qr
-  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data, network)}`
-  const qrImage = qrCode(4, 'M')
-  qrImage.addData(address)
-  qrImage.make()
-
-  return h('.div.flex-column.flex-center', [
-    Array.isArray(message)
-      ? h('.message-container', this.renderMultiMessage())
-      : message && h('.qr-header', message),
-
-    this.props.warning ? this.props.warning && h('span.error.flex-center', {
-      style: {
-      },
-    },
-    this.props.warning) : null,
-
-    h('.div.qr-wrapper', {
-      style: {},
-      dangerouslySetInnerHTML: {
-        __html: qrImage.createTableTag(4),
-      },
-    }),
-    h(ReadOnlyInput, {
-      wrapperClass: 'ellip-address-wrapper',
-      inputClass: 'qr-ellip-address',
-      value: checksumAddress(data, network),
-    }),
-  ])
-}
-
-QrCodeView.prototype.renderMultiMessage = function () {
-  var Qr = this.props.Qr
-  var multiMessage = Qr.message.map((message) => h('.qr-message', message))
-  return multiMessage
-}
diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
deleted file mode 100644
index 47c56e312..000000000
--- a/ui/app/components/selected-account/selected-account.component.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import copyToClipboard from 'copy-to-clipboard'
-import { addressSlicer, checksumAddress } from '../../util'
-
-const Tooltip = require('../tooltip-v2.js').default
-
-class SelectedAccount extends Component {
-  state = {
-    copied: false,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    selectedAddress: PropTypes.string,
-    selectedIdentity: PropTypes.object,
-    network: PropTypes.string,
-  }
-
-  render () {
-    const { t } = this.context
-    const { selectedAddress, selectedIdentity, network } = this.props
-    const checksummedAddress = checksumAddress(selectedAddress, network)
-
-    return (
-      <div className="selected-account">
-        <Tooltip
-          position="bottom"
-          title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
-        >
-          <div
-            className="selected-account__clickable"
-            onClick={() => {
-              this.setState({ copied: true })
-              setTimeout(() => this.setState({ copied: false }), 3000)
-              copyToClipboard(checksummedAddress)
-            }}
-          >
-            <div className="selected-account__name">
-              { selectedIdentity.name }
-            </div>
-            <div className="selected-account__address">
-              { addressSlicer(checksummedAddress) }
-            </div>
-          </div>
-        </Tooltip>
-      </div>
-    )
-  }
-}
-
-export default SelectedAccount
diff --git a/ui/app/components/selected-account/selected-account.container.js b/ui/app/components/selected-account/selected-account.container.js
deleted file mode 100644
index 1c8d17d8d..000000000
--- a/ui/app/components/selected-account/selected-account.container.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { connect } from 'react-redux'
-import SelectedAccount from './selected-account.component'
-
-const selectors = require('../../selectors')
-
-const mapStateToProps = state => {
-  return {
-    selectedAddress: selectors.getSelectedAddress(state),
-    selectedIdentity: selectors.getSelectedIdentity(state),
-    network: state.metamask.network,
-  }
-}
-
-export default connect(mapStateToProps)(SelectedAccount)
diff --git a/ui/app/components/send/account-list-item/account-list-item.component.js b/ui/app/components/send/account-list-item/account-list-item.component.js
deleted file mode 100644
index 0420af46b..000000000
--- a/ui/app/components/send/account-list-item/account-list-item.component.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { checksumAddress } from '../../../util'
-import Identicon from '../../identicon'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../constants/common'
-import Tooltip from '../../tooltip-v2'
-
-export default class AccountListItem extends Component {
-
-  static propTypes = {
-    account: PropTypes.object,
-    className: PropTypes.string,
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
-    displayAddress: PropTypes.bool,
-    displayBalance: PropTypes.bool,
-    handleClick: PropTypes.func,
-    icon: PropTypes.node,
-    balanceIsCached: PropTypes.bool,
-    showFiat: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    showFiat: true,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const {
-      account,
-      className,
-      displayAddress = false,
-      displayBalance = true,
-      handleClick,
-      icon = null,
-      balanceIsCached,
-      showFiat,
-    } = this.props
-
-    const { name, address, balance } = account || {}
-
-    return (<div
-      className={`account-list-item ${className}`}
-      onClick={() => handleClick && handleClick({ name, address, balance })}
-    >
-
-      <div className="account-list-item__top-row">
-        <Identicon
-          address={address}
-          className="account-list-item__identicon"
-          diameter={18}
-        />
-
-        <div className="account-list-item__account-name">{ name || address }</div>
-
-        {icon && <div className="account-list-item__icon">{ icon }</div>}
-
-      </div>
-
-      {displayAddress && name && <div className="account-list-item__account-address">
-        { checksumAddress(address) }
-      </div>}
-
-      {
-        displayBalance && (
-          <Tooltip
-            position="left"
-            title={this.context.t('balanceOutdated')}
-            disabled={!balanceIsCached}
-            style={{
-              left: '-20px !important',
-            }}
-          >
-            <div className={classnames('account-list-item__account-balances', {
-              'account-list-item__cached-balances': balanceIsCached,
-            })}>
-              <div className="account-list-item__primary-cached-container">
-                <UserPreferencedCurrencyDisplay
-                  type={PRIMARY}
-                  value={balance}
-                  hideTitle={true}
-                />
-                {
-                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
-                }
-              </div>
-              {
-                showFiat && (
-                  <UserPreferencedCurrencyDisplay
-                    type={SECONDARY}
-                    value={balance}
-                    hideTitle={true}
-                  />
-                )
-              }
-            </div>
-          </Tooltip>
-        )
-      }
-
-    </div>)
-  }
-}
diff --git a/ui/app/components/send/account-list-item/account-list-item.container.js b/ui/app/components/send/account-list-item/account-list-item.container.js
deleted file mode 100644
index c045ef14f..000000000
--- a/ui/app/components/send/account-list-item/account-list-item.container.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { connect } from 'react-redux'
-import {
-    getConversionRate,
-    getCurrentCurrency,
-    getNativeCurrency,
-} from '../send.selectors.js'
-import {
-  getIsMainnet,
-  isBalanceCached,
-  preferencesSelector,
-} from '../../../selectors'
-import AccountListItem from './account-list-item.component'
-
-export default connect(mapStateToProps)(AccountListItem)
-
-function mapStateToProps (state) {
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    conversionRate: getConversionRate(state),
-    currentCurrency: getCurrentCurrency(state),
-    nativeCurrency: getNativeCurrency(state),
-    balanceIsCached: isBalanceCached(state),
-    showFiat: (isMainnet || !!showFiatInTestnets),
-  }
-}
diff --git a/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
deleted file mode 100644
index 2bd2ce0c5..000000000
--- a/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-import Identicon from '../../../identicon'
-import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
-
-const utilsMethodStubs = {
-  checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
-}
-
-const AccountListItem = proxyquire('../account-list-item.component.js', {
-  '../../../util': utilsMethodStubs,
-}).default
-
-
-const propsMethodSpies = {
-  handleClick: sinon.spy(),
-}
-
-describe('AccountListItem Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<AccountListItem
-      account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
-      className={'mockClassName'}
-      conversionRate={4}
-      currentCurrency={'mockCurrentyCurrency'}
-      nativeCurrency={'ETH'}
-      displayAddress={false}
-      displayBalance={false}
-      handleClick={propsMethodSpies.handleClick}
-      icon={<i className="mockIcon" />}
-    />, { context: { t: str => str + '_t' } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.handleClick.resetHistory()
-  })
-
-  describe('render', () => {
-    it('should render a div with the passed className', () => {
-      assert.equal(wrapper.find('.mockClassName').length, 1)
-      assert(wrapper.find('.mockClassName').is('div'))
-      assert(wrapper.find('.mockClassName').hasClass('account-list-item'))
-    })
-
-    it('should call handleClick with the expected props when the root div is clicked', () => {
-      const { onClick } = wrapper.find('.mockClassName').props()
-      assert.equal(propsMethodSpies.handleClick.callCount, 0)
-      onClick()
-      assert.equal(propsMethodSpies.handleClick.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.handleClick.getCall(0).args,
-        [{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }]
-      )
-    })
-
-    it('should have a top row div', () => {
-      assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1)
-      assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div'))
-    })
-
-    it('should have an identicon, name and icon in the top row', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find(Identicon).length, 1)
-      assert.equal(topRow.find('.account-list-item__account-name').length, 1)
-      assert.equal(topRow.find('.account-list-item__icon').length, 1)
-    })
-
-    it('should show the account name if it exists', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName')
-    })
-
-    it('should show the account address if there is no name', () => {
-      wrapper.setProps({ account: { address: 'addressButNoName' } })
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName')
-    })
-
-    it('should render the passed icon', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert(topRow.find('.account-list-item__icon').childAt(0).is('i'))
-      assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'))
-    })
-
-    it('should not render an icon if none is passed', () => {
-      wrapper.setProps({ icon: null })
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__icon').length, 0)
-    })
-
-    it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
-      wrapper.setProps({ displayAddress: true })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 1)
-      assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress')
-      assert.deepEqual(
-        utilsMethodStubs.checksumAddress.getCall(0).args,
-        ['mockAddress']
-      )
-    })
-
-    it('should not render the account address as a checksumAddress if displayAddress is false', () => {
-      wrapper.setProps({ displayAddress: false })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
-    })
-
-    it('should not render the account address as a checksumAddress if name is not provided', () => {
-      wrapper.setProps({ account: { address: 'someAddressButNoName' } })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
-    })
-
-    it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => {
-      wrapper.setProps({ displayBalance: true })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
-      assert.deepEqual(
-        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
-        {
-          type: 'PRIMARY',
-          value: 'mockBalance',
-          hideTitle: true,
-        }
-      )
-    })
-
-    it('should only render one CurrencyDisplay if showFiat is false', () => {
-      wrapper.setProps({ showFiat: false, displayBalance: true })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
-      assert.deepEqual(
-        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
-        {
-          type: 'PRIMARY',
-          value: 'mockBalance',
-          hideTitle: true,
-        }
-      )
-    })
-
-    it('should not render a CurrencyDisplay if displayBalance is false', () => {
-      wrapper.setProps({ displayBalance: false })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
-    })
-
-  })
-})
diff --git a/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
deleted file mode 100644
index 662880aa0..000000000
--- a/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-let mapStateToProps
-
-proxyquire('../account-list-item.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      return () => ({})
-    },
-  },
-  '../send.selectors.js': {
-    getConversionRate: () => `mockConversionRate`,
-    getCurrentCurrency: () => `mockCurrentCurrency`,
-    getNativeCurrency: () => `mockNativeCurrency`,
-  },
-  '../../../selectors.js': {
-    isBalanceCached: () => `mockBalanceIsCached`,
-    preferencesSelector: ({ showFiatInTestnets }) => ({
-      showFiatInTestnets,
-    }),
-    getIsMainnet: ({ isMainnet }) => isMainnet,
-  },
-})
-
-describe('account-list-item container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: false,
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
deleted file mode 100644
index 2d2ec42f7..000000000
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getGasTotal,
-  getSelectedToken,
-  getSendFromBalance,
-  getTokenBalance,
-} from '../../../send.selectors.js'
-import { getMaxModeOn } from './amount-max-button.selectors.js'
-import { calcMaxAmount } from './amount-max-button.utils.js'
-import {
-  updateSendAmount,
-  setMaxModeTo,
-} from '../../../../../actions'
-import AmountMaxButton from './amount-max-button.component'
-import {
-  updateSendErrors,
-} from '../../../../../ducks/send.duck'
-
-export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton)
-
-function mapStateToProps (state) {
-
-  return {
-    balance: getSendFromBalance(state),
-    gasTotal: getGasTotal(state),
-    maxModeOn: getMaxModeOn(state),
-    selectedToken: getSelectedToken(state),
-    tokenBalance: getTokenBalance(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setAmountToMax: maxAmountDataObject => {
-      dispatch(updateSendErrors({ amount: null }))
-      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
-    },
-    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
-  }
-}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
deleted file mode 100644
index 27181d2f5..000000000
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const {
-  multiplyCurrencies,
-  subtractCurrencies,
-} = require('../../../../../conversion-util')
-const ethUtil = require('ethereumjs-util')
-
-function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
-  const { decimals } = selectedToken || {}
-  const multiplier = Math.pow(10, Number(decimals || 0))
-
-  return selectedToken
-    ? multiplyCurrencies(
-      tokenBalance,
-      multiplier,
-      {
-        toNumericBase: 'hex',
-        multiplicandBase: 16,
-      }
-    )
-    : subtractCurrencies(
-      ethUtil.addHexPrefix(balance),
-      ethUtil.addHexPrefix(gasTotal),
-      { toNumericBase: 'hex' }
-    )
-}
-
-module.exports = {
-  calcMaxAmount,
-}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
deleted file mode 100644
index 2cc00d6d6..000000000
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  setMaxModeTo: sinon.spy(),
-  updateSendAmount: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-}
-
-proxyquire('../amount-max-button.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../send.selectors.js': {
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendFromBalance: (s) => `mockBalance:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  },
-  './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` },
-  './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 },
-  '../../../../../actions': actionSpies,
-  '../../../../../ducks/send.duck': duckActionSpies,
-})
-
-describe('amount-max-button container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        balance: 'mockBalance:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        maxModeOn: 'mockMaxModeOn:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('setAmountToMax()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' })
-        assert(dispatchSpy.calledTwice)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { amount: null }
-        )
-        assert(actionSpies.updateSendAmount.calledOnce)
-        assert.equal(
-          actionSpies.updateSendAmount.getCall(0).args[0],
-          12
-        )
-      })
-    })
-
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockVal')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          actionSpies.setMaxModeTo.getCall(0).args[0],
-          'mockVal'
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
deleted file mode 100644
index 4df1e0ffa..000000000
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper/'
-import AmountMaxButton from './amount-max-button/'
-import UserPreferencedCurrencyInput from '../../../user-preferenced-currency-input'
-import UserPreferencedTokenInput from '../../../user-preferenced-token-input'
-
-export default class SendAmountRow extends Component {
-
-  static propTypes = {
-    amount: PropTypes.string,
-    amountConversionRate: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    balance: PropTypes.string,
-    conversionRate: PropTypes.number,
-    convertedCurrency: PropTypes.string,
-    gasTotal: PropTypes.string,
-    inError: PropTypes.bool,
-    primaryCurrency: PropTypes.string,
-    selectedToken: PropTypes.object,
-    setMaxModeTo: PropTypes.func,
-    tokenBalance: PropTypes.string,
-    updateGasFeeError: PropTypes.func,
-    updateSendAmount: PropTypes.func,
-    updateSendAmountError: PropTypes.func,
-    updateGas: PropTypes.func,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  validateAmount (amount) {
-    const {
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-      updateGasFeeError,
-      updateSendAmountError,
-    } = this.props
-
-    updateSendAmountError({
-      amount,
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-    })
-
-    if (selectedToken) {
-      updateGasFeeError({
-        amountConversionRate,
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        selectedToken,
-        tokenBalance,
-      })
-    }
-  }
-
-  updateAmount (amount) {
-    const { updateSendAmount, setMaxModeTo } = this.props
-
-    setMaxModeTo(false)
-    updateSendAmount(amount)
-  }
-
-  updateGas (amount) {
-    const { selectedToken, updateGas } = this.props
-
-    if (selectedToken) {
-      updateGas({ amount })
-    }
-  }
-
-  renderInput () {
-    const { amount, inError, selectedToken } = this.props
-    const Component = selectedToken ? UserPreferencedTokenInput : UserPreferencedCurrencyInput
-
-    return (
-      <Component
-        onChange={newAmount => this.validateAmount(newAmount)}
-        onBlur={newAmount => {
-          this.updateGas(newAmount)
-          this.updateAmount(newAmount)
-        }}
-        error={inError}
-        value={amount}
-      />
-    )
-  }
-
-  render () {
-    const { gasTotal, inError } = this.props
-
-    return (
-      <SendRowWrapper
-        label={`${this.context.t('amount')}:`}
-        showError={inError}
-        errorType={'amount'}
-      >
-        {!inError && gasTotal && <AmountMaxButton />}
-        { this.renderInput() }
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
deleted file mode 100644
index 2b6fe0f6c..000000000
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getAmountConversionRate,
-  getConversionRate,
-  getCurrentCurrency,
-  getGasTotal,
-  getPrimaryCurrency,
-  getSelectedToken,
-  getSendAmount,
-  getSendFromBalance,
-  getTokenBalance,
-} from '../../send.selectors'
-import {
-  sendAmountIsInError,
-} from './send-amount-row.selectors'
-import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils'
-import {
-  setMaxModeTo,
-  updateSendAmount,
-} from '../../../../actions'
-import {
-  updateSendErrors,
-} from '../../../../ducks/send.duck'
-import SendAmountRow from './send-amount-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow)
-
-function mapStateToProps (state) {
-  return {
-    amount: getSendAmount(state),
-    amountConversionRate: getAmountConversionRate(state),
-    balance: getSendFromBalance(state),
-    conversionRate: getConversionRate(state),
-    convertedCurrency: getCurrentCurrency(state),
-    gasTotal: getGasTotal(state),
-    inError: sendAmountIsInError(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    selectedToken: getSelectedToken(state),
-    tokenBalance: getTokenBalance(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
-    updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
-    updateGasFeeError: (amountDataObject) => {
-      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
-    },
-    updateSendAmountError: (amountDataObject) => {
-      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
-    },
-  }
-}
diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
deleted file mode 100644
index 52e351aee..000000000
--- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  setMaxModeTo: sinon.spy(),
-  updateSendAmount: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-}
-
-proxyquire('../send-amount-row.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../send.selectors': {
-    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendFromBalance: (s) => `mockBalance:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  },
-  './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` },
-  '../../send.utils': {
-    getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }),
-    getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }),
-  },
-  '../../../../actions': actionSpies,
-  '../../../../ducks/send.duck': duckActionSpies,
-})
-
-describe('send-amount-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        amountConversionRate: 'mockAmountConversionRate:mockState',
-        balance: 'mockBalance:mockState',
-        conversionRate: 'mockConversionRate:mockState',
-        convertedCurrency: 'mockConvertedCurrency:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        inError: 'mockInError:mockState',
-        primaryCurrency: 'mockPrimaryCurrency:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-      duckActionSpies.updateSendErrors.resetHistory()
-    })
-
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockBool')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.setMaxModeTo.calledOnce)
-        assert.equal(
-          actionSpies.setMaxModeTo.getCall(0).args[0],
-          'mockBool'
-        )
-      })
-    })
-
-    describe('updateSendAmount()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendAmount('mockAmount')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.updateSendAmount.calledOnce)
-        assert.equal(
-          actionSpies.updateSendAmount.getCall(0).args[0],
-          'mockAmount'
-        )
-      })
-    })
-
-    describe('updateGasFeeError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' })
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { some: 'data', mockGasFeeErrorChange: true }
-        )
-      })
-    })
-
-    describe('updateSendAmountError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendAmountError({ some: 'data' })
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { some: 'data', mockChange: true }
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
deleted file mode 100644
index c780c88f5..000000000
--- a/ui/app/components/send/send-content/send-content.component.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerContent from '../../page-container/page-container-content.component'
-import SendAmountRow from './send-amount-row/'
-import SendFromRow from './send-from-row/'
-import SendGasRow from './send-gas-row/'
-import SendHexDataRow from './send-hex-data-row'
-import SendToRow from './send-to-row/'
-
-export default class SendContent extends Component {
-
-  static propTypes = {
-    updateGas: PropTypes.func,
-    scanQrCode: PropTypes.func,
-    showHexData: PropTypes.bool,
-  }
-
-  updateGas = (updateData) => this.props.updateGas(updateData)
-
-  render () {
-    return (
-      <PageContainerContent>
-        <div className="send-v2__form">
-          <SendFromRow />
-          <SendToRow
-            updateGas={this.updateGas}
-            scanQrCode={ _ => this.props.scanQrCode()}
-          />
-          <SendAmountRow updateGas={this.updateGas} />
-          <SendGasRow />
-          {(this.props.showHexData && (
-            <SendHexDataRow
-              updateGas={this.updateGas}
-            />
-          ))}
-        </div>
-      </PageContainerContent>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js
deleted file mode 100644
index bedac1259..000000000
--- a/ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import AccountListItem from '../../account-list-item/'
-
-export default class SendDropdownList extends Component {
-
-  static propTypes = {
-    accounts: PropTypes.array,
-    closeDropdown: PropTypes.func,
-    onSelect: PropTypes.func,
-    activeAddress: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  getListItemIcon (accountAddress, activeAddress) {
-    return accountAddress === activeAddress
-      ? <i className={`fa fa-check fa-lg`} style={ { color: '#02c9b1' } }/>
-      : null
-  }
-
-  render () {
-    const {
-      accounts,
-      closeDropdown,
-      onSelect,
-      activeAddress,
-    } = this.props
-
-    return (<div>
-      <div
-        className="send-v2__from-dropdown__close-area"
-        onClick={() => closeDropdown()}
-      />
-      <div className="send-v2__from-dropdown__list">
-        {accounts.map((account, index) => <AccountListItem
-          account={account}
-          className="account-list-item__dropdown"
-          handleClick={() => {
-            onSelect(account)
-            closeDropdown()
-          }}
-          icon={this.getListItemIcon(account.address, activeAddress)}
-          key={`send-dropdown-account-#${index}`}
-        />)}
-      </div>
-    </div>)
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
deleted file mode 100644
index f8aa084d8..000000000
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper/'
-import AccountListItem from '../../account-list-item'
-
-export default class SendFromRow extends Component {
-  static propTypes = {
-    from: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  render () {
-    const { t } = this.context
-    const { from } = this.props
-
-    return (
-      <SendRowWrapper label={`${t('from')}:`}>
-        <div className="send-v2__from-dropdown">
-          <AccountListItem account={from} />
-        </div>
-      </SendRowWrapper>
-    )
-  }
-}
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
deleted file mode 100644
index b667aa037..000000000
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../../../constants/common'
-
-export default class GasFeeDisplay extends Component {
-
-  static propTypes = {
-    conversionRate: PropTypes.number,
-    primaryCurrency: PropTypes.string,
-    convertedCurrency: PropTypes.string,
-    gasLoadingError: PropTypes.bool,
-    gasTotal: PropTypes.string,
-    onReset: PropTypes.func,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const { gasTotal, gasLoadingError, onReset } = this.props
-
-    return (
-      <div className="send-v2__gas-fee-display">
-        {gasTotal
-          ? (
-            <div className="currency-display">
-              <UserPreferencedCurrencyDisplay
-                value={gasTotal}
-                type={PRIMARY}
-              />
-              <UserPreferencedCurrencyDisplay
-                className="currency-display__converted-value"
-                value={gasTotal}
-                type={SECONDARY}
-              />
-            </div>
-          )
-          : gasLoadingError
-            ? <div className="currency-display.currency-display--message">
-                {this.context.t('setGasPrice')}
-              </div>
-            : <div className="currency-display">
-                {this.context.t('loading')}
-              </div>
-        }
-        <button
-          className="gas-fee-reset"
-          onClick={onReset}
-        >
-          { this.context.t('reset') }
-        </button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
deleted file mode 100644
index bf7446626..000000000
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper/'
-import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
-import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group'
-import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs'
-
-export default class SendGasRow extends Component {
-
-  static propTypes = {
-    conversionRate: PropTypes.number,
-    convertedCurrency: PropTypes.string,
-    gasFeeError: PropTypes.bool,
-    gasLoadingError: PropTypes.bool,
-    gasTotal: PropTypes.string,
-    showCustomizeGasModal: PropTypes.func,
-    setGasPrice: PropTypes.func,
-    setGasLimit: PropTypes.func,
-    gasPriceButtonGroupProps: PropTypes.object,
-    gasButtonGroupShown: PropTypes.bool,
-    advancedInlineGasShown: PropTypes.bool,
-    resetGasButtons: PropTypes.func,
-    gasPrice: PropTypes.number,
-    gasLimit: PropTypes.number,
-    insufficientBalance: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  renderAdvancedOptionsButton () {
-    const { metricsEvent } = this.context
-    const { showCustomizeGasModal } = this.props
-    return <div className="advanced-gas-options-btn" onClick={() => {
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Edit Screen',
-          name: 'Clicked "Advanced Options"',
-        },
-      })
-      showCustomizeGasModal()
-    }}>
-      { this.context.t('advancedOptions') }
-    </div>
-  }
-
-  renderContent () {
-    const {
-      conversionRate,
-      convertedCurrency,
-      gasLoadingError,
-      gasTotal,
-      showCustomizeGasModal,
-      gasPriceButtonGroupProps,
-      gasButtonGroupShown,
-      advancedInlineGasShown,
-      resetGasButtons,
-      setGasPrice,
-      setGasLimit,
-      gasPrice,
-      gasLimit,
-      insufficientBalance,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    const gasPriceButtonGroup = <div>
-        <GasPriceButtonGroup
-          className="gas-price-button-group--small"
-          showCheck={false}
-          {...gasPriceButtonGroupProps}
-          handleGasPriceSelection={(...args) => {
-            metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Changed Gas Button',
-              },
-            })
-            gasPriceButtonGroupProps.handleGasPriceSelection(...args)
-          }}
-        />
-        { this.renderAdvancedOptionsButton() }
-      </div>
-    const gasFeeDisplay = <GasFeeDisplay
-      conversionRate={conversionRate}
-      convertedCurrency={convertedCurrency}
-      gasLoadingError={gasLoadingError}
-      gasTotal={gasTotal}
-      onReset={resetGasButtons}
-      onClick={() => showCustomizeGasModal()}
-    />
-    const advancedGasInputs = <div>
-      <AdvancedGasInputs
-        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
-        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
-        customGasPrice={gasPrice}
-        customGasLimit={gasLimit}
-        insufficientBalance={insufficientBalance}
-        customPriceIsSafe={true}
-        isSpeedUp={false}
-      />
-      { this.renderAdvancedOptionsButton() }
-     </div>
-
-    if (advancedInlineGasShown) {
-      return advancedGasInputs
-    } else if (gasButtonGroupShown) {
-      return gasPriceButtonGroup
-    } else {
-      return gasFeeDisplay
-    }
-  }
-
-  render () {
-    const { gasFeeError } = this.props
-
-    return (
-      <SendRowWrapper
-        label={`${this.context.t('transactionFee')}:`}
-        showError={gasFeeError}
-        errorType={'gasFee'}
-      >
-        { this.renderContent() }
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
deleted file mode 100644
index a187d61a2..000000000
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getConversionRate,
-  getCurrentCurrency,
-  getGasTotal,
-  getGasPrice,
-  getGasLimit,
-  getSendAmount,
-} from '../../send.selectors.js'
-import {
-  isBalanceSufficient,
-  calcGasTotal,
-} from '../../send.utils.js'
-import {
-  getBasicGasEstimateLoadingStatus,
-  getRenderableEstimateDataForSmallButtonsFromGWEI,
-  getDefaultActiveButtonIndex,
-} from '../../../../selectors/custom-gas'
-import {
-  showGasButtonGroup,
-} from '../../../../ducks/send.duck'
-import {
-  resetCustomData,
-  setCustomGasPrice,
-  setCustomGasLimit,
-} from '../../../../ducks/gas.duck'
-import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
-import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../actions'
-import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../selectors'
-import SendGasRow from './send-gas-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
-
-function mapStateToProps (state) {
-  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
-  const gasPrice = getGasPrice(state)
-  const gasLimit = getGasLimit(state)
-  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
-
-  const gasTotal = getGasTotal(state)
-  const conversionRate = getConversionRate(state)
-  const balance = getCurrentEthBalance(state)
-
-  const insufficientBalance = !isBalanceSufficient({
-    amount: getSelectedToken(state) ? '0x0' : getSendAmount(state),
-    gasTotal,
-    balance,
-    conversionRate,
-  })
-
-  return {
-    conversionRate,
-    convertedCurrency: getCurrentCurrency(state),
-    gasTotal,
-    gasFeeError: gasFeeIsInError(state),
-    gasLoadingError: getGasLoadingError(state),
-    gasPriceButtonGroupProps: {
-      buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
-      defaultActiveButtonIndex: 1,
-      newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
-      gasButtonInfo,
-    },
-    gasButtonGroupShown: getGasButtonGroupShown(state),
-    advancedInlineGasShown: getAdvancedInlineGasShown(state),
-    gasPrice,
-    gasLimit,
-    insufficientBalance,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
-    setGasPrice: (newPrice, gasLimit) => {
-      dispatch(setGasPrice(newPrice))
-      dispatch(setCustomGasPrice(newPrice))
-      if (gasLimit) {
-        dispatch(setGasTotal(calcGasTotal(gasLimit, newPrice)))
-      }
-    },
-    setGasLimit: (newLimit, gasPrice) => {
-      dispatch(setGasLimit(newLimit))
-      dispatch(setCustomGasLimit(newLimit))
-      if (gasPrice) {
-        dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
-      }
-    },
-    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
-    resetCustomData: () => dispatch(resetCustomData()),
-  }
-}
-
-function mergeProps (stateProps, dispatchProps, ownProps) {
-  const { gasPriceButtonGroupProps } = stateProps
-  const { gasButtonInfo } = gasPriceButtonGroupProps
-  const {
-    setGasPrice: dispatchSetGasPrice,
-    showGasButtonGroup: dispatchShowGasButtonGroup,
-    resetCustomData: dispatchResetCustomData,
-    ...otherDispatchProps
-  } = dispatchProps
-
-  return {
-    ...stateProps,
-    ...otherDispatchProps,
-    ...ownProps,
-    gasPriceButtonGroupProps: {
-      ...gasPriceButtonGroupProps,
-      handleGasPriceSelection: dispatchSetGasPrice,
-    },
-    resetGasButtons: () => {
-      dispatchResetCustomData()
-      dispatchSetGasPrice(gasButtonInfo[1].priceInHexWei)
-      dispatchShowGasButtonGroup()
-    },
-    setGasPrice: dispatchSetGasPrice,
-  }
-}
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
deleted file mode 100644
index 12e78657b..000000000
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-let mergeProps
-
-const actionSpies = {
-  showModal: sinon.spy(),
-  setGasPrice: sinon.spy(),
-  setGasTotal: sinon.spy(),
-  setGasLimit: sinon.spy(),
-}
-
-const sendDuckSpies = {
-  showGasButtonGroup: sinon.spy(),
-}
-
-const gasDuckSpies = {
-  resetCustomData: sinon.spy(),
-  setCustomGasPrice: sinon.spy(),
-  setCustomGasLimit: sinon.spy(),
-}
-
-proxyquire('../send-gas-row.container.js', {
-  'react-redux': {
-    connect: (ms, md, mp) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      mergeProps = mp
-      return () => ({})
-    },
-  },
-  '../../../../selectors': {
-    getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`,
-    getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`,
-    getSelectedToken: () => false,
-  },
-  '../../send.selectors.js': {
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getSendAmount: (s) => `mockSendAmount:${s}`,
-  },
-  '../../send.utils.js': {
-    isBalanceSufficient: ({
-      amount,
-      gasTotal,
-      balance,
-      conversionRate,
-    }) => `${amount}:${gasTotal}:${balance}:${conversionRate}`,
-    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
-  },
-  './send-gas-row.selectors.js': {
-    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
-    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
-    getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`,
-  },
-  '../../../../actions': actionSpies,
-  '../../../../selectors/custom-gas': {
-    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
-    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`,
-    getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length,
-  },
-  '../../../../ducks/send.duck': sendDuckSpies,
-  '../../../../ducks/gas.duck': gasDuckSpies,
-})
-
-describe('send-gas-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        conversionRate: 'mockConversionRate:mockState',
-        convertedCurrency: 'mockConvertedCurrency:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        gasFeeError: 'mockGasFeeError:mockState',
-        gasLoadingError: 'mockGasLoadingError:mockState',
-        gasPriceButtonGroupProps: {
-          buttonDataLoading: `mockBasicGasEstimateLoadingStatus:mockState`,
-          defaultActiveButtonIndex: 1,
-          newActiveButtonIndex: 49,
-          gasButtonInfo: `mockGasButtonInfo:mockState`,
-        },
-        gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
-        advancedInlineGasShown: 'mockAdvancedInlineGasShown:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        insufficientBalance: false,
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-      actionSpies.setGasTotal.resetHistory()
-    })
-
-    describe('showCustomizeGasModal()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.showCustomizeGasModal()
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.showModal.getCall(0).args[0],
-          { name: 'CUSTOMIZE_GAS', hideBasic: true }
-        )
-      })
-    })
-
-    describe('setGasPrice()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasPrice('mockNewPrice', 'mockLimit')
-        assert(dispatchSpy.calledThrice)
-        assert(actionSpies.setGasPrice.calledOnce)
-        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
-        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], 'mockNewPrice')
-        assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimitmockNewPrice')
-      })
-    })
-
-    describe('setGasLimit()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice')
-        assert(dispatchSpy.calledThrice)
-        assert(actionSpies.setGasLimit.calledOnce)
-        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'mockNewLimit')
-        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], 'mockNewLimit')
-        assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockNewLimitmockPrice')
-      })
-    })
-
-    describe('showGasButtonGroup()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.showGasButtonGroup()
-        assert(dispatchSpy.calledOnce)
-        assert(sendDuckSpies.showGasButtonGroup.calledOnce)
-      })
-    })
-
-    describe('resetCustomData()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetCustomData()
-        assert(dispatchSpy.calledOnce)
-        assert(gasDuckSpies.resetCustomData.calledOnce)
-      })
-    })
-
-  })
-
-  describe('mergeProps', () => {
-    let stateProps
-    let dispatchProps
-    let ownProps
-
-    beforeEach(() => {
-      stateProps = {
-        gasPriceButtonGroupProps: {
-          someGasPriceButtonGroupProp: 'foo',
-          anotherGasPriceButtonGroupProp: 'bar',
-        },
-        someOtherStateProp: 'baz',
-      }
-      dispatchProps = {
-        setGasPrice: sinon.spy(),
-        someOtherDispatchProp: sinon.spy(),
-      }
-      ownProps = { someOwnProp: 123 }
-    })
-
-    it('should return the expected props when isConfirm is true', () => {
-      const result = mergeProps(stateProps, dispatchProps, ownProps)
-
-      assert.equal(result.someOtherStateProp, 'baz')
-      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
-      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
-      assert.equal(result.someOwnProp, 123)
-
-      assert.equal(dispatchProps.setGasPrice.callCount, 0)
-      result.gasPriceButtonGroupProps.handleGasPriceSelection()
-      assert.equal(dispatchProps.setGasPrice.callCount, 1)
-
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
-      result.someOtherDispatchProp()
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
-    })
-  })
-
-})
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js
deleted file mode 100644
index df554ca5f..000000000
--- a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  updateSendHexData,
-} from '../../../../actions'
-import SendHexDataRow from './send-hex-data-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow)
-
-function mapStateToProps (state) {
-  return {
-    data: state.metamask.send.data,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    updateSendHexData (data) {
-      return dispatch(updateSendHexData(data))
-    },
-  }
-}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js
deleted file mode 100644
index 0146ce645..000000000
--- a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowErrorMessage from './send-row-error-message/'
-import SendRowWarningMessage from './send-row-warning-message/'
-
-export default class SendRowWrapper extends Component {
-
-  static propTypes = {
-    children: PropTypes.node,
-    errorType: PropTypes.string,
-    label: PropTypes.string,
-    showError: PropTypes.bool,
-    showWarning: PropTypes.bool,
-    warningType: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const {
-      children,
-      errorType = '',
-      label,
-      showError = false,
-      showWarning = false,
-      warningType = '',
-    } = this.props
-    const formField = Array.isArray(children) ? children[1] || children[0] : children
-    const customLabelContent = children.length > 1 ? children[0] : null
-
-    return (
-      <div className="send-v2__form-row">
-        <div className="send-v2__form-label">
-          {label}
-          {showError && <SendRowErrorMessage errorType={errorType}/>}
-          {!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
-          {customLabelContent}
-        </div>
-        <div className="send-v2__form-field">
-          {formField}
-        </div>
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
deleted file mode 100644
index 434204490..000000000
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper/'
-import EnsInput from '../../../ens-input'
-import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js'
-
-export default class SendToRow extends Component {
-
-  static propTypes = {
-    closeToDropdown: PropTypes.func,
-    hasHexData: PropTypes.bool.isRequired,
-    inError: PropTypes.bool,
-    inWarning: PropTypes.bool,
-    network: PropTypes.string,
-    openToDropdown: PropTypes.func,
-    selectedToken: PropTypes.object,
-    to: PropTypes.string,
-    toAccounts: PropTypes.array,
-    toDropdownOpen: PropTypes.bool,
-    tokens: PropTypes.array,
-    updateGas: PropTypes.func,
-    updateSendTo: PropTypes.func,
-    updateSendToError: PropTypes.func,
-    updateSendToWarning: PropTypes.func,
-    scanQrCode: PropTypes.func,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  handleToChange (to, nickname = '', toError, toWarning, network) {
-    const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props
-    const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network)
-    const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken)
-    updateSendTo(to, nickname)
-    updateSendToError(toErrorObject)
-    updateSendToWarning(toWarningObject)
-    if (toErrorObject.to === null) {
-      updateGas({ to })
-    }
-  }
-
-  render () {
-    const {
-      closeToDropdown,
-      inError,
-      inWarning,
-      network,
-      openToDropdown,
-      to,
-      toAccounts,
-      toDropdownOpen,
-    } = this.props
-
-    return (
-      <SendRowWrapper
-        errorType={'to'}
-        label={`${this.context.t('to')}: `}
-        showError={inError}
-        showWarning={inWarning}
-        warningType={'to'}
-        >
-        <EnsInput
-          scanQrCode={_ => {
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Used QR scanner',
-              },
-            })
-            this.props.scanQrCode()
-          }}
-          accounts={toAccounts}
-          closeDropdown={() => closeToDropdown()}
-          dropdownOpen={toDropdownOpen}
-          inError={inError}
-          name={'address'}
-          network={network}
-          onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)}
-          openDropdown={() => openToDropdown()}
-          placeholder={this.context.t('recipientAddress')}
-          to={to}
-        />
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
deleted file mode 100644
index fc6742df0..000000000
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
-    getCurrentNetwork,
-    getSelectedToken,
-    getSendTo,
-    getSendToAccounts,
-    getSendHexData,
-} from '../../send.selectors.js'
-import {
-    getToDropdownOpen,
-    getTokens,
-    sendToIsInError,
-    sendToIsInWarning,
-} from './send-to-row.selectors.js'
-import {
-    updateSendTo,
-} from '../../../../actions'
-import {
-  updateSendErrors,
-  updateSendWarnings,
-  openToDropdown,
-  closeToDropdown,
-} from '../../../../ducks/send.duck'
-import SendToRow from './send-to-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
-
-function mapStateToProps (state) {
-  return {
-    hasHexData: Boolean(getSendHexData(state)),
-    inError: sendToIsInError(state),
-    inWarning: sendToIsInWarning(state),
-    network: getCurrentNetwork(state),
-    selectedToken: getSelectedToken(state),
-    to: getSendTo(state),
-    toAccounts: getSendToAccounts(state),
-    toDropdownOpen: getToDropdownOpen(state),
-    tokens: getTokens(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    closeToDropdown: () => dispatch(closeToDropdown()),
-    openToDropdown: () => dispatch(openToDropdown()),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    updateSendToError: (toErrorObject) => {
-        dispatch(updateSendErrors(toErrorObject))
-    },
-    updateSendToWarning: (toWarningObject) => {
-      dispatch(updateSendWarnings(toWarningObject))
-  },
-  }
-}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
deleted file mode 100644
index 2bd3ea45e..000000000
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
-} = require('../../send.constants')
-const { isValidAddress, isEthNetwork } = require('../../../../util')
-import { checkExistingAddresses } from '../../../pages/add-token/util'
-
-const ethUtil = require('ethereumjs-util')
-const contractMap = require('eth-contract-metadata')
-
-function getToErrorObject (to, toError = null, hasHexData = false, tokens = [], selectedToken = null, network) {
-  if (!to) {
-    if (!hasHexData) {
-      toError = REQUIRED_ERROR
-    }
-  } else if (!isValidAddress(to, network) && !toError) {
-    toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR
-  } else if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
-    toError = KNOWN_RECIPIENT_ADDRESS_ERROR
-  }
-  return { to: toError }
-}
-
-function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) {
-  if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
-    toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR
-  }
-  return { to: toWarning }
-}
-
-module.exports = {
-  getToErrorObject,
-  getToWarningObject,
-}
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
deleted file mode 100644
index aa09f01a9..000000000
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  updateSendTo: sinon.spy(),
-}
-const duckActionSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateSendErrors: sinon.spy(),
-  updateSendWarnings: sinon.spy(),
-}
-
-proxyquire('../send-to-row.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../send.selectors.js': {
-    getCurrentNetwork: (s) => `mockNetwork:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendHexData: (s) => s,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendToAccounts: (s) => `mockToAccounts:${s}`,
-  },
-  './send-to-row.selectors.js': {
-    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
-    sendToIsInError: (s) => `mockInError:${s}`,
-    sendToIsInWarning: (s) => `mockInWarning:${s}`,
-    getTokens: (s) => `mockTokens:${s}`,
-  },
-  '../../../../actions': actionSpies,
-  '../../../../ducks/send.duck': duckActionSpies,
-})
-
-describe('send-to-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        hasHexData: true,
-        inError: 'mockInError:mockState',
-        inWarning: 'mockInWarning:mockState',
-        network: 'mockNetwork:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        toDropdownOpen: 'mockToDropdownOpen:mockState',
-        tokens: 'mockTokens:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('closeToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.closeToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.closeToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.closeToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('openToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.openToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.openToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.openToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('updateSendTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.updateSendTo.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateSendTo.getCall(0).args,
-          ['mockTo', 'mockNickname']
-        )
-      })
-    })
-
-    describe('updateSendToError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToError('mockToErrorObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          'mockToErrorObject'
-        )
-      })
-    })
-
-    describe('updateSendToWarning()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendWarnings.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendWarnings.getCall(0).args[0],
-          'mockToWarningObject'
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
deleted file mode 100644
index f6abb26e6..000000000
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-import {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-} from '../../../send.constants'
-
-const stubs = {
-  isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))),
-}
-
-const toRowUtils = proxyquire('../send-to-row.utils.js', {
-  '../../../../util': {
-    isValidAddress: stubs.isValidAddress,
-  },
-})
-const {
-  getToErrorObject,
-  getToWarningObject,
-} = toRowUtils
-
-describe('send-to-row utils', () => {
-
-  describe('getToErrorObject()', () => {
-    it('should return a required error if to is falsy', () => {
-      assert.deepEqual(getToErrorObject(null), {
-        to: REQUIRED_ERROR,
-      })
-    })
-
-    it('should return null if to is falsy and hexData is truthy', () => {
-      assert.deepEqual(getToErrorObject(null, undefined, true), {
-        to: null,
-      })
-    })
-
-    it('should return an invalid recipient error if to is truthy but invalid', () => {
-      assert.deepEqual(getToErrorObject('mockInvalidTo'), {
-        to: INVALID_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should return null if to is truthy and valid', () => {
-      assert.deepEqual(getToErrorObject('0xabc123'), {
-        to: null,
-      })
-    })
-
-    it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => {
-      assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), {
-        to: 'someExplicitError',
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of state tokens', () => {
-      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
-      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), {
-        to: null,
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
-      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
-      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-  })
-
-  describe('getToWarningObject()', () => {
-    it('should return a known address recipient if to is truthy but part of state tokens', () => {
-      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
-      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), {
-        to: null,
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
-      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
-      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-  })
-
-})
diff --git a/ui/app/components/send/send-content/tests/send-content-component.test.js b/ui/app/components/send/send-content/tests/send-content-component.test.js
deleted file mode 100644
index c5a11c8bb..000000000
--- a/ui/app/components/send/send-content/tests/send-content-component.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendContent from '../send-content.component.js'
-
-import PageContainerContent from '../../../page-container/page-container-content.component'
-import SendAmountRow from '../send-amount-row/send-amount-row.container'
-import SendFromRow from '../send-from-row/send-from-row.container'
-import SendGasRow from '../send-gas-row/send-gas-row.container'
-import SendToRow from '../send-to-row/send-to-row.container'
-import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
-
-describe('SendContent Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendContent showHexData={true} />)
-  })
-
-  describe('render', () => {
-    it('should render a PageContainerContent component', () => {
-      assert.equal(wrapper.find(PageContainerContent).length, 1)
-    })
-
-    it('should render a div with a .send-v2__form class as a child of PageContainerContent', () => {
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      PageContainerContentChild.is('div')
-      PageContainerContentChild.is('.send-v2__form')
-    })
-
-    it('should render the correct row components as grandchildren of the PageContainerContent component', () => {
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
-      assert(PageContainerContentChild.childAt(4).is(SendHexDataRow))
-    })
-
-    it('should not render the SendHexDataRow if props.showHexData is false', () => {
-      wrapper.setProps({ showHexData: false })
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
-      assert.equal(PageContainerContentChild.childAt(4).exists(), false)
-    })
-  })
-})
diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
deleted file mode 100644
index d943b4b22..000000000
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerFooter from '../../page-container/page-container-footer'
-import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes'
-
-export default class SendFooter extends Component {
-
-  static propTypes = {
-    addToAddressBookIfNew: PropTypes.func,
-    amount: PropTypes.string,
-    data: PropTypes.string,
-    clearSend: PropTypes.func,
-    disabled: PropTypes.bool,
-    editingTransactionId: PropTypes.string,
-    errors: PropTypes.object,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
-    history: PropTypes.object,
-    inError: PropTypes.bool,
-    selectedToken: PropTypes.object,
-    sign: PropTypes.func,
-    to: PropTypes.string,
-    toAccounts: PropTypes.array,
-    tokenBalance: PropTypes.string,
-    unapprovedTxs: PropTypes.object,
-    update: PropTypes.func,
-    sendErrors: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  onCancel () {
-    this.props.clearSend()
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-
-  onSubmit (event) {
-    event.preventDefault()
-    const {
-      addToAddressBookIfNew,
-      amount,
-      data,
-      editingTransactionId,
-      from: {address: from},
-      gasLimit: gas,
-      gasPrice,
-      selectedToken,
-      sign,
-      to,
-      unapprovedTxs,
-      // updateTx,
-      update,
-      toAccounts,
-      history,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    // Should not be needed because submit should be disabled if there are errors.
-    // const noErrors = !amountError && toError === null
-
-    // if (!noErrors) {
-    //   return
-    // }
-
-    // TODO: add nickname functionality
-    addToAddressBookIfNew(to, toAccounts)
-    const promise = editingTransactionId
-      ? update({
-        amount,
-        data,
-        editingTransactionId,
-        from,
-        gas,
-        gasPrice,
-        selectedToken,
-        to,
-        unapprovedTxs,
-      })
-      : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
-
-    Promise.resolve(promise)
-      .then(() => {
-        metricsEvent({
-          eventOpts: {
-            category: 'Transactions',
-            action: 'Edit Screen',
-            name: 'Complete',
-          },
-        })
-        history.push(CONFIRM_TRANSACTION_ROUTE)
-      })
-  }
-
-  formShouldBeDisabled () {
-    const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
-    const missingTokenBalance = selectedToken && !tokenBalance
-    const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to)
-    return shouldBeDisabled
-  }
-
-  componentDidUpdate (prevProps) {
-    const { inError, sendErrors } = this.props
-    const { metricsEvent } = this.context
-    if (!prevProps.inError && inError) {
-      const errorField = Object.keys(sendErrors).find(key => sendErrors[key])
-      const errorMessage = sendErrors[errorField]
-
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Edit Screen',
-          name: 'Error',
-        },
-        customVariables: {
-          errorField,
-          errorMessage,
-        },
-      })
-    }
-  }
-
-  render () {
-    return (
-      <PageContainerFooter
-        onCancel={() => this.onCancel()}
-        onSubmit={e => this.onSubmit(e)}
-        disabled={this.formShouldBeDisabled()}
-      />
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-footer/send-footer.container.js b/ui/app/components/send/send-footer/send-footer.container.js
deleted file mode 100644
index 0c6120cc5..000000000
--- a/ui/app/components/send/send-footer/send-footer.container.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { connect } from 'react-redux'
-import ethUtil from 'ethereumjs-util'
-import {
-  addToAddressBook,
-  clearSend,
-  signTokenTx,
-  signTx,
-  updateTransaction,
-} from '../../../actions'
-import SendFooter from './send-footer.component'
-import {
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getSelectedToken,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendFromObject,
-  getSendTo,
-  getSendToAccounts,
-  getSendHexData,
-  getTokenBalance,
-  getUnapprovedTxs,
-  getSendErrors,
-} from '../send.selectors'
-import {
-  isSendFormInError,
-} from './send-footer.selectors'
-import {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-} from './send-footer.utils'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
-
-function mapStateToProps (state) {
-  return {
-    amount: getSendAmount(state),
-    data: getSendHexData(state),
-    editingTransactionId: getSendEditingTransactionId(state),
-    from: getSendFromObject(state),
-    gasLimit: getGasLimit(state),
-    gasPrice: getGasPrice(state),
-    gasTotal: getGasTotal(state),
-    inError: isSendFormInError(state),
-    selectedToken: getSelectedToken(state),
-    to: getSendTo(state),
-    toAccounts: getSendToAccounts(state),
-    tokenBalance: getTokenBalance(state),
-    unapprovedTxs: getUnapprovedTxs(state),
-    sendErrors: getSendErrors(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    clearSend: () => dispatch(clearSend()),
-    sign: ({ selectedToken, to, amount, from, gas, gasPrice, data }) => {
-      const txParams = constructTxParams({
-        amount,
-        data,
-        from,
-        gas,
-        gasPrice,
-        selectedToken,
-        to,
-      })
-
-      selectedToken
-        ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams))
-        : dispatch(signTx(txParams))
-    },
-    update: ({
-      amount,
-      data,
-      editingTransactionId,
-      from,
-      gas,
-      gasPrice,
-      selectedToken,
-      to,
-      unapprovedTxs,
-    }) => {
-      const editingTx = constructUpdatedTx({
-        amount,
-        data,
-        editingTransactionId,
-        from,
-        gas,
-        gasPrice,
-        selectedToken,
-        to,
-        unapprovedTxs,
-      })
-
-      return dispatch(updateTransaction(editingTx))
-    },
-    addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => {
-      const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress)
-      if (addressIsNew(toAccounts)) {
-        // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
-        dispatch(addToAddressBook(hexPrefixedAddress, nickname))
-      }
-    },
-  }
-}
diff --git a/ui/app/components/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/send/send-footer/tests/send-footer-component.test.js
deleted file mode 100644
index 4b63e422d..000000000
--- a/ui/app/components/send/send-footer/tests/send-footer-component.test.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../routes'
-import SendFooter from '../send-footer.component.js'
-
-import PageContainerFooter from '../../../page-container/page-container-footer'
-
-const propsMethodSpies = {
-  addToAddressBookIfNew: sinon.spy(),
-  clearSend: sinon.spy(),
-  sign: sinon.spy(),
-  update: sinon.spy(),
-}
-const historySpies = {
-  push: sinon.spy(),
-}
-const MOCK_EVENT = { preventDefault: () => {} }
-
-sinon.spy(SendFooter.prototype, 'onCancel')
-sinon.spy(SendFooter.prototype, 'onSubmit')
-
-describe('SendFooter Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendFooter
-      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-      amount={'mockAmount'}
-      clearSend={propsMethodSpies.clearSend}
-      disabled={true}
-      editingTransactionId={'mockEditingTransactionId'}
-      errors={{}}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
-      history={historySpies}
-      inError={false}
-      selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-      sign={propsMethodSpies.sign}
-      to={'mockTo'}
-      toAccounts={['mockAccount']}
-      tokenBalance={'mockTokenBalance'}
-      unapprovedTxs={['mockTx']}
-      update={propsMethodSpies.update}
-      sendErrors={{}}
-    />, { context: { t: str => str, metricsEvent: () => ({}) } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory()
-    propsMethodSpies.addToAddressBookIfNew.resetHistory()
-    propsMethodSpies.clearSend.resetHistory()
-    propsMethodSpies.sign.resetHistory()
-    propsMethodSpies.update.resetHistory()
-    historySpies.push.resetHistory()
-    SendFooter.prototype.onCancel.resetHistory()
-    SendFooter.prototype.onSubmit.resetHistory()
-  })
-
-  describe('onCancel', () => {
-    it('should call clearSend', () => {
-      assert.equal(propsMethodSpies.clearSend.callCount, 0)
-      wrapper.instance().onCancel()
-      assert.equal(propsMethodSpies.clearSend.callCount, 1)
-    })
-
-    it('should call history.push', () => {
-      assert.equal(historySpies.push.callCount, 0)
-      wrapper.instance().onCancel()
-      assert.equal(historySpies.push.callCount, 1)
-      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
-    })
-  })
-
-
-  describe('formShouldBeDisabled()', () => {
-    const config = {
-      'should return true if inError is truthy': {
-        inError: true,
-        expectedResult: true,
-      },
-      'should return true if gasTotal is falsy': {
-        inError: false,
-        gasTotal: false,
-        expectedResult: true,
-      },
-      'should return true if to is truthy': {
-        to: '0xsomevalidAddress',
-        inError: false,
-        gasTotal: false,
-        expectedResult: true,
-      },
-      'should return true if selectedToken is truthy and tokenBalance is falsy': {
-        selectedToken: true,
-        tokenBalance: null,
-        expectedResult: true,
-      },
-      'should return false if inError is false and all other params are truthy': {
-        inError: false,
-        gasTotal: '0x123',
-        selectedToken: true,
-        tokenBalance: 123,
-        expectedResult: false,
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        wrapper.setProps(obj)
-        assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('onSubmit', () => {
-    it('should call addToAddressBookIfNew with the correct params', () => {
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.addToAddressBookIfNew.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
-        ['mockTo', ['mockAccount']]
-      )
-    })
-
-    it('should call props.update if editingTransactionId is truthy', () => {
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.update.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.update.getCall(0).args[0],
-        {
-          data: undefined,
-          amount: 'mockAmount',
-          editingTransactionId: 'mockEditingTransactionId',
-          from: 'mockAddress',
-          gas: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          selectedToken: { mockProp: 'mockSelectedTokenProp' },
-          to: 'mockTo',
-          unapprovedTxs: ['mockTx'],
-        }
-      )
-    })
-
-    it('should not call props.sign if editingTransactionId is truthy', () => {
-      assert.equal(propsMethodSpies.sign.callCount, 0)
-    })
-
-    it('should call props.sign if editingTransactionId is falsy', () => {
-      wrapper.setProps({ editingTransactionId: null })
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.sign.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.sign.getCall(0).args[0],
-        {
-          data: undefined,
-          amount: 'mockAmount',
-          from: 'mockAddress',
-          gas: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          selectedToken: { mockProp: 'mockSelectedTokenProp' },
-          to: 'mockTo',
-        }
-      )
-    })
-
-    it('should not call props.update if editingTransactionId is falsy', () => {
-      assert.equal(propsMethodSpies.update.callCount, 0)
-    })
-
-    it('should call history.push', done => {
-      Promise.resolve(wrapper.instance().onSubmit(MOCK_EVENT))
-        .then(() => {
-          assert.equal(historySpies.push.callCount, 1)
-          assert.equal(historySpies.push.getCall(0).args[0], CONFIRM_TRANSACTION_ROUTE)
-          done()
-        })
-    })
-  })
-
-  describe('render', () => {
-    beforeEach(() => {
-      sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
-      wrapper = shallow(<SendFooter
-        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        amount={'mockAmount'}
-        clearSend={propsMethodSpies.clearSend}
-        disabled={true}
-        editingTransactionId={'mockEditingTransactionId'}
-        errors={{}}
-        from={ { address: 'mockAddress', balance: 'mockBalance' } }
-        gasLimit={'mockGasLimit'}
-        gasPrice={'mockGasPrice'}
-        gasTotal={'mockGasTotal'}
-        history={historySpies}
-        inError={false}
-        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-        sign={propsMethodSpies.sign}
-        to={'mockTo'}
-        toAccounts={['mockAccount']}
-        tokenBalance={'mockTokenBalance'}
-        unapprovedTxs={['mockTx']}
-        update={propsMethodSpies.update}
-      />, { context: { t: str => str, metricsEvent: () => ({}) } })
-    })
-
-    afterEach(() => {
-      SendFooter.prototype.formShouldBeDisabled.restore()
-    })
-
-    it('should render a PageContainerFooter component', () => {
-      assert.equal(wrapper.find(PageContainerFooter).length, 1)
-    })
-
-    it('should pass the correct props to PageContainerFooter', () => {
-      const {
-        onCancel,
-        onSubmit,
-        disabled,
-      } = wrapper.find(PageContainerFooter).props()
-      assert.equal(disabled, 'formShouldBeDisabledReturn')
-
-      assert.equal(SendFooter.prototype.onSubmit.callCount, 0)
-      onSubmit(MOCK_EVENT)
-      assert.equal(SendFooter.prototype.onSubmit.callCount, 1)
-
-      assert.equal(SendFooter.prototype.onCancel.callCount, 0)
-      onCancel()
-      assert.equal(SendFooter.prototype.onCancel.callCount, 1)
-    })
-  })
-})
diff --git a/ui/app/components/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/send/send-footer/tests/send-footer-container.test.js
deleted file mode 100644
index 70cb28df3..000000000
--- a/ui/app/components/send/send-footer/tests/send-footer-container.test.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  addToAddressBook: sinon.spy(),
-  clearSend: sinon.spy(),
-  signTokenTx: sinon.spy(),
-  signTx: sinon.spy(),
-  updateTransaction: sinon.spy(),
-}
-const utilsStubs = {
-  addressIsNew: sinon.stub().returns(true),
-  constructTxParams: sinon.stub().returns({
-    value: 'mockAmount',
-  }),
-  constructUpdatedTx: sinon.stub().returns('mockConstructedUpdatedTxParams'),
-}
-
-proxyquire('../send-footer.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../actions': actionSpies,
-  '../send.selectors': {
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
-    getSendFromObject: (s) => `mockFromObject:${s}`,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendToAccounts: (s) => `mockToAccounts:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-    getSendHexData: (s) => `mockHexData:${s}`,
-    getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
-    getSendErrors: (s) => `mockSendErrors:${s}`,
-  },
-  './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
-  './send-footer.utils': utilsStubs,
-})
-
-describe('send-footer container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        data: 'mockHexData:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        editingTransactionId: 'mockEditingTransactionId:mockState',
-        from: 'mockFromObject:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        inError: 'mockInError:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-        unapprovedTxs: 'mockUnapprovedTxs:mockState',
-        sendErrors: 'mockSendErrors:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('clearSend()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.clearSend()
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.clearSend.calledOnce)
-      })
-    })
-
-    describe('sign()', () => {
-      it('should dispatch a signTokenTx action if selectedToken is defined', () => {
-        mapDispatchToPropsObject.sign({
-          selectedToken: {
-            address: '0xabc',
-          },
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructTxParams.getCall(0).args[0],
-          {
-            data: undefined,
-            selectedToken: {
-              address: '0xabc',
-            },
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-          }
-        )
-        assert.deepEqual(
-          actionSpies.signTokenTx.getCall(0).args,
-          [ '0xabc', 'mockTo', 'mockAmount', { value: 'mockAmount' } ]
-        )
-      })
-
-      it('should dispatch a sign action if selectedToken is not defined', () => {
-        utilsStubs.constructTxParams.resetHistory()
-        mapDispatchToPropsObject.sign({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructTxParams.getCall(0).args[0],
-          {
-            data: undefined,
-            selectedToken: undefined,
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-          }
-        )
-        assert.deepEqual(
-          actionSpies.signTx.getCall(0).args,
-          [ { value: 'mockAmount' } ]
-        )
-      })
-    })
-
-    describe('update()', () => {
-      it('should dispatch an updateTransaction action', () => {
-        mapDispatchToPropsObject.update({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-          editingTransactionId: 'mockEditingTransactionId',
-          selectedToken: 'mockSelectedToken',
-          unapprovedTxs: 'mockUnapprovedTxs',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructUpdatedTx.getCall(0).args[0],
-          {
-            data: undefined,
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-            editingTransactionId: 'mockEditingTransactionId',
-            selectedToken: 'mockSelectedToken',
-            unapprovedTxs: 'mockUnapprovedTxs',
-          }
-        )
-        assert.equal(actionSpies.updateTransaction.getCall(0).args[0], 'mockConstructedUpdatedTxParams')
-      })
-    })
-
-    describe('addToAddressBookIfNew()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.addToAddressBookIfNew('mockNewAddress', 'mockToAccounts', 'mockNickname')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(utilsStubs.addressIsNew.getCall(0).args[0], 'mockToAccounts')
-        assert.deepEqual(
-          actionSpies.addToAddressBook.getCall(0).args,
-          [ '0xmockNewAddress', 'mockNickname' ]
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send-header/send-header.component.js b/ui/app/components/send/send-header/send-header.component.js
deleted file mode 100644
index efc4bbf27..000000000
--- a/ui/app/components/send/send-header/send-header.component.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerHeader from '../../page-container/page-container-header'
-import { DEFAULT_ROUTE } from '../../../routes'
-
-export default class SendHeader extends Component {
-
-  static propTypes = {
-    clearSend: PropTypes.func,
-    history: PropTypes.object,
-    titleKey: PropTypes.string,
-    subtitleParams: PropTypes.array,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  onClose () {
-    this.props.clearSend()
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-
-  render () {
-    return (
-      <PageContainerHeader
-        onClose={() => this.onClose()}
-        subtitle={this.context.t(...this.props.subtitleParams)}
-        title={this.context.t(this.props.titleKey)}
-      />
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send-header/send-header.container.js b/ui/app/components/send/send-header/send-header.container.js
deleted file mode 100644
index 4bcd0d1b6..000000000
--- a/ui/app/components/send/send-header/send-header.container.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { connect } from 'react-redux'
-import { clearSend } from '../../../actions'
-import SendHeader from './send-header.component'
-import { getSubtitleParams, getTitleKey } from './send-header.selectors'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
-
-function mapStateToProps (state) {
-  return {
-    titleKey: getTitleKey(state),
-    subtitleParams: getSubtitleParams(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    clearSend: () => dispatch(clearSend()),
-  }
-}
diff --git a/ui/app/components/send/send-header/tests/send-header-component.test.js b/ui/app/components/send/send-header/tests/send-header-component.test.js
deleted file mode 100644
index 930bfa387..000000000
--- a/ui/app/components/send/send-header/tests/send-header-component.test.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import { DEFAULT_ROUTE } from '../../../../routes'
-import SendHeader from '../send-header.component.js'
-
-import PageContainerHeader from '../../../page-container/page-container-header'
-
-const propsMethodSpies = {
-  clearSend: sinon.spy(),
-}
-const historySpies = {
-  push: sinon.spy(),
-}
-
-sinon.spy(SendHeader.prototype, 'onClose')
-
-describe('SendHeader Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendHeader
-      clearSend={propsMethodSpies.clearSend}
-      history={historySpies}
-      titleKey={'mockTitleKey'}
-      subtitleParams={[ 'mockSubtitleKey', 'mockVal']}
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory()
-    historySpies.push.resetHistory()
-    SendHeader.prototype.onClose.resetHistory()
-  })
-
-  describe('onClose', () => {
-    it('should call clearSend', () => {
-      assert.equal(propsMethodSpies.clearSend.callCount, 0)
-      wrapper.instance().onClose()
-      assert.equal(propsMethodSpies.clearSend.callCount, 1)
-    })
-
-    it('should call history.push', () => {
-      assert.equal(historySpies.push.callCount, 0)
-      wrapper.instance().onClose()
-      assert.equal(historySpies.push.callCount, 1)
-      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
-    })
-  })
-
-  describe('render', () => {
-    it('should render a PageContainerHeader compenent', () => {
-      assert.equal(wrapper.find(PageContainerHeader).length, 1)
-    })
-
-    it('should pass the correct props to PageContainerHeader', () => {
-      const {
-        onClose,
-        subtitle,
-        title,
-      } = wrapper.find(PageContainerHeader).props()
-      assert.equal(subtitle, 'mockSubtitleKeymockVal')
-      assert.equal(title, 'mockTitleKey')
-      assert.equal(SendHeader.prototype.onClose.callCount, 0)
-      onClose()
-      assert.equal(SendHeader.prototype.onClose.callCount, 1)
-    })
-  })
-})
diff --git a/ui/app/components/send/send-header/tests/send-header-container.test.js b/ui/app/components/send/send-header/tests/send-header-container.test.js
deleted file mode 100644
index 41a7e8a89..000000000
--- a/ui/app/components/send/send-header/tests/send-header-container.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  clearSend: sinon.spy(),
-}
-
-proxyquire('../send-header.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../actions': actionSpies,
-  './send-header.selectors': {
-    getTitleKey: (s) => `mockTitleKey:${s}`,
-    getSubtitleParams: (s) => `mockSubtitleParams:${s}`,
-  },
-})
-
-describe('send-header container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        titleKey: 'mockTitleKey:mockState',
-        subtitleParams: 'mockSubtitleParams:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('clearSend()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.clearSend()
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.clearSend.calledOnce)
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
deleted file mode 100644
index 9b512aaf6..000000000
--- a/ui/app/components/send/send.component.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import PersistentForm from '../../../lib/persistent-form'
-import {
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  doesAmountErrorRequireUpdate,
-} from './send.utils'
-
-import SendHeader from './send-header/'
-import SendContent from './send-content/'
-import SendFooter from './send-footer/'
-
-export default class SendTransactionScreen extends PersistentForm {
-
-  static propTypes = {
-    amount: PropTypes.string,
-    amountConversionRate: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    blockGasLimit: PropTypes.string,
-    conversionRate: PropTypes.number,
-    editingTransactionId: PropTypes.string,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
-    history: PropTypes.object,
-    network: PropTypes.string,
-    primaryCurrency: PropTypes.string,
-    recentBlocks: PropTypes.array,
-    selectedAddress: PropTypes.string,
-    selectedToken: PropTypes.object,
-    tokenBalance: PropTypes.string,
-    tokenContract: PropTypes.object,
-    fetchBasicGasEstimates: PropTypes.func,
-    updateAndSetGasTotal: PropTypes.func,
-    updateSendErrors: PropTypes.func,
-    updateSendTokenBalance: PropTypes.func,
-    scanQrCode: PropTypes.func,
-    qrCodeDetected: PropTypes.func,
-    qrCodeData: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.qrCodeData) {
-      if (nextProps.qrCodeData.type === 'address') {
-        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
-        const currentAddress = this.props.to && this.props.to.toLowerCase()
-        if (currentAddress !== scannedAddress) {
-          this.props.updateSendTo(scannedAddress)
-          this.updateGas({ to: scannedAddress })
-          // Clean up QR code data after handling
-          this.props.qrCodeDetected(null)
-        }
-      }
-    }
-  }
-
-  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
-    const {
-      amount,
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken = {},
-      to: currentToAddress,
-      updateAndSetGasLimit,
-    } = this.props
-
-    updateAndSetGasLimit({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
-      value: value || amount,
-      data,
-    })
-  }
-
-  componentDidUpdate (prevProps) {
-    const {
-      amount,
-      amountConversionRate,
-      conversionRate,
-      from: { address, balance },
-      gasTotal,
-      network,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-      updateSendErrors,
-      updateSendTokenBalance,
-      tokenContract,
-    } = this.props
-
-    const {
-      from: { balance: prevBalance },
-      gasTotal: prevGasTotal,
-      tokenBalance: prevTokenBalance,
-      network: prevNetwork,
-    } = prevProps
-
-    const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
-
-    const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
-      balance,
-      gasTotal,
-      prevBalance,
-      prevGasTotal,
-      prevTokenBalance,
-      selectedToken,
-      tokenBalance,
-    })
-
-    if (amountErrorRequiresUpdate) {
-      const amountErrorObject = getAmountErrorObject({
-        amount,
-        amountConversionRate,
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        selectedToken,
-        tokenBalance,
-      })
-      const gasFeeErrorObject = selectedToken
-        ? getGasFeeErrorObject({
-          amountConversionRate,
-          balance,
-          conversionRate,
-          gasTotal,
-          primaryCurrency,
-          selectedToken,
-        })
-        : { gasFee: null }
-      updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject))
-    }
-
-    if (!uninitialized) {
-
-      if (network !== prevNetwork && network !== 'loading') {
-        updateSendTokenBalance({
-          selectedToken,
-          tokenContract,
-          address,
-        })
-        this.updateGas()
-      }
-    }
-  }
-
-  componentDidMount () {
-    this.props.fetchBasicGasEstimates()
-    .then(() => {
-      this.updateGas()
-    })
-  }
-
-  componentWillMount () {
-    const {
-      from: { address },
-      selectedToken,
-      tokenContract,
-      updateSendTokenBalance,
-    } = this.props
-
-    updateSendTokenBalance({
-      selectedToken,
-      tokenContract,
-      address,
-    })
-
-    // Show QR Scanner modal  if ?scan=true
-    if (window.location.search === '?scan=true') {
-      this.props.scanQrCode()
-
-      // Clear the queryString param after showing the modal
-      const cleanUrl = location.href.split('?')[0]
-      history.pushState({}, null, `${cleanUrl}`)
-      window.location.hash = '#send'
-    }
-  }
-
-  componentWillUnmount () {
-    this.props.resetSendState()
-  }
-
-  render () {
-    const { history, showHexData } = this.props
-
-    return (
-      <div className="page-container">
-        <SendHeader history={history}/>
-        <SendContent
-          updateGas={(updateData) => this.updateGas(updateData)}
-          scanQrCode={_ => this.props.scanQrCode()}
-          showHexData={showHexData}
-        />
-        <SendFooter history={history}/>
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/send.constants.js b/ui/app/components/send/send.constants.js
deleted file mode 100644
index 490bc6fd2..000000000
--- a/ui/app/components/send/send.constants.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const ethUtil = require('ethereumjs-util')
-const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
-
-const MIN_GAS_PRICE_DEC = '0'
-const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
-const MIN_GAS_LIMIT_DEC = '21000'
-const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
-
-const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
-  fromDenomination: 'WEI',
-  toDenomination: 'GWEI',
-  fromNumericBase: 'hex',
-  toNumericBase: 'hex',
-  numberOfDecimals: 1,
-}))
-
-const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
-  toNumericBase: 'hex',
-  multiplicandBase: 16,
-  multiplierBase: 16,
-})
-
-const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
-
-const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'
-const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens'
-const NEGATIVE_ETH_ERROR = 'negativeETH'
-const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient'
-const INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR = 'invalidAddressRecipientNotEthNetwork'
-const REQUIRED_ERROR = 'required'
-const KNOWN_RECIPIENT_ADDRESS_ERROR = 'knownAddressRecipient'
-
-const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', {
-  fromDenomination: 'GWEI',
-  toDenomination: 'WEI',
-  fromNumericBase: 'hex',
-  toNumericBase: 'hex',
-}))
-
-const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
-const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers.
-
-module.exports = {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
-  MIN_GAS_LIMIT_DEC,
-  MIN_GAS_LIMIT_HEX,
-  MIN_GAS_PRICE_DEC,
-  MIN_GAS_PRICE_GWEI,
-  MIN_GAS_PRICE_HEX,
-  MIN_GAS_TOTAL,
-  NEGATIVE_ETH_ERROR,
-  ONE_GWEI_IN_WEI_HEX,
-  REQUIRED_ERROR,
-  SIMPLE_GAS_COST,
-  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-  BASE_TOKEN_GAS_COST,
-}
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
deleted file mode 100644
index 402e4bbe5..000000000
--- a/ui/app/components/send/send.container.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { connect } from 'react-redux'
-import SendEther from './send.component'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import {
-  getAmountConversionRate,
-  getBlockGasLimit,
-  getConversionRate,
-  getCurrentNetwork,
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getPrimaryCurrency,
-  getRecentBlocks,
-  getSelectedAddress,
-  getSelectedToken,
-  getSelectedTokenContract,
-  getSelectedTokenToFiatRate,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendHexDataFeatureFlagState,
-  getSendFromObject,
-  getSendTo,
-  getTokenBalance,
-  getQrCodeData,
-} from './send.selectors'
-import {
-  updateSendTo,
-  updateSendTokenBalance,
-  updateGasData,
-  setGasTotal,
-  showQrScanner,
-  qrCodeDetected,
-} from '../../actions'
-import {
-  resetSendState,
-  updateSendErrors,
-} from '../../ducks/send.duck'
-import {
-  fetchBasicGasEstimates,
-} from '../../ducks/gas.duck'
-import {
-  calcGasTotal,
-} from './send.utils.js'
-
-import {
-  SEND_ROUTE,
-} from '../../routes'
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(SendEther)
-
-function mapStateToProps (state) {
-  return {
-    amount: getSendAmount(state),
-    amountConversionRate: getAmountConversionRate(state),
-    blockGasLimit: getBlockGasLimit(state),
-    conversionRate: getConversionRate(state),
-    editingTransactionId: getSendEditingTransactionId(state),
-    from: getSendFromObject(state),
-    gasLimit: getGasLimit(state),
-    gasPrice: getGasPrice(state),
-    gasTotal: getGasTotal(state),
-    network: getCurrentNetwork(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    recentBlocks: getRecentBlocks(state),
-    selectedAddress: getSelectedAddress(state),
-    selectedToken: getSelectedToken(state),
-    showHexData: getSendHexDataFeatureFlagState(state),
-    to: getSendTo(state),
-    tokenBalance: getTokenBalance(state),
-    tokenContract: getSelectedTokenContract(state),
-    tokenToFiatRate: getSelectedTokenToFiatRate(state),
-    qrCodeData: getQrCodeData(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    updateAndSetGasLimit: ({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to,
-      value,
-      data,
-    }) => {
-      !editingTransactionId
-        ? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
-        : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
-    },
-    updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
-      dispatch(updateSendTokenBalance({
-        selectedToken,
-        tokenContract,
-        address,
-      }))
-    },
-    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
-    resetSendState: () => dispatch(resetSendState()),
-    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
-    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
-  }
-}
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
deleted file mode 100644
index 47a49500f..000000000
--- a/ui/app/components/send/send.selectors.js
+++ /dev/null
@@ -1,291 +0,0 @@
-const { valuesFor } = require('../../util')
-const abi = require('human-standard-token-abi')
-const {
-  multiplyCurrencies,
-} = require('../../conversion-util')
-const {
-  getMetaMaskAccounts,
-} = require('../../selectors')
-const {
-  estimateGasPriceFromRecentBlocks,
-  calcGasTotal,
-} = require('./send.utils')
-import {
-  getFastPriceEstimateInHexWEI,
-} from '../../selectors/custom-gas'
-
-const selectors = {
-  accountsWithSendEtherInfoSelector,
-  getAddressBook,
-  getAmountConversionRate,
-  getBlockGasLimit,
-  getConversionRate,
-  getCurrentAccountWithSendEtherInfo,
-  getCurrentCurrency,
-  getCurrentNetwork,
-  getCurrentViewContext,
-  getForceGasMin,
-  getNativeCurrency,
-  getGasLimit,
-  getGasPrice,
-  getGasPriceFromRecentBlocks,
-  getGasTotal,
-  getPrimaryCurrency,
-  getRecentBlocks,
-  getSelectedAccount,
-  getSelectedAddress,
-  getSelectedIdentity,
-  getSelectedToken,
-  getSelectedTokenContract,
-  getSelectedTokenExchangeRate,
-  getSelectedTokenToFiatRate,
-  getSendAmount,
-  getSendHexData,
-  getSendHexDataFeatureFlagState,
-  getSendEditingTransactionId,
-  getSendErrors,
-  getSendFrom,
-  getSendFromBalance,
-  getSendFromObject,
-  getSendMaxModeState,
-  getSendTo,
-  getSendToAccounts,
-  getSendWarnings,
-  getTokenBalance,
-  getTokenExchangeRate,
-  getUnapprovedTxs,
-  transactionsSelector,
-  getQrCodeData,
-}
-
-module.exports = selectors
-
-function accountsWithSendEtherInfoSelector (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const { identities } = state.metamask
-
-  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
-    return Object.assign({}, account, identities[key])
-  })
-
-  return accountsWithSendEtherInfo
-}
-
-function getAddressBook (state) {
-  return state.metamask.addressBook
-}
-
-function getAmountConversionRate (state) {
-  return getSelectedToken(state)
-    ? getSelectedTokenToFiatRate(state)
-    : getConversionRate(state)
-}
-
-function getBlockGasLimit (state) {
-  return state.metamask.currentBlockGasLimit
-}
-
-function getConversionRate (state) {
-  return state.metamask.conversionRate
-}
-
-function getCurrentAccountWithSendEtherInfo (state) {
-  const currentAddress = getSelectedAddress(state)
-  const accounts = accountsWithSendEtherInfoSelector(state)
-
-  return accounts.find(({ address }) => address === currentAddress)
-}
-
-function getCurrentCurrency (state) {
-  return state.metamask.currentCurrency
-}
-
-function getNativeCurrency (state) {
-  return state.metamask.nativeCurrency
-}
-
-function getCurrentNetwork (state) {
-  return state.metamask.network
-}
-
-function getCurrentViewContext (state) {
-  const { currentView = {} } = state.appState
-  return currentView.context
-}
-
-function getForceGasMin (state) {
-  return state.metamask.send.forceGasMin
-}
-
-function getGasLimit (state) {
-  return state.metamask.send.gasLimit || '0'
-}
-
-function getGasPrice (state) {
-  return state.metamask.send.gasPrice || getFastPriceEstimateInHexWEI(state)
-}
-
-function getGasPriceFromRecentBlocks (state) {
-  return estimateGasPriceFromRecentBlocks(state.metamask.recentBlocks)
-}
-
-function getGasTotal (state) {
-  return calcGasTotal(getGasLimit(state), getGasPrice(state))
-}
-
-function getPrimaryCurrency (state) {
-  const selectedToken = getSelectedToken(state)
-  return selectedToken && selectedToken.symbol
-}
-
-function getRecentBlocks (state) {
-  return state.metamask.recentBlocks
-}
-
-function getSelectedAccount (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const selectedAddress = getSelectedAddress(state)
-
-  return accounts[selectedAddress]
-}
-
-function getSelectedAddress (state) {
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
-
-  return selectedAddress
-}
-
-function getSelectedIdentity (state) {
-  const selectedAddress = getSelectedAddress(state)
-  const identities = state.metamask.identities
-
-  return identities[selectedAddress]
-}
-
-function getSelectedToken (state) {
-  const tokens = state.metamask.tokens || []
-  const selectedTokenAddress = state.metamask.selectedTokenAddress
-  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
-  const sendToken = state.metamask.send.token
-
-  return selectedToken || sendToken || null
-}
-
-function getSelectedTokenContract (state) {
-  const selectedToken = getSelectedToken(state)
-
-  return selectedToken
-    ? global.eth.contract(abi).at(selectedToken.address)
-    : null
-}
-
-function getSelectedTokenExchangeRate (state) {
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const selectedToken = getSelectedToken(state) || {}
-  const { symbol = '' } = selectedToken
-  const pair = `${symbol.toLowerCase()}_eth`
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
-}
-
-function getSelectedTokenToFiatRate (state) {
-  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
-  const conversionRate = getConversionRate(state)
-
-  const tokenToFiatRate = multiplyCurrencies(
-    conversionRate,
-    selectedTokenExchangeRate,
-    { toNumericBase: 'dec' }
-  )
-
-  return tokenToFiatRate
-}
-
-function getSendAmount (state) {
-  return state.metamask.send.amount
-}
-
-function getSendHexData (state) {
-  return state.metamask.send.data
-}
-
-function getSendHexDataFeatureFlagState (state) {
-  return state.metamask.featureFlags.sendHexData
-}
-
-function getSendEditingTransactionId (state) {
-  return state.metamask.send.editingTransactionId
-}
-
-function getSendErrors (state) {
-  return state.send.errors
-}
-
-function getSendFrom (state) {
-  return state.metamask.send.from
-}
-
-function getSendFromBalance (state) {
-  const from = getSendFrom(state) || getSelectedAccount(state)
-  return from.balance
-}
-
-function getSendFromObject (state) {
-  return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
-}
-
-function getSendMaxModeState (state) {
-  return state.metamask.send.maxModeOn
-}
-
-function getSendTo (state) {
-  return state.metamask.send.to
-}
-
-function getSendToAccounts (state) {
-  const fromAccounts = accountsWithSendEtherInfoSelector(state)
-  const addressBookAccounts = getAddressBook(state)
-  const allAccounts = [...fromAccounts, ...addressBookAccounts]
-  // TODO: figure out exactly what the below returns and put a descriptive variable name on it
-  return Object.entries(allAccounts).map(([key, account]) => account)
-}
-
-function getSendWarnings (state) {
-  return state.send.warnings
-}
-
-function getTokenBalance (state) {
-  return state.metamask.send.tokenBalance
-}
-
-function getTokenExchangeRate (state, tokenSymbol) {
-  const pair = `${tokenSymbol.toLowerCase()}_eth`
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
-}
-
-function getUnapprovedTxs (state) {
-  return state.metamask.unapprovedTxs
-}
-
-function transactionsSelector (state) {
-  const { network, selectedTokenAddress } = state.metamask
-  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
-  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
-  const transactions = state.metamask.selectedAddressTxList || []
-  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
-
-  return selectedTokenAddress
-    ? txsToRender
-      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-      .sort((a, b) => b.time - a.time)
-    : txsToRender
-      .sort((a, b) => b.time - a.time)
-}
-
-function getQrCodeData (state) {
-  return state.appState.qrCodeData
-}
diff --git a/ui/app/components/send/send.utils.js b/ui/app/components/send/send.utils.js
deleted file mode 100644
index d78b7736f..000000000
--- a/ui/app/components/send/send.utils.js
+++ /dev/null
@@ -1,332 +0,0 @@
-const {
-  addCurrencies,
-  conversionUtil,
-  conversionGTE,
-  multiplyCurrencies,
-  conversionGreaterThan,
-  conversionLessThan,
-} = require('../../conversion-util')
-const {
-  calcTokenAmount,
-} = require('../../token-util')
-const {
-  BASE_TOKEN_GAS_COST,
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-  NEGATIVE_ETH_ERROR,
-  ONE_GWEI_IN_WEI_HEX,
-  SIMPLE_GAS_COST,
-  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-} = require('./send.constants')
-const abi = require('ethereumjs-abi')
-const ethUtil = require('ethereumjs-util')
-
-module.exports = {
-  addGasBuffer,
-  calcGasTotal,
-  calcTokenBalance,
-  doesAmountErrorRequireUpdate,
-  estimateGas,
-  estimateGasPriceFromRecentBlocks,
-  generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  isBalanceSufficient,
-  isTokenBalanceSufficient,
-  removeLeadingZeroes,
-}
-
-function calcGasTotal (gasLimit = '0', gasPrice = '0') {
-  return multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-}
-
-function isBalanceSufficient ({
-  amount = '0x0',
-  amountConversionRate = 1,
-  balance = '0x0',
-  conversionRate = 1,
-  gasTotal = '0x0',
-  primaryCurrency,
-}) {
-  const totalAmount = addCurrencies(amount, gasTotal, {
-    aBase: 16,
-    bBase: 16,
-    toNumericBase: 'hex',
-  })
-
-  const balanceIsSufficient = conversionGTE(
-    {
-      value: balance,
-      fromNumericBase: 'hex',
-      fromCurrency: primaryCurrency,
-      conversionRate,
-    },
-    {
-      value: totalAmount,
-      fromNumericBase: 'hex',
-      conversionRate: Number(amountConversionRate) || conversionRate,
-      fromCurrency: primaryCurrency,
-    },
-  )
-
-  return balanceIsSufficient
-}
-
-function isTokenBalanceSufficient ({
-  amount = '0x0',
-  tokenBalance,
-  decimals,
-}) {
-  const amountInDec = conversionUtil(amount, {
-    fromNumericBase: 'hex',
-  })
-
-  const tokenBalanceIsSufficient = conversionGTE(
-    {
-      value: tokenBalance,
-      fromNumericBase: 'hex',
-    },
-    {
-      value: calcTokenAmount(amountInDec, decimals),
-    },
-  )
-
-  return tokenBalanceIsSufficient
-}
-
-function getAmountErrorObject ({
-  amount,
-  amountConversionRate,
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-  selectedToken,
-  tokenBalance,
-}) {
-  let insufficientFunds = false
-  if (gasTotal && conversionRate && !selectedToken) {
-    insufficientFunds = !isBalanceSufficient({
-      amount,
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    })
-  }
-
-  let inSufficientTokens = false
-  if (selectedToken && tokenBalance !== null) {
-    const { decimals } = selectedToken
-    inSufficientTokens = !isTokenBalanceSufficient({
-      tokenBalance,
-      amount,
-      decimals,
-    })
-  }
-
-  const amountLessThanZero = conversionGreaterThan(
-    { value: 0, fromNumericBase: 'dec' },
-    { value: amount, fromNumericBase: 'hex' },
-  )
-
-  let amountError = null
-
-  if (insufficientFunds) {
-    amountError = INSUFFICIENT_FUNDS_ERROR
-  } else if (inSufficientTokens) {
-    amountError = INSUFFICIENT_TOKENS_ERROR
-  } else if (amountLessThanZero) {
-    amountError = NEGATIVE_ETH_ERROR
-  }
-
-  return { amount: amountError }
-}
-
-function getGasFeeErrorObject ({
-  amountConversionRate,
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-}) {
-  let gasFeeError = null
-
-  if (gasTotal && conversionRate) {
-    const insufficientFunds = !isBalanceSufficient({
-      amount: '0x0',
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    })
-
-    if (insufficientFunds) {
-      gasFeeError = INSUFFICIENT_FUNDS_ERROR
-    }
-  }
-
-  return { gasFee: gasFeeError }
-}
-
-function calcTokenBalance ({ selectedToken, usersToken }) {
-  const { decimals } = selectedToken || {}
-  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16)
-}
-
-function doesAmountErrorRequireUpdate ({
-  balance,
-  gasTotal,
-  prevBalance,
-  prevGasTotal,
-  prevTokenBalance,
-  selectedToken,
-  tokenBalance,
-}) {
-  const balanceHasChanged = balance !== prevBalance
-  const gasTotalHasChange = gasTotal !== prevGasTotal
-  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
-  const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
-
-  return amountErrorRequiresUpdate
-}
-
-async function estimateGas ({
-  selectedAddress,
-  selectedToken,
-  blockGasLimit,
-  to,
-  value,
-  data,
-  gasPrice,
-  estimateGasMethod,
-}) {
-  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
-
-  // if recipient has no code, gas is 21k max:
-  if (!selectedToken && !data) {
-    const code = Boolean(to) && await global.eth.getCode(to)
-    // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
-    const codeIsEmpty = !code || code === '0x' || code === '0x0'
-    if (codeIsEmpty) {
-      return SIMPLE_GAS_COST
-    }
-  } else if (selectedToken && !to) {
-    return BASE_TOKEN_GAS_COST
-  }
-
-  if (selectedToken) {
-    paramsForGasEstimate.value = '0x0'
-    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
-    paramsForGasEstimate.to = selectedToken.address
-  } else {
-    if (data) {
-      paramsForGasEstimate.data = data
-    }
-
-    if (to) {
-      paramsForGasEstimate.to = to
-    }
-
-    if (!value || value === '0') {
-      paramsForGasEstimate.value = '0xff'
-    }
-  }
-
-  // if not, fall back to block gasLimit
-  paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit || '0x5208', 0.95, {
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    roundDown: '0',
-    toNumericBase: 'hex',
-  }))
-  // run tx
-  return new Promise((resolve, reject) => {
-    return estimateGasMethod(paramsForGasEstimate, (err, estimatedGas) => {
-      if (err) {
-        const simulationFailed = (
-          err.message.includes('Transaction execution error.') ||
-          err.message.includes('gas required exceeds allowance or always failing transaction')
-        )
-        if (simulationFailed) {
-          const estimateWithBuffer = addGasBuffer(paramsForGasEstimate.gas, blockGasLimit, 1.5)
-          return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
-        } else {
-          return reject(err)
-        }
-      }
-      const estimateWithBuffer = addGasBuffer(estimatedGas.toString(16), blockGasLimit, 1.5)
-      return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
-    })
-  })
-}
-
-function addGasBuffer (initialGasLimitHex, blockGasLimitHex, bufferMultiplier = 1.5) {
-  const upperGasLimit = multiplyCurrencies(blockGasLimitHex, 0.9, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    numberOfDecimals: '0',
-  })
-  const bufferedGasLimit = multiplyCurrencies(initialGasLimitHex, bufferMultiplier, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    numberOfDecimals: '0',
-  })
-
-  // if initialGasLimit is above blockGasLimit, dont modify it
-  if (conversionGreaterThan(
-    { value: initialGasLimitHex, fromNumericBase: 'hex' },
-    { value: upperGasLimit, fromNumericBase: 'hex' },
-  )) return initialGasLimitHex
-  // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit
-  if (conversionLessThan(
-    { value: bufferedGasLimit, fromNumericBase: 'hex' },
-    { value: upperGasLimit, fromNumericBase: 'hex' },
-  )) return bufferedGasLimit
-  // otherwise use blockGasLimit
-  return upperGasLimit
-}
-
-function generateTokenTransferData ({ toAddress = '0x0', amount = '0x0', selectedToken }) {
-  if (!selectedToken) return
-  return TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
-    abi.rawEncode(['address', 'uint256'], [toAddress, ethUtil.addHexPrefix(amount)]),
-    x => ('00' + x.toString(16)).slice(-2)
-  ).join('')
-}
-
-function estimateGasPriceFromRecentBlocks (recentBlocks) {
-  // Return 1 gwei if no blocks have been observed:
-  if (!recentBlocks || recentBlocks.length === 0) {
-    return ONE_GWEI_IN_WEI_HEX
-  }
-
-  const lowestPrices = recentBlocks.map((block) => {
-    if (!block.gasPrices || block.gasPrices.length < 1) {
-      return ONE_GWEI_IN_WEI_HEX
-    }
-    return block.gasPrices.reduce((currentLowest, next) => {
-      return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest
-    })
-  })
-  .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
-
-  return lowestPrices[Math.floor(lowestPrices.length / 2)]
-}
-
-function getToAddressForGasUpdate (...addresses) {
-  return [...addresses, ''].find(str => str !== undefined && str !== null).toLowerCase()
-}
-
-function removeLeadingZeroes (str) {
-  return str.replace(/^0*(?=\d)/, '')
-}
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
deleted file mode 100644
index 81955cc1d..000000000
--- a/ui/app/components/send/tests/send-component.test.js
+++ /dev/null
@@ -1,354 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import timeout from '../../../../lib/test-timeout'
-
-import SendHeader from '../send-header/send-header.container'
-import SendContent from '../send-content/send-content.component'
-import SendFooter from '../send-footer/send-footer.container'
-
-const mockBasicGasEstimates = {
-  blockTime: 'mockBlockTime',
-}
-
-const propsMethodSpies = {
-  updateAndSetGasLimit: sinon.spy(),
-  updateSendErrors: sinon.spy(),
-  updateSendTokenBalance: sinon.spy(),
-  resetSendState: sinon.spy(),
-  fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
-  fetchGasEstimates: sinon.spy(),
-}
-const utilsMethodStubs = {
-  getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
-  getGasFeeErrorObject: sinon.stub().returns({ gasFee: 'mockGasFeeError' }),
-  doesAmountErrorRequireUpdate: sinon.stub().callsFake(obj => obj.balance !== obj.prevBalance),
-}
-
-const SendTransactionScreen = proxyquire('../send.component.js', {
-  './send.utils': utilsMethodStubs,
-}).default
-
-sinon.spy(SendTransactionScreen.prototype, 'componentDidMount')
-sinon.spy(SendTransactionScreen.prototype, 'updateGas')
-
-describe('Send Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendTransactionScreen
-      amount={'mockAmount'}
-      amountConversionRate={'mockAmountConversionRate'}
-      blockGasLimit={'mockBlockGasLimit'}
-      conversionRate={10}
-      editingTransactionId={'mockEditingTransactionId'}
-      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
-      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
-      history={{ mockProp: 'history-abc'}}
-      network={'3'}
-      primaryCurrency={'mockPrimaryCurrency'}
-      recentBlocks={['mockBlock']}
-      selectedAddress={'mockSelectedAddress'}
-      selectedToken={'mockSelectedToken'}
-      showHexData={true}
-      tokenBalance={'mockTokenBalance'}
-      tokenContract={'mockTokenContract'}
-      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
-      updateSendErrors={propsMethodSpies.updateSendErrors}
-      updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
-      resetSendState={propsMethodSpies.resetSendState}
-    />)
-  })
-
-  afterEach(() => {
-    SendTransactionScreen.prototype.componentDidMount.resetHistory()
-    SendTransactionScreen.prototype.updateGas.resetHistory()
-    utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
-    utilsMethodStubs.getAmountErrorObject.resetHistory()
-    utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-    propsMethodSpies.fetchBasicGasEstimates.resetHistory()
-    propsMethodSpies.updateAndSetGasLimit.resetHistory()
-    propsMethodSpies.updateSendErrors.resetHistory()
-    propsMethodSpies.updateSendTokenBalance.resetHistory()
-  })
-
-  it('should call componentDidMount', () => {
-    assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
-  })
-
-  describe('componentDidMount', () => {
-    it('should call props.fetchBasicGasAndTimeEstimates', () => {
-      propsMethodSpies.fetchBasicGasEstimates.resetHistory()
-      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 0)
-      wrapper.instance().componentDidMount()
-      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 1)
-    })
-
-    it('should call this.updateGas', async () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendErrors.resetHistory()
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-      wrapper.instance().componentDidMount()
-      await timeout(250)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
-    })
-  })
-
-  describe('componentWillUnmount', () => {
-    it('should call this.props.resetSendState', () => {
-      propsMethodSpies.resetSendState.resetHistory()
-      assert.equal(propsMethodSpies.resetSendState.callCount, 0)
-      wrapper.instance().componentWillUnmount()
-      assert.equal(propsMethodSpies.resetSendState.callCount, 1)
-    })
-  })
-
-  describe('componentDidUpdate', () => {
-    it('should call doesAmountErrorRequireUpdate with the expected params', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: '',
-        },
-      })
-      assert(utilsMethodStubs.doesAmountErrorRequireUpdate.calledOnce)
-      assert.deepEqual(
-        utilsMethodStubs.doesAmountErrorRequireUpdate.getCall(0).args[0],
-        {
-          balance: 'mockBalance',
-          gasTotal: 'mockGasTotal',
-          prevBalance: '',
-          prevGasTotal: undefined,
-          prevTokenBalance: undefined,
-          selectedToken: 'mockSelectedToken',
-          tokenBalance: 'mockTokenBalance',
-        }
-      )
-    })
-
-    it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'mockBalance',
-        },
-      })
-      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 0)
-    })
-
-    it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 1)
-      assert.deepEqual(
-        utilsMethodStubs.getAmountErrorObject.getCall(0).args[0],
-        {
-          amount: 'mockAmount',
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 10,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: 'mockSelectedToken',
-          tokenBalance: 'mockTokenBalance',
-        }
-      )
-    })
-
-    it('should call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true and selectedToken is truthy', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 1)
-      assert.deepEqual(
-        utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0],
-        {
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 10,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: 'mockSelectedToken',
-        }
-      )
-    })
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: { address: 'mockAddress', balance: 'mockBalance' },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
-    })
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true but selectedToken is falsy', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.setProps({ selectedToken: null })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
-    })
-
-    it('should call updateSendErrors with the expected params if selectedToken is falsy', () => {
-      propsMethodSpies.updateSendErrors.resetHistory()
-      wrapper.setProps({ selectedToken: null })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendErrors.getCall(0).args[0],
-        { amount: 'mockAmountError', gasFee: null }
-      )
-    })
-
-    it('should call updateSendErrors with the expected params if selectedToken is truthy', () => {
-      propsMethodSpies.updateSendErrors.resetHistory()
-      wrapper.setProps({ selectedToken: 'someToken' })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendErrors.getCall(0).args[0],
-        { amount: 'mockAmountError', gasFee: 'mockGasFeeError' }
-      )
-    })
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '3',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-    })
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => {
-      wrapper.setProps({ network: 'loading' })
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '3',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-    })
-
-    it('should call updateSendTokenBalance and this.updateGas with the correct params', () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '2',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendTokenBalance.getCall(0).args[0],
-        {
-          selectedToken: 'mockSelectedToken',
-          tokenContract: 'mockTokenContract',
-          address: 'mockAddress',
-        }
-      )
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
-      assert.deepEqual(
-        SendTransactionScreen.prototype.updateGas.getCall(0).args,
-        []
-      )
-    })
-  })
-
-  describe('updateGas', () => {
-    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.instance().updateGas()
-      assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
-        {
-          blockGasLimit: 'mockBlockGasLimit',
-          editingTransactionId: 'mockEditingTransactionId',
-          gasLimit: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          recentBlocks: ['mockBlock'],
-          selectedAddress: 'mockSelectedAddress',
-          selectedToken: 'mockSelectedToken',
-          to: '',
-          value: 'mockAmount',
-          data: undefined,
-        }
-      )
-    })
-
-    it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.setProps({ to: 'someAddress' })
-      wrapper.instance().updateGas()
-      assert.equal(
-        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
-        'someaddress',
-      )
-    })
-
-    it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.instance().updateGas({ to: '0xABC' })
-      assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
-    })
-  })
-
-  describe('render', () => {
-    it('should render a page-container class', () => {
-      assert.equal(wrapper.find('.page-container').length, 1)
-    })
-
-    it('should render SendHeader, SendContent and SendFooter', () => {
-      assert.equal(wrapper.find(SendHeader).length, 1)
-      assert.equal(wrapper.find(SendContent).length, 1)
-      assert.equal(wrapper.find(SendFooter).length, 1)
-    })
-
-    it('should pass the history prop to SendHeader and SendFooter', () => {
-      assert.deepEqual(
-        wrapper.find(SendFooter).props(),
-        {
-          history: { mockProp: 'history-abc' },
-        }
-      )
-    })
-
-    it('should pass showHexData to SendContent', () => {
-      assert.equal(wrapper.find(SendContent).props().showHexData, true)
-    })
-  })
-})
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
deleted file mode 100644
index 19b6563e6..000000000
--- a/ui/app/components/send/tests/send-container.test.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  updateSendTokenBalance: sinon.spy(),
-  updateGasData: sinon.spy(),
-  setGasTotal: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-  resetSendState: sinon.spy(),
-}
-
-proxyquire('../send.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  'react-router-dom': { withRouter: () => {} },
-  'recompose': { compose: (arg1, arg2) => () => arg2() },
-  './send.selectors': {
-    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
-    getBlockGasLimit: (s) => `mockBlockGasLimit:${s}`,
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentNetwork: (s) => `mockNetwork:${s}`,
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
-    getRecentBlocks: (s) => `mockRecentBlocks:${s}`,
-    getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
-    getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
-    getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
-    getSendFromObject: (s) => `mockFrom:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-    getQrCodeData: (s) => `mockQrCodeData:${s}`,
-  },
-  '../../actions': actionSpies,
-  '../../ducks/send.duck': duckActionSpies,
-  './send.utils.js': {
-    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
-  },
-})
-
-describe('send container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        amountConversionRate: 'mockAmountConversionRate:mockState',
-        blockGasLimit: 'mockBlockGasLimit:mockState',
-        conversionRate: 'mockConversionRate:mockState',
-        editingTransactionId: 'mockEditingTransactionId:mockState',
-        from: 'mockFrom:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        network: 'mockNetwork:mockState',
-        primaryCurrency: 'mockPrimaryCurrency:mockState',
-        recentBlocks: 'mockRecentBlocks:mockState',
-        selectedAddress: 'mockSelectedAddress:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        showHexData: 'mockSendHexDataFeatureFlagState:mockState',
-        to: 'mockTo:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-        tokenContract: 'mockTokenContract:mockState',
-        tokenToFiatRate: 'mockTokenToFiatRate:mockState',
-        qrCodeData: 'mockQrCodeData:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('updateAndSetGasLimit()', () => {
-      const mockProps = {
-        blockGasLimit: 'mockBlockGasLimit',
-        editingTransactionId: '0x2',
-        gasLimit: '0x3',
-        gasPrice: '0x4',
-        recentBlocks: ['mockBlock'],
-        selectedAddress: '0x4',
-        selectedToken: { address: '0x1' },
-        to: 'mockTo',
-        value: 'mockValue',
-        data: undefined,
-      }
-
-      it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
-        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          actionSpies.setGasTotal.getCall(0).args[0],
-          '0x30x4'
-        )
-      })
-
-      it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
-        const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
-        mapDispatchToPropsObject.updateAndSetGasLimit(
-          Object.assign({}, mockProps, {editingTransactionId: false})
-        )
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateGasData.getCall(0).args[0],
-          { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
-        )
-      })
-    })
-
-    describe('updateSendTokenBalance()', () => {
-      const mockProps = {
-        address: '0x10',
-        tokenContract: '0x00a',
-        selectedToken: {address: '0x1'},
-      }
-
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTokenBalance(Object.assign({}, mockProps))
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateSendTokenBalance.getCall(0).args[0],
-          mockProps
-        )
-      })
-    })
-
-    describe('updateSendErrors()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendErrors('mockError')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          'mockError'
-        )
-      })
-    })
-
-    describe('resetSendState()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetSendState()
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          duckActionSpies.resetSendState.getCall(0).args.length,
-          0
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/send/tests/send-utils.test.js b/ui/app/components/send/tests/send-utils.test.js
deleted file mode 100644
index 48fa09392..000000000
--- a/ui/app/components/send/tests/send-utils.test.js
+++ /dev/null
@@ -1,527 +0,0 @@
-import assert from 'assert'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-import {
-  BASE_TOKEN_GAS_COST,
-  ONE_GWEI_IN_WEI_HEX,
-  SIMPLE_GAS_COST,
-} from '../send.constants'
-const {
-  addCurrencies,
-  subtractCurrencies,
-} = require('../../../conversion-util')
-
-const {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-} = require('../send.constants')
-
-const stubs = {
-  addCurrencies: sinon.stub().callsFake((a, b, obj) => {
-    if (String(a).match(/^0x.+/)) a = Number(String(a).slice(2))
-    if (String(b).match(/^0x.+/)) b = Number(String(b).slice(2))
-    return a + b
-  }),
-  conversionUtil: sinon.stub().callsFake((val, obj) => parseInt(val, 16)),
-  conversionGTE: sinon.stub().callsFake((obj1, obj2) => obj1.value >= obj2.value),
-  multiplyCurrencies: sinon.stub().callsFake((a, b) => `${a}x${b}`),
-  calcTokenAmount: sinon.stub().callsFake((a, d) => 'calc:' + a + d),
-  rawEncode: sinon.stub().returns([16, 1100]),
-  conversionGreaterThan: sinon.stub().callsFake((obj1, obj2) => obj1.value > obj2.value),
-  conversionLessThan: sinon.stub().callsFake((obj1, obj2) => obj1.value < obj2.value),
-}
-
-const sendUtils = proxyquire('../send.utils.js', {
-  '../../conversion-util': {
-    addCurrencies: stubs.addCurrencies,
-    conversionUtil: stubs.conversionUtil,
-    conversionGTE: stubs.conversionGTE,
-    multiplyCurrencies: stubs.multiplyCurrencies,
-    conversionGreaterThan: stubs.conversionGreaterThan,
-    conversionLessThan: stubs.conversionLessThan,
-  },
-  '../../token-util': { calcTokenAmount: stubs.calcTokenAmount },
-  'ethereumjs-abi': {
-    rawEncode: stubs.rawEncode,
-  },
-})
-
-const {
-  calcGasTotal,
-  estimateGas,
-  doesAmountErrorRequireUpdate,
-  estimateGasPriceFromRecentBlocks,
-  generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  calcTokenBalance,
-  isBalanceSufficient,
-  isTokenBalanceSufficient,
-  removeLeadingZeroes,
-} = sendUtils
-
-describe('send utils', () => {
-
-  describe('calcGasTotal()', () => {
-    it('should call multiplyCurrencies with the correct params and return the multiplyCurrencies return', () => {
-      const result = calcGasTotal(12, 15)
-      assert.equal(result, '12x15')
-      const call_ = stubs.multiplyCurrencies.getCall(0).args
-      assert.deepEqual(
-        call_,
-        [12, 15, {
-          toNumericBase: 'hex',
-           multiplicandBase: 16,
-           multiplierBase: 16,
-         } ]
-      )
-    })
-  })
-
-  describe('doesAmountErrorRequireUpdate()', () => {
-    const config = {
-      'should return true if balances are different': {
-        balance: 0,
-        prevBalance: 1,
-        expectedResult: true,
-      },
-      'should return true if gasTotals are different': {
-        gasTotal: 0,
-        prevGasTotal: 1,
-        expectedResult: true,
-      },
-      'should return true if token balances are different': {
-        tokenBalance: 0,
-        prevTokenBalance: 1,
-        selectedToken: 'someToken',
-        expectedResult: true,
-      },
-      'should return false if they are all the same': {
-        balance: 1,
-        prevBalance: 1,
-        gasTotal: 1,
-        prevGasTotal: 1,
-        tokenBalance: 1,
-        prevTokenBalance: 1,
-        selectedToken: 'someToken',
-        expectedResult: false,
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult)
-      })
-    })
-
-  })
-
-  describe('generateTokenTransferData()', () => {
-    it('should return undefined if not passed a selected token', () => {
-      assert.equal(generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: false}), undefined)
-    })
-
-    it('should call abi.rawEncode with the correct params', () => {
-      stubs.rawEncode.resetHistory()
-      generateTokenTransferData({ toAddress: 'mockAddress', amount: 'ab', selectedToken: true})
-      assert.deepEqual(
-        stubs.rawEncode.getCall(0).args,
-        [['address', 'uint256'], ['mockAddress', '0xab']]
-      )
-    })
-
-    it('should return encoded token transfer data', () => {
-      assert.equal(
-        generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: true}),
-        '0xa9059cbb104c'
-      )
-    })
-  })
-
-  describe('getAmountErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        amount: 15,
-        amountConversionRate: 2,
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should not return insufficientFunds error if selectedToken is truthy': {
-        amount: '0x0',
-        amountConversionRate: 2,
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        selectedToken: { symbole: 'DEF', decimals: 0 },
-        decimals: 0,
-        tokenBalance: 'sometokenbalance',
-        expectedResult: { amount: null },
-      },
-      'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': {
-        amount: '0x10',
-        amountConversionRate: 2,
-        balance: 100,
-        conversionRate: 3,
-        decimals: 10,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        selectedToken: 'someToken',
-        tokenBalance: 123,
-        expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR },
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('getGasFeeErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        amountConversionRate: 2,
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should return null error if isBalanceSufficient returns true': {
-        amountConversionRate: 2,
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 15,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: null },
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.deepEqual(getGasFeeErrorObject(obj), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('calcTokenBalance()', () => {
-    it('should return the calculated token blance', () => {
-      assert.equal(calcTokenBalance({
-        selectedToken: {
-          decimals: 11,
-        },
-        usersToken: {
-          balance: 20,
-        },
-      }), 'calc:2011')
-    })
-  })
-
-  describe('isBalanceSufficient()', () => {
-    it('should correctly call addCurrencies and return the result of calling conversionGTE', () => {
-      stubs.conversionGTE.resetHistory()
-      const result = isBalanceSufficient({
-        amount: 15,
-        amountConversionRate: 2,
-        balance: 100,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-      })
-      assert.deepEqual(
-        stubs.addCurrencies.getCall(0).args,
-        [
-          15, 17, {
-            aBase: 16,
-            bBase: 16,
-            toNumericBase: 'hex',
-          },
-        ]
-      )
-      assert.deepEqual(
-        stubs.conversionGTE.getCall(0).args,
-        [
-          {
-            value: 100,
-            fromNumericBase: 'hex',
-            fromCurrency: 'ABC',
-            conversionRate: 3,
-          },
-          {
-            value: 32,
-            fromNumericBase: 'hex',
-            conversionRate: 2,
-            fromCurrency: 'ABC',
-          },
-        ]
-      )
-
-      assert.equal(result, true)
-    })
-  })
-
-  describe('isTokenBalanceSufficient()', () => {
-    it('should correctly call conversionUtil and return the result of calling conversionGTE', () => {
-      stubs.conversionGTE.resetHistory()
-      stubs.conversionUtil.resetHistory()
-      const result = isTokenBalanceSufficient({
-        amount: '0x10',
-        tokenBalance: 123,
-        decimals: 10,
-      })
-      assert.deepEqual(
-        stubs.conversionUtil.getCall(0).args,
-        [
-          '0x10', {
-            fromNumericBase: 'hex',
-          },
-        ]
-      )
-      assert.deepEqual(
-        stubs.conversionGTE.getCall(0).args,
-        [
-          {
-            value: 123,
-            fromNumericBase: 'hex',
-          },
-          {
-            value: 'calc:1610',
-          },
-        ]
-      )
-
-      assert.equal(result, false)
-    })
-  })
-
-  describe('estimateGas', () => {
-    const baseMockParams = {
-      blockGasLimit: '0x64',
-      selectedAddress: 'mockAddress',
-      to: '0xisContract',
-      estimateGasMethod: sinon.stub().callsFake(
-        ({to}, cb) => {
-          const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
-            ? new Error(to.match(/:(.+)$/)[1])
-            : null
-          const result = { toString: (n) => `0xabc${n}` }
-          return cb(err, result)
-        }
-      ),
-    }
-    const baseExpectedCall = {
-      from: 'mockAddress',
-      gas: '0x64x0.95',
-      to: '0xisContract',
-      value: '0xff',
-    }
-
-    beforeEach(() => {
-      global.eth = {
-        getCode: sinon.stub().callsFake(
-          (address) => Promise.resolve(address.match(/isContract/) ? 'not-0x' : '0x')
-        ),
-      }
-    })
-
-    afterEach(() => {
-      baseMockParams.estimateGasMethod.resetHistory()
-      global.eth.getCode.resetHistory()
-    })
-
-    it('should call ethQuery.estimateGas with the expected params', async () => {
-      const result = await sendUtils.estimateGas(baseMockParams)
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall)
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it('should call ethQuery.estimateGas with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, { blockGasLimit: '0xbcd' }))
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall, { gas: '0xbcdx0.95' })
-      )
-      assert.equal(result, '0xabc16x1.5')
-    })
-
-    it('should call ethQuery.estimateGas with a value of 0x0 and the expected data and to if passed a selectedToken', async () => {
-      const result = await estimateGas(Object.assign({ data: 'mockData', selectedToken: { address: 'mockAddress' } }, baseMockParams))
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({}, baseExpectedCall, {
-          gasPrice: undefined,
-          value: '0x0',
-          data: '0xa9059cbb104c',
-          to: 'mockAddress',
-        })
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
-      const data = 'mockData'
-      const to = ''
-      const result = await estimateGas({...baseMockParams, data, to})
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        { gasPrice: undefined, value: '0xff', data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
-      assert.equal(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should return ${SIMPLE_GAS_COST} if not passed a selectedToken or truthy to address`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null }))
-      assert.equal(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should not return ${SIMPLE_GAS_COST} if passed a selectedToken`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123', selectedToken: { address: '' } }))
-      assert.notEqual(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } }))
-      assert.equal(result, BASE_TOKEN_GAS_COST)
-    })
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, {
-        to: 'isContract willFailBecauseOf:Transaction execution error.',
-      }))
-      assert.equal(result, '0x64x0.95')
-    })
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, {
-        to: 'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.',
-      }))
-      assert.equal(result, '0x64x0.95')
-    })
-
-    it(`should reject other errors`, async () => {
-      try {
-        await estimateGas(Object.assign({}, baseMockParams, {
-          to: 'isContract willFailBecauseOf:some other error',
-        }))
-      } catch (err) {
-        assert.equal(err.message, 'some other error')
-      }
-    })
-  })
-
-  describe('estimateGasPriceFromRecentBlocks', () => {
-    const ONE_GWEI_IN_WEI_HEX_PLUS_ONE = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-    const ONE_GWEI_IN_WEI_HEX_PLUS_TWO = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x2', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-    const ONE_GWEI_IN_WEI_HEX_MINUS_ONE = subtractCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-
-    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is falsy`, () => {
-      assert.equal(estimateGasPriceFromRecentBlocks(), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is empty`, () => {
-      assert.equal(estimateGasPriceFromRecentBlocks([]), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has no gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: null },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has empty gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should return the middle value of all blocks lowest prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_TWO ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX_PLUS_ONE)
-    })
-
-    it(`should work if a block has multiple gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [ '0x1', '0x2', '0x3', '0x4', '0x5' ] },
-        { gasPrices: [ '0x101', '0x100', '0x103', '0x104', '0x102' ] },
-        { gasPrices: [ '0x150', '0x50', '0x100', '0x200', '0x5' ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), '0x5')
-    })
-  })
-
-  describe('getToAddressForGasUpdate()', () => {
-    it('should return empty string if all params are undefined or null', () => {
-      assert.equal(getToAddressForGasUpdate(undefined, null), '')
-    })
-
-    it('should return the first string that is not defined or null in lower case', () => {
-      assert.equal(getToAddressForGasUpdate('A', null), 'a')
-      assert.equal(getToAddressForGasUpdate(undefined, 'B'), 'b')
-    })
-  })
-
-  describe('removeLeadingZeroes()', () => {
-    it('should remove leading zeroes from int when user types', () => {
-      assert.equal(removeLeadingZeroes('0'), '0')
-      assert.equal(removeLeadingZeroes('1'), '1')
-      assert.equal(removeLeadingZeroes('00'), '0')
-      assert.equal(removeLeadingZeroes('01'), '1')
-    })
-
-    it('should remove leading zeroes from int when user copy/paste', () => {
-      assert.equal(removeLeadingZeroes('001'), '1')
-    })
-
-    it('should remove leading zeroes from float when user types', () => {
-      assert.equal(removeLeadingZeroes('0.'), '0.')
-      assert.equal(removeLeadingZeroes('0.0'), '0.0')
-      assert.equal(removeLeadingZeroes('0.00'), '0.00')
-      assert.equal(removeLeadingZeroes('0.001'), '0.001')
-      assert.equal(removeLeadingZeroes('0.10'), '0.10')
-    })
-
-    it('should remove leading zeroes from float when user copy/paste', () => {
-      assert.equal(removeLeadingZeroes('00.1'), '0.1')
-    })
-  })
-})
diff --git a/ui/app/components/send/to-autocomplete.component.js b/ui/app/components/send/to-autocomplete.component.js
deleted file mode 100644
index 9e270db75..000000000
--- a/ui/app/components/send/to-autocomplete.component.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import AccountListItem from '../send/account-list-item/account-list-item.component'
-
-
-export default class ToAutoComplete extends Component {
-
-  static propTypes = {
-    dropdownOpen: PropTypes.bool,
-    openDropdown: PropTypes.func,
-    closeDropdown: PropTypes.func,
-    onChange: PropTypes.func,
-    to: PropTypes.string,
-    accounts: PropTypes.array,
-    inError: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  state = {
-    accountsToRender: [],
-  }
-
-  getListItemIcon (listItemAddress, toAddress) {
-    return toAddress && listItemAddress === toAddress
-      ? <i className={'fa fa-check fa-lg'}
-          style={{
-            color: '#02c9b1',
-          }}
-        />
-      : null
-  }
-
-  renderDropdown () {
-    const {
-      closeDropdown,
-      onChange,
-      to,
-    } = this.props
-    const {accountsToRender} = this.state
-
-    if (!accountsToRender.length) {
-      return null
-    }
-
-    return (
-      <div>
-        <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} />
-        <div className={'send-v2__from-dropdown__list'}>
-          {accountsToRender.map((account, i) => (
-            <AccountListItem
-              key={i}
-              account={account}
-              className={'account-list-item__dropdown'}
-              handleClick={() => {
-                onChange(account.address)
-                closeDropdown()
-              }}
-              icon={this.getListItemIcon(account.address, to)}
-              displayBalance={false}
-              displayAddress={true}
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  handleInputEvent (event = {}, cb) {
-    const {
-      to,
-      accounts,
-      closeDropdown,
-      openDropdown,
-    } = this.props
-
-    const matchingAccounts = accounts.filter(({address}) => address.match(to || ''))
-    const matches = matchingAccounts.length
-
-    if (!matches || matchingAccounts[0].address === to) {
-      this.setState({accountsToRender: []})
-      event.target && event.target.select()
-      closeDropdown()
-    } else {
-      this.setState({accountsToRender: matchingAccounts})
-      openDropdown()
-    }
-    cb && cb(event.target.value)
-  }
-
-  componentDidUpdate (nextProps) {
-    if (this.props.to !== nextProps.to) {
-      this.handleInputEvent()
-    }
-  }
-
-  render () {
-    const {
-      to,
-      dropdownOpen,
-      onChange,
-      inError,
-    } = this.props
-
-    return (
-      <div className={'send-v2__to-autocomplete'}>
-        <input
-          className={classnames('send-v2__to-autocomplete__input', {
-            'send-v2__error-border': inError,
-          })}
-          placeholder={this.context.t('recipientAddress')}
-          value={to}
-          onChange={event => onChange(event.target.value)}
-          onFocus={event => this.handleInputEvent(event)}
-          style={{
-            borderColor: inError ? 'red' : null,
-          }}
-        />
-        {
-          to
-          ? null
-          : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
-              onClick={() => this.handleInputEvent()}
-              style={{
-                style: {color: '#dedede'},
-              }}
-            />
-        }
-        {
-          dropdownOpen
-          ? this.renderDropdown()
-          : null
-        }
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
deleted file mode 100644
index 39d15dfa7..000000000
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ /dev/null
@@ -1,129 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('../account-list-item/account-list-item.component').default
-const connect = require('react-redux').connect
-const Tooltip = require('../../tooltip')
-const checksumAddress = require('../../../util').checksumAddress
-
-ToAutoComplete.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(ToAutoComplete)
-
-
-inherits(ToAutoComplete, Component)
-function ToAutoComplete () {
-  Component.call(this)
-
-  this.state = { accountsToRender: [] }
-}
-
-ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
-  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
-  return toAddress && listItemAddress === toAddress
-    ? listItemIcon
-    : null
-}
-
-ToAutoComplete.prototype.renderDropdown = function () {
-  const {
-    closeDropdown,
-    onChange,
-    to,
-  } = this.props
-  const { accountsToRender } = this.state
-
-  return accountsToRender.length && h('div', {}, [
-
-    h('div.send-v2__from-dropdown__close-area', {
-      onClick: closeDropdown,
-    }),
-
-    h('div.send-v2__from-dropdown__list', {}, [
-
-      ...accountsToRender.map(account => h(AccountListItem, {
-        account,
-        className: 'account-list-item__dropdown',
-        handleClick: () => {
-          onChange(checksumAddress(account.address))
-          closeDropdown()
-        },
-        icon: this.getListItemIcon(account.address, to),
-        displayBalance: false,
-        displayAddress: true,
-      })),
-
-    ]),
-
-  ])
-}
-
-ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
-  const {
-    to,
-    accounts,
-    closeDropdown,
-    openDropdown,
-  } = this.props
-
-  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
-  const matches = matchingAccounts.length
-
-  if (!matches || matchingAccounts[0].address === to) {
-    this.setState({ accountsToRender: [] })
-    event.target && event.target.select()
-    closeDropdown()
-  } else {
-    this.setState({ accountsToRender: matchingAccounts })
-    openDropdown()
-  }
-  cb && cb(event.target.value)
-}
-
-ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
-  if (this.props.to !== nextProps.to) {
-    this.handleInputEvent()
-  }
-}
-
-ToAutoComplete.prototype.render = function () {
-  const {
-    to,
-    dropdownOpen,
-    onChange,
-    inError,
-    qrScanner,
-  } = this.props
-
-  return h('div.send-v2__to-autocomplete', {}, [
-
-    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
-      placeholder: this.context.t('recipientAddress'),
-      className: inError ? `send-v2__error-border` : '',
-      value: to,
-      onChange: event => onChange(event.target.value),
-      onFocus: event => this.handleInputEvent(event),
-      style: {
-        borderColor: inError ? 'red' : null,
-      },
-    }),
-    qrScanner && h(Tooltip, {
-      title: this.context.t('scanQrCode'),
-      position: 'bottom',
-    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
-      style: { color: '#33333' },
-      onClick: () => this.props.scanQrCode(),
-    })),
-    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
-      style: { color: '#dedede' },
-      onClick: () => this.handleInputEvent(),
-    }),
-
-    dropdownOpen && this.renderDropdown(),
-
-  ])
-}
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
deleted file mode 100644
index 7d3436dc3..000000000
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Identicon from '../identicon'
-import Tooltip from '../tooltip-v2'
-import copyToClipboard from 'copy-to-clipboard'
-import { DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT } from './sender-to-recipient.constants'
-import { checksumAddress } from '../../util'
-
-const variantHash = {
-  [DEFAULT_VARIANT]: 'sender-to-recipient--default',
-  [CARDS_VARIANT]: 'sender-to-recipient--cards',
-  [FLAT_VARIANT]: 'sender-to-recipient--flat',
-}
-
-export default class SenderToRecipient extends PureComponent {
-  static propTypes = {
-    senderName: PropTypes.string,
-    senderAddress: PropTypes.string,
-    recipientName: PropTypes.string,
-    recipientAddress: PropTypes.string,
-    t: PropTypes.func,
-    variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT]),
-    addressOnly: PropTypes.bool,
-    assetImage: PropTypes.string,
-    onRecipientClick: PropTypes.func,
-    onSenderClick: PropTypes.func,
-  }
-
-  static defaultProps = {
-    variant: DEFAULT_VARIANT,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  state = {
-    senderAddressCopied: false,
-    recipientAddressCopied: false,
-  }
-
-  renderSenderIdenticon () {
-    return !this.props.addressOnly && (
-      <div className="sender-to-recipient__sender-icon">
-        <Identicon
-          address={checksumAddress(this.props.senderAddress)}
-          diameter={24}
-        />
-      </div>
-    )
-  }
-
-  renderSenderAddress () {
-    const { t } = this.context
-    const { senderName, senderAddress, addressOnly } = this.props
-    const checksummedSenderAddress = checksumAddress(senderAddress)
-
-    return (
-      <Tooltip
-        position="bottom"
-        title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
-        wrapperClassName="sender-to-recipient__tooltip-wrapper"
-        containerClassName="sender-to-recipient__tooltip-container"
-        onHidden={() => this.setState({ senderAddressCopied: false })}
-      >
-      <div className="sender-to-recipient__name">
-        { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
-      </div>
-    </Tooltip>
-    )
-  }
-
-  renderRecipientIdenticon () {
-    const { recipientAddress, assetImage } = this.props
-    const checksummedRecipientAddress = checksumAddress(recipientAddress)
-
-    return !this.props.addressOnly && (
-      <div className="sender-to-recipient__sender-icon">
-        <Identicon
-          address={checksummedRecipientAddress}
-          diameter={24}
-          image={assetImage}
-        />
-      </div>
-    )
-  }
-
-  renderRecipientWithAddress () {
-    const { t } = this.context
-    const { recipientName, recipientAddress, addressOnly, onRecipientClick } = this.props
-    const checksummedRecipientAddress = checksumAddress(recipientAddress)
-
-    return (
-      <div
-        className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
-        onClick={() => {
-          this.setState({ recipientAddressCopied: true })
-          copyToClipboard(checksummedRecipientAddress)
-          if (onRecipientClick) {
-            onRecipientClick()
-          }
-        }}
-      >
-        { this.renderRecipientIdenticon() }
-        <Tooltip
-          position="bottom"
-          title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
-          wrapperClassName="sender-to-recipient__tooltip-wrapper"
-          containerClassName="sender-to-recipient__tooltip-container"
-          onHidden={() => this.setState({ recipientAddressCopied: false })}
-        >
-          <div className="sender-to-recipient__name">
-            {
-              addressOnly
-                ? `${t('to')}: ${checksummedRecipientAddress}`
-                : (recipientName || this.context.t('newContract'))
-            }
-          </div>
-        </Tooltip>
-      </div>
-    )
-  }
-
-  renderRecipientWithoutAddress () {
-    return (
-      <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
-        { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
-        <div className="sender-to-recipient__name">
-          { this.context.t('newContract') }
-        </div>
-      </div>
-    )
-  }
-
-  renderArrow () {
-    return this.props.variant === DEFAULT_VARIANT
-      ? (
-        <div className="sender-to-recipient__arrow-container">
-          <div className="sender-to-recipient__arrow-circle">
-            <img
-              height={15}
-              width={15}
-              src="./images/arrow-right.svg"
-            />
-          </div>
-        </div>
-      ) : (
-        <div className="sender-to-recipient__arrow-container">
-          <img
-            height={20}
-            src="./images/caret-right.svg"
-          />
-        </div>
-      )
-  }
-
-  render () {
-    const { senderAddress, recipientAddress, variant, onSenderClick } = this.props
-    const checksummedSenderAddress = checksumAddress(senderAddress)
-
-    return (
-      <div className={classnames('sender-to-recipient', variantHash[variant])}>
-        <div
-          className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
-          onClick={() => {
-            this.setState({ senderAddressCopied: true })
-            copyToClipboard(checksummedSenderAddress)
-            if (onSenderClick) {
-              onSenderClick()
-            }
-          }}
-        >
-          { this.renderSenderIdenticon() }
-          { this.renderSenderAddress() }
-        </div>
-        { this.renderArrow() }
-        {
-          recipientAddress
-            ? this.renderRecipientWithAddress()
-            : this.renderRecipientWithoutAddress()
-        }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
deleted file mode 100644
index b22c01e8f..000000000
--- a/ui/app/components/shapeshift-form.js
+++ /dev/null
@@ -1,256 +0,0 @@
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const PropTypes = require('prop-types')
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const classnames = require('classnames')
-const qrcode = require('qrcode-generator')
-const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
-const { isValidAddress } = require('../util')
-const SimpleDropdown = require('./dropdowns/simple-dropdown')
-
-import Button from './button'
-
-function mapStateToProps (state) {
-  const {
-    coinOptions,
-    tokenExchangeRates,
-    selectedAddress,
-  } = state.metamask
-  const { warning } = state.appState
-
-  return {
-    coinOptions,
-    tokenExchangeRates,
-    selectedAddress,
-    warning,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
-    pairUpdate: coin => dispatch(pairUpdate(coin)),
-    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
-  }
-}
-
-ShapeshiftForm.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
-
-
-inherits(ShapeshiftForm, Component)
-function ShapeshiftForm () {
-  Component.call(this)
-
-  this.state = {
-    depositCoin: 'btc',
-    refundAddress: '',
-    showQrCode: false,
-    depositAddress: '',
-    errorMessage: '',
-    isLoading: false,
-    bought: false,
-  }
-}
-
-ShapeshiftForm.prototype.getCoinPair = function () {
-  return `${this.state.depositCoin.toUpperCase()}_ETH`
-}
-
-ShapeshiftForm.prototype.componentWillMount = function () {
-  this.props.shapeShiftSubview()
-}
-
-ShapeshiftForm.prototype.onCoinChange = function (coin) {
-  this.setState({
-    depositCoin: coin,
-    errorMessage: '',
-  })
-  this.props.pairUpdate(coin)
-}
-
-ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
-  this.setState({
-    isLoading: true,
-    showQrCode: true,
-  })
-
-  const {
-    buyWithShapeShift,
-    selectedAddress: withdrawal,
-  } = this.props
-  const {
-    refundAddress: returnAddress,
-    depositCoin,
-  } = this.state
-  const pair = `${depositCoin}_eth`
-  const data = {
-    withdrawal,
-    pair,
-    returnAddress,
-    //  Public api key
-    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
-  }
-
-  if (isValidAddress(withdrawal)) {
-    buyWithShapeShift(data)
-      .then(d => this.setState({
-        showQrCode: true,
-        depositAddress: d.deposit,
-        isLoading: false,
-      }))
-      .catch(() => this.setState({
-        showQrCode: false,
-        errorMessage: this.context.t('invalidRequest'),
-        isLoading: false,
-      }))
-  }
-}
-
-ShapeshiftForm.prototype.renderMetadata = function (label, value) {
-  return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [
-
-    h('div.shapeshift-form__metadata-label', {}, [
-      h('span', `${label}:`),
-    ]),
-
-    h('div.shapeshift-form__metadata-value', {}, [
-      h('span', value),
-    ]),
-
-  ])
-}
-
-ShapeshiftForm.prototype.renderMarketInfo = function () {
-  const { tokenExchangeRates } = this.props
-  const {
-    limit,
-    rate,
-    minimum,
-  } = tokenExchangeRates[this.getCoinPair()] || {}
-
-  return h('div.shapeshift-form__metadata', {}, [
-
-    this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')),
-    this.renderMetadata(this.context.t('limit'), limit),
-    this.renderMetadata(this.context.t('exchangeRate'), rate),
-    this.renderMetadata(this.context.t('min'), minimum),
-
-  ])
-}
-
-ShapeshiftForm.prototype.renderQrCode = function () {
-  const { depositAddress, isLoading, depositCoin } = this.state
-  const qrImage = qrcode(4, 'M')
-  qrImage.addData(depositAddress)
-  qrImage.make()
-
-  return h('div.shapeshift-form', {}, [
-
-    h('div.shapeshift-form__deposit-instruction', [
-      this.context.t('depositCoin', [depositCoin.toUpperCase()]),
-    ]),
-
-    h('div', depositAddress),
-
-    h('div.shapeshift-form__qr-code', [
-      isLoading
-        ? h('img', {
-          src: 'images/loading.svg',
-          style: { width: '60px'},
-        })
-        : h('div', {
-          dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) },
-        }),
-    ]),
-
-    this.renderMarketInfo(),
-
-  ])
-}
-
-
-ShapeshiftForm.prototype.render = function () {
-  const { coinOptions, btnClass, warning } = this.props
-  const { errorMessage, showQrCode, depositAddress } = this.state
-  const { tokenExchangeRates } = this.props
-  const token = tokenExchangeRates[this.getCoinPair()]
-
-  return h('div.shapeshift-form-wrapper', [
-    showQrCode
-      ? this.renderQrCode()
-      : h('div.modal-shapeshift-form', [
-          h('div.shapeshift-form__selectors', [
-
-            h('div.shapeshift-form__selector', [
-
-              h('div.shapeshift-form__selector-label', this.context.t('deposit')),
-
-              h(SimpleDropdown, {
-                selectedOption: this.state.depositCoin,
-                onSelect: (coin) => this.onCoinChange(coin),
-                options: Object.entries(coinOptions).map(([coin]) => ({
-                  value: coin.toLowerCase(),
-                  displayValue: coin,
-                })),
-              }),
-
-            ]),
-
-            h('div.icon.shapeshift-form__caret', {
-              style: { backgroundImage: 'url(images/caret-right.svg)'},
-            }),
-
-            h('div.shapeshift-form__selector', [
-
-              h('div.shapeshift-form__selector-label', [
-                this.context.t('receive'),
-              ]),
-
-              h('div.shapeshift-form__selector-input', ['ETH']),
-
-            ]),
-
-          ]),
-
-          warning && h('div.shapeshift-form__address-input-label', warning),
-
-          !warning && h('div', {
-            className: classnames('shapeshift-form__address-input-wrapper', {
-              'shapeshift-form__address-input-wrapper--error': errorMessage,
-            }),
-          }, [
-
-            h('div.shapeshift-form__address-input-label', [
-              this.context.t('refundAddress'),
-            ]),
-
-            h('input.shapeshift-form__address-input', {
-              type: 'text',
-              onChange: e => this.setState({
-                refundAddress: e.target.value,
-                errorMessage: '',
-              }),
-            }),
-
-            h('divshapeshift-form__address-input-error-message', [errorMessage]),
-          ]),
-
-          !warning && this.renderMarketInfo(),
-
-      ]),
-
-      !depositAddress && h(Button, {
-        type: 'primary',
-        large: true,
-        className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
-        disabled: !token,
-        onClick: () => this.onBuyWithShapeShift(),
-      }, [this.context.t('buy')]),
-
-    ])
-}
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
deleted file mode 100644
index 2d08bbddc..000000000
--- a/ui/app/components/shift-list-item.js
+++ /dev/null
@@ -1,204 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const explorerLink = require('etherscan-link').createExplorerLink
-const actions = require('../actions')
-const { formatDate, addressSummary } = require('../util')
-
-const CopyButton = require('./copyButton')
-const EthBalance = require('./eth-balance')
-const Tooltip = require('./tooltip')
-
-
-ShiftListItem.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(ShiftListItem)
-
-
-function mapStateToProps (state) {
-  return {
-    selectedAddress: state.metamask.selectedAddress,
-    conversionRate: state.metamask.conversionRate,
-    currentCurrency: state.metamask.currentCurrency,
-  }
-}
-
-inherits(ShiftListItem, Component)
-
-function ShiftListItem () {
-  Component.call(this)
-}
-
-ShiftListItem.prototype.render = function () {
-  return h('div.transaction-list-item.tx-list-clickable', {
-    style: {
-      paddingTop: '20px',
-      paddingBottom: '20px',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-      flexDirection: 'row',
-    },
-  }, [
-    h('div', {
-      style: {
-        width: '0px',
-        position: 'relative',
-        bottom: '19px',
-      },
-    }, [
-      h('img', {
-        src: 'https://shapeshift.io/logo.png',
-        style: {
-          height: '35px',
-          width: '132px',
-          position: 'absolute',
-          clip: 'rect(0px,30px,34px,0px)',
-        },
-      }),
-    ]),
-
-    this.renderInfo(),
-    this.renderUtilComponents(),
-  ])
-}
-
-ShiftListItem.prototype.renderUtilComponents = function () {
-  var props = this.props
-  const { conversionRate, currentCurrency } = props
-
-  switch (props.response.status) {
-    case 'no_deposits':
-      return h('.flex-row', [
-        h(CopyButton, {
-          value: this.props.depositAddress,
-        }),
-        h(Tooltip, {
-          title: this.context.t('qrCode'),
-        }, [
-          h('i.fa.fa-qrcode.pointer.pop-hover', {
-            onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
-            style: {
-              margin: '5px',
-              marginLeft: '23px',
-              marginRight: '12px',
-              fontSize: '20px',
-              color: '#F7861C',
-            },
-          }),
-        ]),
-      ])
-    case 'received':
-      return h('.flex-row')
-
-    case 'complete':
-      return h('.flex-row', [
-        h(CopyButton, {
-          value: this.props.response.transaction,
-        }),
-        h(EthBalance, {
-          value: `${props.response.outgoingCoin}`,
-          conversionRate,
-          currentCurrency,
-          width: '55px',
-          shorten: true,
-          needsParse: false,
-          incoming: true,
-          style: {
-            fontSize: '15px',
-            color: '#01888C',
-          },
-        }),
-      ])
-
-    case 'failed':
-      return ''
-    default:
-      return ''
-  }
-}
-
-ShiftListItem.prototype.renderInfo = function () {
-  var props = this.props
-  switch (props.response.status) {
-    case 'no_deposits':
-      return h('.flex-column', {
-        style: {
-          overflow: 'hidden',
-        },
-      }, [
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, this.context.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.context.t('noDeposits')),
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, formatDate(props.time)),
-      ])
-    case 'received':
-      return h('.flex-column', {
-        style: {
-          width: '200px',
-          overflow: 'hidden',
-        },
-      }, [
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, this.context.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.context.t('conversionProgress')),
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, formatDate(props.time)),
-      ])
-    case 'complete':
-      var url = explorerLink(props.response.transaction, parseInt('1'))
-
-      return h('.flex-column.pointer', {
-        style: {
-          width: '200px',
-          overflow: 'hidden',
-        },
-        onClick: () => global.platform.openWindow({ url }),
-      }, [
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, this.context.t('fromShapeShift')),
-        h('div', formatDate(props.time)),
-        h('div', {
-          style: {
-            fontSize: 'x-small',
-            color: '#ABA9AA',
-            width: '100%',
-          },
-        }, addressSummary(props.response.transaction)),
-      ])
-
-    case 'failed':
-      return h('span.error', '(' + this.context.t('failed') + ')')
-    default:
-      return ''
-  }
-}
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
deleted file mode 100644
index b9845d564..000000000
--- a/ui/app/components/sidebars/index.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import './sidebar-content';
-
-.sidebar-right-enter {
-  transition: transform 300ms ease-in-out;
-  transform: translateX(-100%);
-}
-
-.sidebar-right-enter.sidebar-right-enter-active {
-  transition: transform 300ms ease-in-out;
-  transform: translateX(0%);
-}
-
-.sidebar-right-leave {
-  transition: transform 200ms ease-out;
-  transform: translateX(0%);
-}
-
-.sidebar-right-leave.sidebar-right-leave-active {
-  transition: transform 200ms ease-out;
-  transform: translateX(-100%);
-}
-
-.sidebar-left-enter {
-  transition: transform 300ms ease-in-out;
-  transform: translateX(100%);
-}
-
-.sidebar-left-enter.sidebar-left-enter-active {
-  transition: transform 300ms ease-in-out;
-  transform: translateX(0%);
-}
-
-.sidebar-left-leave {
-  transition: transform 200ms ease-out;
-  transform: translateX(0%);
-}
-
-.sidebar-left-leave.sidebar-left-leave-active {
-  transition: transform 200ms ease-out;
-  transform: translateX(100%);
-}
-
-.sidebar-left {
-  flex: 1 0 230px;
-  background: rgb(250, 250, 250);
-  z-index: $sidebar-z-index;
-  position: fixed;
-  left: 15%;
-  right: 0;
-  bottom: 0;
-  opacity: 1;
-  visibility: visible;
-  will-change: transform;
-  overflow-y: auto;
-  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
-  width: 85%;
-  height: 100%;
-
-  @media screen and (min-width: 769px) {
-    width: 408px;
-    left: calc(100% - 408px);
-  }
-
-  @media screen and (max-width: $break-small) {
-    width: 100%;
-    left: 0%;
-  }
-}
-
-.sidebar-overlay {
-  z-index: $sidebar-overlay-z-index;
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 1;
-  visibility: visible;
-  background-color: rgba(0, 0, 0, .3);
-}
\ No newline at end of file
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
deleted file mode 100644
index 25bd9a7b1..000000000
--- a/ui/app/components/signature-request.js
+++ /dev/null
@@ -1,316 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-import Identicon from './identicon'
-const connect = require('react-redux').connect
-const ethUtil = require('ethereumjs-util')
-const classnames = require('classnames')
-const { compose } = require('recompose')
-const { withRouter } = require('react-router-dom')
-const { ObjectInspector } = require('react-inspector')
-
-import AccountDropdownMini from './account-dropdown-mini'
-
-const actions = require('../actions')
-const { conversionUtil } = require('../conversion-util')
-
-const {
-  getSelectedAccount,
-  getCurrentAccountWithSendEtherInfo,
-  getSelectedAddress,
-  accountsWithSendEtherInfoSelector,
-  conversionRateSelector,
-} = require('../selectors.js')
-
-import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
-import Button from './button'
-
-const { DEFAULT_ROUTE } = require('../routes')
-
-function mapStateToProps (state) {
-  return {
-    balance: getSelectedAccount(state).balance,
-    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
-    selectedAddress: getSelectedAddress(state),
-    requester: null,
-    requesterAddress: null,
-    accounts: accountsWithSendEtherInfoSelector(state),
-    conversionRate: conversionRateSelector(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    goHome: () => dispatch(actions.goHome()),
-    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-  }
-}
-
-SignatureRequest.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(SignatureRequest)
-
-
-inherits(SignatureRequest, Component)
-function SignatureRequest (props) {
-  Component.call(this)
-
-  this.state = {
-    selectedAccount: props.selectedAccount,
-  }
-}
-
-SignatureRequest.prototype.renderHeader = function () {
-  return h('div.request-signature__header', [
-
-    h('div.request-signature__header-background'),
-
-    h('div.request-signature__header__text', this.context.t('sigRequest')),
-
-    h('div.request-signature__header__tip-container', [
-      h('div.request-signature__header__tip'),
-    ]),
-
-  ])
-}
-
-SignatureRequest.prototype.renderAccountDropdown = function () {
-  const { selectedAccount } = this.state
-
-  const {
-    accounts,
-  } = this.props
-
-  return h('div.request-signature__account', [
-
-    h('div.request-signature__account-text', [this.context.t('account') + ':']),
-
-    h(AccountDropdownMini, {
-      selectedAccount,
-      accounts,
-      disabled: true,
-    }),
-
-  ])
-}
-
-SignatureRequest.prototype.renderBalance = function () {
-  const { balance, conversionRate } = this.props
-
-  const balanceInEther = conversionUtil(balance, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    numberOfDecimals: 6,
-    conversionRate,
-  })
-
-  return h('div.request-signature__balance', [
-
-    h('div.request-signature__balance-text', `${this.context.t('balance')}:`),
-
-    h('div.request-signature__balance-value', `${balanceInEther} ETH`),
-
-  ])
-}
-
-SignatureRequest.prototype.renderAccountInfo = function () {
-  return h('div.request-signature__account-info', [
-
-    this.renderAccountDropdown(),
-
-    this.renderRequestIcon(),
-
-    this.renderBalance(),
-
-  ])
-}
-
-SignatureRequest.prototype.renderRequestIcon = function () {
-  const { requesterAddress } = this.props
-
-  return h('div.request-signature__request-icon', [
-    h(Identicon, {
-      diameter: 40,
-      address: requesterAddress,
-    }),
-  ])
-}
-
-SignatureRequest.prototype.renderRequestInfo = function () {
-  return h('div.request-signature__request-info', [
-
-    h('div.request-signature__headline', [
-      this.context.t('yourSigRequested'),
-    ]),
-
-  ])
-}
-
-SignatureRequest.prototype.msgHexToText = function (hex) {
-  try {
-    const stripped = ethUtil.stripHexPrefix(hex)
-    const buff = Buffer.from(stripped, 'hex')
-    return buff.length === 32 ? hex : buff.toString('utf8')
-  } catch (e) {
-    return hex
-  }
-}
-
-// eslint-disable-next-line react/display-name
-SignatureRequest.prototype.renderTypedDataV3 = function (data) {
-  const { domain, message } = JSON.parse(data)
-  return [
-    h('div.request-signature__typed-container', [
-      domain ? h('div', [
-        h('h1', 'Domain'),
-        h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
-      ]) : '',
-      message ? h('div', [
-        h('h1', 'Message'),
-        h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
-      ]) : '',
-    ]),
-  ]
-}
-
-SignatureRequest.prototype.renderBody = function () {
-  let rows
-  let notice = this.context.t('youSign') + ':'
-
-  const { txData } = this.props
-  const { type, msgParams: { data, version } } = txData
-
-  if (type === 'personal_sign') {
-    rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
-  } else if (type === 'eth_signTypedData') {
-    rows = data
-  } else if (type === 'eth_sign') {
-    rows = [{ name: this.context.t('message'), value: data }]
-    notice = [this.context.t('signNotice'),
-      h('span.request-signature__help-link', {
-        onClick: () => {
-          global.platform.openWindow({
-            url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
-          })
-        },
-    }, this.context.t('learnMore'))]
-  }
-
-  return h('div.request-signature__body', {}, [
-
-    this.renderAccountInfo(),
-
-    this.renderRequestInfo(),
-
-    h('div.request-signature__notice', {
-      className: classnames({
-        'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData',
-        'request-signature__warning': type === 'eth_sign',
-      }),
-    }, [notice]),
-
-    h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
-      this.renderTypedDataV3(data) :
-      rows.map(({ name, value }) => {
-        if (typeof value === 'boolean') {
-          value = value.toString()
-        }
-        return h('div.request-signature__row', [
-          h('div.request-signature__row-title', [`${name}:`]),
-          h('div.request-signature__row-value', value),
-        ])
-      }),
-    ),
-  ])
-}
-
-SignatureRequest.prototype.renderFooter = function () {
-  const {
-    signPersonalMessage,
-    signTypedMessage,
-    cancelPersonalMessage,
-    cancelTypedMessage,
-    signMessage,
-    cancelMessage,
-  } = this.props
-
-  const { txData } = this.props
-  const { type } = txData
-
-  let cancel
-  let sign
-  if (type === 'personal_sign') {
-    cancel = cancelPersonalMessage
-    sign = signPersonalMessage
-  } else if (type === 'eth_signTypedData') {
-    cancel = cancelTypedMessage
-    sign = signTypedMessage
-  } else if (type === 'eth_sign') {
-    cancel = cancelMessage
-    sign = signMessage
-  }
-
-  return h('div.request-signature__footer', [
-    h(Button, {
-      type: 'default',
-      large: true,
-      className: 'request-signature__footer__cancel-button',
-      onClick: event => {
-        cancel(event).then(() => {
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Transactions',
-              action: 'Sign Request',
-              name: 'Cancel',
-            },
-          })
-          this.props.clearConfirmTransaction()
-          this.props.history.push(DEFAULT_ROUTE)
-        })
-      },
-    }, this.context.t('cancel')),
-    h(Button, {
-      type: 'primary',
-      large: true,
-      className: 'request-signature__footer__sign-button',
-      onClick: event => {
-        sign(event).then(() => {
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Transactions',
-              action: 'Sign Request',
-              name: 'Confirm',
-            },
-          })
-          this.props.clearConfirmTransaction()
-          this.props.history.push(DEFAULT_ROUTE)
-        })
-      },
-    }, this.context.t('sign')),
-  ])
-}
-
-SignatureRequest.prototype.render = function () {
-  return (
-
-    h('div.request-signature__container', [
-
-      this.renderHeader(),
-
-      this.renderBody(),
-
-      this.renderFooter(),
-
-    ])
-
-  )
-
-}
diff --git a/ui/app/components/tabs/index.scss b/ui/app/components/tabs/index.scss
deleted file mode 100644
index a3b42f8e3..000000000
--- a/ui/app/components/tabs/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import './tab/index';
-
-.tabs {
-  &__list {
-    display: flex;
-    justify-content: flex-start;
-    background-color: #f9fafa;
-    border-bottom: 1px solid $geyser;
-    padding: 0 16px;
-  }
-}
diff --git a/ui/app/components/text-field/text-field.stories.js b/ui/app/components/text-field/text-field.stories.js
deleted file mode 100644
index c00873b8a..000000000
--- a/ui/app/components/text-field/text-field.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import TextField from './'
-
-storiesOf('TextField', module)
-  .add('text', () =>
-    <TextField
-      label="Text"
-      type="text"
-    />
-  )
-  .add('password', () =>
-    <TextField
-      label="Password"
-      type="password"
-    />
-  )
-  .add('error', () =>
-    <TextField
-      type="text"
-      label="Name"
-      error="Invalid value"
-    />
-  )
-  .add('Mascara text', () =>
-    <TextField
-      label="Text"
-      type="text"
-      largeLabel
-    />
-  )
-  .add('Material text', () =>
-    <TextField
-      label="Text"
-      type="text"
-      material
-    />
-  )
-  .add('Material password', () =>
-    <TextField
-      label="Password"
-      type="password"
-      material
-    />
-  )
-  .add('Material error', () =>
-    <TextField
-      type="text"
-      label="Name"
-      error="Invalid value"
-      material
-    />
-  )
diff --git a/ui/app/components/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
deleted file mode 100644
index adc001f83..000000000
--- a/ui/app/components/token-balance/token-balance.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withTokenTracker from '../../higher-order-components/with-token-tracker'
-import TokenBalance from './token-balance.component'
-import selectors from '../../selectors'
-
-const mapStateToProps = state => {
-  return {
-    userAddress: selectors.getSelectedAddress(state),
-  }
-}
-
-export default compose(
-  connect(mapStateToProps),
-  withTokenTracker
-)(TokenBalance)
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
deleted file mode 100644
index d9c80b4f4..000000000
--- a/ui/app/components/token-cell.js
+++ /dev/null
@@ -1,177 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-import Identicon from './identicon'
-const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
-const selectors = require('../selectors')
-const actions = require('../actions')
-const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
-
-const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    currentCurrency: state.metamask.currentCurrency,
-    selectedTokenAddress: state.metamask.selectedTokenAddress,
-    userAddress: selectors.getSelectedAddress(state),
-    contractExchangeRates: state.metamask.contractExchangeRates,
-    conversionRate: state.metamask.conversionRate,
-    sidebarOpen: state.appState.sidebar.isOpen,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
-    hideSidebar: () => dispatch(actions.hideSidebar()),
-  }
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
-
-inherits(TokenCell, Component)
-function TokenCell () {
-  Component.call(this)
-
-  this.state = {
-    tokenMenuOpen: false,
-  }
-}
-
-TokenCell.contextTypes = {
-  metricsEvent: PropTypes.func,
-}
-
-TokenCell.prototype.render = function () {
-  const { tokenMenuOpen } = this.state
-  const props = this.props
-  const {
-    address,
-    symbol,
-    string,
-    network,
-    setSelectedToken,
-    selectedTokenAddress,
-    contractExchangeRates,
-    conversionRate,
-    hideSidebar,
-    sidebarOpen,
-    currentCurrency,
-    // userAddress,
-    image,
-  } = props
-  let currentTokenToFiatRate
-  let currentTokenInFiat
-  let formattedFiat = ''
-
-  if (contractExchangeRates[address]) {
-    currentTokenToFiatRate = multiplyCurrencies(
-      contractExchangeRates[address],
-      conversionRate
-    )
-    currentTokenInFiat = conversionUtil(string, {
-      fromNumericBase: 'dec',
-      fromCurrency: symbol,
-      toCurrency: currentCurrency.toUpperCase(),
-      numberOfDecimals: 2,
-      conversionRate: currentTokenToFiatRate,
-    })
-    formattedFiat = currentTokenInFiat.toString() === '0'
-      ? ''
-      : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
-  }
-
-  const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
-
-  return (
-    h('div.token-list-item', {
-      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
-      // style: { cursor: network === '1' ? 'pointer' : 'default' },
-      // onClick: this.view.bind(this, address, userAddress, network),
-      onClick: () => {
-        setSelectedToken(address)
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Navigation',
-            action: 'Token Menu',
-            name: 'Clicked Token',
-          },
-        })
-        selectedTokenAddress !== address && sidebarOpen && hideSidebar()
-      },
-    }, [
-
-      h(Identicon, {
-        className: 'token-list-item__identicon',
-        diameter: 50,
-        address,
-        network,
-        image,
-      }),
-
-      h('div.token-list-item__balance-ellipsis', null, [
-        h('div.token-list-item__balance-wrapper', null, [
-          h('div.token-list-item__token-balance', `${string || 0}`),
-          h('div.token-list-item__token-symbol', symbol),
-          showFiat && h('div.token-list-item__fiat-amount', {
-            style: {},
-          }, formattedFiat),
-        ]),
-
-        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
-          onClick: (e) => {
-            e.stopPropagation()
-            this.setState({ tokenMenuOpen: true })
-          },
-        }),
-
-      ]),
-
-
-      tokenMenuOpen && h(TokenMenuDropdown, {
-        onClose: () => this.setState({ tokenMenuOpen: false }),
-        token: { symbol, address },
-      }),
-
-      /*
-      h('button', {
-        onClick: this.send.bind(this, address),
-      }, 'SEND'),
-      */
-
-    ])
-  )
-}
-
-TokenCell.prototype.send = function (address, event) {
-  event.preventDefault()
-  event.stopPropagation()
-  const url = tokenFactoryFor(address)
-  if (url) {
-    navigateTo(url)
-  }
-}
-
-TokenCell.prototype.view = function (address, userAddress, network, event) {
-  const url = etherscanLinkFor(address, userAddress, network)
-  if (url) {
-    navigateTo(url)
-  }
-}
-
-function navigateTo (url) {
-  global.platform.openWindow({ url })
-}
-
-function etherscanLinkFor (tokenAddress, address, network) {
-  const prefix = prefixForNetwork(network)
-  return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
-}
-
-function tokenFactoryFor (tokenAddress) {
-  return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
-}
-
diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
deleted file mode 100644
index f49846449..000000000
--- a/ui/app/components/token-currency-display/token-currency-display.component.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyDisplay from '../currency-display'
-import { getTokenData } from '../../helpers/transactions.util'
-import { getTokenValue, calcTokenAmount } from '../../token-util'
-
-export default class TokenCurrencyDisplay extends PureComponent {
-  static propTypes = {
-    transactionData: PropTypes.string,
-    token: PropTypes.object,
-  }
-
-  state = {
-    displayValue: '',
-    suffix: '',
-  }
-
-  componentDidMount () {
-    this.setDisplayValue()
-  }
-
-  componentDidUpdate (prevProps) {
-    const { transactionData } = this.props
-    const { transactionData: prevTransactionData } = prevProps
-
-    if (transactionData !== prevTransactionData) {
-      this.setDisplayValue()
-    }
-  }
-
-  setDisplayValue () {
-    const { transactionData: data, token } = this.props
-    const { decimals = '', symbol: suffix = '' } = token
-    const tokenData = getTokenData(data)
-
-    let displayValue
-
-    if (tokenData && tokenData.params && tokenData.params.length) {
-      const tokenValue = getTokenValue(tokenData.params)
-      displayValue = calcTokenAmount(tokenValue, decimals).toString()
-    }
-
-    this.setState({ displayValue, suffix })
-  }
-
-  render () {
-    const { displayValue, suffix } = this.state
-
-    return (
-      <CurrencyDisplay
-        {...this.props}
-        displayValue={displayValue}
-        suffix={suffix}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/token-input/token-input.component.js b/ui/app/components/token-input/token-input.component.js
deleted file mode 100644
index 398b762ec..000000000
--- a/ui/app/components/token-input/token-input.component.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import UnitInput from '../unit-input'
-import CurrencyDisplay from '../currency-display'
-import { getWeiHexFromDecimalValue } from '../../helpers/conversions.util'
-import ethUtil from 'ethereumjs-util'
-import { conversionUtil, multiplyCurrencies } from '../../conversion-util'
-import { ETH } from '../../constants/common'
-
-/**
- * Component that allows user to enter token values as a number, and props receive a converted
- * hex value. props.value, used as a default or forced value, should be a hex value, which
- * gets converted into a decimal value.
- */
-export default class TokenInput extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    currentCurrency: PropTypes.string,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    value: PropTypes.string,
-    suffix: PropTypes.string,
-    showFiat: PropTypes.bool,
-    hideConversion: PropTypes.bool,
-    selectedToken: PropTypes.object,
-    selectedTokenExchangeRate: PropTypes.number,
-  }
-
-  constructor (props) {
-    super(props)
-
-    const { value: hexValue } = props
-    const decimalValue = hexValue ? this.getValue(props) : 0
-
-    this.state = {
-      decimalValue,
-      hexValue,
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    const { value: prevPropsHexValue } = prevProps
-    const { value: propsHexValue } = this.props
-    const { hexValue: stateHexValue } = this.state
-
-    if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
-      const decimalValue = this.getValue(this.props)
-      this.setState({ hexValue: propsHexValue, decimalValue })
-    }
-  }
-
-  getValue (props) {
-    const { value: hexValue, selectedToken: { decimals, symbol } = {} } = props
-
-    const multiplier = Math.pow(10, Number(decimals || 0))
-    const decimalValueString = conversionUtil(ethUtil.addHexPrefix(hexValue), {
-      fromNumericBase: 'hex',
-      toNumericBase: 'dec',
-      toCurrency: symbol,
-      conversionRate: multiplier,
-      invertConversionRate: true,
-    })
-
-    return Number(decimalValueString) ? decimalValueString : ''
-  }
-
-  handleChange = decimalValue => {
-    const { selectedToken: { decimals } = {}, onChange } = this.props
-
-    const multiplier = Math.pow(10, Number(decimals || 0))
-    const hexValue = multiplyCurrencies(decimalValue || 0, multiplier, { toNumericBase: 'hex' })
-
-    this.setState({ hexValue, decimalValue })
-    onChange(hexValue)
-  }
-
-  handleBlur = () => {
-    this.props.onBlur(this.state.hexValue)
-  }
-
-  renderConversionComponent () {
-    const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
-    const { decimalValue } = this.state
-    let currency, numberOfDecimals
-
-    if (hideConversion) {
-      return (
-        <div className="currency-input__conversion-component">
-          { this.context.t('noConversionRateAvailable') }
-        </div>
-      )
-    }
-
-    if (showFiat) {
-      // Display Fiat
-      currency = currentCurrency
-      numberOfDecimals = 2
-    } else {
-      // Display ETH
-      currency = ETH
-      numberOfDecimals = 6
-    }
-
-    const decimalEthValue = (decimalValue * selectedTokenExchangeRate) || 0
-    const hexWeiValue = getWeiHexFromDecimalValue({
-      value: decimalEthValue,
-      fromCurrency: ETH,
-      fromDenomination: ETH,
-    })
-
-    return selectedTokenExchangeRate
-      ? (
-        <CurrencyDisplay
-          className="currency-input__conversion-component"
-          currency={currency}
-          value={hexWeiValue}
-          numberOfDecimals={numberOfDecimals}
-        />
-      ) : (
-        <div className="currency-input__conversion-component">
-          { this.context.t('noConversionRateAvailable') }
-        </div>
-      )
-  }
-
-  render () {
-    const { suffix, ...restProps } = this.props
-    const { decimalValue } = this.state
-
-    return (
-      <UnitInput
-        {...restProps}
-        suffix={suffix}
-        onChange={this.handleChange}
-        onBlur={this.handleBlur}
-        value={decimalValue}
-      >
-        { this.renderConversionComponent() }
-      </UnitInput>
-    )
-  }
-}
diff --git a/ui/app/components/token-input/token-input.container.js b/ui/app/components/token-input/token-input.container.js
deleted file mode 100644
index a00d200f7..000000000
--- a/ui/app/components/token-input/token-input.container.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { connect } from 'react-redux'
-import TokenInput from './token-input.component'
-import {getIsMainnet, getSelectedToken, getSelectedTokenExchangeRate, preferencesSelector} from '../../selectors'
-
-const mapStateToProps = state => {
-  const { metamask: { currentCurrency } } = state
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    currentCurrency,
-    selectedToken: getSelectedToken(state),
-    selectedTokenExchangeRate: getSelectedTokenExchangeRate(state),
-    hideConversion: (!isMainnet && !showFiatInTestnets),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { selectedToken } = stateProps
-  const suffix = selectedToken && selectedToken.symbol
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    suffix,
-  }
-}
-
-export default connect(mapStateToProps, null, mergeProps)(TokenInput)
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
deleted file mode 100644
index 258abde72..000000000
--- a/ui/app/components/token-list.js
+++ /dev/null
@@ -1,188 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const TokenTracker = require('eth-token-tracker')
-const TokenCell = require('./token-cell.js')
-const connect = require('react-redux').connect
-const selectors = require('../selectors')
-const log = require('loglevel')
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    tokens: state.metamask.tokens,
-    userAddress: selectors.getSelectedAddress(state),
-    assetImages: state.metamask.assetImages,
-  }
-}
-
-const defaultTokens = []
-const contracts = require('eth-contract-metadata')
-for (const address in contracts) {
-  const contract = contracts[address]
-  if (contract.erc20) {
-    contract.address = address
-    defaultTokens.push(contract)
-  }
-}
-
-TokenList.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(TokenList)
-
-
-inherits(TokenList, Component)
-function TokenList () {
-  this.state = {
-    tokens: [],
-    isLoading: true,
-    network: null,
-  }
-  Component.call(this)
-}
-
-TokenList.prototype.render = function () {
-  const { userAddress, assetImages } = this.props
-  const state = this.state
-  const { tokens, isLoading, error } = state
-  if (isLoading) {
-    return this.message(this.context.t('loadingTokens'))
-  }
-
-  if (error) {
-    log.error(error)
-    return h('.hotFix', {
-      style: {
-        padding: '80px',
-      },
-    }, [
-      this.context.t('troubleTokenBalances'),
-      h('span.hotFix', {
-        style: {
-          color: 'rgba(247, 134, 28, 1)',
-          cursor: 'pointer',
-        },
-        onClick: () => {
-          global.platform.openWindow({
-          url: `https://ethplorer.io/address/${userAddress}`,
-        })
-        },
-      }, this.context.t('here')),
-    ])
-  }
-
-  return h('div', tokens.map((tokenData) => {
-    tokenData.image = assetImages[tokenData.address]
-    return h(TokenCell, tokenData)
-  }))
-
-}
-
-TokenList.prototype.message = function (body) {
-  return h('div', {
-    style: {
-      display: 'flex',
-      height: '250px',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '30px',
-    },
-  }, body)
-}
-
-TokenList.prototype.componentDidMount = function () {
-  this.createFreshTokenTracker()
-}
-
-TokenList.prototype.createFreshTokenTracker = function () {
-  if (this.tracker) {
-    // Clean up old trackers when refreshing:
-    this.tracker.stop()
-    this.tracker.removeListener('update', this.balanceUpdater)
-    this.tracker.removeListener('error', this.showError)
-  }
-
-  if (!global.ethereumProvider) return
-  const { userAddress } = this.props
-
-  this.tracker = new TokenTracker({
-    userAddress,
-    provider: global.ethereumProvider,
-    tokens: this.props.tokens,
-    pollingInterval: 8000,
-  })
-
-
-  // Set up listener instances for cleaning up
-  this.balanceUpdater = this.updateBalances.bind(this)
-  this.showError = (error) => {
-    this.setState({ error, isLoading: false })
-  }
-  this.tracker.on('update', this.balanceUpdater)
-  this.tracker.on('error', this.showError)
-
-  this.tracker.updateBalances()
-  .then(() => {
-    this.updateBalances(this.tracker.serialize())
-  })
-  .catch((reason) => {
-    log.error(`Problem updating balances`, reason)
-    this.setState({ isLoading: false })
-  })
-}
-
-TokenList.prototype.componentDidUpdate = function (prevProps) {
-  const {
-    network: oldNet,
-    userAddress: oldAddress,
-    tokens,
-  } = prevProps
-  const {
-    network: newNet,
-    userAddress: newAddress,
-    tokens: newTokens,
-  } = this.props
-
-  const isLoading = newNet === 'loading'
-  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
-  const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet
-  const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork
-
-  const oldTokensLength = tokens ? tokens.length : 0
-  const tokensLengthUnchanged = oldTokensLength === newTokens.length
-
-  if (tokensLengthUnchanged && shouldUpdateTokens) return
-
-  this.setState({ isLoading: true })
-  this.createFreshTokenTracker()
-}
-
-TokenList.prototype.updateBalances = function (tokens) {
-  if (!this.tracker.running) {
-    return
-  }
-  this.setState({ tokens, isLoading: false })
-}
-
-TokenList.prototype.componentWillUnmount = function () {
-  if (!this.tracker) return
-  this.tracker.stop()
-  this.tracker.removeListener('update', this.balanceUpdater)
-  this.tracker.removeListener('error', this.showError)
-}
-
-// function uniqueMergeTokens (tokensA, tokensB = []) {
-//   const uniqueAddresses = []
-//   const result = []
-//   tokensA.concat(tokensB).forEach((token) => {
-//     const normal = normalizeAddress(token.address)
-//     if (!uniqueAddresses.includes(normal)) {
-//       uniqueAddresses.push(normal)
-//       result.push(token)
-//     }
-//   })
-//   return result
-// }
diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js
deleted file mode 100644
index 1de91cb71..000000000
--- a/ui/app/components/transaction-action/transaction-action.component.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { getTransactionActionKey } from '../../helpers/transactions.util'
-import { camelCaseToCapitalize } from '../../helpers/common.util'
-
-export default class TransactionAction extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    className: PropTypes.string,
-    transaction: PropTypes.object,
-    methodData: PropTypes.object,
-  }
-
-  state = {
-    transactionAction: '',
-  }
-
-  componentDidMount () {
-    this.getTransactionAction()
-  }
-
-  componentDidUpdate () {
-    this.getTransactionAction()
-  }
-
-  async getTransactionAction () {
-    const { transactionAction } = this.state
-    const { transaction, methodData } = this.props
-    const { data, done } = methodData
-    const { name = '' } = data
-
-    if (!done || transactionAction) {
-      return
-    }
-
-    const actionKey = await getTransactionActionKey(transaction, data)
-    const action = actionKey
-      ? this.context.t(actionKey)
-      : camelCaseToCapitalize(name)
-
-    this.setState({ transactionAction: action })
-  }
-
-  render () {
-    const { className, methodData: { done } } = this.props
-    const { transactionAction } = this.state
-
-    return (
-      <div className={classnames('transaction-action', className)}>
-        { (done && transactionAction) || '--' }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
deleted file mode 100644
index ca46d7830..000000000
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
-import { formatDate } from '../../util'
-import TransactionActivityLogIcon from './transaction-activity-log-icon'
-import { CONFIRMED_STATUS } from './transaction-activity-log.constants'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
-
-export default class TransactionActivityLog extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    activities: PropTypes.array,
-    className: PropTypes.string,
-    conversionRate: PropTypes.number,
-    inlineRetryIndex: PropTypes.number,
-    inlineCancelIndex: PropTypes.number,
-    nativeCurrency: PropTypes.string,
-    onCancel: PropTypes.func,
-    onRetry: PropTypes.func,
-    primaryTransaction: PropTypes.object,
-  }
-
-  handleActivityClick = hash => {
-    const { primaryTransaction } = this.props
-    const { metamaskNetworkId } = primaryTransaction
-
-    const prefix = prefixForNetwork(metamaskNetworkId)
-    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-
-    global.platform.openWindow({ url: etherscanUrl })
-  }
-
-  renderInlineRetry (index, activity) {
-    const { t } = this.context
-    const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props
-    const { status } = primaryTransaction
-    const { id } = activity
-
-    return status !== CONFIRMED_STATUS && index === inlineRetryIndex
-      ? (
-        <div
-          className="transaction-activity-log__action-link"
-          onClick={() => onRetry(id)}
-        >
-          { t('speedUpTransaction') }
-        </div>
-      ) : null
-  }
-
-  renderInlineCancel (index, activity) {
-    const { t } = this.context
-    const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props
-    const { status } = primaryTransaction
-    const { id } = activity
-
-    return status !== CONFIRMED_STATUS && index === inlineCancelIndex
-      ? (
-        <div
-          className="transaction-activity-log__action-link"
-          onClick={() => onCancel(id)}
-        >
-          { t('speedUpCancellation') }
-        </div>
-      ) : null
-  }
-
-  renderActivity (activity, index) {
-    const { conversionRate, nativeCurrency } = this.props
-    const { eventKey, value, timestamp, hash } = activity
-    const ethValue = index === 0
-      ? `${getValueFromWeiHex({
-        value,
-        fromCurrency: nativeCurrency,
-        toCurrency: nativeCurrency,
-        conversionRate,
-        numberOfDecimals: 6,
-      })} ${nativeCurrency}`
-      : getEthConversionFromWeiHex({
-        value,
-        fromCurrency: nativeCurrency,
-        conversionRate,
-        numberOfDecimals: 3,
-      })
-    const formattedTimestamp = formatDate(timestamp, 'T \'on\' M/d/y')
-    const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
-
-    return (
-      <div
-        key={index}
-        className="transaction-activity-log__activity"
-      >
-        <TransactionActivityLogIcon
-          className="transaction-activity-log__activity-icon"
-          eventKey={eventKey}
-        />
-        <div className="transaction-activity-log__entry-container">
-          <div
-            className="transaction-activity-log__activity-text"
-            title={activityText}
-            onClick={() => this.handleActivityClick(hash)}
-          >
-            { activityText }
-          </div>
-          { this.renderInlineRetry(index, activity) }
-          { this.renderInlineCancel(index, activity) }
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { t } = this.context
-    const { className, activities } = this.props
-
-    return (
-      <div className={classnames('transaction-activity-log', className)}>
-        <div className="transaction-activity-log__title">
-          { t('activityLog') }
-        </div>
-        <div className="transaction-activity-log__activities-container">
-          { activities.map((activity, index) => this.renderActivity(activity, index)) }
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
deleted file mode 100644
index e43229708..000000000
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { connect } from 'react-redux'
-import R from 'ramda'
-import TransactionActivityLog from './transaction-activity-log.component'
-import { conversionRateSelector, getNativeCurrency } from '../../selectors'
-import { combineTransactionHistories } from './transaction-activity-log.util'
-import {
-  TRANSACTION_RESUBMITTED_EVENT,
-  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
-} from './transaction-activity-log.constants'
-
-const matchesEventKey = matchEventKey => ({ eventKey }) => eventKey === matchEventKey
-
-const mapStateToProps = state => {
-  return {
-    conversionRate: conversionRateSelector(state),
-    nativeCurrency: getNativeCurrency(state),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const {
-    transactionGroup: {
-      transactions = [],
-      primaryTransaction,
-    } = {},
-    ...restOwnProps
-  } = ownProps
-
-  const activities = combineTransactionHistories(transactions)
-  const inlineRetryIndex = R.findLastIndex(matchesEventKey(TRANSACTION_RESUBMITTED_EVENT))(activities)
-  const inlineCancelIndex = R.findLastIndex(matchesEventKey(TRANSACTION_CANCEL_ATTEMPTED_EVENT))(activities)
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...restOwnProps,
-    activities,
-    inlineRetryIndex,
-    inlineCancelIndex,
-    primaryTransaction,
-  }
-}
-
-export default connect(mapStateToProps, null, mergeProps)(TransactionActivityLog)
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
deleted file mode 100644
index 6206a4678..000000000
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
-
-// path constants
-const STATUS_PATH = '/status'
-const GAS_PRICE_PATH = '/txParams/gasPrice'
-const GAS_LIMIT_PATH = '/txParams/gas'
-
-// op constants
-const REPLACE_OP = 'replace'
-
-import {
-  // event constants
-  TRANSACTION_CREATED_EVENT,
-  TRANSACTION_SUBMITTED_EVENT,
-  TRANSACTION_RESUBMITTED_EVENT,
-  TRANSACTION_CONFIRMED_EVENT,
-  TRANSACTION_DROPPED_EVENT,
-  TRANSACTION_UPDATED_EVENT,
-  TRANSACTION_ERRORED_EVENT,
-  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
-  TRANSACTION_CANCEL_SUCCESS_EVENT,
-  // status constants
-  SUBMITTED_STATUS,
-  CONFIRMED_STATUS,
-  DROPPED_STATUS,
-} from './transaction-activity-log.constants'
-
-import {
-  TRANSACTION_TYPE_CANCEL,
-  TRANSACTION_TYPE_RETRY,
-} from '../../../../app/scripts/controllers/transactions/enums'
-
-const eventPathsHash = {
-  [STATUS_PATH]: true,
-  [GAS_PRICE_PATH]: true,
-  [GAS_LIMIT_PATH]: true,
-}
-
-const statusHash = {
-  [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
-  [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
-  [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
-}
-
-/**
- * @name getActivities
- * @param {Object} transaction - txMeta object
- * @param {boolean} isFirstTransaction - True if the transaction is the first created transaction
- * in the list of transactions with the same nonce. If so, we use this transaction to create the
- * transactionCreated activity.
- * @returns {Array}
- */
-export function getActivities (transaction, isFirstTransaction = false) {
-  const { id, hash, history = [], txReceipt: { status } = {}, type } = transaction
-
-  let cachedGasLimit = '0x0'
-  let cachedGasPrice = '0x0'
-
-  const historyActivities = history.reduce((acc, base, index) => {
-    // First history item should be transaction creation
-    if (index === 0 && !Array.isArray(base) && base.txParams) {
-      const { time: timestamp, txParams: { value, gas = '0x0', gasPrice = '0x0' } = {} } = base
-      // The cached gas limit and gas price are used to display the gas fee in the activity log. We
-      // need to cache these values because the status update history events don't provide us with
-      // the latest gas limit and gas price.
-      cachedGasLimit = gas
-      cachedGasPrice = gasPrice
-
-      if (isFirstTransaction) {
-        return acc.concat({
-          id,
-          hash,
-          eventKey: TRANSACTION_CREATED_EVENT,
-          timestamp,
-          value,
-        })
-      }
-      // An entry in the history may be an array of more sub-entries.
-    } else if (Array.isArray(base)) {
-      const events = []
-
-      base.forEach(entry => {
-        const { op, path, value, timestamp: entryTimestamp } = entry
-        // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a
-        // timestamp, the first sub-entry in a history entry should.
-        const timestamp = entryTimestamp || base[0] && base[0].timestamp
-
-        if (path in eventPathsHash && op === REPLACE_OP) {
-          switch (path) {
-            case STATUS_PATH: {
-              const gasFee = getHexGasTotal({ gasLimit: cachedGasLimit, gasPrice: cachedGasPrice })
-
-              if (value in statusHash) {
-                let eventKey = statusHash[value]
-
-                // If the status is 'submitted', we need to determine whether the event is a
-                // transaction retry or a cancellation attempt.
-                if (value === SUBMITTED_STATUS) {
-                  if (type === TRANSACTION_TYPE_RETRY) {
-                    eventKey = TRANSACTION_RESUBMITTED_EVENT
-                  } else if (type === TRANSACTION_TYPE_CANCEL) {
-                    eventKey = TRANSACTION_CANCEL_ATTEMPTED_EVENT
-                  }
-                } else if (value === CONFIRMED_STATUS) {
-                  if (type === TRANSACTION_TYPE_CANCEL) {
-                    eventKey = TRANSACTION_CANCEL_SUCCESS_EVENT
-                  }
-                }
-
-                events.push({
-                  id,
-                  hash,
-                  eventKey,
-                  timestamp,
-                  value: gasFee,
-                })
-              }
-
-              break
-            }
-
-            // If the gas price or gas limit has been changed, we update the gasFee of the
-            // previously submitted event. These events happen when the gas limit and gas price is
-            // changed at the confirm screen.
-            case GAS_PRICE_PATH:
-            case GAS_LIMIT_PATH: {
-              const lastEvent = events[events.length - 1] || {}
-              const { lastEventKey } = lastEvent
-
-              if (path === GAS_LIMIT_PATH) {
-                cachedGasLimit = value
-              } else if (path === GAS_PRICE_PATH) {
-                cachedGasPrice = value
-              }
-
-              if (lastEventKey === TRANSACTION_SUBMITTED_EVENT ||
-                lastEventKey === TRANSACTION_RESUBMITTED_EVENT) {
-                lastEvent.value = getHexGasTotal({
-                  gasLimit: cachedGasLimit,
-                  gasPrice: cachedGasPrice,
-                })
-              }
-
-              break
-            }
-
-            default: {
-              events.push({
-                id,
-                hash,
-                eventKey: TRANSACTION_UPDATED_EVENT,
-                timestamp,
-              })
-            }
-          }
-        }
-      })
-
-      return acc.concat(events)
-    }
-
-    return acc
-  }, [])
-
-  // If txReceipt.status is '0x0', that means that an on-chain error occured for the transaction,
-  // so we add an error entry to the Activity Log.
-  return status === '0x0'
-    ? historyActivities.concat({ id, hash, eventKey: TRANSACTION_ERRORED_EVENT })
-    : historyActivities
-}
-
-/**
- * @description Removes "Transaction dropped" activities from a list of sorted activities if one of
- * the transactions has been confirmed. Typically, if multiple transactions have the same nonce,
- * once one transaction is confirmed, the rest are dropped. In this case, we don't want to show
- * multiple "Transaction dropped" activities, and instead want to show a single "Transaction
- * confirmed".
- * @param {Array} activities - List of sorted activities generated from the getActivities function.
- * @returns {Array}
- */
-function filterSortedActivities (activities) {
-  const filteredActivities = []
-  const hasConfirmedActivity = Boolean(activities.find(({ eventKey }) => (
-    eventKey === TRANSACTION_CONFIRMED_EVENT || eventKey === TRANSACTION_CANCEL_SUCCESS_EVENT
-  )))
-  let addedDroppedActivity = false
-
-  activities.forEach(activity => {
-    if (activity.eventKey === TRANSACTION_DROPPED_EVENT) {
-      if (!hasConfirmedActivity && !addedDroppedActivity) {
-        filteredActivities.push(activity)
-        addedDroppedActivity = true
-      }
-    } else {
-      filteredActivities.push(activity)
-    }
-  })
-
-  return filteredActivities
-}
-
-/**
- * Combines the histories of an array of transactions into a single array.
- * @param {Array} transactions - Array of txMeta transaction objects.
- * @returns {Array}
- */
-export function combineTransactionHistories (transactions = []) {
-  if (!transactions.length) {
-    return []
-  }
-
-  const activities = []
-
-  transactions.forEach((transaction, index) => {
-    // The first transaction should be the transaction with the earliest submittedTime. We show the
-    // 'created' and 'submitted' activities here. All subsequent transactions will use 'resubmitted'
-    // instead.
-    const transactionActivities = getActivities(transaction, index === 0)
-    activities.push(...transactionActivities)
-  })
-
-  const sortedActivities = activities.sort((a, b) => a.timestamp - b.timestamp)
-  return filterSortedActivities(sortedActivities)
-}
diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
deleted file mode 100644
index b56cbdd7f..000000000
--- a/ui/app/components/transaction-breakdown/index.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import './transaction-breakdown-row/index';
-
-.transaction-breakdown {
-  &__title {
-    border-bottom: 1px solid #d8d8d8;
-    padding-bottom: 4px;
-    text-transform: capitalize;
-  }
-
-  &__row-title {
-    text-transform: capitalize;
-  }
-
-  &__value {
-    text-align: end;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &--eth-total {
-      font-weight: 500;
-    }
-  }
-}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
deleted file mode 100644
index c19399dbb..000000000
--- a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import TransactionBreakdownRow from '../transaction-breakdown-row.component'
-import Button from '../../../button'
-
-describe('TransactionBreakdownRow Component', () => {
-  it('should render text properly', () => {
-    const wrapper = shallow(
-      <TransactionBreakdownRow
-        title="test"
-        className="test-class"
-      >
-        Test
-      </TransactionBreakdownRow>,
-      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
-    )
-
-    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
-    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
-    assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
-  })
-
-  it('should render components properly', () => {
-    const wrapper = shallow(
-      <TransactionBreakdownRow
-        title="test"
-        className="test-class"
-      >
-        <Button onClick={() => {}} >Button</Button>
-      </TransactionBreakdownRow>,
-      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
-    )
-
-    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
-    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
-    assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
-  })
-})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
deleted file mode 100644
index 26dc4c153..000000000
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import TransactionBreakdownRow from './transaction-breakdown-row'
-import CurrencyDisplay from '../currency-display'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import HexToDecimal from '../hex-to-decimal'
-import { GWEI, PRIMARY, SECONDARY } from '../../constants/common'
-
-export default class TransactionBreakdown extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    transaction: PropTypes.object,
-    className: PropTypes.string,
-    nativeCurrency: PropTypes.string.isRequired,
-    showFiat: PropTypes.bool,
-    gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }
-
-  static defaultProps = {
-    transaction: {},
-    showFiat: true,
-  }
-
-  render () {
-    const { t } = this.context
-    const { gas, gasPrice, value, className, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
-
-    return (
-      <div className={classnames('transaction-breakdown', className)}>
-        <div className="transaction-breakdown__title">
-          { t('transaction') }
-        </div>
-        <TransactionBreakdownRow title={t('amount')}>
-          <UserPreferencedCurrencyDisplay
-            className="transaction-breakdown__value"
-            type={PRIMARY}
-            value={value}
-          />
-        </TransactionBreakdownRow>
-        <TransactionBreakdownRow
-          title={`${t('gasLimit')} (${t('units')})`}
-          className="transaction-breakdown__row-title"
-        >
-          {typeof gas !== 'undefined'
-            ? <HexToDecimal
-              className="transaction-breakdown__value"
-              value={gas}
-            />
-            : '?'
-          }
-        </TransactionBreakdownRow>
-        {
-          typeof gasUsed === 'string' && (
-            <TransactionBreakdownRow
-              title={`${t('gasUsed')} (${t('units')})`}
-              className="transaction-breakdown__row-title"
-            >
-              <HexToDecimal
-                className="transaction-breakdown__value"
-                value={gasUsed}
-              />
-            </TransactionBreakdownRow>
-          )
-        }
-        <TransactionBreakdownRow title={t('gasPrice')}>
-          {typeof gasPrice !== 'undefined'
-            ? <CurrencyDisplay
-              className="transaction-breakdown__value"
-              currency={nativeCurrency}
-              denomination={GWEI}
-              value={gasPrice}
-              hideLabel
-            />
-            : '?'
-          }
-        </TransactionBreakdownRow>
-        <TransactionBreakdownRow title={t('total')}>
-          <div>
-            <UserPreferencedCurrencyDisplay
-              className="transaction-breakdown__value transaction-breakdown__value--eth-total"
-              type={PRIMARY}
-              value={totalInHex}
-            />
-            {
-              showFiat && (
-                <UserPreferencedCurrencyDisplay
-                  className="transaction-breakdown__value"
-                  type={SECONDARY}
-                  value={totalInHex}
-                />
-              )
-            }
-          </div>
-        </TransactionBreakdownRow>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js b/ui/app/components/transaction-breakdown/transaction-breakdown.container.js
deleted file mode 100644
index 3e85b9e23..000000000
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { connect } from 'react-redux'
-import TransactionBreakdown from './transaction-breakdown.component'
-import {getIsMainnet, getNativeCurrency, preferencesSelector} from '../../selectors'
-import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
-import { sumHexes } from '../../helpers/transactions.util'
-
-const mapStateToProps = (state, ownProps) => {
-  const { transaction } = ownProps
-  const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
-
-  const hexGasTotal = gasLimit && gasPrice && getHexGasTotal({ gasLimit, gasPrice }) || '0x0'
-  const totalInHex = sumHexes(hexGasTotal, value)
-
-  return {
-    nativeCurrency: getNativeCurrency(state),
-    showFiat: (isMainnet || !!showFiatInTestnets),
-    totalInHex,
-    gas,
-    gasPrice,
-    value,
-    gasUsed,
-  }
-}
-
-export default connect(mapStateToProps)(TransactionBreakdown)
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
deleted file mode 100644
index 5b55beeb4..000000000
--- a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import TransactionListItemDetails from '../transaction-list-item-details.component'
-import Button from '../../button'
-import SenderToRecipient from '../../sender-to-recipient'
-import TransactionBreakdown from '../../transaction-breakdown'
-import TransactionActivityLog from '../../transaction-activity-log'
-
-describe('TransactionListItemDetails Component', () => {
-  it('should render properly', () => {
-    const transaction = {
-      history: [],
-      id: 1,
-      status: 'confirmed',
-      txParams: {
-        from: '0x1',
-        gas: '0x5208',
-        gasPrice: '0x3b9aca00',
-        nonce: '0xa4',
-        to: '0x2',
-        value: '0x2386f26fc10000',
-      },
-    }
-
-    const transactionGroup = {
-      transactions: [transaction],
-      primaryTransaction: transaction,
-      initialTransaction: transaction,
-    }
-
-    const wrapper = shallow(
-      <TransactionListItemDetails
-        transactionGroup={transactionGroup}
-      />,
-      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
-    )
-
-    assert.ok(wrapper.hasClass('transaction-list-item-details'))
-    assert.equal(wrapper.find(Button).length, 2)
-    assert.equal(wrapper.find(SenderToRecipient).length, 1)
-    assert.equal(wrapper.find(TransactionBreakdown).length, 1)
-    assert.equal(wrapper.find(TransactionActivityLog).length, 1)
-  })
-
-  it('should render a retry button', () => {
-    const transaction = {
-      history: [],
-      id: 1,
-      status: 'confirmed',
-      txParams: {
-        from: '0x1',
-        gas: '0x5208',
-        gasPrice: '0x3b9aca00',
-        nonce: '0xa4',
-        to: '0x2',
-        value: '0x2386f26fc10000',
-      },
-    }
-
-    const transactionGroup = {
-      transactions: [transaction],
-      primaryTransaction: transaction,
-      initialTransaction: transaction,
-      nonce: '0xa4',
-      hasRetried: false,
-      hasCancelled: false,
-    }
-
-    const wrapper = shallow(
-      <TransactionListItemDetails
-        transactionGroup={transactionGroup}
-        showRetry={true}
-      />,
-      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
-    )
-
-    assert.ok(wrapper.hasClass('transaction-list-item-details'))
-    assert.equal(wrapper.find(Button).length, 3)
-  })
-})
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
deleted file mode 100644
index 3e39212d3..000000000
--- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import copyToClipboard from 'copy-to-clipboard'
-import SenderToRecipient from '../sender-to-recipient'
-import { FLAT_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
-import TransactionActivityLog from '../transaction-activity-log'
-import TransactionBreakdown from '../transaction-breakdown'
-import Button from '../button'
-import Tooltip from '../tooltip'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
-
-export default class TransactionListItemDetails extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    onCancel: PropTypes.func,
-    onRetry: PropTypes.func,
-    showCancel: PropTypes.bool,
-    showRetry: PropTypes.bool,
-    transactionGroup: PropTypes.object,
-  }
-
-  state = {
-    justCopied: false,
-  }
-
-  handleEtherscanClick = () => {
-    const { transactionGroup: { primaryTransaction } } = this.props
-    const { hash, metamaskNetworkId } = primaryTransaction
-
-    const prefix = prefixForNetwork(metamaskNetworkId)
-    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Navigation',
-        action: 'Activity Log',
-        name: 'Clicked "View on Etherscan"',
-      },
-    })
-
-    global.platform.openWindow({ url: etherscanUrl })
-  }
-
-  handleCancel = event => {
-    const { transactionGroup: { initialTransaction: { id } = {} } = {}, onCancel } = this.props
-
-    event.stopPropagation()
-    onCancel(id)
-  }
-
-  handleRetry = event => {
-    const { transactionGroup: { initialTransaction: { id } = {} } = {}, onRetry } = this.props
-
-    event.stopPropagation()
-    onRetry(id)
-  }
-
-  handleCopyTxId = () => {
-    const { transactionGroup} = this.props
-    const { primaryTransaction: transaction } = transactionGroup
-    const { hash } = transaction
-
-    this.context.metricsEvent({
-      eventOpts: {
-        category: 'Navigation',
-        action: 'Activity Log',
-        name: 'Copied Transaction ID',
-      },
-    })
-
-    this.setState({ justCopied: true }, () => {
-      copyToClipboard(hash)
-      setTimeout(() => this.setState({ justCopied: false }), 1000)
-    })
-  }
-
-  render () {
-    const { t } = this.context
-    const { justCopied } = this.state
-    const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props
-    const { primaryTransaction: transaction } = transactionGroup
-    const { txParams: { to, from } = {} } = transaction
-
-    return (
-      <div className="transaction-list-item-details">
-        <div className="transaction-list-item-details__header">
-          <div>{ t('details') }</div>
-          <div className="transaction-list-item-details__header-buttons">
-            {
-              showRetry && (
-                <Button
-                  type="raised"
-                  onClick={this.handleRetry}
-                  className="transaction-list-item-details__header-button"
-                >
-                  { t('speedUp') }
-                </Button>
-              )
-            }
-            {
-              showCancel && (
-                <Button
-                  type="raised"
-                  onClick={this.handleCancel}
-                  className="transaction-list-item-details__header-button"
-                >
-                  { t('cancel') }
-                </Button>
-              )
-            }
-            <Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}>
-              <Button
-                type="raised"
-                onClick={this.handleCopyTxId}
-                className="transaction-list-item-details__header-button"
-              >
-                <img
-                  className="transaction-list-item-details__header-button__copy-icon"
-                  src="/images/copy-to-clipboard.svg"
-                />
-              </Button>
-            </Tooltip>
-            <Tooltip title={t('viewOnEtherscan')}>
-              <Button
-                type="raised"
-                onClick={this.handleEtherscanClick}
-                className="transaction-list-item-details__header-button"
-                >
-                <img src="/images/arrow-popout.svg" />
-              </Button>
-            </Tooltip>
-          </div>
-        </div>
-        <div className="transaction-list-item-details__body">
-          <div className="transaction-list-item-details__sender-to-recipient-container">
-            <SenderToRecipient
-              variant={FLAT_VARIANT}
-              addressOnly
-              recipientAddress={to}
-              senderAddress={from}
-              onRecipientClick={() => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Navigation',
-                    action: 'Activity Log',
-                    name: 'Copied "To" Address',
-                  },
-                })
-              }}
-              onSenderClick={() => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Navigation',
-                    action: 'Activity Log',
-                    name: 'Copied "From" Address',
-                  },
-                })
-              }}
-            />
-          </div>
-          <div className="transaction-list-item-details__cards-container">
-            <TransactionBreakdown
-              transaction={transaction}
-              className="transaction-list-item-details__transaction-breakdown"
-            />
-            <TransactionActivityLog
-              transactionGroup={transactionGroup}
-              className="transaction-list-item-details__transaction-activity-log"
-              onCancel={onCancel}
-              onRetry={onRetry}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
deleted file mode 100644
index e843fe1a0..000000000
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Identicon from '../identicon'
-import TransactionStatus from '../transaction-status'
-import TransactionAction from '../transaction-action'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import TokenCurrencyDisplay from '../token-currency-display'
-import TransactionListItemDetails from '../transaction-list-item-details'
-import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
-import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
-import { PRIMARY, SECONDARY } from '../../constants/common'
-import { getStatusKey } from '../../helpers/transactions.util'
-
-export default class TransactionListItem extends PureComponent {
-  static propTypes = {
-    assetImages: PropTypes.object,
-    history: PropTypes.object,
-    methodData: PropTypes.object,
-    nonceAndDate: PropTypes.string,
-    primaryTransaction: PropTypes.object,
-    retryTransaction: PropTypes.func,
-    setSelectedToken: PropTypes.func,
-    showCancelModal: PropTypes.func,
-    showCancel: PropTypes.bool,
-    showRetry: PropTypes.bool,
-    showFiat: PropTypes.bool,
-    token: PropTypes.object,
-    tokenData: PropTypes.object,
-    transaction: PropTypes.object,
-    transactionGroup: PropTypes.object,
-    value: PropTypes.string,
-    fetchBasicGasAndTimeEstimates: PropTypes.func,
-    fetchGasEstimates: PropTypes.func,
-  }
-
-  static defaultProps = {
-    showFiat: true,
-  }
-
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-  }
-
-  state = {
-    showTransactionDetails: false,
-  }
-
-  handleClick = () => {
-    const {
-      transaction,
-      history,
-    } = this.props
-    const { id, status } = transaction
-    const { showTransactionDetails } = this.state
-
-    if (status === UNAPPROVED_STATUS) {
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
-      return
-    }
-
-    if (!showTransactionDetails) {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Navigation',
-          action: 'Home',
-          name: 'Expand Transaction',
-        },
-      })
-    }
-
-    this.setState({ showTransactionDetails: !showTransactionDetails })
-  }
-
-  handleCancel = id => {
-    const {
-      primaryTransaction: { txParams: { gasPrice } } = {},
-      transaction: { id: initialTransactionId },
-      showCancelModal,
-    } = this.props
-
-    const cancelId = id || initialTransactionId
-    showCancelModal(cancelId, gasPrice)
-  }
-
-  /**
-   * @name handleRetry
-   * @description Resubmits a transaction. Retrying a transaction within a list of transactions with
-   * the same nonce requires keeping the original value while increasing the gas price of the latest
-   * transaction.
-   * @param {number} id - Transaction id
-   */
-  handleRetry = id => {
-    const {
-      primaryTransaction: { txParams: { gasPrice } } = {},
-      transaction: { txParams: { to } = {}, id: initialTransactionId },
-      methodData: { name } = {},
-      setSelectedToken,
-      retryTransaction,
-      fetchBasicGasAndTimeEstimates,
-      fetchGasEstimates,
-    } = this.props
-
-    if (name === TOKEN_METHOD_TRANSFER) {
-      setSelectedToken(to)
-    }
-
-    const retryId = id || initialTransactionId
-
-    return fetchBasicGasAndTimeEstimates()
-      .then(basicEstimates => fetchGasEstimates(basicEstimates.blockTime))
-      .then(retryTransaction(retryId, gasPrice))
-  }
-
-  renderPrimaryCurrency () {
-    const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props
-
-    return token
-      ? (
-        <TokenCurrencyDisplay
-          className="transaction-list-item__amount transaction-list-item__amount--primary"
-          token={token}
-          transactionData={data}
-          prefix="-"
-        />
-      ) : (
-        <UserPreferencedCurrencyDisplay
-          className="transaction-list-item__amount transaction-list-item__amount--primary"
-          value={value}
-          type={PRIMARY}
-          prefix="-"
-        />
-      )
-  }
-
-  renderSecondaryCurrency () {
-    const { token, value, showFiat } = this.props
-
-    return token || !showFiat
-      ? null
-      : (
-        <UserPreferencedCurrencyDisplay
-          className="transaction-list-item__amount transaction-list-item__amount--secondary"
-          value={value}
-          prefix="-"
-          type={SECONDARY}
-        />
-      )
-  }
-
-  render () {
-    const {
-      assetImages,
-      transaction,
-      methodData,
-      nonceAndDate,
-      primaryTransaction,
-      showCancel,
-      showRetry,
-      tokenData,
-      transactionGroup,
-    } = this.props
-    const { txParams = {} } = transaction
-    const { showTransactionDetails } = this.state
-    const toAddress = tokenData
-      ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
-      : txParams.to
-
-    return (
-      <div className="transaction-list-item">
-        <div
-          className="transaction-list-item__grid"
-          onClick={this.handleClick}
-        >
-          <Identicon
-            className="transaction-list-item__identicon"
-            address={toAddress}
-            diameter={34}
-            image={assetImages[toAddress]}
-          />
-          <TransactionAction
-            transaction={transaction}
-            methodData={methodData}
-            className="transaction-list-item__action"
-          />
-          <div
-            className="transaction-list-item__nonce"
-            title={nonceAndDate}
-          >
-            { nonceAndDate }
-          </div>
-          <TransactionStatus
-            className="transaction-list-item__status"
-            statusKey={getStatusKey(primaryTransaction)}
-            title={(
-              (primaryTransaction.err && primaryTransaction.err.rpc)
-                ? primaryTransaction.err.rpc.message
-                : primaryTransaction.err && primaryTransaction.err.message
-            )}
-          />
-          { this.renderPrimaryCurrency() }
-          { this.renderSecondaryCurrency() }
-        </div>
-        <div className={classnames('transaction-list-item__expander', {
-          'transaction-list-item__expander--show': showTransactionDetails,
-        })}>
-          {
-            showTransactionDetails && (
-              <div className="transaction-list-item__details-container">
-                <TransactionListItemDetails
-                  transactionGroup={transactionGroup}
-                  onRetry={this.handleRetry}
-                  showRetry={showRetry && methodData.done}
-                  onCancel={this.handleCancel}
-                  showCancel={showCancel}
-                />
-              </div>
-            )
-          }
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
deleted file mode 100644
index 93a82849e..000000000
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import withMethodData from '../../higher-order-components/with-method-data'
-import TransactionListItem from './transaction-list-item.component'
-import { setSelectedToken, showModal, showSidebar, addKnownMethodData } from '../../actions'
-import { hexToDecimal } from '../../helpers/conversions.util'
-import { getTokenData } from '../../helpers/transactions.util'
-import { increaseLastGasPrice } from '../../helpers/confirm-transaction/util'
-import { formatDate } from '../../util'
-import {
-  fetchBasicGasAndTimeEstimates,
-  fetchGasEstimates,
-  setCustomGasPriceForRetry,
-  setCustomGasLimit,
-} from '../../ducks/gas.duck'
-import {getIsMainnet, preferencesSelector} from '../../selectors'
-
-const mapStateToProps = state => {
-  const { metamask: { knownMethodData } } = state
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    knownMethodData,
-    showFiat: (isMainnet || !!showFiatInTestnets),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
-    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
-    setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
-    addKnownMethodData: (fourBytePrefix, methodData) => dispatch(addKnownMethodData(fourBytePrefix, methodData)),
-    retryTransaction: (transaction, gasPrice) => {
-      dispatch(setCustomGasPriceForRetry(gasPrice || transaction.txParams.gasPrice))
-      dispatch(setCustomGasLimit(transaction.txParams.gas))
-      dispatch(showSidebar({
-        transitionName: 'sidebar-left',
-        type: 'customize-gas',
-        props: { transaction },
-      }))
-    },
-    showCancelModal: (transactionId, originalGasPrice) => {
-      return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
-    },
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps
-  const { retryTransaction, ...restDispatchProps } = dispatchProps
-  const { txParams: { nonce, data } = {}, time } = initialTransaction
-  const { txParams: { value } = {} } = primaryTransaction
-
-  const tokenData = data && getTokenData(data)
-  const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
-
-  return {
-    ...stateProps,
-    ...restDispatchProps,
-    ...ownProps,
-    value,
-    nonceAndDate,
-    tokenData,
-    transaction: initialTransaction,
-    primaryTransaction,
-    retryTransaction: (transactionId, gasPrice) => {
-      const { transactionGroup: { transactions = [] } } = ownProps
-      const transaction = transactions.find(tx => tx.id === transactionId) || {}
-      const increasedGasPrice = increaseLastGasPrice(gasPrice)
-      retryTransaction(transaction, increasedGasPrice)
-    },
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withMethodData,
-)(TransactionListItem)
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
deleted file mode 100644
index ddab3b290..000000000
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import TransactionListItem from '../transaction-list-item'
-import ShapeShiftTransactionListItem from '../shift-list-item'
-import { TRANSACTION_TYPE_SHAPESHIFT } from '../../constants/transactions'
-
-export default class TransactionList extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static defaultProps = {
-    pendingTransactions: [],
-    completedTransactions: [],
-  }
-
-  static propTypes = {
-    pendingTransactions: PropTypes.array,
-    completedTransactions: PropTypes.array,
-    selectedToken: PropTypes.object,
-    updateNetworkNonce: PropTypes.func,
-    assetImages: PropTypes.object,
-  }
-
-  componentDidMount () {
-    this.props.updateNetworkNonce()
-  }
-
-  componentDidUpdate (prevProps) {
-    const { pendingTransactions: prevPendingTransactions = [] } = prevProps
-    const { pendingTransactions = [], updateNetworkNonce } = this.props
-
-    if (pendingTransactions.length > prevPendingTransactions.length) {
-      updateNetworkNonce()
-    }
-  }
-
-  shouldShowRetry = (transactionGroup, isEarliestNonce) => {
-    const { transactions = [], hasRetried } = transactionGroup
-    const [earliestTransaction = {}] = transactions
-    const { submittedTime } = earliestTransaction
-    return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
-  }
-
-  shouldShowCancel (transactionGroup) {
-    const { hasCancelled } = transactionGroup
-    return !hasCancelled
-  }
-
-  renderTransactions () {
-    const { t } = this.context
-    const { pendingTransactions = [], completedTransactions = [] } = this.props
-    const pendingLength = pendingTransactions.length
-
-    return (
-      <div className="transaction-list__transactions">
-        {
-          pendingLength > 0 && (
-            <div className="transaction-list__pending-transactions">
-              <div className="transaction-list__header">
-                { `${t('queue')} (${pendingTransactions.length})` }
-              </div>
-              {
-                pendingTransactions.map((transactionGroup, index) => (
-                  this.renderTransaction(transactionGroup, index, true)
-                ))
-              }
-            </div>
-          )
-        }
-        <div className="transaction-list__completed-transactions">
-          <div className="transaction-list__header">
-            { t('history') }
-          </div>
-          {
-            completedTransactions.length > 0
-              ? completedTransactions.map((transactionGroup, index) => (
-                  this.renderTransaction(transactionGroup, index)
-                ))
-              : this.renderEmpty()
-          }
-        </div>
-      </div>
-    )
-  }
-
-  renderTransaction (transactionGroup, index, isPendingTx = false) {
-    const { selectedToken, assetImages } = this.props
-    const { transactions = [] } = transactionGroup
-
-    return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT
-      ? (
-        <ShapeShiftTransactionListItem
-          { ...transactions[0] }
-          key={`shapeshift${index}`}
-        />
-      ) : (
-        <TransactionListItem
-          transactionGroup={transactionGroup}
-          key={`${transactionGroup.nonce}:${index}`}
-          showRetry={isPendingTx && this.shouldShowRetry(transactionGroup, index === 0)}
-          showCancel={isPendingTx && this.shouldShowCancel(transactionGroup)}
-          token={selectedToken}
-          assetImages={assetImages}
-        />
-      )
-  }
-
-  renderEmpty () {
-    return (
-      <div className="transaction-list__empty">
-        <div className="transaction-list__empty-text">
-          { this.context.t('noTransactions') }
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    return (
-      <div className="transaction-list">
-        { this.renderTransactions() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
deleted file mode 100644
index e70ca15c5..000000000
--- a/ui/app/components/transaction-list/transaction-list.container.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import TransactionList from './transaction-list.component'
-import {
-  nonceSortedCompletedTransactionsSelector,
-  nonceSortedPendingTransactionsSelector,
-} from '../../selectors/transactions'
-import { getSelectedAddress, getAssetImages } from '../../selectors'
-import { selectedTokenSelector } from '../../selectors/tokens'
-import { updateNetworkNonce } from '../../actions'
-
-const mapStateToProps = state => {
-  return {
-    completedTransactions: nonceSortedCompletedTransactionsSelector(state),
-    pendingTransactions: nonceSortedPendingTransactionsSelector(state),
-    selectedToken: selectedTokenSelector(state),
-    selectedAddress: getSelectedAddress(state),
-    assetImages: getAssetImages(state),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    updateNetworkNonce: address => dispatch(updateNetworkNonce(address)),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { selectedAddress, ...restStateProps } = stateProps
-  const { updateNetworkNonce, ...restDispatchProps } = dispatchProps
-
-  return {
-    ...restStateProps,
-    ...restDispatchProps,
-    ...ownProps,
-    updateNetworkNonce: () => updateNetworkNonce(selectedAddress),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(TransactionList)
diff --git a/ui/app/components/transaction-status/tests/transaction-status.component.test.js b/ui/app/components/transaction-status/tests/transaction-status.component.test.js
deleted file mode 100644
index f4ddc9206..000000000
--- a/ui/app/components/transaction-status/tests/transaction-status.component.test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { mount } from 'enzyme'
-import TransactionStatus from '../transaction-status.component'
-import Tooltip from '../../tooltip-v2'
-
-describe('TransactionStatus Component', () => {
-  it('should render APPROVED properly', () => {
-    const wrapper = mount(
-      <TransactionStatus
-        statusKey="approved"
-        title="test-title"
-      />,
-      { context: { t: str => str.toUpperCase() } }
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.text(), 'APPROVED')
-    assert.equal(wrapper.find(Tooltip).props().title, 'test-title')
-  })
-
-  it('should render SUBMITTED properly', () => {
-    const wrapper = mount(
-      <TransactionStatus
-        statusKey="submitted"
-      />,
-      { context: { t: str => str.toUpperCase() } }
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.text(), 'PENDING')
-  })
-})
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
deleted file mode 100644
index 28544d2cd..000000000
--- a/ui/app/components/transaction-status/transaction-status.component.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Tooltip from '../tooltip-v2'
-import {
-  UNAPPROVED_STATUS,
-  REJECTED_STATUS,
-  APPROVED_STATUS,
-  SIGNED_STATUS,
-  SUBMITTED_STATUS,
-  CONFIRMED_STATUS,
-  FAILED_STATUS,
-  DROPPED_STATUS,
-  CANCELLED_STATUS,
-} from '../../constants/transactions'
-
-const statusToClassNameHash = {
-  [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
-  [REJECTED_STATUS]: 'transaction-status--rejected',
-  [APPROVED_STATUS]: 'transaction-status--approved',
-  [SIGNED_STATUS]: 'transaction-status--signed',
-  [SUBMITTED_STATUS]: 'transaction-status--submitted',
-  [CONFIRMED_STATUS]: 'transaction-status--confirmed',
-  [FAILED_STATUS]: 'transaction-status--failed',
-  [DROPPED_STATUS]: 'transaction-status--dropped',
-  [CANCELLED_STATUS]: 'transaction-status--failed',
-}
-
-const statusToTextHash = {
-  [SUBMITTED_STATUS]: 'pending',
-}
-
-export default class TransactionStatus extends PureComponent {
-  static defaultProps = {
-    title: null,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    statusKey: PropTypes.string,
-    className: PropTypes.string,
-    title: PropTypes.string,
-  }
-
-  render () {
-    const { className, statusKey, title } = this.props
-    const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
-
-    return (
-      <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
-        <Tooltip
-          position="top"
-          title={title}
-        >
-          { statusText }
-        </Tooltip>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
deleted file mode 100644
index efc987371..000000000
--- a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import TokenBalance from '../../token-balance'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { SEND_ROUTE } from '../../../routes'
-import TransactionViewBalance from '../transaction-view-balance.component'
-
-const propsMethodSpies = {
-  showDepositModal: sinon.spy(),
-}
-
-const historySpies = {
-  push: sinon.spy(),
-}
-
-const t = (str1, str2) => str2 ? str1 + str2 : str1
-const metricsEvent = () => ({})
-
-describe('TransactionViewBalance Component', () => {
-  afterEach(() => {
-    propsMethodSpies.showDepositModal.resetHistory()
-    historySpies.push.resetHistory()
-  })
-
-  it('should render ETH balance properly', () => {
-    const wrapper = shallow(<TransactionViewBalance
-      showDepositModal={propsMethodSpies.showDepositModal}
-      history={historySpies}
-      network="3"
-      ethBalance={123}
-      fiatBalance={456}
-      currentCurrency="usd"
-    />, { context: { t, metricsEvent } })
-
-    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
-    assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
-    assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
-
-    const buttons = wrapper.find('.transaction-view-balance__buttons')
-    assert.equal(propsMethodSpies.showDepositModal.callCount, 0)
-    buttons.childAt(0).simulate('click')
-    assert.equal(propsMethodSpies.showDepositModal.callCount, 1)
-    assert.equal(historySpies.push.callCount, 0)
-    buttons.childAt(1).simulate('click')
-    assert.equal(historySpies.push.callCount, 1)
-    assert.equal(historySpies.push.getCall(0).args[0], SEND_ROUTE)
-  })
-
-  it('should render token balance properly', () => {
-    const token = {
-      address: '0x35865238f0bec9d5ce6abff0fdaebe7b853dfcc5',
-      decimals: '2',
-      symbol: 'ABC',
-    }
-
-    const wrapper = shallow(<TransactionViewBalance
-      showDepositModal={propsMethodSpies.showDepositModal}
-      history={historySpies}
-      network="3"
-      ethBalance={123}
-      fiatBalance={456}
-      currentCurrency="usd"
-      selectedToken={token}
-    />, { context: { t } })
-
-    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
-    assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)
-    assert.equal(wrapper.find(TokenBalance).length, 1)
-  })
-})
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
deleted file mode 100644
index a18e959b5..000000000
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Button from '../button'
-import Identicon from '../identicon'
-import TokenBalance from '../token-balance'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { SEND_ROUTE } from '../../routes'
-import { PRIMARY, SECONDARY } from '../../constants/common'
-import Tooltip from '../tooltip-v2'
-
-export default class TransactionViewBalance extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    showDepositModal: PropTypes.func,
-    selectedToken: PropTypes.object,
-    history: PropTypes.object,
-    network: PropTypes.string,
-    balance: PropTypes.string,
-    assetImage: PropTypes.string,
-    balanceIsCached: PropTypes.bool,
-    showFiat: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    showFiat: true,
-  }
-
-  renderBalance () {
-    const { selectedToken, balance, balanceIsCached, showFiat } = this.props
-
-    return selectedToken
-      ? (
-        <div className="transaction-view-balance__balance">
-          <TokenBalance
-            token={selectedToken}
-            withSymbol
-            className="transaction-view-balance__primary-balance"
-          />
-        </div>
-      ) : (
-          <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}>
-            <div className="transaction-view-balance__balance">
-                <div className="transaction-view-balance__primary-container">
-                  <UserPreferencedCurrencyDisplay
-                    className={classnames('transaction-view-balance__primary-balance', {
-                      'transaction-view-balance__cached-balance': balanceIsCached,
-                    })}
-                    value={balance}
-                    type={PRIMARY}
-                    ethNumberOfDecimals={4}
-                    hideTitle={true}
-                  />
-                  {
-                    balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
-                  }
-                </div>
-                {
-                  showFiat && (
-                    <UserPreferencedCurrencyDisplay
-                      className={classnames({
-                        'transaction-view-balance__cached-secondary-balance': balanceIsCached,
-                        'transaction-view-balance__secondary-balance': !balanceIsCached,
-                      })}
-                      value={balance}
-                      type={SECONDARY}
-                      ethNumberOfDecimals={4}
-                      hideTitle={true}
-                    />
-                  )
-                }
-            </div>
-          </Tooltip>
-      )
-  }
-
-  renderButtons () {
-    const { t, metricsEvent } = this.context
-    const { selectedToken, showDepositModal, history } = this.props
-
-    return (
-      <div className="transaction-view-balance__buttons">
-        {
-          !selectedToken && (
-            <Button
-              type="primary"
-              className="transaction-view-balance__button"
-              onClick={() => {
-                metricsEvent({
-                  eventOpts: {
-                    category: 'Navigation',
-                    action: 'Home',
-                    name: 'Clicked Deposit',
-                  },
-                })
-                showDepositModal()
-              }}
-            >
-              { t('deposit') }
-            </Button>
-          )
-        }
-        <Button
-          type="primary"
-          className="transaction-view-balance__button"
-          onClick={() => {
-            metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Home',
-                name: 'Clicked Send',
-              },
-            })
-            history.push(SEND_ROUTE)
-          }}
-        >
-          { t('send') }
-        </Button>
-      </div>
-    )
-  }
-
-  render () {
-    const { network, selectedToken, assetImage } = this.props
-
-    return (
-      <div className="transaction-view-balance">
-        <div className="transaction-view-balance__balance-container">
-          <Identicon
-            diameter={50}
-            address={selectedToken && selectedToken.address}
-            network={network}
-            image={assetImage}
-          />
-          { this.renderBalance() }
-        </div>
-        { this.renderButtons() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
deleted file mode 100644
index df6d287eb..000000000
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import TransactionViewBalance from './transaction-view-balance.component'
-import {
-  getSelectedToken,
-  getSelectedAddress,
-  getNativeCurrency,
-  getSelectedTokenAssetImage,
-  getMetaMaskAccounts,
-  isBalanceCached,
-  preferencesSelector,
-  getIsMainnet,
-} from '../../selectors'
-import { showModal } from '../../actions'
-
-const mapStateToProps = state => {
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-  const selectedAddress = getSelectedAddress(state)
-  const { metamask: { network } } = state
-  const accounts = getMetaMaskAccounts(state)
-  const account = accounts[selectedAddress]
-  const { balance } = account
-
-  return {
-    selectedToken: getSelectedToken(state),
-    network,
-    balance,
-    nativeCurrency: getNativeCurrency(state),
-    assetImage: getSelectedTokenAssetImage(state),
-    balanceIsCached: isBalanceCached(state),
-    showFiat: (isMainnet || !!showFiatInTestnets),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    showDepositModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(TransactionViewBalance)
diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js
deleted file mode 100644
index 6dc993b87..000000000
--- a/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux'
-import UiMigrationAnnouncement from './ui-migration-annoucement.component'
-import { setCompletedUiMigration } from '../../actions'
-
-const mapStateToProps = (state) => {
-  const shouldShowAnnouncement = !state.metamask.completedUiMigration
-
-  return {
-    shouldShowAnnouncement,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onClose () {
-      dispatch(setCompletedUiMigration())
-    },
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement)
diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
new file mode 100644
index 000000000..8abe1ab18
--- /dev/null
+++ b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../app/send/account-list-item/account-list-item.component'
+
+export default class AccountDropdownMini extends PureComponent {
+  static propTypes = {
+    accounts: PropTypes.array.isRequired,
+    closeDropdown: PropTypes.func,
+    disabled: PropTypes.bool,
+    dropdownOpen: PropTypes.bool,
+    onSelect: PropTypes.func,
+    openDropdown: PropTypes.func,
+    selectedAccount: PropTypes.object.isRequired,
+  }
+
+  static defaultProps = {
+    closeDropdown: () => {},
+    disabled: false,
+    dropdownOpen: false,
+    onSelect: () => {},
+    openDropdown: () => {},
+  }
+
+  getListItemIcon (currentAccount, selectedAccount) {
+    return currentAccount.address === selectedAccount.address && (
+      <i
+        className="fa fa-check fa-lg"
+        style={{ color: '#02c9b1' }}
+      />
+    )
+  }
+
+  renderDropdown () {
+    const { accounts, selectedAccount, closeDropdown, onSelect } = this.props
+
+    return (
+      <div>
+        <div
+          className="account-dropdown-mini__close-area"
+          onClick={closeDropdown}
+        />
+        <div className="account-dropdown-mini__list">
+          {
+            accounts.map(account => (
+              <AccountListItem
+                key={account.address}
+                account={account}
+                displayBalance={false}
+                displayAddress={false}
+                handleClick={() => {
+                  onSelect(account)
+                  closeDropdown()
+                }}
+                icon={this.getListItemIcon(account, selectedAccount)}
+              />
+            ))
+          }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props
+
+    return (
+      <div className="account-dropdown-mini">
+        <AccountListItem
+          account={selectedAccount}
+          handleClick={() => !disabled && openDropdown()}
+          displayBalance={false}
+          displayAddress={false}
+          icon={
+            !disabled && <i
+              className="fa fa-caret-down fa-lg"
+              style={{ color: '#dedede' }}
+            />
+          }
+        />
+        { !disabled && dropdownOpen && this.renderDropdown() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/account-dropdown-mini/index.js b/ui/app/components/ui/account-dropdown-mini/index.js
index cb0839e72..cb0839e72 100644
--- a/ui/app/components/account-dropdown-mini/index.js
+++ b/ui/app/components/ui/account-dropdown-mini/index.js
diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
new file mode 100644
index 000000000..bc74ceb3c
--- /dev/null
+++ b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import AccountDropdownMini from '../account-dropdown-mini.component'
+import AccountListItem from '../../../app/send/account-list-item/account-list-item.component'
+
+describe('AccountDropdownMini', () => {
+  it('should render an account with an icon', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 1)
+    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
+    assert.equal(accountListItemProps.account.address, '0x1')
+    const iconProps = accountListItemProps.icon.props
+    assert.equal(iconProps.className, 'fa fa-caret-down fa-lg')
+  })
+
+  it('should render a list of accounts', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+        dropdownOpen={true}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 4)
+  })
+
+  it('should render a single account when disabled', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+        dropdownOpen={false}
+        disabled={true}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 1)
+    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
+    assert.equal(accountListItemProps.account.address, '0x1')
+    assert.equal(accountListItemProps.icon, false)
+  })
+})
diff --git a/ui/app/components/alert/index.js b/ui/app/components/ui/alert/index.js
index 5620d847a..5620d847a 100644
--- a/ui/app/components/alert/index.js
+++ b/ui/app/components/ui/alert/index.js
diff --git a/ui/app/components/ui/balance/balance.component.js b/ui/app/components/ui/balance/balance.component.js
new file mode 100644
index 000000000..9a6f71ce5
--- /dev/null
+++ b/ui/app/components/ui/balance/balance.component.js
@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TokenBalance from '../token-balance'
+import Identicon from '../identicon'
+import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+import { formatBalance } from '../../../helpers/utils/util'
+
+export default class Balance extends PureComponent {
+  static propTypes = {
+    account: PropTypes.object,
+    assetImages: PropTypes.object,
+    nativeCurrency: PropTypes.string,
+    needsParse: PropTypes.bool,
+    network: PropTypes.string,
+    showFiat: PropTypes.bool,
+    token: PropTypes.object,
+  }
+
+  static defaultProps = {
+    needsParse: true,
+    showFiat: true,
+  }
+
+  renderBalance () {
+    const { account, nativeCurrency, needsParse, showFiat } = this.props
+    const balanceValue = account && account.balance
+    const formattedBalance = balanceValue
+      ? formatBalance(balanceValue, 6, needsParse, nativeCurrency)
+      : '...'
+
+    if (formattedBalance === 'None' || formattedBalance === '...') {
+      return (
+        <div className="flex-column balance-display">
+          <div className="token-amount">
+            { formattedBalance }
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex-column balance-display">
+        <UserPreferencedCurrencyDisplay
+          className="token-amount"
+          value={balanceValue}
+          type={PRIMARY}
+          ethNumberOfDecimals={4}
+        />
+        {
+          showFiat && (
+            <UserPreferencedCurrencyDisplay
+              value={balanceValue}
+              type={SECONDARY}
+              ethNumberOfDecimals={4}
+            />
+          )
+        }
+      </div>
+    )
+  }
+
+  renderTokenBalance () {
+    const { token } = this.props
+
+    return (
+      <div className="flex-column balance-display">
+        <div className="token-amount">
+          <TokenBalance token={token} />
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { token, network, assetImages } = this.props
+    const address = token && token.address
+    const image = assetImages && address ? assetImages[token.address] : undefined
+
+    return (
+      <div className="balance-container">
+        <Identicon
+          diameter={50}
+          address={address}
+          network={network}
+          image={image}
+        />
+        { token ? this.renderTokenBalance() : this.renderBalance() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/ui/balance/balance.container.js b/ui/app/components/ui/balance/balance.container.js
new file mode 100644
index 000000000..2ad5c5ad8
--- /dev/null
+++ b/ui/app/components/ui/balance/balance.container.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux'
+import Balance from './balance.component'
+import {
+  getNativeCurrency,
+  getAssetImages,
+  conversionRateSelector,
+  getCurrentCurrency,
+  getMetaMaskAccounts,
+  getIsMainnet,
+  preferencesSelector,
+} from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+  const accounts = getMetaMaskAccounts(state)
+  const network = state.metamask.network
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const account = accounts[selectedAddress]
+
+  return {
+    account,
+    network,
+    nativeCurrency: getNativeCurrency(state),
+    conversionRate: conversionRateSelector(state),
+    currentCurrency: getCurrentCurrency(state),
+    assetImages: getAssetImages(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
+  }
+}
+
+export default connect(mapStateToProps)(Balance)
diff --git a/ui/app/components/balance/index.js b/ui/app/components/ui/balance/index.js
index f8fb9ea19..f8fb9ea19 100644
--- a/ui/app/components/balance/index.js
+++ b/ui/app/components/ui/balance/index.js
diff --git a/ui/app/components/breadcrumbs/breadcrumbs.component.js b/ui/app/components/ui/breadcrumbs/breadcrumbs.component.js
index 6644836db..6644836db 100644
--- a/ui/app/components/breadcrumbs/breadcrumbs.component.js
+++ b/ui/app/components/ui/breadcrumbs/breadcrumbs.component.js
diff --git a/ui/app/components/breadcrumbs/index.js b/ui/app/components/ui/breadcrumbs/index.js
index 07a11574f..07a11574f 100644
--- a/ui/app/components/breadcrumbs/index.js
+++ b/ui/app/components/ui/breadcrumbs/index.js
diff --git a/ui/app/components/breadcrumbs/index.scss b/ui/app/components/ui/breadcrumbs/index.scss
index e23aa7970..e23aa7970 100644
--- a/ui/app/components/breadcrumbs/index.scss
+++ b/ui/app/components/ui/breadcrumbs/index.scss
diff --git a/ui/app/components/breadcrumbs/tests/breadcrumbs.component.test.js b/ui/app/components/ui/breadcrumbs/tests/breadcrumbs.component.test.js
index 5013c5b60..5013c5b60 100644
--- a/ui/app/components/breadcrumbs/tests/breadcrumbs.component.test.js
+++ b/ui/app/components/ui/breadcrumbs/tests/breadcrumbs.component.test.js
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/ui/button-group/button-group.component.js
index 17a281030..17a281030 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/ui/button-group/button-group.component.js
diff --git a/ui/app/components/ui/button-group/button-group.stories.js b/ui/app/components/ui/button-group/button-group.stories.js
new file mode 100644
index 000000000..c58c628b3
--- /dev/null
+++ b/ui/app/components/ui/button-group/button-group.stories.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import ButtonGroup from '.'
+import Button from '../button'
+import { text, boolean } from '@storybook/addon-knobs/react'
+
+storiesOf('ButtonGroup', module)
+  .add('with Buttons', () =>
+    <ButtonGroup
+      style={{ width: '300px' }}
+      disabled={boolean('Disabled', false)}
+      defaultActiveButtonIndex={1}
+    >
+      <Button
+        onClick={action('cheap')}
+      >
+        {text('Button1', 'Cheap')}
+      </Button>
+      <Button
+        onClick={action('average')}
+      >
+        {text('Button2', 'Average')}
+      </Button>
+      <Button
+        onClick={action('fast')}
+      >
+        {text('Button3', 'Fast')}
+      </Button>
+    </ButtonGroup>
+  )
+  .add('with a disabled Button', () =>
+    <ButtonGroup
+      style={{ width: '300px' }}
+      disabled={boolean('Disabled', false)}
+    >
+      <Button
+        onClick={action('enabled')}
+      >
+        {text('Button1', 'Enabled')}
+      </Button>
+      <Button
+        onClick={action('disabled')}
+        disabled
+      >
+        {text('Button2', 'Disabled')}
+      </Button>
+    </ButtonGroup>
+  )
diff --git a/ui/app/components/button-group/index.js b/ui/app/components/ui/button-group/index.js
index df470bd57..df470bd57 100644
--- a/ui/app/components/button-group/index.js
+++ b/ui/app/components/ui/button-group/index.js
diff --git a/ui/app/components/button-group/index.scss b/ui/app/components/ui/button-group/index.scss
index 29713c75b..29713c75b 100644
--- a/ui/app/components/button-group/index.scss
+++ b/ui/app/components/ui/button-group/index.scss
diff --git a/ui/app/components/button-group/tests/button-group-component.test.js b/ui/app/components/ui/button-group/tests/button-group-component.test.js
index 0bece90d6..0bece90d6 100644
--- a/ui/app/components/button-group/tests/button-group-component.test.js
+++ b/ui/app/components/ui/button-group/tests/button-group-component.test.js
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/ui/button/button.component.js
index 5d19219b4..5d19219b4 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/ui/button/button.component.js
diff --git a/ui/app/components/ui/button/button.stories.js b/ui/app/components/ui/button/button.stories.js
new file mode 100644
index 000000000..667824a47
--- /dev/null
+++ b/ui/app/components/ui/button/button.stories.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button from '.'
+import { text } from '@storybook/addon-knobs/react'
+
+storiesOf('Button', module)
+  .add('primary', () =>
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
+  .add('secondary', () =>
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
+  .add('default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large primary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
diff --git a/ui/app/components/button/index.js b/ui/app/components/ui/button/index.js
index 33ae95ae2..33ae95ae2 100644
--- a/ui/app/components/button/index.js
+++ b/ui/app/components/ui/button/index.js
diff --git a/ui/app/components/card/card.component.js b/ui/app/components/ui/card/card.component.js
index bb7241da1..bb7241da1 100644
--- a/ui/app/components/card/card.component.js
+++ b/ui/app/components/ui/card/card.component.js
diff --git a/ui/app/components/card/index.js b/ui/app/components/ui/card/index.js
index c3ca6e3f4..c3ca6e3f4 100644
--- a/ui/app/components/card/index.js
+++ b/ui/app/components/ui/card/index.js
diff --git a/ui/app/components/card/index.scss b/ui/app/components/ui/card/index.scss
index bde54a15e..bde54a15e 100644
--- a/ui/app/components/card/index.scss
+++ b/ui/app/components/ui/card/index.scss
diff --git a/ui/app/components/card/tests/card.component.test.js b/ui/app/components/ui/card/tests/card.component.test.js
index cea05033f..cea05033f 100644
--- a/ui/app/components/card/tests/card.component.test.js
+++ b/ui/app/components/ui/card/tests/card.component.test.js
diff --git a/ui/app/components/copyButton.js b/ui/app/components/ui/copyButton.js
index a60d33523..a60d33523 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/ui/copyButton.js
diff --git a/ui/app/components/ui/currency-display/currency-display.component.js b/ui/app/components/ui/currency-display/currency-display.component.js
new file mode 100644
index 000000000..04dd89892
--- /dev/null
+++ b/ui/app/components/ui/currency-display/currency-display.component.js
@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { GWEI } from '../../../helpers/constants/common'
+
+export default class CurrencyDisplay extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    displayValue: PropTypes.string,
+    prefix: PropTypes.string,
+    prefixComponent: PropTypes.node,
+    style: PropTypes.object,
+    suffix: PropTypes.string,
+    // Used in container
+    currency: PropTypes.string,
+    denomination: PropTypes.oneOf([GWEI]),
+    value: PropTypes.string,
+    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideLabel: PropTypes.bool,
+    hideTitle: PropTypes.bool,
+  }
+
+  render () {
+    const { className, displayValue, prefix, prefixComponent, style, suffix, hideTitle } = this.props
+    const text = `${prefix || ''}${displayValue}`
+    const title = `${text} ${suffix}`
+
+    return (
+      <div
+        className={classnames('currency-display-component', className)}
+        style={style}
+        title={!hideTitle && title || null}
+      >
+        { prefixComponent }
+        <span className="currency-display-component__text">{ text }</span>
+        {
+          suffix && (
+            <span className="currency-display-component__suffix">
+              { suffix }
+            </span>
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/ui/currency-display/currency-display.container.js b/ui/app/components/ui/currency-display/currency-display.container.js
new file mode 100644
index 000000000..093d99c8e
--- /dev/null
+++ b/ui/app/components/ui/currency-display/currency-display.container.js
@@ -0,0 +1,51 @@
+import { connect } from 'react-redux'
+import CurrencyDisplay from './currency-display.component'
+import { getValueFromWeiHex, formatCurrency } from '../../../helpers/utils/confirm-tx.util'
+
+const mapStateToProps = state => {
+  const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
+
+  return {
+    currentCurrency,
+    conversionRate,
+    nativeCurrency,
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { nativeCurrency, currentCurrency, conversionRate, ...restStateProps } = stateProps
+  const {
+    value,
+    numberOfDecimals = 2,
+    currency,
+    denomination,
+    hideLabel,
+    displayValue: propsDisplayValue,
+    suffix: propsSuffix,
+    ...restOwnProps
+  } = ownProps
+
+  const toCurrency = currency || currentCurrency
+
+  const displayValue = propsDisplayValue || formatCurrency(
+    getValueFromWeiHex({
+      value,
+      fromCurrency: nativeCurrency,
+      toCurrency, conversionRate,
+      numberOfDecimals,
+      toDenomination: denomination,
+    }),
+    toCurrency
+  )
+  const suffix = propsSuffix || (hideLabel ? undefined : toCurrency.toUpperCase())
+
+  return {
+    ...restStateProps,
+    ...dispatchProps,
+    ...restOwnProps,
+    displayValue,
+    suffix,
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(CurrencyDisplay)
diff --git a/ui/app/components/currency-display/index.js b/ui/app/components/ui/currency-display/index.js
index 38f08765f..38f08765f 100644
--- a/ui/app/components/currency-display/index.js
+++ b/ui/app/components/ui/currency-display/index.js
diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss
index 313c932b8..313c932b8 100644
--- a/ui/app/components/currency-display/index.scss
+++ b/ui/app/components/ui/currency-display/index.scss
diff --git a/ui/app/components/currency-display/tests/currency-display.component.test.js b/ui/app/components/ui/currency-display/tests/currency-display.component.test.js
index d9ef052f1..d9ef052f1 100644
--- a/ui/app/components/currency-display/tests/currency-display.component.test.js
+++ b/ui/app/components/ui/currency-display/tests/currency-display.component.test.js
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/ui/currency-display/tests/currency-display.container.test.js
index 9888c366e..9888c366e 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/ui/app/components/ui/currency-display/tests/currency-display.container.test.js
diff --git a/ui/app/components/ui/currency-input/currency-input.component.js b/ui/app/components/ui/currency-input/currency-input.component.js
new file mode 100644
index 000000000..b5be0972b
--- /dev/null
+++ b/ui/app/components/ui/currency-input/currency-input.component.js
@@ -0,0 +1,160 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import UnitInput from '../unit-input'
+import CurrencyDisplay from '../currency-display'
+import { getValueFromWeiHex, getWeiHexFromDecimalValue } from '../../../helpers/utils/conversions.util'
+import { ETH } from '../../../helpers/constants/common'
+
+/**
+ * Component that allows user to enter currency values as a number, and props receive a converted
+ * hex value in WEI. props.value, used as a default or forced value, should be a hex value, which
+ * gets converted into a decimal value depending on the currency (ETH or Fiat).
+ */
+export default class CurrencyInput extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    nativeCurrency: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    useFiat: PropTypes.bool,
+    hideFiat: PropTypes.bool,
+    value: PropTypes.string,
+    fiatSuffix: PropTypes.string,
+    nativeSuffix: PropTypes.string,
+  }
+
+  constructor (props) {
+    super(props)
+
+    const { value: hexValue } = props
+    const decimalValue = hexValue ? this.getDecimalValue(props) : 0
+
+    this.state = {
+      decimalValue,
+      hexValue,
+      isSwapped: false,
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { value: prevPropsHexValue } = prevProps
+    const { value: propsHexValue } = this.props
+    const { hexValue: stateHexValue } = this.state
+
+    if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
+      const decimalValue = this.getDecimalValue(this.props)
+      this.setState({ hexValue: propsHexValue, decimalValue })
+    }
+  }
+
+  getDecimalValue (props) {
+    const { value: hexValue, currentCurrency, conversionRate } = props
+    const decimalValueString = this.shouldUseFiat()
+      ? getValueFromWeiHex({
+        value: hexValue, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
+      })
+      : getValueFromWeiHex({
+        value: hexValue, toCurrency: ETH, numberOfDecimals: 6,
+      })
+
+    return Number(decimalValueString) || 0
+  }
+
+  shouldUseFiat = () => {
+    const { useFiat, hideFiat } = this.props
+    const { isSwapped } = this.state || {}
+
+    if (hideFiat) {
+      return false
+    }
+
+    return isSwapped ? !useFiat : useFiat
+  }
+
+  swap = () => {
+    const { isSwapped, decimalValue } = this.state
+    this.setState({isSwapped: !isSwapped}, () => {
+      this.handleChange(decimalValue)
+    })
+  }
+
+  handleChange = decimalValue => {
+    const { currentCurrency: fromCurrency, conversionRate, onChange } = this.props
+
+    const hexValue = this.shouldUseFiat()
+      ? getWeiHexFromDecimalValue({
+        value: decimalValue, fromCurrency, conversionRate, invertConversionRate: true,
+      })
+      : getWeiHexFromDecimalValue({
+        value: decimalValue, fromCurrency: ETH, fromDenomination: ETH, conversionRate,
+      })
+
+    this.setState({ hexValue, decimalValue })
+    onChange(hexValue)
+  }
+
+  handleBlur = () => {
+    this.props.onBlur(this.state.hexValue)
+  }
+
+  renderConversionComponent () {
+    const { currentCurrency, nativeCurrency, hideFiat } = this.props
+    const { hexValue } = this.state
+    let currency, numberOfDecimals
+
+    if (hideFiat) {
+      return (
+        <div className="currency-input__conversion-component">
+          { this.context.t('noConversionRateAvailable') }
+        </div>
+      )
+    }
+
+    if (this.shouldUseFiat()) {
+      // Display ETH
+      currency = nativeCurrency || ETH
+      numberOfDecimals = 6
+    } else {
+      // Display Fiat
+      currency = currentCurrency
+      numberOfDecimals = 2
+    }
+
+    return (
+      <CurrencyDisplay
+        className="currency-input__conversion-component"
+        currency={currency}
+        value={hexValue}
+        numberOfDecimals={numberOfDecimals}
+      />
+    )
+  }
+
+  render () {
+    const { fiatSuffix, nativeSuffix, ...restProps } = this.props
+    const { decimalValue } = this.state
+
+    return (
+        <UnitInput
+          {...restProps}
+          suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          value={decimalValue}
+          actionComponent={(
+            <div
+              className="currency-input__swap-component"
+              onClick={this.swap}
+            />
+          )}
+        >
+          { this.renderConversionComponent() }
+        </UnitInput>
+    )
+  }
+}
diff --git a/ui/app/components/ui/currency-input/currency-input.container.js b/ui/app/components/ui/currency-input/currency-input.container.js
new file mode 100644
index 000000000..b5d7dfe6d
--- /dev/null
+++ b/ui/app/components/ui/currency-input/currency-input.container.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import CurrencyInput from './currency-input.component'
+import { ETH } from '../../../helpers/constants/common'
+import {getIsMainnet, preferencesSelector} from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    nativeCurrency,
+    currentCurrency,
+    conversionRate,
+    hideFiat: (!isMainnet && !showFiatInTestnets),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { nativeCurrency, currentCurrency } = stateProps
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    nativeSuffix: nativeCurrency || ETH,
+    fiatSuffix: currentCurrency.toUpperCase(),
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(CurrencyInput)
diff --git a/ui/app/components/currency-input/index.js b/ui/app/components/ui/currency-input/index.js
index d8069fb67..d8069fb67 100644
--- a/ui/app/components/currency-input/index.js
+++ b/ui/app/components/ui/currency-input/index.js
diff --git a/ui/app/components/currency-input/index.scss b/ui/app/components/ui/currency-input/index.scss
index f659f5b35..f659f5b35 100644
--- a/ui/app/components/currency-input/index.scss
+++ b/ui/app/components/ui/currency-input/index.scss
diff --git a/ui/app/components/currency-input/tests/currency-input.component.test.js b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js
index 6d4612e3c..6d4612e3c 100644
--- a/ui/app/components/currency-input/tests/currency-input.component.test.js
+++ b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js
diff --git a/ui/app/components/currency-input/tests/currency-input.container.test.js b/ui/app/components/ui/currency-input/tests/currency-input.container.test.js
index 6109d29b6..6109d29b6 100644
--- a/ui/app/components/currency-input/tests/currency-input.container.test.js
+++ b/ui/app/components/ui/currency-input/tests/currency-input.container.test.js
diff --git a/ui/app/components/editable-label.js b/ui/app/components/ui/editable-label.js
index eb41ec50c..eb41ec50c 100644
--- a/ui/app/components/editable-label.js
+++ b/ui/app/components/ui/editable-label.js
diff --git a/ui/app/components/error-message/error-message.component.js b/ui/app/components/ui/error-message/error-message.component.js
index b4464c33b..b4464c33b 100644
--- a/ui/app/components/error-message/error-message.component.js
+++ b/ui/app/components/ui/error-message/error-message.component.js
diff --git a/ui/app/components/error-message/index.js b/ui/app/components/ui/error-message/index.js
index 1c97a9955..1c97a9955 100644
--- a/ui/app/components/error-message/index.js
+++ b/ui/app/components/ui/error-message/index.js
diff --git a/ui/app/components/error-message/index.scss b/ui/app/components/ui/error-message/index.scss
index 5915e21cf..5915e21cf 100644
--- a/ui/app/components/error-message/index.scss
+++ b/ui/app/components/ui/error-message/index.scss
diff --git a/ui/app/components/error-message/tests/error-message.component.test.js b/ui/app/components/ui/error-message/tests/error-message.component.test.js
index 8c5347173..8c5347173 100644
--- a/ui/app/components/error-message/tests/error-message.component.test.js
+++ b/ui/app/components/ui/error-message/tests/error-message.component.test.js
diff --git a/ui/app/components/ui/eth-balance.js b/ui/app/components/ui/eth-balance.js
new file mode 100644
index 000000000..7d577b716
--- /dev/null
+++ b/ui/app/components/ui/eth-balance.js
@@ -0,0 +1,102 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const { inherits } = require('util')
+const {
+  formatBalance,
+  generateBalanceObject,
+} = require('../../helpers/utils/util')
+const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
+
+module.exports = connect(mapStateToProps)(EthBalanceComponent)
+function mapStateToProps (state) {
+  return {
+    ticker: state.metamask.ticker,
+  }
+}
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent () {
+  Component.call(this)
+}
+
+EthBalanceComponent.prototype.render = function () {
+  const props = this.props
+  const { ticker, value, style, width, needsParse = true } = props
+
+  const formattedValue = value ? formatBalance(value, 6, needsParse, ticker) : '...'
+
+  return (
+
+    h('.ether-balance.ether-balance-amount', {
+      style,
+    }, [
+      h('div', {
+        style: {
+          display: 'inline',
+          width,
+        },
+      }, this.renderBalance(formattedValue)),
+    ])
+
+  )
+}
+EthBalanceComponent.prototype.renderBalance = function (value) {
+  if (value === 'None') return value
+  if (value === '...') return value
+
+  const {
+    conversionRate,
+    shorten,
+    incoming,
+    currentCurrency,
+    hideTooltip,
+    styleOveride = {},
+    showFiat = true,
+  } = this.props
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
+  const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
+  const balanceToRender = shorten ? shortBalance : balance
+
+  const [ethNumber, ethSuffix] = value.split(' ')
+  const containerProps = hideTooltip ? {} : {
+    position: 'bottom',
+    title: `${ethNumber} ${ethSuffix}`,
+  }
+
+  return (
+    h(hideTooltip ? 'div' : Tooltip,
+      containerProps,
+      h('div.flex-column', [
+        h('.flex-row', {
+          style: {
+            alignItems: 'flex-end',
+            lineHeight: lineHeight || '13px',
+            fontFamily: fontFamily || 'Montserrat Light',
+            textRendering: 'geometricPrecision',
+          },
+        }, [
+          h('div', {
+            style: {
+              width: '100%',
+              textAlign: 'right',
+              fontSize: fontSize || 'inherit',
+              color: color || 'inherit',
+            },
+          }, incoming ? `+${balanceToRender}` : balanceToRender),
+          h('div', {
+            style: {
+              color: color || '#AEAEAE',
+              fontSize: fontSize || '12px',
+              marginLeft: '5px',
+            },
+          }, label),
+        ]),
+
+        showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
+      ])
+    )
+  )
+}
diff --git a/ui/app/components/ui/export-text-container/export-text-container.component.js b/ui/app/components/ui/export-text-container/export-text-container.component.js
new file mode 100644
index 000000000..c632e8f26
--- /dev/null
+++ b/ui/app/components/ui/export-text-container/export-text-container.component.js
@@ -0,0 +1,45 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const copyToClipboard = require('copy-to-clipboard')
+const { exportAsFile } = require('../../../helpers/utils/util')
+
+class ExportTextContainer extends Component {
+  render () {
+    const { text = '', filename = '' } = this.props
+    const { t } = this.context
+
+    return (
+      h('.export-text-container', [
+        h('.export-text-container__text-container', [
+          h('.export-text-container__text', text),
+        ]),
+        h('.export-text-container__buttons-container', [
+          h('.export-text-container__button.export-text-container__button--copy', {
+            onClick: () => copyToClipboard(text),
+          }, [
+            h('img', { src: 'images/copy-to-clipboard.svg' }),
+            h('.export-text-container__button-text', t('copyToClipboard')),
+          ]),
+          h('.export-text-container__button', {
+            onClick: () => exportAsFile(filename, text),
+          }, [
+            h('img', { src: 'images/download.svg' }),
+            h('.export-text-container__button-text', t('saveAsCsvFile')),
+          ]),
+        ]),
+      ])
+    )
+  }
+}
+
+ExportTextContainer.propTypes = {
+  text: PropTypes.string,
+  filename: PropTypes.string,
+}
+
+ExportTextContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = ExportTextContainer
diff --git a/ui/app/components/export-text-container/index.js b/ui/app/components/ui/export-text-container/index.js
index b2864a717..b2864a717 100644
--- a/ui/app/components/export-text-container/index.js
+++ b/ui/app/components/ui/export-text-container/index.js
diff --git a/ui/app/components/export-text-container/index.scss b/ui/app/components/ui/export-text-container/index.scss
index 975d62f70..975d62f70 100644
--- a/ui/app/components/export-text-container/index.scss
+++ b/ui/app/components/ui/export-text-container/index.scss
diff --git a/ui/app/components/ui/fiat-value.js b/ui/app/components/ui/fiat-value.js
new file mode 100644
index 000000000..02111ba49
--- /dev/null
+++ b/ui/app/components/ui/fiat-value.js
@@ -0,0 +1,66 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../../helpers/utils/util').formatBalance
+
+module.exports = FiatValue
+
+inherits(FiatValue, Component)
+function FiatValue () {
+  Component.call(this)
+}
+
+FiatValue.prototype.render = function () {
+  const props = this.props
+  const { conversionRate, currentCurrency, style } = props
+  const renderedCurrency = currentCurrency || ''
+
+  const value = formatBalance(props.value, 6)
+
+  if (value === 'None') return value
+  var fiatDisplayNumber, fiatTooltipNumber
+  var splitBalance = value.split(' ')
+
+  if (conversionRate !== 0) {
+    fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
+    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
+  } else {
+    fiatDisplayNumber = 'N/A'
+    fiatTooltipNumber = 'Unknown'
+  }
+
+  return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase(), style)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
+  if (fiatDisplayNumber !== 'N/A') {
+    return h('.flex-row', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: lineHeight || '13px',
+        fontFamily: fontFamily || 'Montserrat Light',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('div', {
+        style: {
+          width: '100%',
+          textAlign: 'right',
+          fontSize: fontSize || '12px',
+          color: color || '#333333',
+        },
+      }, fiatDisplayNumber),
+      h('div', {
+        style: {
+          color: color || '#AEAEAE',
+          marginLeft: '5px',
+          fontSize: fontSize || '12px',
+        },
+      }, fiatSuffix),
+    ])
+  } else {
+    return h('div')
+  }
+}
diff --git a/ui/app/components/ui/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/ui/hex-to-decimal/hex-to-decimal.component.js
new file mode 100644
index 000000000..f03aaf255
--- /dev/null
+++ b/ui/app/components/ui/hex-to-decimal/hex-to-decimal.component.js
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { hexToDecimal } from '../../../helpers/utils/conversions.util'
+
+export default class HexToDecimal extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { className, value } = this.props
+    const decimalValue = hexToDecimal(value)
+
+    return (
+      <div className={className}>
+        { decimalValue }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/hex-to-decimal/index.js b/ui/app/components/ui/hex-to-decimal/index.js
index 6e8567ca9..6e8567ca9 100644
--- a/ui/app/components/hex-to-decimal/index.js
+++ b/ui/app/components/ui/hex-to-decimal/index.js
diff --git a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js b/ui/app/components/ui/hex-to-decimal/tests/hex-to-decimal.component.test.js
index c98da9ad4..c98da9ad4 100644
--- a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
+++ b/ui/app/components/ui/hex-to-decimal/tests/hex-to-decimal.component.test.js
diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
new file mode 100644
index 000000000..88521247c
--- /dev/null
+++ b/ui/app/components/ui/identicon/identicon.component.js
@@ -0,0 +1,99 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { toDataUrl } from '../../../../lib/blockies'
+import contractMap from 'eth-contract-metadata'
+import { checksumAddress } from '../../../helpers/utils/util'
+import Jazzicon from '../jazzicon'
+
+const getStyles = diameter => (
+  {
+    height: diameter,
+    width: diameter,
+    borderRadius: diameter / 2,
+  }
+)
+
+export default class Identicon extends PureComponent {
+  static propTypes = {
+    address: PropTypes.string,
+    className: PropTypes.string,
+    diameter: PropTypes.number,
+    image: PropTypes.string,
+    useBlockie: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    diameter: 46,
+  }
+
+  renderImage () {
+    const { className, diameter, image } = this.props
+
+    return (
+      <img
+        className={classnames('identicon', className)}
+        src={image}
+        style={getStyles(diameter)}
+      />
+    )
+  }
+
+  renderJazzicon () {
+    const { address, className, diameter } = this.props
+
+    return (
+      <Jazzicon
+        address={address}
+        diameter={diameter}
+        className={classnames('identicon', className)}
+        style={getStyles(diameter)}
+      />
+    )
+  }
+
+  renderBlockie () {
+    const { address, className, diameter } = this.props
+
+    return (
+      <div
+        className={classnames('identicon', className)}
+        style={getStyles(diameter)}
+      >
+        <img
+          src={toDataUrl(address)}
+          height={diameter}
+          width={diameter}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { className, address, image, diameter, useBlockie } = this.props
+
+    if (image) {
+      return this.renderImage()
+    }
+
+    if (address) {
+      const checksummedAddress = checksumAddress(address)
+
+      if (contractMap[checksummedAddress] && contractMap[checksummedAddress].logo) {
+        return this.renderJazzicon()
+      }
+
+      return useBlockie
+        ? this.renderBlockie()
+        : this.renderJazzicon()
+    }
+
+    return (
+      <img
+        className={classnames('balance-icon', className)}
+        src="./images/eth_logo.svg"
+        style={getStyles(diameter)}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/identicon/identicon.container.js b/ui/app/components/ui/identicon/identicon.container.js
index bc49bc18e..bc49bc18e 100644
--- a/ui/app/components/identicon/identicon.container.js
+++ b/ui/app/components/ui/identicon/identicon.container.js
diff --git a/ui/app/components/identicon/index.js b/ui/app/components/ui/identicon/index.js
index 799c886f2..799c886f2 100644
--- a/ui/app/components/identicon/index.js
+++ b/ui/app/components/ui/identicon/index.js
diff --git a/ui/app/components/identicon/index.scss b/ui/app/components/ui/identicon/index.scss
index 657afc48f..657afc48f 100644
--- a/ui/app/components/identicon/index.scss
+++ b/ui/app/components/ui/identicon/index.scss
diff --git a/ui/app/components/identicon/tests/identicon.component.test.js b/ui/app/components/ui/identicon/tests/identicon.component.test.js
index 2944818f5..2944818f5 100644
--- a/ui/app/components/identicon/tests/identicon.component.test.js
+++ b/ui/app/components/ui/identicon/tests/identicon.component.test.js
diff --git a/ui/app/components/jazzicon/index.js b/ui/app/components/ui/jazzicon/index.js
index bea900ab9..bea900ab9 100644
--- a/ui/app/components/jazzicon/index.js
+++ b/ui/app/components/ui/jazzicon/index.js
diff --git a/ui/app/components/ui/jazzicon/jazzicon.component.js b/ui/app/components/ui/jazzicon/jazzicon.component.js
new file mode 100644
index 000000000..3a17e446f
--- /dev/null
+++ b/ui/app/components/ui/jazzicon/jazzicon.component.js
@@ -0,0 +1,69 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import isNode from 'detect-node'
+import { findDOMNode } from 'react-dom'
+import jazzicon from 'jazzicon'
+import iconFactoryGenerator from '../../../../lib/icon-factory'
+const iconFactory = iconFactoryGenerator(jazzicon)
+
+/**
+ * Wrapper around the jazzicon library to return a React component, as the library returns an
+ * HTMLDivElement which needs to be appended.
+ */
+export default class Jazzicon extends PureComponent {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    diameter: PropTypes.number,
+    style: PropTypes.object,
+  }
+
+  static defaultProps = {
+    diameter: 46,
+  }
+
+  componentDidMount () {
+    if (!isNode) {
+      this.appendJazzicon()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { address: prevAddress } = prevProps
+    const { address } = this.props
+
+    if (!isNode && address !== prevAddress) {
+      this.removeExistingChildren()
+      this.appendJazzicon()
+    }
+  }
+
+  removeExistingChildren () {
+    // eslint-disable-next-line react/no-find-dom-node
+    const container = findDOMNode(this)
+    const { children } = container
+
+    for (let i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
+  }
+
+  appendJazzicon () {
+    // eslint-disable-next-line react/no-find-dom-node
+    const container = findDOMNode(this)
+    const { address, diameter } = this.props
+    const image = iconFactory.iconForAddress(address, diameter)
+    container.appendChild(image)
+  }
+
+  render () {
+    const { className, style } = this.props
+
+    return (
+      <div
+        className={className}
+        style={style}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/loading-screen/index.js b/ui/app/components/ui/loading-screen/index.js
index 191d953f7..191d953f7 100644
--- a/ui/app/components/loading-screen/index.js
+++ b/ui/app/components/ui/loading-screen/index.js
diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/ui/loading-screen/loading-screen.component.js
index 6b843cfee..6b843cfee 100644
--- a/ui/app/components/loading-screen/loading-screen.component.js
+++ b/ui/app/components/ui/loading-screen/loading-screen.component.js
diff --git a/ui/app/components/lock-icon/index.js b/ui/app/components/ui/lock-icon/index.js
index 6b4df0e58..6b4df0e58 100644
--- a/ui/app/components/lock-icon/index.js
+++ b/ui/app/components/ui/lock-icon/index.js
diff --git a/ui/app/components/lock-icon/lock-icon.component.js b/ui/app/components/ui/lock-icon/lock-icon.component.js
index d010cb6b2..d010cb6b2 100644
--- a/ui/app/components/lock-icon/lock-icon.component.js
+++ b/ui/app/components/ui/lock-icon/lock-icon.component.js
diff --git a/ui/app/components/mascot.js b/ui/app/components/ui/mascot.js
index 3b0d3e31b..3b0d3e31b 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/ui/mascot.js
diff --git a/ui/app/components/page-container/index.js b/ui/app/components/ui/page-container/index.js
index 913b8c9c6..913b8c9c6 100644
--- a/ui/app/components/page-container/index.js
+++ b/ui/app/components/ui/page-container/index.js
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/ui/page-container/index.scss
index b71a3cb9d..b71a3cb9d 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/ui/page-container/index.scss
diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/ui/page-container/page-container-content.component.js
index a1d6988cc..a1d6988cc 100644
--- a/ui/app/components/page-container/page-container-content.component.js
+++ b/ui/app/components/ui/page-container/page-container-content.component.js
diff --git a/ui/app/components/page-container/page-container-footer/index.js b/ui/app/components/ui/page-container/page-container-footer/index.js
index 7825c4520..7825c4520 100644
--- a/ui/app/components/page-container/page-container-footer/index.js
+++ b/ui/app/components/ui/page-container/page-container-footer/index.js
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
index 85b16cefe..85b16cefe 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
index 64efabab0..64efabab0 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
diff --git a/ui/app/components/page-container/page-container-header/index.js b/ui/app/components/ui/page-container/page-container-header/index.js
index b194af057..b194af057 100644
--- a/ui/app/components/page-container/page-container-header/index.js
+++ b/ui/app/components/ui/page-container/page-container-header/index.js
diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
index 08f9c7544..08f9c7544 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js
index 59304b2bd..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/ui/page-container/page-container.component.js
index 45dfff517..45dfff517 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/ui/page-container/page-container.component.js
diff --git a/ui/app/components/page-container/tests/page-container.component.test.js b/ui/app/components/ui/page-container/tests/page-container.component.test.js
index e69de29bb..e69de29bb 100644
--- a/ui/app/components/page-container/tests/page-container.component.test.js
+++ b/ui/app/components/ui/page-container/tests/page-container.component.test.js
diff --git a/ui/app/components/ui/qr-code.js b/ui/app/components/ui/qr-code.js
new file mode 100644
index 000000000..351e072e2
--- /dev/null
+++ b/ui/app/components/ui/qr-code.js
@@ -0,0 +1,63 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const qrCode = require('qrcode-generator')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const { isHexPrefixed } = require('ethereumjs-util')
+const ReadOnlyInput = require('./readonly-input')
+const { checksumAddress } = require('../../helpers/utils/util')
+
+module.exports = connect(mapStateToProps)(QrCodeView)
+
+function mapStateToProps (state) {
+  return {
+    // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
+    buyView: state.appState.buyView,
+    warning: state.appState.warning,
+  }
+}
+
+inherits(QrCodeView, Component)
+
+function QrCodeView () {
+  Component.call(this)
+}
+
+QrCodeView.prototype.render = function () {
+  const props = this.props
+  const { message, data, network } = props.Qr
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data, network)}`
+  const qrImage = qrCode(4, 'M')
+  qrImage.addData(address)
+  qrImage.make()
+
+  return h('.div.flex-column.flex-center', [
+    Array.isArray(message)
+      ? h('.message-container', this.renderMultiMessage())
+      : message && h('.qr-header', message),
+
+    this.props.warning ? this.props.warning && h('span.error.flex-center', {
+      style: {
+      },
+    },
+    this.props.warning) : null,
+
+    h('.div.qr-wrapper', {
+      style: {},
+      dangerouslySetInnerHTML: {
+        __html: qrImage.createTableTag(4),
+      },
+    }),
+    h(ReadOnlyInput, {
+      wrapperClass: 'ellip-address-wrapper',
+      inputClass: 'qr-ellip-address',
+      value: checksumAddress(data, network),
+    }),
+  ])
+}
+
+QrCodeView.prototype.renderMultiMessage = function () {
+  var Qr = this.props.Qr
+  var multiMessage = Qr.message.map((message) => h('.qr-message', message))
+  return multiMessage
+}
diff --git a/ui/app/components/readonly-input.js b/ui/app/components/ui/readonly-input.js
index fcf05fb9e..fcf05fb9e 100644
--- a/ui/app/components/readonly-input.js
+++ b/ui/app/components/ui/readonly-input.js
diff --git a/ui/app/components/sender-to-recipient/index.js b/ui/app/components/ui/sender-to-recipient/index.js
index f515c4ac4..f515c4ac4 100644
--- a/ui/app/components/sender-to-recipient/index.js
+++ b/ui/app/components/ui/sender-to-recipient/index.js
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss
index b21e4e1bb..b21e4e1bb 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/ui/sender-to-recipient/index.scss
diff --git a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
new file mode 100644
index 000000000..57b595d48
--- /dev/null
+++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -0,0 +1,186 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../identicon'
+import Tooltip from '../tooltip-v2'
+import copyToClipboard from 'copy-to-clipboard'
+import { DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT } from './sender-to-recipient.constants'
+import { checksumAddress } from '../../../helpers/utils/util'
+
+const variantHash = {
+  [DEFAULT_VARIANT]: 'sender-to-recipient--default',
+  [CARDS_VARIANT]: 'sender-to-recipient--cards',
+  [FLAT_VARIANT]: 'sender-to-recipient--flat',
+}
+
+export default class SenderToRecipient extends PureComponent {
+  static propTypes = {
+    senderName: PropTypes.string,
+    senderAddress: PropTypes.string,
+    recipientName: PropTypes.string,
+    recipientAddress: PropTypes.string,
+    t: PropTypes.func,
+    variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT]),
+    addressOnly: PropTypes.bool,
+    assetImage: PropTypes.string,
+    onRecipientClick: PropTypes.func,
+    onSenderClick: PropTypes.func,
+  }
+
+  static defaultProps = {
+    variant: DEFAULT_VARIANT,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  state = {
+    senderAddressCopied: false,
+    recipientAddressCopied: false,
+  }
+
+  renderSenderIdenticon () {
+    return !this.props.addressOnly && (
+      <div className="sender-to-recipient__sender-icon">
+        <Identicon
+          address={checksumAddress(this.props.senderAddress)}
+          diameter={24}
+        />
+      </div>
+    )
+  }
+
+  renderSenderAddress () {
+    const { t } = this.context
+    const { senderName, senderAddress, addressOnly } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
+
+    return (
+      <Tooltip
+        position="bottom"
+        title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+        wrapperClassName="sender-to-recipient__tooltip-wrapper"
+        containerClassName="sender-to-recipient__tooltip-container"
+        onHidden={() => this.setState({ senderAddressCopied: false })}
+      >
+      <div className="sender-to-recipient__name">
+        { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
+      </div>
+    </Tooltip>
+    )
+  }
+
+  renderRecipientIdenticon () {
+    const { recipientAddress, assetImage } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
+
+    return !this.props.addressOnly && (
+      <div className="sender-to-recipient__sender-icon">
+        <Identicon
+          address={checksummedRecipientAddress}
+          diameter={24}
+          image={assetImage}
+        />
+      </div>
+    )
+  }
+
+  renderRecipientWithAddress () {
+    const { t } = this.context
+    const { recipientName, recipientAddress, addressOnly, onRecipientClick } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
+
+    return (
+      <div
+        className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
+        onClick={() => {
+          this.setState({ recipientAddressCopied: true })
+          copyToClipboard(checksummedRecipientAddress)
+          if (onRecipientClick) {
+            onRecipientClick()
+          }
+        }}
+      >
+        { this.renderRecipientIdenticon() }
+        <Tooltip
+          position="bottom"
+          title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+          wrapperClassName="sender-to-recipient__tooltip-wrapper"
+          containerClassName="sender-to-recipient__tooltip-container"
+          onHidden={() => this.setState({ recipientAddressCopied: false })}
+        >
+          <div className="sender-to-recipient__name">
+            {
+              addressOnly
+                ? `${t('to')}: ${checksummedRecipientAddress}`
+                : (recipientName || this.context.t('newContract'))
+            }
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+
+  renderRecipientWithoutAddress () {
+    return (
+      <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
+        { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
+        <div className="sender-to-recipient__name">
+          { this.context.t('newContract') }
+        </div>
+      </div>
+    )
+  }
+
+  renderArrow () {
+    return this.props.variant === DEFAULT_VARIANT
+      ? (
+        <div className="sender-to-recipient__arrow-container">
+          <div className="sender-to-recipient__arrow-circle">
+            <img
+              height={15}
+              width={15}
+              src="./images/arrow-right.svg"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="sender-to-recipient__arrow-container">
+          <img
+            height={20}
+            src="./images/caret-right.svg"
+          />
+        </div>
+      )
+  }
+
+  render () {
+    const { senderAddress, recipientAddress, variant, onSenderClick } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
+
+    return (
+      <div className={classnames('sender-to-recipient', variantHash[variant])}>
+        <div
+          className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
+          onClick={() => {
+            this.setState({ senderAddressCopied: true })
+            copyToClipboard(checksummedSenderAddress)
+            if (onSenderClick) {
+              onSenderClick()
+            }
+          }}
+        >
+          { this.renderSenderIdenticon() }
+          { this.renderSenderAddress() }
+        </div>
+        { this.renderArrow() }
+        {
+          recipientAddress
+            ? this.renderRecipientWithAddress()
+            : this.renderRecipientWithoutAddress()
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.constants.js
index f53a5115d..f53a5115d 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
+++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.constants.js
diff --git a/ui/app/components/spinner/index.js b/ui/app/components/ui/spinner/index.js
index 9589efcf0..9589efcf0 100644
--- a/ui/app/components/spinner/index.js
+++ b/ui/app/components/ui/spinner/index.js
diff --git a/ui/app/components/spinner/spinner.component.js b/ui/app/components/ui/spinner/spinner.component.js
index b9a2eb52a..b9a2eb52a 100644
--- a/ui/app/components/spinner/spinner.component.js
+++ b/ui/app/components/ui/spinner/spinner.component.js
diff --git a/ui/app/components/tabs/index.js b/ui/app/components/ui/tabs/index.js
index 3a8d18248..3a8d18248 100644
--- a/ui/app/components/tabs/index.js
+++ b/ui/app/components/ui/tabs/index.js
diff --git a/ui/app/components/ui/tabs/index.scss b/ui/app/components/ui/tabs/index.scss
new file mode 100644
index 000000000..25143ff35
--- /dev/null
+++ b/ui/app/components/ui/tabs/index.scss
@@ -0,0 +1,11 @@
+@import 'tab/index';
+
+.tabs {
+  &__list {
+    display: flex;
+    justify-content: flex-start;
+    background-color: #f9fafa;
+    border-bottom: 1px solid $geyser;
+    padding: 0 16px;
+  }
+}
diff --git a/ui/app/components/tabs/tab/index.js b/ui/app/components/ui/tabs/tab/index.js
index fbc309e8e..fbc309e8e 100644
--- a/ui/app/components/tabs/tab/index.js
+++ b/ui/app/components/ui/tabs/tab/index.js
diff --git a/ui/app/components/tabs/tab/index.scss b/ui/app/components/ui/tabs/tab/index.scss
index 1de6ffa0e..1de6ffa0e 100644
--- a/ui/app/components/tabs/tab/index.scss
+++ b/ui/app/components/ui/tabs/tab/index.scss
diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/ui/tabs/tab/tab.component.js
index 9e590391c..9e590391c 100644
--- a/ui/app/components/tabs/tab/tab.component.js
+++ b/ui/app/components/ui/tabs/tab/tab.component.js
diff --git a/ui/app/components/tabs/tabs.component.js b/ui/app/components/ui/tabs/tabs.component.js
index d26dcff2f..d26dcff2f 100644
--- a/ui/app/components/tabs/tabs.component.js
+++ b/ui/app/components/ui/tabs/tabs.component.js
diff --git a/ui/app/components/text-field/index.js b/ui/app/components/ui/text-field/index.js
index 171caf7a4..171caf7a4 100644
--- a/ui/app/components/text-field/index.js
+++ b/ui/app/components/ui/text-field/index.js
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js
index 2c72d8124..2c72d8124 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/ui/text-field/text-field.component.js
diff --git a/ui/app/components/ui/text-field/text-field.stories.js b/ui/app/components/ui/text-field/text-field.stories.js
new file mode 100644
index 000000000..337f78ecf
--- /dev/null
+++ b/ui/app/components/ui/text-field/text-field.stories.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import TextField from '.'
+
+storiesOf('TextField', module)
+  .add('text', () =>
+    <TextField
+      label="Text"
+      type="text"
+    />
+  )
+  .add('password', () =>
+    <TextField
+      label="Password"
+      type="password"
+    />
+  )
+  .add('error', () =>
+    <TextField
+      type="text"
+      label="Name"
+      error="Invalid value"
+    />
+  )
+  .add('Mascara text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      largeLabel
+    />
+  )
+  .add('Material text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      material
+    />
+  )
+  .add('Material password', () =>
+    <TextField
+      label="Password"
+      type="password"
+      material
+    />
+  )
+  .add('Material error', () =>
+    <TextField
+      type="text"
+      label="Name"
+      error="Invalid value"
+      material
+    />
+  )
diff --git a/ui/app/components/token-balance/index.js b/ui/app/components/ui/token-balance/index.js
index f7da15cf8..f7da15cf8 100644
--- a/ui/app/components/token-balance/index.js
+++ b/ui/app/components/ui/token-balance/index.js
diff --git a/ui/app/components/token-balance/index.scss b/ui/app/components/ui/token-balance/index.scss
index 2ff6dfbc8..2ff6dfbc8 100644
--- a/ui/app/components/token-balance/index.scss
+++ b/ui/app/components/ui/token-balance/index.scss
diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/ui/token-balance/token-balance.component.js
index af1a32578..af1a32578 100644
--- a/ui/app/components/token-balance/token-balance.component.js
+++ b/ui/app/components/ui/token-balance/token-balance.component.js
diff --git a/ui/app/components/ui/token-balance/token-balance.container.js b/ui/app/components/ui/token-balance/token-balance.container.js
new file mode 100644
index 000000000..a0f1efc20
--- /dev/null
+++ b/ui/app/components/ui/token-balance/token-balance.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withTokenTracker from '../../../helpers/higher-order-components/with-token-tracker'
+import TokenBalance from './token-balance.component'
+import selectors from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  return {
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+export default compose(
+  connect(mapStateToProps),
+  withTokenTracker
+)(TokenBalance)
diff --git a/ui/app/components/token-currency-display/index.js b/ui/app/components/ui/token-currency-display/index.js
index 6065cae1f..6065cae1f 100644
--- a/ui/app/components/token-currency-display/index.js
+++ b/ui/app/components/ui/token-currency-display/index.js
diff --git a/ui/app/components/ui/token-currency-display/token-currency-display.component.js b/ui/app/components/ui/token-currency-display/token-currency-display.component.js
new file mode 100644
index 000000000..3c2722b36
--- /dev/null
+++ b/ui/app/components/ui/token-currency-display/token-currency-display.component.js
@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../currency-display'
+import { getTokenData } from '../../../helpers/utils/transactions.util'
+import { getTokenValue, calcTokenAmount } from '../../../helpers/utils/token-util'
+
+export default class TokenCurrencyDisplay extends PureComponent {
+  static propTypes = {
+    transactionData: PropTypes.string,
+    token: PropTypes.object,
+  }
+
+  state = {
+    displayValue: '',
+    suffix: '',
+  }
+
+  componentDidMount () {
+    this.setDisplayValue()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { transactionData } = this.props
+    const { transactionData: prevTransactionData } = prevProps
+
+    if (transactionData !== prevTransactionData) {
+      this.setDisplayValue()
+    }
+  }
+
+  setDisplayValue () {
+    const { transactionData: data, token } = this.props
+    const { decimals = '', symbol: suffix = '' } = token
+    const tokenData = getTokenData(data)
+
+    let displayValue
+
+    if (tokenData && tokenData.params && tokenData.params.length) {
+      const tokenValue = getTokenValue(tokenData.params)
+      displayValue = calcTokenAmount(tokenValue, decimals).toString()
+    }
+
+    this.setState({ displayValue, suffix })
+  }
+
+  render () {
+    const { displayValue, suffix } = this.state
+
+    return (
+      <CurrencyDisplay
+        {...this.props}
+        displayValue={displayValue}
+        suffix={suffix}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/token-input/index.js b/ui/app/components/ui/token-input/index.js
index 22c06111e..22c06111e 100644
--- a/ui/app/components/token-input/index.js
+++ b/ui/app/components/ui/token-input/index.js
diff --git a/ui/app/components/token-input/tests/token-input.component.test.js b/ui/app/components/ui/token-input/tests/token-input.component.test.js
index 881101880..881101880 100644
--- a/ui/app/components/token-input/tests/token-input.component.test.js
+++ b/ui/app/components/ui/token-input/tests/token-input.component.test.js
diff --git a/ui/app/components/token-input/tests/token-input.container.test.js b/ui/app/components/ui/token-input/tests/token-input.container.test.js
index 2b1c102c8..2b1c102c8 100644
--- a/ui/app/components/token-input/tests/token-input.container.test.js
+++ b/ui/app/components/ui/token-input/tests/token-input.container.test.js
diff --git a/ui/app/components/ui/token-input/token-input.component.js b/ui/app/components/ui/token-input/token-input.component.js
new file mode 100644
index 000000000..c28af5fde
--- /dev/null
+++ b/ui/app/components/ui/token-input/token-input.component.js
@@ -0,0 +1,145 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import UnitInput from '../unit-input'
+import CurrencyDisplay from '../currency-display'
+import { getWeiHexFromDecimalValue } from '../../../helpers/utils/conversions.util'
+import ethUtil from 'ethereumjs-util'
+import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util'
+import { ETH } from '../../../helpers/constants/common'
+
+/**
+ * Component that allows user to enter token values as a number, and props receive a converted
+ * hex value. props.value, used as a default or forced value, should be a hex value, which
+ * gets converted into a decimal value.
+ */
+export default class TokenInput extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    currentCurrency: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    value: PropTypes.string,
+    suffix: PropTypes.string,
+    showFiat: PropTypes.bool,
+    hideConversion: PropTypes.bool,
+    selectedToken: PropTypes.object,
+    selectedTokenExchangeRate: PropTypes.number,
+  }
+
+  constructor (props) {
+    super(props)
+
+    const { value: hexValue } = props
+    const decimalValue = hexValue ? this.getValue(props) : 0
+
+    this.state = {
+      decimalValue,
+      hexValue,
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { value: prevPropsHexValue } = prevProps
+    const { value: propsHexValue } = this.props
+    const { hexValue: stateHexValue } = this.state
+
+    if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
+      const decimalValue = this.getValue(this.props)
+      this.setState({ hexValue: propsHexValue, decimalValue })
+    }
+  }
+
+  getValue (props) {
+    const { value: hexValue, selectedToken: { decimals, symbol } = {} } = props
+
+    const multiplier = Math.pow(10, Number(decimals || 0))
+    const decimalValueString = conversionUtil(ethUtil.addHexPrefix(hexValue), {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      toCurrency: symbol,
+      conversionRate: multiplier,
+      invertConversionRate: true,
+    })
+
+    return Number(decimalValueString) ? decimalValueString : ''
+  }
+
+  handleChange = decimalValue => {
+    const { selectedToken: { decimals } = {}, onChange } = this.props
+
+    const multiplier = Math.pow(10, Number(decimals || 0))
+    const hexValue = multiplyCurrencies(decimalValue || 0, multiplier, { toNumericBase: 'hex' })
+
+    this.setState({ hexValue, decimalValue })
+    onChange(hexValue)
+  }
+
+  handleBlur = () => {
+    this.props.onBlur(this.state.hexValue)
+  }
+
+  renderConversionComponent () {
+    const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
+    const { decimalValue } = this.state
+    let currency, numberOfDecimals
+
+    if (hideConversion) {
+      return (
+        <div className="currency-input__conversion-component">
+          { this.context.t('noConversionRateAvailable') }
+        </div>
+      )
+    }
+
+    if (showFiat) {
+      // Display Fiat
+      currency = currentCurrency
+      numberOfDecimals = 2
+    } else {
+      // Display ETH
+      currency = ETH
+      numberOfDecimals = 6
+    }
+
+    const decimalEthValue = (decimalValue * selectedTokenExchangeRate) || 0
+    const hexWeiValue = getWeiHexFromDecimalValue({
+      value: decimalEthValue,
+      fromCurrency: ETH,
+      fromDenomination: ETH,
+    })
+
+    return selectedTokenExchangeRate
+      ? (
+        <CurrencyDisplay
+          className="currency-input__conversion-component"
+          currency={currency}
+          value={hexWeiValue}
+          numberOfDecimals={numberOfDecimals}
+        />
+      ) : (
+        <div className="currency-input__conversion-component">
+          { this.context.t('noConversionRateAvailable') }
+        </div>
+      )
+  }
+
+  render () {
+    const { suffix, ...restProps } = this.props
+    const { decimalValue } = this.state
+
+    return (
+      <UnitInput
+        {...restProps}
+        suffix={suffix}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        value={decimalValue}
+      >
+        { this.renderConversionComponent() }
+      </UnitInput>
+    )
+  }
+}
diff --git a/ui/app/components/ui/token-input/token-input.container.js b/ui/app/components/ui/token-input/token-input.container.js
new file mode 100644
index 000000000..981cb3598
--- /dev/null
+++ b/ui/app/components/ui/token-input/token-input.container.js
@@ -0,0 +1,30 @@
+import { connect } from 'react-redux'
+import TokenInput from './token-input.component'
+import {getIsMainnet, getSelectedToken, getSelectedTokenExchangeRate, preferencesSelector} from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { metamask: { currentCurrency } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    currentCurrency,
+    selectedToken: getSelectedToken(state),
+    selectedTokenExchangeRate: getSelectedTokenExchangeRate(state),
+    hideConversion: (!isMainnet && !showFiatInTestnets),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { selectedToken } = stateProps
+  const suffix = selectedToken && selectedToken.symbol
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    suffix,
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(TokenInput)
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/ui/tooltip-v2.js
index b54026794..b54026794 100644
--- a/ui/app/components/tooltip-v2.js
+++ b/ui/app/components/ui/tooltip-v2.js
diff --git a/ui/app/components/tooltip.js b/ui/app/components/ui/tooltip.js
index efab2c497..efab2c497 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/ui/tooltip.js
diff --git a/ui/app/components/unit-input/index.js b/ui/app/components/ui/unit-input/index.js
index 7c33c9e5c..7c33c9e5c 100644
--- a/ui/app/components/unit-input/index.js
+++ b/ui/app/components/ui/unit-input/index.js
diff --git a/ui/app/components/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss
index e4075d225..e4075d225 100644
--- a/ui/app/components/unit-input/index.scss
+++ b/ui/app/components/ui/unit-input/index.scss
diff --git a/ui/app/components/unit-input/tests/unit-input.component.test.js b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js
index 97d987bc7..97d987bc7 100644
--- a/ui/app/components/unit-input/tests/unit-input.component.test.js
+++ b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js
diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js
new file mode 100644
index 000000000..7b414f177
--- /dev/null
+++ b/ui/app/components/ui/unit-input/unit-input.component.js
@@ -0,0 +1,108 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { removeLeadingZeroes } from '../../app/send/send.utils'
+
+/**
+ * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also
+ * allows rendering a child component underneath the input to, for example, display conversions of
+ * the shown suffix.
+ */
+export default class UnitInput extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    actionComponent: PropTypes.node,
+    error: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    suffix: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }
+
+  static defaultProps = {
+    placeholder: '0',
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      value: props.value || '',
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { value: prevPropsValue } = prevProps
+    const { value: propsValue } = this.props
+    const { value: stateValue } = this.state
+
+    if (prevPropsValue !== propsValue && propsValue !== stateValue) {
+      this.setState({ value: propsValue })
+    }
+  }
+
+  handleFocus = () => {
+    this.unitInput.focus()
+  }
+
+  handleChange = event => {
+    const { value: userInput } = event.target
+    let value = userInput
+
+    if (userInput.length && userInput.length > 1) {
+      value = removeLeadingZeroes(userInput)
+    }
+
+    this.setState({ value })
+    this.props.onChange(value)
+  }
+
+  handleBlur = event => {
+    const { onBlur } = this.props
+    typeof onBlur === 'function' && onBlur(this.state.value)
+  }
+
+  getInputWidth (value) {
+    const valueString = String(value)
+    const valueLength = valueString.length || 1
+    const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
+    return (valueLength + decimalPointDeficit + 0.5) + 'ch'
+  }
+
+  render () {
+    const { error, placeholder, suffix, actionComponent, children } = this.props
+    const { value } = this.state
+
+    return (
+      <div
+        className={classnames('unit-input', { 'unit-input--error': error })}
+        onClick={this.handleFocus}
+      >
+        <div className="unit-input__inputs">
+          <div className="unit-input__input-container">
+            <input
+              type="number"
+              className="unit-input__input"
+              value={value}
+              placeholder={placeholder}
+              onChange={this.handleChange}
+              onBlur={this.handleBlur}
+              style={{ width: this.getInputWidth(value) }}
+              ref={ref => { this.unitInput = ref }}
+            />
+            {
+              suffix && (
+                <div className="unit-input__suffix">
+                  { suffix }
+                </div>
+              )
+            }
+          </div>
+          { children }
+        </div>
+        {actionComponent}
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/unit-input/unit-input.component.js b/ui/app/components/unit-input/unit-input.component.js
deleted file mode 100644
index 230eecfe6..000000000
--- a/ui/app/components/unit-input/unit-input.component.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { removeLeadingZeroes } from '../send/send.utils'
-
-/**
- * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also
- * allows rendering a child component underneath the input to, for example, display conversions of
- * the shown suffix.
- */
-export default class UnitInput extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    actionComponent: PropTypes.node,
-    error: PropTypes.bool,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    placeholder: PropTypes.string,
-    suffix: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }
-
-  static defaultProps = {
-    placeholder: '0',
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      value: props.value || '',
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    const { value: prevPropsValue } = prevProps
-    const { value: propsValue } = this.props
-    const { value: stateValue } = this.state
-
-    if (prevPropsValue !== propsValue && propsValue !== stateValue) {
-      this.setState({ value: propsValue })
-    }
-  }
-
-  handleFocus = () => {
-    this.unitInput.focus()
-  }
-
-  handleChange = event => {
-    const { value: userInput } = event.target
-    let value = userInput
-
-    if (userInput.length && userInput.length > 1) {
-      value = removeLeadingZeroes(userInput)
-    }
-
-    this.setState({ value })
-    this.props.onChange(value)
-  }
-
-  handleBlur = event => {
-    const { onBlur } = this.props
-    typeof onBlur === 'function' && onBlur(this.state.value)
-  }
-
-  getInputWidth (value) {
-    const valueString = String(value)
-    const valueLength = valueString.length || 1
-    const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
-    return (valueLength + decimalPointDeficit + 0.5) + 'ch'
-  }
-
-  render () {
-    const { error, placeholder, suffix, actionComponent, children } = this.props
-    const { value } = this.state
-
-    return (
-      <div
-        className={classnames('unit-input', { 'unit-input--error': error })}
-        onClick={this.handleFocus}
-      >
-        <div className="unit-input__inputs">
-          <div className="unit-input__input-container">
-            <input
-              type="number"
-              className="unit-input__input"
-              value={value}
-              placeholder={placeholder}
-              onChange={this.handleChange}
-              onBlur={this.handleBlur}
-              style={{ width: this.getInputWidth(value) }}
-              ref={ref => { this.unitInput = ref }}
-            />
-            {
-              suffix && (
-                <div className="unit-input__suffix">
-                  { suffix }
-                </div>
-              )
-            }
-          </div>
-          { children }
-        </div>
-        {actionComponent}
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js b/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
deleted file mode 100644
index ead584c26..000000000
--- a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display.component'
-import CurrencyDisplay from '../../currency-display'
-
-describe('UserPreferencedCurrencyDisplay Component', () => {
-  describe('rendering', () => {
-    it('should render properly', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyDisplay />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
-    })
-
-    it('should pass all props to the CurrencyDisplay child component', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyDisplay
-          prop1={true}
-          prop2="test"
-          prop3={1}
-        />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
-      assert.equal(wrapper.find(CurrencyDisplay).props().prop1, true)
-      assert.equal(wrapper.find(CurrencyDisplay).props().prop2, 'test')
-      assert.equal(wrapper.find(CurrencyDisplay).props().prop3, 1)
-    })
-  })
-})
diff --git a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js
deleted file mode 100644
index d9f29327d..000000000
--- a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { PRIMARY, SECONDARY, ETH } from '../../constants/common'
-import CurrencyDisplay from '../currency-display'
-
-export default class UserPreferencedCurrencyDisplay extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    prefix: PropTypes.string,
-    value: PropTypes.string,
-    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    hideLabel: PropTypes.bool,
-    hideTitle: PropTypes.bool,
-    style: PropTypes.object,
-    showEthLogo: PropTypes.bool,
-    ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    // Used in container
-    type: PropTypes.oneOf([PRIMARY, SECONDARY]),
-    ethNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    fiatNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ethPrefix: PropTypes.string,
-    fiatPrefix: PropTypes.string,
-    // From container
-    currency: PropTypes.string,
-    nativeCurrency: PropTypes.string,
-  }
-
-  renderEthLogo () {
-    const { currency, showEthLogo, ethLogoHeight = 12 } = this.props
-
-    return currency === ETH && showEthLogo && (
-      <img
-        src="/images/eth.svg"
-        height={ethLogoHeight}
-      />
-    )
-  }
-
-  render () {
-    return (
-      <CurrencyDisplay
-        {...this.props}
-        prefixComponent={this.renderEthLogo()}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
deleted file mode 100644
index 3c5bd0f21..000000000
--- a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { connect } from 'react-redux'
-import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display.component'
-import { preferencesSelector, getIsMainnet } from '../../selectors'
-import { ETH, PRIMARY, SECONDARY } from '../../constants/common'
-
-const mapStateToProps = (state, ownProps) => {
-  const {
-    useNativeCurrencyAsPrimaryCurrency,
-    showFiatInTestnets,
-  } = preferencesSelector(state)
-
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    useNativeCurrencyAsPrimaryCurrency,
-    showFiatInTestnets,
-    isMainnet,
-    nativeCurrency: state.metamask.nativeCurrency,
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets, isMainnet, nativeCurrency, ...restStateProps } = stateProps
-  const {
-    type,
-    numberOfDecimals: propsNumberOfDecimals,
-    ethNumberOfDecimals,
-    fiatNumberOfDecimals,
-    ethPrefix,
-    fiatPrefix,
-    prefix: propsPrefix,
-    ...restOwnProps
-  } = ownProps
-
-  let currency, numberOfDecimals, prefix
-
-  if (type === PRIMARY && useNativeCurrencyAsPrimaryCurrency ||
-    type === SECONDARY && !useNativeCurrencyAsPrimaryCurrency) {
-    // Display ETH
-    currency = nativeCurrency || ETH
-    numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
-    prefix = propsPrefix || ethPrefix
-  } else if (type === SECONDARY && useNativeCurrencyAsPrimaryCurrency ||
-    type === PRIMARY && !useNativeCurrencyAsPrimaryCurrency) {
-    // Display Fiat
-    numberOfDecimals = propsNumberOfDecimals || fiatNumberOfDecimals || 2
-    prefix = propsPrefix || fiatPrefix
-  }
-
-  if (!isMainnet && !showFiatInTestnets) {
-    currency = nativeCurrency || ETH
-    numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
-    prefix = propsPrefix || ethPrefix
-  }
-
-  return {
-    ...restStateProps,
-    ...dispatchProps,
-    ...restOwnProps,
-    nativeCurrency,
-    currency,
-    numberOfDecimals,
-    prefix,
-  }
-}
-
-export default connect(mapStateToProps, null, mergeProps)(UserPreferencedCurrencyDisplay)
diff --git a/ui/app/components/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js b/ui/app/components/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js
deleted file mode 100644
index 710b5d519..000000000
--- a/ui/app/components/user-preferenced-currency-input/tests/user-preferenced-currency-input.component.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import UserPreferencedCurrencyInput from '../user-preferenced-currency-input.component'
-import CurrencyInput from '../../currency-input'
-
-describe('UserPreferencedCurrencyInput Component', () => {
-  describe('rendering', () => {
-    it('should render properly', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyInput />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(CurrencyInput).length, 1)
-    })
-
-    it('should render useFiat for CurrencyInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyInput
-          useNativeCurrencyAsPrimaryCurrency
-        />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(CurrencyInput).length, 1)
-      assert.equal(wrapper.find(CurrencyInput).props().useFiat, false)
-      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false })
-      assert.equal(wrapper.find(CurrencyInput).props().useFiat, true)
-    })
-  })
-})
diff --git a/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.component.js b/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.component.js
deleted file mode 100644
index 463e66b80..000000000
--- a/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.component.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyInput from '../currency-input'
-
-export default class UserPreferencedCurrencyInput extends PureComponent {
-  static propTypes = {
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
-  }
-
-  render () {
-    const { useNativeCurrencyAsPrimaryCurrency, ...restProps } = this.props
-
-    return (
-      <CurrencyInput
-        {...restProps}
-        useFiat={!useNativeCurrencyAsPrimaryCurrency}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.container.js b/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.container.js
deleted file mode 100644
index 0b88eb5a7..000000000
--- a/ui/app/components/user-preferenced-currency-input/user-preferenced-currency-input.container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { connect } from 'react-redux'
-import UserPreferencedCurrencyInput from './user-preferenced-currency-input.component'
-import { preferencesSelector } from '../../selectors'
-
-const mapStateToProps = state => {
-  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
-
-  return {
-    useNativeCurrencyAsPrimaryCurrency,
-  }
-}
-
-export default connect(mapStateToProps)(UserPreferencedCurrencyInput)
diff --git a/ui/app/components/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js b/ui/app/components/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js
deleted file mode 100644
index d85bddeeb..000000000
--- a/ui/app/components/user-preferenced-token-input/tests/user-preferenced-token-input.component.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import UserPreferencedTokenInput from '../user-preferenced-token-input.component'
-import TokenInput from '../../token-input'
-
-describe('UserPreferencedCurrencyInput Component', () => {
-  describe('rendering', () => {
-    it('should render properly', () => {
-      const wrapper = shallow(
-        <UserPreferencedTokenInput />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(TokenInput).length, 1)
-    })
-
-    it('should render showFiat for TokenInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
-      const wrapper = shallow(
-        <UserPreferencedTokenInput
-          useNativeCurrencyAsPrimaryCurrency
-        />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(wrapper.find(TokenInput).length, 1)
-      assert.equal(wrapper.find(TokenInput).props().showFiat, false)
-      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false })
-      assert.equal(wrapper.find(TokenInput).props().showFiat, true)
-    })
-  })
-})
diff --git a/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.component.js b/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.component.js
deleted file mode 100644
index 8f14231ac..000000000
--- a/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.component.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import TokenInput from '../token-input'
-
-export default class UserPreferencedTokenInput extends PureComponent {
-  static propTypes = {
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
-  }
-
-  render () {
-    const { useNativeCurrencyAsPrimaryCurrency, ...restProps } = this.props
-
-    return (
-      <TokenInput
-        {...restProps}
-        showFiat={!useNativeCurrencyAsPrimaryCurrency}
-      />
-    )
-  }
-}
diff --git a/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.container.js b/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.container.js
deleted file mode 100644
index 3305d4e29..000000000
--- a/ui/app/components/user-preferenced-token-input/user-preferenced-token-input.container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { connect } from 'react-redux'
-import UserPreferencedTokenInput from './user-preferenced-token-input.component'
-import { preferencesSelector } from '../../selectors'
-
-const mapStateToProps = state => {
-  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
-
-  return {
-    useNativeCurrencyAsPrimaryCurrency,
-  }
-}
-
-export default connect(mapStateToProps)(UserPreferencedTokenInput)
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
deleted file mode 100644
index db572e5cb..000000000
--- a/ui/app/components/wallet-view.js
+++ /dev/null
@@ -1,246 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const inherits = require('util').inherits
-const classnames = require('classnames')
-const { checksumAddress } = require('../util')
-import Identicon from './identicon'
-// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('./tooltip-v2.js').default
-const copyToClipboard = require('copy-to-clipboard')
-const actions = require('../actions')
-import BalanceComponent from './balance'
-const TokenList = require('./token-list')
-const selectors = require('../selectors')
-const { ADD_TOKEN_ROUTE } = require('../routes')
-
-import AddTokenButton from './add-token-button'
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(WalletView)
-
-WalletView.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-WalletView.defaultProps = {
-  responsiveDisplayClassname: '',
-}
-
-function mapStateToProps (state) {
-
-  return {
-    network: state.metamask.network,
-    sidebarOpen: state.appState.sidebar.isOpen,
-    identities: state.metamask.identities,
-    accounts: selectors.getMetaMaskAccounts(state),
-    keyrings: state.metamask.keyrings,
-    selectedAddress: selectors.getSelectedAddress(state),
-    selectedAccount: selectors.getSelectedAccount(state),
-    selectedTokenAddress: state.metamask.selectedTokenAddress,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showSendPage: () => dispatch(actions.showSendPage()),
-    hideSidebar: () => dispatch(actions.hideSidebar()),
-    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
-    showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
-  }
-}
-
-inherits(WalletView, Component)
-function WalletView () {
-  Component.call(this)
-  this.state = {
-    hasCopied: false,
-    copyToClipboardPressed: false,
-  }
-}
-
-WalletView.prototype.renderWalletBalance = function () {
-  const {
-    selectedTokenAddress,
-    selectedAccount,
-    unsetSelectedToken,
-    hideSidebar,
-    sidebarOpen,
-  } = this.props
-
-  const selectedClass = selectedTokenAddress
-    ? ''
-    : 'wallet-balance-wrapper--active'
-  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
-
-  return h('div', { className }, [
-    h('div.wallet-balance',
-      {
-        onClick: () => {
-          unsetSelectedToken()
-          selectedTokenAddress && sidebarOpen && hideSidebar()
-        },
-      },
-      [
-        h(BalanceComponent, {
-          balanceValue: selectedAccount ? selectedAccount.balance : '',
-          style: {},
-        }),
-      ]
-    ),
-  ])
-}
-
-WalletView.prototype.renderAddToken = function () {
-  const {
-    sidebarOpen,
-    hideSidebar,
-    history,
-  } = this.props
-  const { metricsEvent } = this.context
-
-  return h(AddTokenButton, {
-    onClick () {
-      history.push(ADD_TOKEN_ROUTE)
-      metricsEvent({
-        eventOpts: {
-          category: 'Navigation',
-          action: 'Token Menu',
-          name: 'Clicked "Add Token"',
-        },
-      })
-      if (sidebarOpen) {
-        hideSidebar()
-      }
-    },
-  })
-}
-
-WalletView.prototype.render = function () {
-  const {
-    responsiveDisplayClassname,
-    selectedAddress,
-    keyrings,
-    showAccountDetailModal,
-    hideSidebar,
-    identities,
-    network,
-  } = this.props
-  // temporary logs + fake extra wallets
-
-  const checksummedAddress = checksumAddress(selectedAddress, network)
-
-  if (!selectedAddress) {
-    throw new Error('selectedAddress should not be ' + String(selectedAddress))
-  }
-
-  const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(selectedAddress)
-  })
-
-  let label = ''
-  let type
-  if (keyring) {
-    type = keyring.type
-    if (type !== 'HD Key Tree') {
-      if (type.toLowerCase().search('hardware') !== -1) {
-        label = this.context.t('hardware')
-      } else {
-        label = this.context.t('imported')
-      }
-    }
-  }
-
-  return h('div.wallet-view.flex-column', {
-    style: {},
-    className: responsiveDisplayClassname,
-  }, [
-
-    // TODO: Separate component: wallet account details
-    h('div.flex-column.wallet-view-account-details', {
-      style: {},
-    }, [
-      h('div.wallet-view__sidebar-close', {
-        onClick: hideSidebar,
-      }),
-
-      h('div.wallet-view__keyring-label.allcaps', label),
-
-      h('div.flex-column.flex-center.wallet-view__name-container', {
-        style: { margin: '0 auto' },
-        onClick: showAccountDetailModal,
-      }, [
-        h(Identicon, {
-          diameter: 54,
-          address: checksummedAddress,
-        }),
-
-        h('span.account-name', {
-          style: {},
-        }, [
-          identities[selectedAddress].name,
-        ]),
-
-        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
-      ]),
-    ]),
-
-    h(Tooltip, {
-      position: 'bottom',
-      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
-      wrapperClassName: 'wallet-view__tooltip',
-    }, [
-      h('button.wallet-view__address', {
-        className: classnames({
-          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
-        }),
-        onClick: () => {
-          copyToClipboard(checksummedAddress)
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Navigation',
-              action: 'Home',
-              name: 'Copied Address',
-            },
-          })
-          this.setState({ hasCopied: true })
-          setTimeout(() => this.setState({ hasCopied: false }), 3000)
-        },
-        onMouseDown: () => {
-          this.setState({ copyToClipboardPressed: true })
-        },
-        onMouseUp: () => {
-          this.setState({ copyToClipboardPressed: false })
-        },
-      }, [
-        `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
-        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
-      ]),
-    ]),
-
-    this.renderWalletBalance(),
-
-    h(TokenList),
-
-    this.renderAddToken(),
-  ])
-}
-
-// TODO: Extra wallets, for dev testing. Remove when PRing to master.
-// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
-//     h('div.wallet-balance', {}, [
-//       h(BalanceComponent, {
-//         balanceValue: selectedAccount.balance,
-//         style: {},
-//       }),
-//     ]),
-// ])
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
deleted file mode 100644
index 34f5466e2..000000000
--- a/ui/app/conf-tx.js
+++ /dev/null
@@ -1,225 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const actions = require('./actions')
-const txHelper = require('../lib/tx-helper')
-const log = require('loglevel')
-const R = require('ramda')
-
-const SignatureRequest = require('./components/signature-request')
-const Loading = require('./components/loading-screen')
-const { DEFAULT_ROUTE } = require('./routes')
-const { getMetaMaskAccounts } = require('./selectors')
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps)
-)(ConfirmTxScreen)
-
-function mapStateToProps (state) {
-  const { metamask } = state
-  const {
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-  } = metamask
-
-  return {
-    identities: state.metamask.identities,
-    accounts: getMetaMaskAccounts(state),
-    selectedAddress: state.metamask.selectedAddress,
-    unapprovedTxs: state.metamask.unapprovedTxs,
-    unapprovedMsgs: state.metamask.unapprovedMsgs,
-    unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
-    unapprovedTypedMessages: state.metamask.unapprovedTypedMessages,
-    index: state.appState.currentView.context,
-    warning: state.appState.warning,
-    network: state.metamask.network,
-    provider: state.metamask.provider,
-    conversionRate: state.metamask.conversionRate,
-    currentCurrency: state.metamask.currentCurrency,
-    blockGasLimit: state.metamask.currentBlockGasLimit,
-    computedBalances: state.metamask.computedBalances,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    send: state.metamask.send,
-    selectedAddressTxList: state.metamask.selectedAddressTxList,
-  }
-}
-
-inherits(ConfirmTxScreen, Component)
-function ConfirmTxScreen () {
-  Component.call(this)
-}
-
-ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () {
-  const {
-    unapprovedMsgCount = 0,
-    unapprovedPersonalMsgCount = 0,
-    unapprovedTypedMessagesCount = 0,
-  } = this.props
-
-  return unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount
-}
-
-ConfirmTxScreen.prototype.componentDidMount = function () {
-  const {
-    unapprovedTxs = {},
-    network,
-    send,
-  } = this.props
-  const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
-
-  if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-}
-
-ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
-  const {
-    unapprovedTxs = {},
-    network,
-    selectedAddressTxList,
-    send,
-    history,
-    match: { params: { id: transactionId } = {} },
-  } = this.props
-
-  let prevTx
-
-  if (transactionId) {
-    prevTx = R.find(({ id }) => id + '' === transactionId)(selectedAddressTxList)
-  } else {
-    const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps
-    const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network)
-    const prevTxData = prevUnconfTxList[prevIndex] || {}
-    prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {}
-  }
-
-  const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
-
-  if (prevTx && prevTx.status === 'dropped') {
-    this.props.dispatch(actions.showModal({
-      name: 'TRANSACTION_CONFIRMED',
-      onSubmit: () => history.push(DEFAULT_ROUTE),
-    }))
-
-    return
-  }
-
-  if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-}
-
-ConfirmTxScreen.prototype.getTxData = function () {
-  const {
-    network,
-    index,
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    match: { params: { id: transactionId } = {} },
-  } = this.props
-
-  const unconfTxList = txHelper(
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    network
-  )
-
-  log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`)
-
-  return transactionId
-    ? R.find(({ id }) => id + '' === transactionId)(unconfTxList)
-    : unconfTxList[index]
-}
-
-ConfirmTxScreen.prototype.render = function () {
-  const props = this.props
-  const {
-    currentCurrency,
-    conversionRate,
-    blockGasLimit,
-  } = props
-
-  var txData = this.getTxData() || {}
-  const { msgParams } = txData
-  log.debug('msgParams detected, rendering pending msg')
-
-  return msgParams
-    ? h(SignatureRequest, {
-      // Properties
-      txData: txData,
-      key: txData.id,
-      selectedAddress: props.selectedAddress,
-      accounts: props.accounts,
-      identities: props.identities,
-      conversionRate,
-      currentCurrency,
-      blockGasLimit,
-      // Actions
-      signMessage: this.signMessage.bind(this, txData),
-      signPersonalMessage: this.signPersonalMessage.bind(this, txData),
-      signTypedMessage: this.signTypedMessage.bind(this, txData),
-      cancelMessage: this.cancelMessage.bind(this, txData),
-      cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
-      cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
-    })
-    : h(Loading)
-}
-
-ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
-  log.info('conf-tx.js: signing message')
-  var params = msgData.msgParams
-  params.metamaskId = msgData.id
-  this.stopPropagation(event)
-  return 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
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.signPersonalMsg(params))
-}
-
-ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
-  log.info('conf-tx.js: signing typed message')
-  var params = msgData.msgParams
-  params.metamaskId = msgData.id
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.signTypedMsg(params))
-}
-
-ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
-  log.info('canceling message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelMsg(msgData))
-}
-
-ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
-  log.info('canceling personal message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelPersonalMsg(msgData))
-}
-
-ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) {
-  log.info('canceling typed message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelTypedMsg(msgData))
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 7eaf60ce8..f2f37bfa3 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -52,4 +52,4 @@
 
 @import './tooltip.scss';
 
-@import '../../../components/index';
+@import '../../../components/app/index';
diff --git a/ui/app/ducks/app/app.js b/ui/app/ducks/app/app.js
new file mode 100644
index 000000000..acbb5c989
--- /dev/null
+++ b/ui/app/ducks/app/app.js
@@ -0,0 +1,788 @@
+const extend = require('xtend')
+const actions = require('../../store/actions')
+const txHelper = require('../../../lib/tx-helper')
+const log = require('loglevel')
+
+module.exports = reduceApp
+
+
+function reduceApp (state, action) {
+  log.debug('App Reducer got ' + action.type)
+  // clone and defaults
+  const selectedAddress = state.metamask.selectedAddress
+  const hasUnconfActions = checkUnconfActions(state)
+  let name = 'accounts'
+  if (selectedAddress) {
+    name = 'accountDetail'
+  }
+
+  if (hasUnconfActions) {
+    log.debug('pending txs detected, defaulting to conf-tx view.')
+    name = 'confTx'
+  }
+
+  var defaultView = {
+    name,
+    detailView: null,
+    context: selectedAddress,
+  }
+
+  // confirm seed words
+  var seedWords = state.metamask.seedWords
+  var seedConfView = {
+    name: 'createVaultComplete',
+    seedWords,
+  }
+
+  // default state
+  var appState = extend({
+    shouldClose: false,
+    menuOpen: false,
+    modal: {
+      open: false,
+      modalState: {
+        name: null,
+        props: {},
+      },
+      previousModalState: {
+        name: null,
+      },
+    },
+    sidebar: {
+      isOpen: false,
+      transitionName: '',
+      type: '',
+      props: {},
+    },
+    alertOpen: false,
+    alertMessage: null,
+    qrCodeData: null,
+    networkDropdownOpen: false,
+    currentView: seedWords ? seedConfView : defaultView,
+    accountDetail: {
+      subview: 'transactions',
+    },
+    // Used to render transition direction
+    transForward: true,
+    // Used to display loading indicator
+    isLoading: false,
+    // Used to display error text
+    warning: null,
+    buyView: {},
+    isMouseUser: false,
+    gasIsLoading: false,
+    networkNonce: null,
+    defaultHdPaths: {
+      trezor: `m/44'/60'/0'/0`,
+      ledger: `m/44'/60'/0'/0/0`,
+    },
+    lastSelectedProvider: null,
+  }, state.appState)
+
+  switch (action.type) {
+    // dropdown methods
+    case actions.NETWORK_DROPDOWN_OPEN:
+      return extend(appState, {
+        networkDropdownOpen: true,
+      })
+
+    case actions.NETWORK_DROPDOWN_CLOSE:
+      return extend(appState, {
+        networkDropdownOpen: false,
+      })
+
+    // sidebar methods
+    case actions.SIDEBAR_OPEN:
+      return extend(appState, {
+        sidebar: {
+          ...action.value,
+          isOpen: true,
+        },
+      })
+
+    case actions.SIDEBAR_CLOSE:
+      return extend(appState, {
+        sidebar: {
+          ...appState.sidebar,
+          isOpen: false,
+        },
+      })
+
+    // alert methods
+    case actions.ALERT_OPEN:
+      return extend(appState, {
+        alertOpen: true,
+        alertMessage: action.value,
+      })
+
+    case actions.ALERT_CLOSE:
+      return extend(appState, {
+        alertOpen: false,
+        alertMessage: null,
+      })
+
+    // qr scanner methods
+    case actions.QR_CODE_DETECTED:
+      return extend(appState, {
+        qrCodeData: action.value,
+      })
+
+
+    // modal methods:
+    case actions.MODAL_OPEN:
+      const { name, ...modalProps } = action.payload
+
+      return extend(appState, {
+        modal: {
+          open: true,
+          modalState: {
+            name: name,
+            props: { ...modalProps },
+          },
+          previousModalState: { ...appState.modal.modalState },
+        },
+      })
+
+    case actions.MODAL_CLOSE:
+      return extend(appState, {
+        modal: Object.assign(
+          state.appState.modal,
+          { open: false },
+          { modalState: { name: null, props: {} } },
+          { previousModalState: appState.modal.modalState},
+        ),
+      })
+
+    // transition methods
+    case actions.TRANSITION_FORWARD:
+      return extend(appState, {
+        transForward: true,
+      })
+
+    case actions.TRANSITION_BACKWARD:
+      return extend(appState, {
+        transForward: false,
+      })
+
+    // intialize
+
+    case actions.SHOW_CREATE_VAULT:
+      return extend(appState, {
+        currentView: {
+          name: 'createVault',
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SHOW_RESTORE_VAULT:
+      return extend(appState, {
+        currentView: {
+          name: 'restoreVault',
+        },
+        transForward: true,
+        forgottenPassword: true,
+      })
+
+    case actions.FORGOT_PASSWORD:
+      const newState = extend(appState, {
+        forgottenPassword: action.value,
+      })
+
+      if (action.value) {
+        newState.currentView = {
+          name: 'restoreVault',
+        }
+      }
+
+      return newState
+
+    case actions.SHOW_INIT_MENU:
+      return extend(appState, {
+        currentView: defaultView,
+        transForward: false,
+      })
+
+    case actions.SHOW_CONFIG_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'config',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
+    case actions.SHOW_ADD_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'add-token',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
+    case actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'add-suggested-token',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
+    case actions.SHOW_IMPORT_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'import-menu',
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SHOW_NEW_ACCOUNT_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'new-account-page',
+          context: action.formToSelect,
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SET_NEW_ACCOUNT_FORM:
+      return extend(appState, {
+        currentView: {
+          name: appState.currentView.name,
+          context: action.formToSelect,
+        },
+      })
+
+    case actions.SHOW_INFO_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'info',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+      })
+
+  case actions.CREATE_NEW_VAULT_IN_PROGRESS:
+      return extend(appState, {
+        currentView: {
+          name: 'createVault',
+          inProgress: true,
+        },
+        transForward: true,
+        isLoading: true,
+      })
+
+    case actions.SHOW_NEW_VAULT_SEED:
+      return extend(appState, {
+        currentView: {
+          name: 'createVaultComplete',
+          seedWords: action.value,
+        },
+        transForward: true,
+        isLoading: false,
+      })
+
+    case actions.NEW_ACCOUNT_SCREEN:
+      return extend(appState, {
+        currentView: {
+          name: 'new-account',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+      })
+
+    case actions.SHOW_SEND_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'sendTransaction',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SHOW_SEND_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'sendToken',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SHOW_NEW_KEYCHAIN:
+      return extend(appState, {
+        currentView: {
+          name: 'newKeychain',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+      })
+
+  // unlock
+
+    case actions.UNLOCK_METAMASK:
+      return extend(appState, {
+        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
+        detailView: {},
+        transForward: true,
+        isLoading: false,
+        warning: null,
+      })
+
+    case actions.LOCK_METAMASK:
+      return extend(appState, {
+        currentView: defaultView,
+        transForward: false,
+        warning: null,
+      })
+
+    case actions.BACK_TO_INIT_MENU:
+      return extend(appState, {
+        warning: null,
+        transForward: false,
+        forgottenPassword: true,
+        currentView: {
+          name: 'InitMenu',
+        },
+      })
+
+    case actions.BACK_TO_UNLOCK_VIEW:
+      return extend(appState, {
+        warning: null,
+        transForward: true,
+        forgottenPassword: false,
+        currentView: {
+          name: 'UnlockScreen',
+        },
+      })
+  // reveal seed words
+
+    case actions.REVEAL_SEED_CONFIRMATION:
+      return extend(appState, {
+        currentView: {
+          name: 'reveal-seed-conf',
+        },
+        transForward: true,
+        warning: null,
+      })
+
+  // accounts
+
+    case actions.SET_SELECTED_ACCOUNT:
+      return extend(appState, {
+        activeAddress: action.value,
+      })
+
+    case actions.GO_HOME:
+      return extend(appState, {
+        currentView: extend(appState.currentView, {
+          name: 'accountDetail',
+        }),
+        accountDetail: {
+          subview: 'transactions',
+          accountExport: 'none',
+          privateKey: '',
+        },
+        transForward: false,
+        warning: null,
+      })
+
+    case actions.SHOW_ACCOUNT_DETAIL:
+      return extend(appState, {
+        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
+        currentView: {
+          name: 'accountDetail',
+          context: action.value,
+        },
+        accountDetail: {
+          subview: 'transactions',
+          accountExport: 'none',
+          privateKey: '',
+        },
+        transForward: false,
+      })
+
+    case actions.BACK_TO_ACCOUNT_DETAIL:
+      return extend(appState, {
+        currentView: {
+          name: 'accountDetail',
+          context: action.value,
+        },
+        accountDetail: {
+          subview: 'transactions',
+          accountExport: 'none',
+          privateKey: '',
+        },
+        transForward: false,
+      })
+
+    case actions.SHOW_ACCOUNTS_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: seedWords ? 'createVaultComplete' : 'accounts',
+          seedWords,
+        },
+        transForward: true,
+        isLoading: false,
+        warning: null,
+        scrollToBottom: false,
+        forgottenPassword: false,
+      })
+
+    case actions.SHOW_NOTICE:
+      return extend(appState, {
+        transForward: true,
+        isLoading: false,
+      })
+
+    case actions.REVEAL_ACCOUNT:
+      return extend(appState, {
+        scrollToBottom: true,
+      })
+
+    case actions.SHOW_CONF_TX_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'confTx',
+          context: action.id ? indexForPending(state, action.id) : 0,
+        },
+        transForward: action.transForward,
+        warning: null,
+        isLoading: false,
+      })
+
+    case actions.SHOW_CONF_MSG_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: hasUnconfActions ? 'confTx' : 'account-detail',
+          context: 0,
+        },
+        transForward: true,
+        warning: null,
+        isLoading: false,
+      })
+
+    case actions.COMPLETED_TX:
+      log.debug('reducing COMPLETED_TX for tx ' + action.value)
+      const otherUnconfActions = getUnconfActionList(state)
+        .filter(tx => tx.id !== action.value)
+      const hasOtherUnconfActions = otherUnconfActions.length > 0
+
+      if (hasOtherUnconfActions) {
+        log.debug('reducer detected txs - rendering confTx view')
+        return extend(appState, {
+          transForward: false,
+          currentView: {
+            name: 'confTx',
+            context: 0,
+          },
+          warning: null,
+        })
+      } else {
+        log.debug('attempting to close popup')
+        return extend(appState, {
+          // indicate notification should close
+          shouldClose: true,
+          transForward: false,
+          warning: null,
+          currentView: {
+            name: 'accountDetail',
+            context: state.metamask.selectedAddress,
+          },
+          accountDetail: {
+            subview: 'transactions',
+          },
+        })
+      }
+
+    case actions.NEXT_TX:
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'confTx',
+          context: ++appState.currentView.context,
+          warning: null,
+        },
+      })
+
+    case actions.VIEW_PENDING_TX:
+      const context = indexForPending(state, action.value)
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'confTx',
+          context,
+          warning: null,
+        },
+      })
+
+    case actions.PREVIOUS_TX:
+      return extend(appState, {
+        transForward: false,
+        currentView: {
+          name: 'confTx',
+          context: --appState.currentView.context,
+          warning: null,
+        },
+      })
+
+    case actions.TRANSACTION_ERROR:
+      return extend(appState, {
+        currentView: {
+          name: 'confTx',
+          errorMessage: 'There was a problem submitting this transaction.',
+        },
+      })
+
+    case actions.UNLOCK_FAILED:
+      return extend(appState, {
+        warning: action.value || 'Incorrect password. Try again.',
+      })
+
+    case actions.UNLOCK_SUCCEEDED:
+      return extend(appState, {
+        warning: '',
+      })
+
+    case actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH:
+      const { device, path } = action.value
+      const newDefaults = {...appState.defaultHdPaths}
+      newDefaults[device] = path
+
+      return extend(appState, {
+        defaultHdPaths: newDefaults,
+      })
+
+    case actions.SHOW_LOADING:
+      return extend(appState, {
+        isLoading: true,
+        loadingMessage: action.value,
+      })
+
+    case actions.HIDE_LOADING:
+      return extend(appState, {
+        isLoading: false,
+      })
+
+    case actions.SHOW_SUB_LOADING_INDICATION:
+      return extend(appState, {
+        isSubLoading: true,
+      })
+
+    case actions.HIDE_SUB_LOADING_INDICATION:
+      return extend(appState, {
+        isSubLoading: false,
+      })
+    case actions.CLEAR_SEED_WORD_CACHE:
+      return extend(appState, {
+        transForward: true,
+        currentView: {},
+        isLoading: false,
+        accountDetail: {
+          subview: 'transactions',
+          accountExport: 'none',
+          privateKey: '',
+        },
+      })
+
+    case actions.DISPLAY_WARNING:
+      return extend(appState, {
+        warning: action.value,
+        isLoading: false,
+      })
+
+    case actions.HIDE_WARNING:
+      return extend(appState, {
+        warning: undefined,
+      })
+
+    case actions.REQUEST_ACCOUNT_EXPORT:
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'accountDetail',
+          context: appState.currentView.context,
+        },
+        accountDetail: {
+          subview: 'export',
+          accountExport: 'requested',
+        },
+      })
+
+    case actions.EXPORT_ACCOUNT:
+      return extend(appState, {
+        accountDetail: {
+          subview: 'export',
+          accountExport: 'completed',
+        },
+      })
+
+    case actions.SHOW_PRIVATE_KEY:
+      return extend(appState, {
+        accountDetail: {
+          subview: 'export',
+          accountExport: 'completed',
+          privateKey: action.value,
+        },
+      })
+
+    case actions.BUY_ETH_VIEW:
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'buyEth',
+          context: appState.currentView.name,
+        },
+        identity: state.metamask.identities[action.value],
+        buyView: {
+          subview: 'Coinbase',
+          amount: '15.00',
+          buyAddress: action.value,
+          formView: {
+            coinbase: true,
+            shapeshift: false,
+          },
+        },
+      })
+
+    case actions.ONBOARDING_BUY_ETH_VIEW:
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'onboardingBuyEth',
+          context: appState.currentView.name,
+        },
+        identity: state.metamask.identities[action.value],
+      })
+
+    case actions.COINBASE_SUBVIEW:
+      return extend(appState, {
+        buyView: {
+          subview: 'Coinbase',
+          formView: {
+            coinbase: true,
+            shapeshift: false,
+          },
+          buyAddress: appState.buyView.buyAddress,
+          amount: appState.buyView.amount,
+        },
+      })
+
+    case actions.SHAPESHIFT_SUBVIEW:
+      return extend(appState, {
+        buyView: {
+          subview: 'ShapeShift',
+          formView: {
+            coinbase: false,
+            shapeshift: true,
+            marketinfo: action.value.marketinfo,
+            coinOptions: action.value.coinOptions,
+          },
+          buyAddress: action.value.buyAddress || appState.buyView.buyAddress,
+          amount: appState.buyView.amount || 0,
+        },
+      })
+
+    case actions.PAIR_UPDATE:
+      return extend(appState, {
+        buyView: {
+          subview: 'ShapeShift',
+          formView: {
+            coinbase: false,
+            shapeshift: true,
+            marketinfo: action.value.marketinfo,
+            coinOptions: appState.buyView.formView.coinOptions,
+          },
+          buyAddress: appState.buyView.buyAddress,
+          amount: appState.buyView.amount,
+          warning: null,
+        },
+      })
+
+    case actions.SHOW_QR:
+      return extend(appState, {
+        qrRequested: true,
+        transForward: true,
+
+        Qr: {
+          message: action.value.message,
+          data: action.value.data,
+        },
+      })
+
+    case actions.SHOW_QR_VIEW:
+      return extend(appState, {
+        currentView: {
+          name: 'qr',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+        Qr: {
+          message: action.value.message,
+          data: action.value.data,
+        },
+      })
+
+    case actions.SET_MOUSE_USER_STATE:
+      return extend(appState, {
+        isMouseUser: action.value,
+      })
+
+    case actions.GAS_LOADING_STARTED:
+      return extend(appState, {
+        gasIsLoading: true,
+      })
+
+    case actions.GAS_LOADING_FINISHED:
+      return extend(appState, {
+        gasIsLoading: false,
+      })
+
+    case actions.SET_NETWORK_NONCE:
+      return extend(appState, {
+        networkNonce: action.value,
+      })
+
+    case actions.SET_PREVIOUS_PROVIDER:
+      if (action.value === 'loading') {
+        return appState
+      }
+      return extend(appState, {
+        lastSelectedProvider: action.value,
+      })
+
+    default:
+      return appState
+  }
+}
+
+function checkUnconfActions (state) {
+  const unconfActionList = getUnconfActionList(state)
+  const hasUnconfActions = unconfActionList.length > 0
+  return hasUnconfActions
+}
+
+function getUnconfActionList (state) {
+  const { unapprovedTxs, unapprovedMsgs,
+    unapprovedPersonalMsgs, unapprovedTypedMessages, network } = state.metamask
+
+  const unconfActionList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network)
+  return unconfActionList
+}
+
+function indexForPending (state, txId) {
+  const unconfTxList = getUnconfActionList(state)
+  const match = unconfTxList.find((tx) => tx.id === txId)
+  const index = unconfTxList.indexOf(match)
+  return index
+}
+
+// function indexForLastPending (state) {
+//   return getUnconfActionList(state).length
+// }
diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
deleted file mode 100644
index f75ff809a..000000000
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import {
-  conversionRateSelector,
-  currentCurrencySelector,
-  unconfirmedTransactionsHashSelector,
-  getNativeCurrency,
-} from '../selectors/confirm-transaction'
-
-import {
-  getValueFromWeiHex,
-  getTransactionFee,
-  getHexGasTotal,
-  addFiat,
-  addEth,
-  increaseLastGasPrice,
-  hexGreaterThan,
-} from '../helpers/confirm-transaction/util'
-
-import {
-  getTokenData,
-  getMethodData,
-  isSmartContractAddress,
-  sumHexes,
-} from '../helpers/transactions.util'
-
-import { getSymbolAndDecimals } from '../token-util'
-import { conversionUtil } from '../conversion-util'
-import { addHexPrefix } from 'ethereumjs-util'
-
-// Actions
-const createActionType = action => `metamask/confirm-transaction/${action}`
-
-const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA')
-const CLEAR_TX_DATA = createActionType('CLEAR_TX_DATA')
-const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA')
-const CLEAR_TOKEN_DATA = createActionType('CLEAR_TOKEN_DATA')
-const UPDATE_METHOD_DATA = createActionType('UPDATE_METHOD_DATA')
-const CLEAR_METHOD_DATA = createActionType('CLEAR_METHOD_DATA')
-const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION')
-const UPDATE_TRANSACTION_AMOUNTS = createActionType('UPDATE_TRANSACTION_AMOUNTS')
-const UPDATE_TRANSACTION_FEES = createActionType('UPDATE_TRANSACTION_FEES')
-const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
-const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
-const UPDATE_NONCE = createActionType('UPDATE_NONCE')
-const UPDATE_TO_SMART_CONTRACT = createActionType('UPDATE_TO_SMART_CONTRACT')
-const FETCH_DATA_START = createActionType('FETCH_DATA_START')
-const FETCH_DATA_END = createActionType('FETCH_DATA_END')
-
-// Initial state
-const initState = {
-  txData: {},
-  tokenData: {},
-  methodData: {},
-  tokenProps: {
-    tokenDecimals: '',
-    tokenSymbol: '',
-  },
-  fiatTransactionAmount: '',
-  fiatTransactionFee: '',
-  fiatTransactionTotal: '',
-  ethTransactionAmount: '',
-  ethTransactionFee: '',
-  ethTransactionTotal: '',
-  hexTransactionAmount: '',
-  hexTransactionFee: '',
-  hexTransactionTotal: '',
-  nonce: '',
-  toSmartContract: false,
-  fetchingData: false,
-}
-
-// Reducer
-export default function reducer ({ confirmTransaction: confirmState = initState }, action = {}) {
-  switch (action.type) {
-    case UPDATE_TX_DATA:
-      return {
-        ...confirmState,
-        txData: {
-          ...action.payload,
-        },
-      }
-    case CLEAR_TX_DATA:
-      return {
-        ...confirmState,
-        txData: {},
-      }
-    case UPDATE_TOKEN_DATA:
-      return {
-        ...confirmState,
-        tokenData: {
-          ...action.payload,
-        },
-      }
-    case CLEAR_TOKEN_DATA:
-      return {
-        ...confirmState,
-        tokenData: {},
-      }
-    case UPDATE_METHOD_DATA:
-      return {
-        ...confirmState,
-        methodData: {
-          ...action.payload,
-        },
-      }
-    case CLEAR_METHOD_DATA:
-      return {
-        ...confirmState,
-        methodData: {},
-      }
-    case UPDATE_TRANSACTION_AMOUNTS:
-      const { fiatTransactionAmount, ethTransactionAmount, hexTransactionAmount } = action.payload
-      return {
-        ...confirmState,
-        fiatTransactionAmount: fiatTransactionAmount || confirmState.fiatTransactionAmount,
-        ethTransactionAmount: ethTransactionAmount || confirmState.ethTransactionAmount,
-        hexTransactionAmount: hexTransactionAmount || confirmState.hexTransactionAmount,
-      }
-    case UPDATE_TRANSACTION_FEES:
-      const { fiatTransactionFee, ethTransactionFee, hexTransactionFee } = action.payload
-      return {
-        ...confirmState,
-        fiatTransactionFee: fiatTransactionFee || confirmState.fiatTransactionFee,
-        ethTransactionFee: ethTransactionFee || confirmState.ethTransactionFee,
-        hexTransactionFee: hexTransactionFee || confirmState.hexTransactionFee,
-      }
-    case UPDATE_TRANSACTION_TOTALS:
-      const { fiatTransactionTotal, ethTransactionTotal, hexTransactionTotal } = action.payload
-      return {
-        ...confirmState,
-        fiatTransactionTotal: fiatTransactionTotal || confirmState.fiatTransactionTotal,
-        ethTransactionTotal: ethTransactionTotal || confirmState.ethTransactionTotal,
-        hexTransactionTotal: hexTransactionTotal || confirmState.hexTransactionTotal,
-      }
-    case UPDATE_TOKEN_PROPS:
-      const { tokenSymbol = '', tokenDecimals = '' } = action.payload
-      return {
-        ...confirmState,
-        tokenProps: {
-          ...confirmState.tokenProps,
-          tokenSymbol,
-          tokenDecimals,
-        },
-      }
-    case UPDATE_NONCE:
-      return {
-        ...confirmState,
-        nonce: action.payload,
-      }
-    case UPDATE_TO_SMART_CONTRACT:
-      return {
-        ...confirmState,
-        toSmartContract: action.payload,
-      }
-    case FETCH_DATA_START:
-      return {
-        ...confirmState,
-        fetchingData: true,
-      }
-    case FETCH_DATA_END:
-      return {
-        ...confirmState,
-        fetchingData: false,
-      }
-    case CLEAR_CONFIRM_TRANSACTION:
-      return initState
-    default:
-      return confirmState
-  }
-}
-
-// Action Creators
-export function updateTxData (txData) {
-  return {
-    type: UPDATE_TX_DATA,
-    payload: txData,
-  }
-}
-
-export function clearTxData () {
-  return {
-    type: CLEAR_TX_DATA,
-  }
-}
-
-export function updateTokenData (tokenData) {
-  return {
-    type: UPDATE_TOKEN_DATA,
-    payload: tokenData,
-  }
-}
-
-export function clearTokenData () {
-  return {
-    type: CLEAR_TOKEN_DATA,
-  }
-}
-
-export function updateMethodData (methodData) {
-  return {
-    type: UPDATE_METHOD_DATA,
-    payload: methodData,
-  }
-}
-
-export function clearMethodData () {
-  return {
-    type: CLEAR_METHOD_DATA,
-  }
-}
-
-export function updateTransactionAmounts (amounts) {
-  return {
-    type: UPDATE_TRANSACTION_AMOUNTS,
-    payload: amounts,
-  }
-}
-
-export function updateTransactionFees (fees) {
-  return {
-    type: UPDATE_TRANSACTION_FEES,
-    payload: fees,
-  }
-}
-
-export function updateTransactionTotals (totals) {
-  return {
-    type: UPDATE_TRANSACTION_TOTALS,
-    payload: totals,
-  }
-}
-
-export function updateTokenProps (tokenProps) {
-  return {
-    type: UPDATE_TOKEN_PROPS,
-    payload: tokenProps,
-  }
-}
-
-export function updateNonce (nonce) {
-  return {
-    type: UPDATE_NONCE,
-    payload: nonce,
-  }
-}
-
-export function updateToSmartContract (toSmartContract) {
-  return {
-    type: UPDATE_TO_SMART_CONTRACT,
-    payload: toSmartContract,
-  }
-}
-
-export function setFetchingData (isFetching) {
-  return {
-    type: isFetching ? FETCH_DATA_START : FETCH_DATA_END,
-  }
-}
-
-export function updateGasAndCalculate ({ gasLimit, gasPrice }) {
-  gasLimit = addHexPrefix(gasLimit)
-  gasPrice = addHexPrefix(gasPrice)
-  return (dispatch, getState) => {
-    const { confirmTransaction: { txData } } = getState()
-    const newTxData = {
-      ...txData,
-      txParams: {
-        ...txData.txParams,
-        gas: gasLimit,
-        gasPrice,
-      },
-    }
-
-    dispatch(updateTxDataAndCalculate(newTxData))
-  }
-}
-
-function increaseFromLastGasPrice (txData) {
-  const { lastGasPrice, txParams: { gasPrice: previousGasPrice } = {} } = txData
-
-  // Set the minimum to a 10% increase from the lastGasPrice.
-  const minimumGasPrice = increaseLastGasPrice(lastGasPrice)
-  const gasPriceBelowMinimum = hexGreaterThan(minimumGasPrice, previousGasPrice)
-  const gasPrice = (!previousGasPrice || gasPriceBelowMinimum) ? minimumGasPrice : previousGasPrice
-
-  return {
-    ...txData,
-    txParams: {
-      ...txData.txParams,
-      gasPrice,
-    },
-  }
-}
-
-export function updateTxDataAndCalculate (txData) {
-  return (dispatch, getState) => {
-    const state = getState()
-    const currentCurrency = currentCurrencySelector(state)
-    const conversionRate = conversionRateSelector(state)
-    const nativeCurrency = getNativeCurrency(state)
-
-    dispatch(updateTxData(txData))
-
-    const { txParams: { value = '0x0', gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
-
-    const fiatTransactionAmount = getValueFromWeiHex({
-      value, fromCurrency: nativeCurrency, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
-    })
-    const ethTransactionAmount = getValueFromWeiHex({
-      value, fromCurrency: nativeCurrency, toCurrency: nativeCurrency, conversionRate, numberOfDecimals: 6,
-    })
-
-    dispatch(updateTransactionAmounts({
-      fiatTransactionAmount,
-      ethTransactionAmount,
-      hexTransactionAmount: value,
-    }))
-
-    const hexTransactionFee = getHexGasTotal({ gasLimit, gasPrice })
-
-    const fiatTransactionFee = getTransactionFee({
-      value: hexTransactionFee,
-      fromCurrency: nativeCurrency,
-      toCurrency: currentCurrency,
-      numberOfDecimals: 2,
-      conversionRate,
-    })
-    const ethTransactionFee = getTransactionFee({
-      value: hexTransactionFee,
-      fromCurrency: nativeCurrency,
-      toCurrency: nativeCurrency,
-      numberOfDecimals: 6,
-      conversionRate,
-    })
-
-    dispatch(updateTransactionFees({ fiatTransactionFee, ethTransactionFee, hexTransactionFee }))
-
-    const fiatTransactionTotal = addFiat(fiatTransactionFee, fiatTransactionAmount)
-    const ethTransactionTotal = addEth(ethTransactionFee, ethTransactionAmount)
-    const hexTransactionTotal = sumHexes(value, hexTransactionFee)
-
-    dispatch(updateTransactionTotals({
-      fiatTransactionTotal,
-      ethTransactionTotal,
-      hexTransactionTotal,
-    }))
-  }
-}
-
-export function setTransactionToConfirm (transactionId) {
-  return async (dispatch, getState) => {
-    const state = getState()
-    const unconfirmedTransactionsHash = unconfirmedTransactionsHashSelector(state)
-    const transaction = unconfirmedTransactionsHash[transactionId]
-
-    if (!transaction) {
-      console.error(`Transaction with id ${transactionId} not found`)
-      return
-    }
-
-    if (transaction.txParams) {
-      const { lastGasPrice } = transaction
-      const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
-      dispatch(updateTxDataAndCalculate(txData))
-
-      const { txParams } = transaction
-      const { to } = txParams
-
-      if (txParams.data) {
-        const { tokens: existingTokens } = state
-        const { data, to: tokenAddress } = txParams
-
-        try {
-          dispatch(setFetchingData(true))
-          const methodData = await getMethodData(data)
-
-          dispatch(updateMethodData(methodData))
-        } catch (error) {
-          dispatch(updateMethodData({}))
-          dispatch(setFetchingData(false))
-        }
-
-        try {
-          const toSmartContract = await isSmartContractAddress(to)
-          dispatch(updateToSmartContract(toSmartContract))
-          dispatch(setFetchingData(false))
-        } catch (error) {
-          dispatch(setFetchingData(false))
-        }
-
-        const tokenData = getTokenData(data)
-        dispatch(updateTokenData(tokenData))
-
-        try {
-          const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {}
-          const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData
-          dispatch(updateTokenProps({ tokenSymbol, tokenDecimals }))
-        } catch (error) {
-          dispatch(updateTokenProps({ tokenSymbol: '', tokenDecimals: '' }))
-        }
-      }
-
-      if (txParams.nonce) {
-        const nonce = conversionUtil(txParams.nonce, {
-          fromNumericBase: 'hex',
-          toNumericBase: 'dec',
-        })
-
-        dispatch(updateNonce(nonce))
-      }
-    } else {
-      dispatch(updateTxData(transaction))
-    }
-  }
-}
-
-export function clearConfirmTransaction () {
-  return {
-    type: CLEAR_CONFIRM_TRANSACTION,
-  }
-}
diff --git a/ui/app/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction/confirm-transaction.duck.js
new file mode 100644
index 000000000..4edf8a70c
--- /dev/null
+++ b/ui/app/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -0,0 +1,420 @@
+import {
+  conversionRateSelector,
+  currentCurrencySelector,
+  unconfirmedTransactionsHashSelector,
+  getNativeCurrency,
+} from '../../selectors/confirm-transaction'
+
+import {
+  getValueFromWeiHex,
+  getTransactionFee,
+  getHexGasTotal,
+  addFiat,
+  addEth,
+  increaseLastGasPrice,
+  hexGreaterThan,
+} from '../../helpers/utils/confirm-tx.util'
+
+import {
+  getTokenData,
+  getMethodData,
+  isSmartContractAddress,
+  sumHexes,
+} from '../../helpers/utils/transactions.util'
+
+import { getSymbolAndDecimals } from '../../helpers/utils/token-util'
+import { conversionUtil } from '../../helpers/utils/conversion-util'
+import { addHexPrefix } from 'ethereumjs-util'
+
+// Actions
+const createActionType = action => `metamask/confirm-transaction/${action}`
+
+const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA')
+const CLEAR_TX_DATA = createActionType('CLEAR_TX_DATA')
+const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA')
+const CLEAR_TOKEN_DATA = createActionType('CLEAR_TOKEN_DATA')
+const UPDATE_METHOD_DATA = createActionType('UPDATE_METHOD_DATA')
+const CLEAR_METHOD_DATA = createActionType('CLEAR_METHOD_DATA')
+const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION')
+const UPDATE_TRANSACTION_AMOUNTS = createActionType('UPDATE_TRANSACTION_AMOUNTS')
+const UPDATE_TRANSACTION_FEES = createActionType('UPDATE_TRANSACTION_FEES')
+const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
+const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
+const UPDATE_NONCE = createActionType('UPDATE_NONCE')
+const UPDATE_TO_SMART_CONTRACT = createActionType('UPDATE_TO_SMART_CONTRACT')
+const FETCH_DATA_START = createActionType('FETCH_DATA_START')
+const FETCH_DATA_END = createActionType('FETCH_DATA_END')
+
+// Initial state
+const initState = {
+  txData: {},
+  tokenData: {},
+  methodData: {},
+  tokenProps: {
+    tokenDecimals: '',
+    tokenSymbol: '',
+  },
+  fiatTransactionAmount: '',
+  fiatTransactionFee: '',
+  fiatTransactionTotal: '',
+  ethTransactionAmount: '',
+  ethTransactionFee: '',
+  ethTransactionTotal: '',
+  hexTransactionAmount: '',
+  hexTransactionFee: '',
+  hexTransactionTotal: '',
+  nonce: '',
+  toSmartContract: false,
+  fetchingData: false,
+}
+
+// Reducer
+export default function reducer ({ confirmTransaction: confirmState = initState }, action = {}) {
+  switch (action.type) {
+    case UPDATE_TX_DATA:
+      return {
+        ...confirmState,
+        txData: {
+          ...action.payload,
+        },
+      }
+    case CLEAR_TX_DATA:
+      return {
+        ...confirmState,
+        txData: {},
+      }
+    case UPDATE_TOKEN_DATA:
+      return {
+        ...confirmState,
+        tokenData: {
+          ...action.payload,
+        },
+      }
+    case CLEAR_TOKEN_DATA:
+      return {
+        ...confirmState,
+        tokenData: {},
+      }
+    case UPDATE_METHOD_DATA:
+      return {
+        ...confirmState,
+        methodData: {
+          ...action.payload,
+        },
+      }
+    case CLEAR_METHOD_DATA:
+      return {
+        ...confirmState,
+        methodData: {},
+      }
+    case UPDATE_TRANSACTION_AMOUNTS:
+      const { fiatTransactionAmount, ethTransactionAmount, hexTransactionAmount } = action.payload
+      return {
+        ...confirmState,
+        fiatTransactionAmount: fiatTransactionAmount || confirmState.fiatTransactionAmount,
+        ethTransactionAmount: ethTransactionAmount || confirmState.ethTransactionAmount,
+        hexTransactionAmount: hexTransactionAmount || confirmState.hexTransactionAmount,
+      }
+    case UPDATE_TRANSACTION_FEES:
+      const { fiatTransactionFee, ethTransactionFee, hexTransactionFee } = action.payload
+      return {
+        ...confirmState,
+        fiatTransactionFee: fiatTransactionFee || confirmState.fiatTransactionFee,
+        ethTransactionFee: ethTransactionFee || confirmState.ethTransactionFee,
+        hexTransactionFee: hexTransactionFee || confirmState.hexTransactionFee,
+      }
+    case UPDATE_TRANSACTION_TOTALS:
+      const { fiatTransactionTotal, ethTransactionTotal, hexTransactionTotal } = action.payload
+      return {
+        ...confirmState,
+        fiatTransactionTotal: fiatTransactionTotal || confirmState.fiatTransactionTotal,
+        ethTransactionTotal: ethTransactionTotal || confirmState.ethTransactionTotal,
+        hexTransactionTotal: hexTransactionTotal || confirmState.hexTransactionTotal,
+      }
+    case UPDATE_TOKEN_PROPS:
+      const { tokenSymbol = '', tokenDecimals = '' } = action.payload
+      return {
+        ...confirmState,
+        tokenProps: {
+          ...confirmState.tokenProps,
+          tokenSymbol,
+          tokenDecimals,
+        },
+      }
+    case UPDATE_NONCE:
+      return {
+        ...confirmState,
+        nonce: action.payload,
+      }
+    case UPDATE_TO_SMART_CONTRACT:
+      return {
+        ...confirmState,
+        toSmartContract: action.payload,
+      }
+    case FETCH_DATA_START:
+      return {
+        ...confirmState,
+        fetchingData: true,
+      }
+    case FETCH_DATA_END:
+      return {
+        ...confirmState,
+        fetchingData: false,
+      }
+    case CLEAR_CONFIRM_TRANSACTION:
+      return initState
+    default:
+      return confirmState
+  }
+}
+
+// Action Creators
+export function updateTxData (txData) {
+  return {
+    type: UPDATE_TX_DATA,
+    payload: txData,
+  }
+}
+
+export function clearTxData () {
+  return {
+    type: CLEAR_TX_DATA,
+  }
+}
+
+export function updateTokenData (tokenData) {
+  return {
+    type: UPDATE_TOKEN_DATA,
+    payload: tokenData,
+  }
+}
+
+export function clearTokenData () {
+  return {
+    type: CLEAR_TOKEN_DATA,
+  }
+}
+
+export function updateMethodData (methodData) {
+  return {
+    type: UPDATE_METHOD_DATA,
+    payload: methodData,
+  }
+}
+
+export function clearMethodData () {
+  return {
+    type: CLEAR_METHOD_DATA,
+  }
+}
+
+export function updateTransactionAmounts (amounts) {
+  return {
+    type: UPDATE_TRANSACTION_AMOUNTS,
+    payload: amounts,
+  }
+}
+
+export function updateTransactionFees (fees) {
+  return {
+    type: UPDATE_TRANSACTION_FEES,
+    payload: fees,
+  }
+}
+
+export function updateTransactionTotals (totals) {
+  return {
+    type: UPDATE_TRANSACTION_TOTALS,
+    payload: totals,
+  }
+}
+
+export function updateTokenProps (tokenProps) {
+  return {
+    type: UPDATE_TOKEN_PROPS,
+    payload: tokenProps,
+  }
+}
+
+export function updateNonce (nonce) {
+  return {
+    type: UPDATE_NONCE,
+    payload: nonce,
+  }
+}
+
+export function updateToSmartContract (toSmartContract) {
+  return {
+    type: UPDATE_TO_SMART_CONTRACT,
+    payload: toSmartContract,
+  }
+}
+
+export function setFetchingData (isFetching) {
+  return {
+    type: isFetching ? FETCH_DATA_START : FETCH_DATA_END,
+  }
+}
+
+export function updateGasAndCalculate ({ gasLimit, gasPrice }) {
+  gasLimit = addHexPrefix(gasLimit)
+  gasPrice = addHexPrefix(gasPrice)
+  return (dispatch, getState) => {
+    const { confirmTransaction: { txData } } = getState()
+    const newTxData = {
+      ...txData,
+      txParams: {
+        ...txData.txParams,
+        gas: gasLimit,
+        gasPrice,
+      },
+    }
+
+    dispatch(updateTxDataAndCalculate(newTxData))
+  }
+}
+
+function increaseFromLastGasPrice (txData) {
+  const { lastGasPrice, txParams: { gasPrice: previousGasPrice } = {} } = txData
+
+  // Set the minimum to a 10% increase from the lastGasPrice.
+  const minimumGasPrice = increaseLastGasPrice(lastGasPrice)
+  const gasPriceBelowMinimum = hexGreaterThan(minimumGasPrice, previousGasPrice)
+  const gasPrice = (!previousGasPrice || gasPriceBelowMinimum) ? minimumGasPrice : previousGasPrice
+
+  return {
+    ...txData,
+    txParams: {
+      ...txData.txParams,
+      gasPrice,
+    },
+  }
+}
+
+export function updateTxDataAndCalculate (txData) {
+  return (dispatch, getState) => {
+    const state = getState()
+    const currentCurrency = currentCurrencySelector(state)
+    const conversionRate = conversionRateSelector(state)
+    const nativeCurrency = getNativeCurrency(state)
+
+    dispatch(updateTxData(txData))
+
+    const { txParams: { value = '0x0', gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
+
+    const fiatTransactionAmount = getValueFromWeiHex({
+      value, fromCurrency: nativeCurrency, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
+    })
+    const ethTransactionAmount = getValueFromWeiHex({
+      value, fromCurrency: nativeCurrency, toCurrency: nativeCurrency, conversionRate, numberOfDecimals: 6,
+    })
+
+    dispatch(updateTransactionAmounts({
+      fiatTransactionAmount,
+      ethTransactionAmount,
+      hexTransactionAmount: value,
+    }))
+
+    const hexTransactionFee = getHexGasTotal({ gasLimit, gasPrice })
+
+    const fiatTransactionFee = getTransactionFee({
+      value: hexTransactionFee,
+      fromCurrency: nativeCurrency,
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      conversionRate,
+    })
+    const ethTransactionFee = getTransactionFee({
+      value: hexTransactionFee,
+      fromCurrency: nativeCurrency,
+      toCurrency: nativeCurrency,
+      numberOfDecimals: 6,
+      conversionRate,
+    })
+
+    dispatch(updateTransactionFees({ fiatTransactionFee, ethTransactionFee, hexTransactionFee }))
+
+    const fiatTransactionTotal = addFiat(fiatTransactionFee, fiatTransactionAmount)
+    const ethTransactionTotal = addEth(ethTransactionFee, ethTransactionAmount)
+    const hexTransactionTotal = sumHexes(value, hexTransactionFee)
+
+    dispatch(updateTransactionTotals({
+      fiatTransactionTotal,
+      ethTransactionTotal,
+      hexTransactionTotal,
+    }))
+  }
+}
+
+export function setTransactionToConfirm (transactionId) {
+  return async (dispatch, getState) => {
+    const state = getState()
+    const unconfirmedTransactionsHash = unconfirmedTransactionsHashSelector(state)
+    const transaction = unconfirmedTransactionsHash[transactionId]
+
+    if (!transaction) {
+      console.error(`Transaction with id ${transactionId} not found`)
+      return
+    }
+
+    if (transaction.txParams) {
+      const { lastGasPrice } = transaction
+      const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
+      dispatch(updateTxDataAndCalculate(txData))
+
+      const { txParams } = transaction
+      const { to } = txParams
+
+      if (txParams.data) {
+        const { tokens: existingTokens } = state
+        const { data, to: tokenAddress } = txParams
+
+        try {
+          dispatch(setFetchingData(true))
+          const methodData = await getMethodData(data)
+
+          dispatch(updateMethodData(methodData))
+        } catch (error) {
+          dispatch(updateMethodData({}))
+          dispatch(setFetchingData(false))
+        }
+
+        try {
+          const toSmartContract = await isSmartContractAddress(to)
+          dispatch(updateToSmartContract(toSmartContract))
+          dispatch(setFetchingData(false))
+        } catch (error) {
+          dispatch(setFetchingData(false))
+        }
+
+        const tokenData = getTokenData(data)
+        dispatch(updateTokenData(tokenData))
+
+        try {
+          const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {}
+          const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData
+          dispatch(updateTokenProps({ tokenSymbol, tokenDecimals }))
+        } catch (error) {
+          dispatch(updateTokenProps({ tokenSymbol: '', tokenDecimals: '' }))
+        }
+      }
+
+      if (txParams.nonce) {
+        const nonce = conversionUtil(txParams.nonce, {
+          fromNumericBase: 'hex',
+          toNumericBase: 'dec',
+        })
+
+        dispatch(updateNonce(nonce))
+      }
+    } else {
+      dispatch(updateTxData(transaction))
+    }
+  }
+}
+
+export function clearConfirmTransaction () {
+  return {
+    type: CLEAR_CONFIRM_TRANSACTION,
+  }
+}
diff --git a/ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js b/ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js
new file mode 100644
index 000000000..483f2f56d
--- /dev/null
+++ b/ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js
@@ -0,0 +1,685 @@
+import assert from 'assert'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import sinon from 'sinon'
+
+import ConfirmTransactionReducer, * as actions from './confirm-transaction.duck.js'
+
+const initialState = {
+  txData: {},
+  tokenData: {},
+  methodData: {},
+  tokenProps: {
+    tokenDecimals: '',
+    tokenSymbol: '',
+  },
+  fiatTransactionAmount: '',
+  fiatTransactionFee: '',
+  fiatTransactionTotal: '',
+  ethTransactionAmount: '',
+  ethTransactionFee: '',
+  ethTransactionTotal: '',
+  hexTransactionAmount: '',
+  hexTransactionFee: '',
+  hexTransactionTotal: '',
+  nonce: '',
+  toSmartContract: false,
+  fetchingData: false,
+}
+
+const UPDATE_TX_DATA = 'metamask/confirm-transaction/UPDATE_TX_DATA'
+const CLEAR_TX_DATA = 'metamask/confirm-transaction/CLEAR_TX_DATA'
+const UPDATE_TOKEN_DATA = 'metamask/confirm-transaction/UPDATE_TOKEN_DATA'
+const CLEAR_TOKEN_DATA = 'metamask/confirm-transaction/CLEAR_TOKEN_DATA'
+const UPDATE_METHOD_DATA = 'metamask/confirm-transaction/UPDATE_METHOD_DATA'
+const CLEAR_METHOD_DATA = 'metamask/confirm-transaction/CLEAR_METHOD_DATA'
+const UPDATE_TRANSACTION_AMOUNTS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS'
+const UPDATE_TRANSACTION_FEES = 'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES'
+const UPDATE_TRANSACTION_TOTALS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS'
+const UPDATE_TOKEN_PROPS = 'metamask/confirm-transaction/UPDATE_TOKEN_PROPS'
+const UPDATE_NONCE = 'metamask/confirm-transaction/UPDATE_NONCE'
+const UPDATE_TO_SMART_CONTRACT = 'metamask/confirm-transaction/UPDATE_TO_SMART_CONTRACT'
+const FETCH_DATA_START = 'metamask/confirm-transaction/FETCH_DATA_START'
+const FETCH_DATA_END = 'metamask/confirm-transaction/FETCH_DATA_END'
+const CLEAR_CONFIRM_TRANSACTION = 'metamask/confirm-transaction/CLEAR_CONFIRM_TRANSACTION'
+
+describe('Confirm Transaction Duck', () => {
+  describe('State changes', () => {
+    const mockState = {
+      confirmTransaction: {
+        txData: {
+          id: 1,
+        },
+        tokenData: {
+          name: 'abcToken',
+        },
+        methodData: {
+          name: 'approve',
+        },
+        tokenProps: {
+          tokenDecimals: '3',
+          tokenSymbol: 'ABC',
+        },
+        fiatTransactionAmount: '469.26',
+        fiatTransactionFee: '0.01',
+        fiatTransactionTotal: '1.000021',
+        ethTransactionAmount: '1',
+        ethTransactionFee: '0.000021',
+        ethTransactionTotal: '469.27',
+        hexTransactionAmount: '',
+        hexTransactionFee: '0x1319718a5000',
+        hexTransactionTotal: '',
+        nonce: '0x0',
+        toSmartContract: false,
+        fetchingData: false,
+      },
+    }
+
+    it('should initialize state', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer({}),
+        initialState
+      )
+    })
+
+    it('should return state unchanged if it does not match a dispatched actions type', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: 'someOtherAction',
+          value: 'someValue',
+        }),
+        { ...mockState.confirmTransaction },
+      )
+    })
+
+    it('should set txData when receiving a UPDATE_TX_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TX_DATA,
+          payload: {
+            id: 2,
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          txData: {
+            ...mockState.confirmTransaction.txData,
+            id: 2,
+          },
+        }
+      )
+    })
+
+    it('should clear txData when receiving a CLEAR_TX_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: CLEAR_TX_DATA,
+        }),
+        {
+          ...mockState.confirmTransaction,
+          txData: {},
+        }
+      )
+    })
+
+    it('should set tokenData when receiving a UPDATE_TOKEN_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TOKEN_DATA,
+          payload: {
+            name: 'defToken',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          tokenData: {
+            ...mockState.confirmTransaction.tokenData,
+            name: 'defToken',
+          },
+        }
+      )
+    })
+
+    it('should clear tokenData when receiving a CLEAR_TOKEN_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: CLEAR_TOKEN_DATA,
+        }),
+        {
+          ...mockState.confirmTransaction,
+          tokenData: {},
+        }
+      )
+    })
+
+    it('should set methodData when receiving a UPDATE_METHOD_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_METHOD_DATA,
+          payload: {
+            name: 'transferFrom',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          methodData: {
+            ...mockState.confirmTransaction.methodData,
+            name: 'transferFrom',
+          },
+        }
+      )
+    })
+
+    it('should clear methodData when receiving a CLEAR_METHOD_DATA action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: CLEAR_METHOD_DATA,
+        }),
+        {
+          ...mockState.confirmTransaction,
+          methodData: {},
+        }
+      )
+    })
+
+    it('should update transaction amounts when receiving an UPDATE_TRANSACTION_AMOUNTS action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TRANSACTION_AMOUNTS,
+          payload: {
+            fiatTransactionAmount: '123.45',
+            ethTransactionAmount: '.5',
+            hexTransactionAmount: '0x1',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          fiatTransactionAmount: '123.45',
+          ethTransactionAmount: '.5',
+          hexTransactionAmount: '0x1',
+        }
+      )
+    })
+
+    it('should update transaction fees when receiving an UPDATE_TRANSACTION_FEES action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TRANSACTION_FEES,
+          payload: {
+            fiatTransactionFee: '123.45',
+            ethTransactionFee: '.5',
+            hexTransactionFee: '0x1',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          fiatTransactionFee: '123.45',
+          ethTransactionFee: '.5',
+          hexTransactionFee: '0x1',
+        }
+      )
+    })
+
+    it('should update transaction totals when receiving an UPDATE_TRANSACTION_TOTALS action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TRANSACTION_TOTALS,
+          payload: {
+            fiatTransactionTotal: '123.45',
+            ethTransactionTotal: '.5',
+            hexTransactionTotal: '0x1',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          fiatTransactionTotal: '123.45',
+          ethTransactionTotal: '.5',
+          hexTransactionTotal: '0x1',
+        }
+      )
+    })
+
+    it('should update tokenProps when receiving an UPDATE_TOKEN_PROPS action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TOKEN_PROPS,
+          payload: {
+            tokenSymbol: 'DEF',
+            tokenDecimals: '1',
+          },
+        }),
+        {
+          ...mockState.confirmTransaction,
+          tokenProps: {
+            tokenSymbol: 'DEF',
+            tokenDecimals: '1',
+          },
+        }
+      )
+    })
+
+    it('should update nonce when receiving an UPDATE_NONCE action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_NONCE,
+          payload: '0x1',
+        }),
+        {
+          ...mockState.confirmTransaction,
+          nonce: '0x1',
+        }
+      )
+    })
+
+    it('should update nonce when receiving an UPDATE_TO_SMART_CONTRACT action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: UPDATE_TO_SMART_CONTRACT,
+          payload: true,
+        }),
+        {
+          ...mockState.confirmTransaction,
+          toSmartContract: true,
+        }
+      )
+    })
+
+    it('should set fetchingData to true when receiving a FETCH_DATA_START action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: FETCH_DATA_START,
+        }),
+        {
+          ...mockState.confirmTransaction,
+          fetchingData: true,
+        }
+      )
+    })
+
+    it('should set fetchingData to false when receiving a FETCH_DATA_END action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer({ confirmTransaction: { fetchingData: true } }, {
+          type: FETCH_DATA_END,
+        }),
+        {
+          fetchingData: false,
+        }
+      )
+    })
+
+    it('should clear confirmTransaction when receiving a FETCH_DATA_END action', () => {
+      assert.deepEqual(
+        ConfirmTransactionReducer(mockState, {
+          type: CLEAR_CONFIRM_TRANSACTION,
+        }),
+        {
+          ...initialState,
+        }
+      )
+    })
+  })
+
+  describe('Single actions', () => {
+    it('should create an action to update txData', () => {
+      const txData = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_TX_DATA,
+        payload: txData,
+      }
+
+      assert.deepEqual(
+        actions.updateTxData(txData),
+        expectedAction
+      )
+    })
+
+    it('should create an action to clear txData', () => {
+      const expectedAction = {
+        type: CLEAR_TX_DATA,
+      }
+
+      assert.deepEqual(
+        actions.clearTxData(),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update tokenData', () => {
+      const tokenData = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_TOKEN_DATA,
+        payload: tokenData,
+      }
+
+      assert.deepEqual(
+        actions.updateTokenData(tokenData),
+        expectedAction
+      )
+    })
+
+    it('should create an action to clear tokenData', () => {
+      const expectedAction = {
+        type: CLEAR_TOKEN_DATA,
+      }
+
+      assert.deepEqual(
+        actions.clearTokenData(),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update methodData', () => {
+      const methodData = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_METHOD_DATA,
+        payload: methodData,
+      }
+
+      assert.deepEqual(
+        actions.updateMethodData(methodData),
+        expectedAction
+      )
+    })
+
+    it('should create an action to clear methodData', () => {
+      const expectedAction = {
+        type: CLEAR_METHOD_DATA,
+      }
+
+      assert.deepEqual(
+        actions.clearMethodData(),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update transaction amounts', () => {
+      const transactionAmounts = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_TRANSACTION_AMOUNTS,
+        payload: transactionAmounts,
+      }
+
+      assert.deepEqual(
+        actions.updateTransactionAmounts(transactionAmounts),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update transaction fees', () => {
+      const transactionFees = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_TRANSACTION_FEES,
+        payload: transactionFees,
+      }
+
+      assert.deepEqual(
+        actions.updateTransactionFees(transactionFees),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update transaction totals', () => {
+      const transactionTotals = { test: 123 }
+      const expectedAction = {
+        type: UPDATE_TRANSACTION_TOTALS,
+        payload: transactionTotals,
+      }
+
+      assert.deepEqual(
+        actions.updateTransactionTotals(transactionTotals),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update tokenProps', () => {
+      const tokenProps = {
+        tokenDecimals: '1',
+        tokenSymbol: 'abc',
+      }
+      const expectedAction = {
+        type: UPDATE_TOKEN_PROPS,
+        payload: tokenProps,
+      }
+
+      assert.deepEqual(
+        actions.updateTokenProps(tokenProps),
+        expectedAction
+      )
+    })
+
+    it('should create an action to update nonce', () => {
+      const nonce = '0x1'
+      const expectedAction = {
+        type: UPDATE_NONCE,
+        payload: nonce,
+      }
+
+      assert.deepEqual(
+        actions.updateNonce(nonce),
+        expectedAction
+      )
+    })
+
+    it('should create an action to set fetchingData to true', () => {
+      const expectedAction = {
+        type: FETCH_DATA_START,
+      }
+
+      assert.deepEqual(
+        actions.setFetchingData(true),
+        expectedAction
+      )
+    })
+
+    it('should create an action to set fetchingData to false', () => {
+      const expectedAction = {
+        type: FETCH_DATA_END,
+      }
+
+      assert.deepEqual(
+        actions.setFetchingData(false),
+        expectedAction
+      )
+    })
+
+    it('should create an action to clear confirmTransaction', () => {
+      const expectedAction = {
+        type: CLEAR_CONFIRM_TRANSACTION,
+      }
+
+      assert.deepEqual(
+        actions.clearConfirmTransaction(),
+        expectedAction
+      )
+    })
+  })
+
+  describe('Thunk actions', done => {
+    beforeEach(() => {
+      global.eth = {
+        getCode: sinon.stub().callsFake(
+          address => Promise.resolve(address && address.match(/isContract/) ? 'not-0x' : '0x')
+        ),
+      }
+    })
+
+    afterEach(() => {
+      global.eth.getCode.resetHistory()
+    })
+
+    it('updates txData and gas on an existing transaction in confirmTransaction', () => {
+      const mockState = {
+        metamask: {
+          conversionRate: 468.58,
+          currentCurrency: 'usd',
+        },
+        confirmTransaction: {
+          ethTransactionAmount: '1',
+          ethTransactionFee: '0.000021',
+          ethTransactionTotal: '1.000021',
+          fetchingData: false,
+          fiatTransactionAmount: '469.26',
+          fiatTransactionFee: '0.01',
+          fiatTransactionTotal: '469.27',
+          hexGasTotal: '0x1319718a5000',
+          methodData: {},
+          nonce: '',
+          tokenData: {},
+          tokenProps: {
+            tokenDecimals: '',
+            tokenSymbol: '',
+          },
+          txData: {
+            estimatedGas: '0x5208',
+            gasLimitSpecified: false,
+            gasPriceSpecified: false,
+            history: [],
+            id: 2603411941761054,
+            loadingDefaults: false,
+            metamaskNetworkId: '3',
+            origin: 'faucet.metamask.io',
+            simpleSend: true,
+            status: 'unapproved',
+            time: 1530838113716,
+          },
+        },
+      }
+
+      const middlewares = [thunk]
+      const mockStore = configureMockStore(middlewares)
+      const store = mockStore(mockState)
+      const expectedActions = [
+        'metamask/confirm-transaction/UPDATE_TX_DATA',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
+      ]
+
+      store.dispatch(actions.updateGasAndCalculate({ gasLimit: '0x2', gasPrice: '0x25' }))
+
+      const storeActions = store.getActions()
+      assert.equal(storeActions.length, expectedActions.length)
+      storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
+    })
+
+    it('updates txData and updates gas values in confirmTransaction', () => {
+      const txData = {
+        estimatedGas: '0x5208',
+        gasLimitSpecified: false,
+        gasPriceSpecified: false,
+        history: [],
+        id: 2603411941761054,
+        loadingDefaults: false,
+        metamaskNetworkId: '3',
+        origin: 'faucet.metamask.io',
+        simpleSend: true,
+        status: 'unapproved',
+        time: 1530838113716,
+        txParams: {
+          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          gas: '0x33450',
+          gasPrice: '0x2540be400',
+          to: '0x81b7e08f65bdf5648606c89998a9cc8164397647',
+          value: '0xde0b6b3a7640000',
+        },
+      }
+      const mockState = {
+        metamask: {
+          conversionRate: 468.58,
+          currentCurrency: 'usd',
+        },
+        confirmTransaction: {
+          ethTransactionAmount: '1',
+          ethTransactionFee: '0.000021',
+          ethTransactionTotal: '1.000021',
+          fetchingData: false,
+          fiatTransactionAmount: '469.26',
+          fiatTransactionFee: '0.01',
+          fiatTransactionTotal: '469.27',
+          hexGasTotal: '0x1319718a5000',
+          methodData: {},
+          nonce: '',
+          tokenData: {},
+          tokenProps: {
+            tokenDecimals: '',
+            tokenSymbol: '',
+          },
+          txData: {
+            ...txData,
+            txParams: {
+              ...txData.txParams,
+            },
+          },
+        },
+      }
+
+      const middlewares = [thunk]
+      const mockStore = configureMockStore(middlewares)
+      const store = mockStore(mockState)
+      const expectedActions = [
+        'metamask/confirm-transaction/UPDATE_TX_DATA',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
+      ]
+
+      store.dispatch(actions.updateTxDataAndCalculate(txData))
+
+      const storeActions = store.getActions()
+      assert.equal(storeActions.length, expectedActions.length)
+      storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
+    })
+
+    it('updates confirmTransaction transaction', done => {
+      const mockState = {
+        metamask: {
+          conversionRate: 468.58,
+          currentCurrency: 'usd',
+          network: '3',
+          unapprovedTxs: {
+            2603411941761054: {
+              estimatedGas: '0x5208',
+              gasLimitSpecified: false,
+              gasPriceSpecified: false,
+              history: [],
+              id: 2603411941761054,
+              loadingDefaults: false,
+              metamaskNetworkId: '3',
+              origin: 'faucet.metamask.io',
+              simpleSend: true,
+              status: 'unapproved',
+              time: 1530838113716,
+              txParams: {
+                from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+                gas: '0x33450',
+                gasPrice: '0x2540be400',
+                to: '0x81b7e08f65bdf5648606c89998a9cc8164397647',
+                value: '0xde0b6b3a7640000',
+              },
+            },
+          },
+        },
+        confirmTransaction: {},
+      }
+
+      const middlewares = [thunk]
+      const mockStore = configureMockStore(middlewares)
+      const store = mockStore(mockState)
+      const expectedActions = [
+        'metamask/confirm-transaction/UPDATE_TX_DATA',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
+        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
+      ]
+
+      store.dispatch(actions.setTransactionToConfirm(2603411941761054))
+        .then(() => {
+          const storeActions = store.getActions()
+          assert.equal(storeActions.length, expectedActions.length)
+
+          storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
+          done()
+        })
+    })
+  })
+})
diff --git a/ui/app/ducks/gas.duck.js b/ui/app/ducks/gas.duck.js
deleted file mode 100644
index 957b00163..000000000
--- a/ui/app/ducks/gas.duck.js
+++ /dev/null
@@ -1,517 +0,0 @@
-import { clone, uniqBy, flatten } from 'ramda'
-import BigNumber from 'bignumber.js'
-import {
-  loadLocalStorageData,
-  saveLocalStorageData,
-} from '../../lib/local-storage-helpers'
-import {
-  decGWEIToHexWEI,
-} from '../helpers/conversions.util'
-
-// Actions
-const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
-const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED'
-const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED'
-const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED'
-const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE'
-const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA'
-const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA'
-const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS'
-const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT'
-const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE'
-const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL'
-const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES'
-const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED'
-const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED'
-const SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED'
-
-// TODO: determine if this approach to initState is consistent with conventional ducks pattern
-const initState = {
-  customData: {
-    price: null,
-    limit: null,
-  },
-  basicEstimates: {
-    average: null,
-    fastestWait: null,
-    fastWait: null,
-    fast: null,
-    safeLowWait: null,
-    blockNum: null,
-    avgWait: null,
-    blockTime: null,
-    speed: null,
-    fastest: null,
-    safeLow: null,
-  },
-  basicEstimateIsLoading: true,
-  gasEstimatesLoading: true,
-  priceAndTimeEstimates: [],
-  basicPriceAndTimeEstimates: [],
-  priceAndTimeEstimatesLastRetrieved: 0,
-  basicPriceAndTimeEstimatesLastRetrieved: 0,
-  basicPriceEstimatesLastRetrieved: 0,
-  errors: {},
-}
-
-// Reducer
-export default function reducer ({ gas: gasState = initState }, action = {}) {
-  const newState = clone(gasState)
-
-  switch (action.type) {
-    case BASIC_GAS_ESTIMATE_LOADING_STARTED:
-      return {
-        ...newState,
-        basicEstimateIsLoading: true,
-      }
-    case BASIC_GAS_ESTIMATE_LOADING_FINISHED:
-      return {
-        ...newState,
-        basicEstimateIsLoading: false,
-      }
-    case GAS_ESTIMATE_LOADING_STARTED:
-      return {
-        ...newState,
-        gasEstimatesLoading: true,
-      }
-    case GAS_ESTIMATE_LOADING_FINISHED:
-      return {
-        ...newState,
-        gasEstimatesLoading: false,
-      }
-    case SET_BASIC_GAS_ESTIMATE_DATA:
-      return {
-        ...newState,
-        basicEstimates: action.value,
-      }
-    case SET_CUSTOM_GAS_PRICE:
-      return {
-        ...newState,
-        customData: {
-          ...newState.customData,
-          price: action.value,
-        },
-      }
-    case SET_CUSTOM_GAS_LIMIT:
-      return {
-        ...newState,
-        customData: {
-          ...newState.customData,
-          limit: action.value,
-        },
-      }
-    case SET_CUSTOM_GAS_TOTAL:
-      return {
-        ...newState,
-        customData: {
-          ...newState.customData,
-          total: action.value,
-        },
-      }
-    case SET_PRICE_AND_TIME_ESTIMATES:
-      return {
-        ...newState,
-        priceAndTimeEstimates: action.value,
-      }
-    case SET_CUSTOM_GAS_ERRORS:
-      return {
-        ...newState,
-        errors: {
-          ...newState.errors,
-          ...action.value,
-        },
-      }
-    case SET_API_ESTIMATES_LAST_RETRIEVED:
-      return {
-        ...newState,
-        priceAndTimeEstimatesLastRetrieved: action.value,
-      }
-    case SET_BASIC_API_ESTIMATES_LAST_RETRIEVED:
-      return {
-        ...newState,
-        basicPriceAndTimeEstimatesLastRetrieved: action.value,
-      }
-    case SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED:
-      return {
-        ...newState,
-        basicPriceEstimatesLastRetrieved: action.value,
-      }
-    case RESET_CUSTOM_DATA:
-      return {
-        ...newState,
-        customData: clone(initState.customData),
-      }
-    case RESET_CUSTOM_GAS_STATE:
-      return clone(initState)
-    default:
-      return newState
-  }
-}
-
-// Action Creators
-export function basicGasEstimatesLoadingStarted () {
-  return {
-    type: BASIC_GAS_ESTIMATE_LOADING_STARTED,
-  }
-}
-
-export function basicGasEstimatesLoadingFinished () {
-  return {
-    type: BASIC_GAS_ESTIMATE_LOADING_FINISHED,
-  }
-}
-
-export function gasEstimatesLoadingStarted () {
-  return {
-    type: GAS_ESTIMATE_LOADING_STARTED,
-  }
-}
-
-export function gasEstimatesLoadingFinished () {
-  return {
-    type: GAS_ESTIMATE_LOADING_FINISHED,
-  }
-}
-
-export function fetchBasicGasEstimates () {
-  return (dispatch, getState) => {
-    const {
-      basicPriceEstimatesLastRetrieved,
-      basicPriceAndTimeEstimates,
-    } = getState().gas
-    const timeLastRetrieved = basicPriceEstimatesLastRetrieved || loadLocalStorageData('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') || 0
-
-    dispatch(basicGasEstimatesLoadingStarted())
-
-    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
-    ? fetch('https://dev.blockscale.net/api/gasexpress.json', {
-      'headers': {},
-      'referrer': 'https://dev.blockscale.net/api/',
-      'referrerPolicy': 'no-referrer-when-downgrade',
-      'body': null,
-      'method': 'GET',
-      'mode': 'cors'}
-    )
-      .then(r => r.json())
-      .then(({
-        safeLow,
-        standard: average,
-        fast,
-        fastest,
-        block_time: blockTime,
-        blockNum,
-      }) => {
-        const basicEstimates = {
-          safeLow,
-          average,
-          fast,
-          fastest,
-          blockTime,
-          blockNum,
-        }
-
-        const timeRetrieved = Date.now()
-        dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved))
-        saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
-        saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES')
-
-        return basicEstimates
-      })
-    : Promise.resolve(basicPriceAndTimeEstimates.length
-        ? basicPriceAndTimeEstimates
-        : loadLocalStorageData('BASIC_PRICE_ESTIMATES')
-      )
-
-    return promiseToFetch.then(basicEstimates => {
-      dispatch(setBasicGasEstimateData(basicEstimates))
-      dispatch(basicGasEstimatesLoadingFinished())
-      return basicEstimates
-    })
-  }
-}
-
-export function fetchBasicGasAndTimeEstimates () {
-  return (dispatch, getState) => {
-    const {
-      basicPriceAndTimeEstimatesLastRetrieved,
-      basicPriceAndTimeEstimates,
-    } = getState().gas
-    const timeLastRetrieved = basicPriceAndTimeEstimatesLastRetrieved || loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') || 0
-
-    dispatch(basicGasEstimatesLoadingStarted())
-
-    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
-      ? fetch('https://ethgasstation.info/json/ethgasAPI.json', {
-        'headers': {},
-        'referrer': 'http://ethgasstation.info/json/',
-        'referrerPolicy': 'no-referrer-when-downgrade',
-        'body': null,
-        'method': 'GET',
-        'mode': 'cors'}
-      )
-        .then(r => r.json())
-        .then(({
-          average: averageTimes10,
-          avgWait,
-          block_time: blockTime,
-          blockNum,
-          fast: fastTimes10,
-          fastest: fastestTimes10,
-          fastestWait,
-          fastWait,
-          safeLow: safeLowTimes10,
-          safeLowWait,
-          speed,
-        }) => {
-          const [average, fast, fastest, safeLow] = [
-            averageTimes10,
-            fastTimes10,
-            fastestTimes10,
-            safeLowTimes10,
-          ].map(price => (new BigNumber(price)).div(10).toNumber())
-
-          const basicEstimates = {
-            average,
-            avgWait,
-            blockTime,
-            blockNum,
-            fast,
-            fastest,
-            fastestWait,
-            fastWait,
-            safeLow,
-            safeLowWait,
-            speed,
-          }
-
-          const timeRetrieved = Date.now()
-          dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved))
-          saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
-          saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES')
-
-          return basicEstimates
-        })
-      : Promise.resolve(basicPriceAndTimeEstimates.length
-          ? basicPriceAndTimeEstimates
-          : loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES')
-        )
-
-      return promiseToFetch.then(basicEstimates => {
-        dispatch(setBasicGasEstimateData(basicEstimates))
-        dispatch(basicGasEstimatesLoadingFinished())
-        return basicEstimates
-      })
-  }
-}
-
-function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) {
-  higherY = new BigNumber(higherY, 10)
-  lowerY = new BigNumber(lowerY, 10)
-  higherX = new BigNumber(higherX, 10)
-  lowerX = new BigNumber(lowerX, 10)
-  xForExtrapolation = new BigNumber(xForExtrapolation, 10)
-  const slope = (higherY.minus(lowerY)).div(higherX.minus(lowerX))
-  const newTimeEstimate = slope.times(higherX.minus(xForExtrapolation)).minus(higherY).negated()
-
-  return Number(newTimeEstimate.toPrecision(10))
-}
-
-function getRandomArbitrary (min, max) {
-  min = new BigNumber(min, 10)
-  max = new BigNumber(max, 10)
-  const random = new BigNumber(String(Math.random()), 10)
-  return new BigNumber(random.times(max.minus(min)).plus(min)).toPrecision(10)
-}
-
-function calcMedian (list) {
-  const medianPos = (Math.floor(list.length / 2) + Math.ceil(list.length / 2)) / 2
-  return medianPos === Math.floor(medianPos)
-    ? (list[medianPos - 1] + list[medianPos]) / 2
-    : list[Math.floor(medianPos)]
-}
-
-function quartiles (data) {
-  const lowerHalf = data.slice(0, Math.floor(data.length / 2))
-  const upperHalf = data.slice(Math.floor(data.length / 2) + (data.length % 2 === 0 ? 0 : 1))
-  const median = calcMedian(data)
-  const lowerQuartile = calcMedian(lowerHalf)
-  const upperQuartile = calcMedian(upperHalf)
-  return {
-    median,
-    lowerQuartile,
-    upperQuartile,
-  }
-}
-
-function inliersByIQR (data, prop) {
-  const { lowerQuartile, upperQuartile } = quartiles(data.map(d => prop ? d[prop] : d))
-  const IQR = upperQuartile - lowerQuartile
-  const lowerBound = lowerQuartile - 1.5 * IQR
-  const upperBound = upperQuartile + 1.5 * IQR
-  return data.filter(d => {
-    const value = prop ? d[prop] : d
-    return value >= lowerBound && value <= upperBound
-  })
-}
-
-export function fetchGasEstimates (blockTime) {
-  return (dispatch, getState) => {
-    const {
-      priceAndTimeEstimatesLastRetrieved,
-      priceAndTimeEstimates,
-    } = getState().gas
-    const timeLastRetrieved = priceAndTimeEstimatesLastRetrieved || loadLocalStorageData('GAS_API_ESTIMATES_LAST_RETRIEVED') || 0
-
-    dispatch(gasEstimatesLoadingStarted())
-
-    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
-      ? fetch('https://ethgasstation.info/json/predictTable.json', {
-          'headers': {},
-          'referrer': 'http://ethgasstation.info/json/',
-          'referrerPolicy': 'no-referrer-when-downgrade',
-          'body': null,
-          'method': 'GET',
-          'mode': 'cors'}
-        )
-        .then(r => r.json())
-        .then(r => {
-          const estimatedPricesAndTimes = r.map(({ expectedTime, expectedWait, gasprice }) => ({ expectedTime, expectedWait, gasprice }))
-          const estimatedTimeWithUniquePrices = uniqBy(({ expectedTime }) => expectedTime, estimatedPricesAndTimes)
-
-          const withSupplementalTimeEstimates = flatten(estimatedTimeWithUniquePrices.map(({ expectedWait, gasprice }, i, arr) => {
-            const next = arr[i + 1]
-            if (!next) {
-              return [{ expectedWait, gasprice }]
-            } else {
-              const supplementalPrice = getRandomArbitrary(gasprice, next.gasprice)
-              const supplementalTime = extrapolateY({
-                higherY: next.expectedWait,
-                lowerY: expectedWait,
-                higherX: next.gasprice,
-                lowerX: gasprice,
-                xForExtrapolation: supplementalPrice,
-              })
-              const supplementalPrice2 = getRandomArbitrary(supplementalPrice, next.gasprice)
-              const supplementalTime2 = extrapolateY({
-                higherY: next.expectedWait,
-                lowerY: supplementalTime,
-                higherX: next.gasprice,
-                lowerX: supplementalPrice,
-                xForExtrapolation: supplementalPrice2,
-              })
-              return [
-                { expectedWait, gasprice },
-                { expectedWait: supplementalTime, gasprice: supplementalPrice },
-                { expectedWait: supplementalTime2, gasprice: supplementalPrice2 },
-              ]
-            }
-          }))
-          const withOutliersRemoved = inliersByIQR(withSupplementalTimeEstimates.slice(0).reverse(), 'expectedWait').reverse()
-          const timeMappedToSeconds = withOutliersRemoved.map(({ expectedWait, gasprice }) => {
-            const expectedTime = (new BigNumber(expectedWait)).times(Number(blockTime), 10).toNumber()
-            return {
-              expectedTime,
-              gasprice: (new BigNumber(gasprice, 10).toNumber()),
-            }
-          })
-
-          const timeRetrieved = Date.now()
-          dispatch(setApiEstimatesLastRetrieved(timeRetrieved))
-          saveLocalStorageData(timeRetrieved, 'GAS_API_ESTIMATES_LAST_RETRIEVED')
-          saveLocalStorageData(timeMappedToSeconds, 'GAS_API_ESTIMATES')
-
-          return timeMappedToSeconds
-        })
-      : Promise.resolve(priceAndTimeEstimates.length
-          ? priceAndTimeEstimates
-          : loadLocalStorageData('GAS_API_ESTIMATES')
-        )
-
-      return promiseToFetch.then(estimates => {
-        dispatch(setPricesAndTimeEstimates(estimates))
-        dispatch(gasEstimatesLoadingFinished())
-      })
-  }
-}
-
-export function setCustomGasPriceForRetry (newPrice) {
-  return (dispatch) => {
-    if (newPrice !== '0x0') {
-      dispatch(setCustomGasPrice(newPrice))
-    } else {
-      const { fast } = loadLocalStorageData('BASIC_PRICE_ESTIMATES')
-      dispatch(setCustomGasPrice(decGWEIToHexWEI(fast)))
-    }
-  }
-}
-
-export function setBasicGasEstimateData (basicGasEstimateData) {
-  return {
-    type: SET_BASIC_GAS_ESTIMATE_DATA,
-    value: basicGasEstimateData,
-  }
-}
-
-export function setPricesAndTimeEstimates (estimatedPricesAndTimes) {
-  return {
-    type: SET_PRICE_AND_TIME_ESTIMATES,
-    value: estimatedPricesAndTimes,
-  }
-}
-
-export function setCustomGasPrice (newPrice) {
-  return {
-    type: SET_CUSTOM_GAS_PRICE,
-    value: newPrice,
-  }
-}
-
-export function setCustomGasLimit (newLimit) {
-  return {
-    type: SET_CUSTOM_GAS_LIMIT,
-    value: newLimit,
-  }
-}
-
-export function setCustomGasTotal (newTotal) {
-  return {
-    type: SET_CUSTOM_GAS_TOTAL,
-    value: newTotal,
-  }
-}
-
-export function setCustomGasErrors (newErrors) {
-  return {
-    type: SET_CUSTOM_GAS_ERRORS,
-    value: newErrors,
-  }
-}
-
-export function setApiEstimatesLastRetrieved (retrievalTime) {
-  return {
-    type: SET_API_ESTIMATES_LAST_RETRIEVED,
-    value: retrievalTime,
-  }
-}
-
-export function setBasicApiEstimatesLastRetrieved (retrievalTime) {
-  return {
-    type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED,
-    value: retrievalTime,
-  }
-}
-
-export function setBasicPriceEstimatesLastRetrieved (retrievalTime) {
-  return {
-    type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED,
-    value: retrievalTime,
-  }
-}
-
-export function resetCustomGasState () {
-  return { type: RESET_CUSTOM_GAS_STATE }
-}
-
-export function resetCustomData () {
-  return { type: RESET_CUSTOM_DATA }
-}
diff --git a/ui/app/ducks/gas/gas-duck.test.js b/ui/app/ducks/gas/gas-duck.test.js
new file mode 100644
index 000000000..4e875e020
--- /dev/null
+++ b/ui/app/ducks/gas/gas-duck.test.js
@@ -0,0 +1,600 @@
+import assert from 'assert'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+
+
+const GasDuck = proxyquire('./gas.duck.js', {
+  '../../../lib/local-storage-helpers': {
+    loadLocalStorageData: sinon.spy(),
+    saveLocalStorageData: sinon.spy(),
+  },
+})
+
+const {
+  basicGasEstimatesLoadingStarted,
+  basicGasEstimatesLoadingFinished,
+  setBasicGasEstimateData,
+  setCustomGasPrice,
+  setCustomGasLimit,
+  setCustomGasTotal,
+  setCustomGasErrors,
+  resetCustomGasState,
+  fetchBasicGasAndTimeEstimates,
+  fetchBasicGasEstimates,
+  gasEstimatesLoadingStarted,
+  gasEstimatesLoadingFinished,
+  setPricesAndTimeEstimates,
+  fetchGasEstimates,
+  setApiEstimatesLastRetrieved,
+} = GasDuck
+const GasReducer = GasDuck.default
+
+describe('Gas Duck', () => {
+  let tempFetch
+  let tempDateNow
+  const mockEthGasApiResponse = {
+    average: 20,
+    avgWait: 'mockAvgWait',
+    block_time: 'mockBlock_time',
+    blockNum: 'mockBlockNum',
+    fast: 30,
+    fastest: 40,
+    fastestWait: 'mockFastestWait',
+    fastWait: 'mockFastWait',
+    safeLow: 10,
+    safeLowWait: 'mockSafeLowWait',
+    speed: 'mockSpeed',
+    standard: 20,
+  }
+  const mockPredictTableResponse = [
+    { expectedTime: 400, expectedWait: 40, gasprice: 0.25, somethingElse: 'foobar' },
+    { expectedTime: 200, expectedWait: 20, gasprice: 0.5, somethingElse: 'foobar' },
+    { expectedTime: 100, expectedWait: 10, gasprice: 1, somethingElse: 'foobar' },
+    { expectedTime: 75, expectedWait: 7.5, gasprice: 1.5, somethingElse: 'foobar' },
+    { expectedTime: 50, expectedWait: 5, gasprice: 2, somethingElse: 'foobar' },
+    { expectedTime: 35, expectedWait: 4.5, gasprice: 3, somethingElse: 'foobar' },
+    { expectedTime: 34, expectedWait: 4.4, gasprice: 3.1, somethingElse: 'foobar' },
+    { expectedTime: 25, expectedWait: 4.2, gasprice: 3.5, somethingElse: 'foobar' },
+    { expectedTime: 20, expectedWait: 4, gasprice: 4, somethingElse: 'foobar' },
+    { expectedTime: 19, expectedWait: 3.9, gasprice: 4.1, somethingElse: 'foobar' },
+    { expectedTime: 15, expectedWait: 3, gasprice: 7, somethingElse: 'foobar' },
+    { expectedTime: 14, expectedWait: 2.9, gasprice: 7.1, somethingElse: 'foobar' },
+    { expectedTime: 12, expectedWait: 2.5, gasprice: 8, somethingElse: 'foobar' },
+    { expectedTime: 10, expectedWait: 2, gasprice: 10, somethingElse: 'foobar' },
+    { expectedTime: 9, expectedWait: 1.9, gasprice: 10.1, somethingElse: 'foobar' },
+    { expectedTime: 5, expectedWait: 1, gasprice: 15, somethingElse: 'foobar' },
+    { expectedTime: 4, expectedWait: 0.9, gasprice: 15.1, somethingElse: 'foobar' },
+    { expectedTime: 2, expectedWait: 0.8, gasprice: 17, somethingElse: 'foobar' },
+    { expectedTime: 1.1, expectedWait: 0.6, gasprice: 19.9, somethingElse: 'foobar' },
+    { expectedTime: 1, expectedWait: 0.5, gasprice: 20, somethingElse: 'foobar' },
+  ]
+  const fetchStub = sinon.stub().callsFake((url) => new Promise(resolve => {
+    const dataToResolve = url.match(/ethgasAPI|gasexpress/)
+      ? mockEthGasApiResponse
+      : mockPredictTableResponse
+    resolve({
+      json: () => new Promise(resolve => resolve(dataToResolve)),
+    })
+  }))
+
+  beforeEach(() => {
+    tempFetch = global.fetch
+    tempDateNow = global.Date.now
+    global.fetch = fetchStub
+    global.Date.now = () => 2000000
+  })
+
+  afterEach(() => {
+    fetchStub.resetHistory()
+    global.fetch = tempFetch
+    global.Date.now = tempDateNow
+  })
+
+  const mockState = {
+    gas: {
+      mockProp: 123,
+    },
+  }
+  const initState = {
+    customData: {
+      price: null,
+      limit: null,
+    },
+    basicEstimates: {
+      average: null,
+      fastestWait: null,
+      fastWait: null,
+      fast: null,
+      safeLowWait: null,
+      blockNum: null,
+      avgWait: null,
+      blockTime: null,
+      speed: null,
+      fastest: null,
+      safeLow: null,
+    },
+    basicEstimateIsLoading: true,
+    errors: {},
+    gasEstimatesLoading: true,
+    priceAndTimeEstimates: [],
+    priceAndTimeEstimatesLastRetrieved: 0,
+    basicPriceAndTimeEstimates: [],
+    basicPriceAndTimeEstimatesLastRetrieved: 0,
+    basicPriceEstimatesLastRetrieved: 0,
+  }
+  const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
+  const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED'
+  const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED'
+  const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED'
+  const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE'
+  const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA'
+  const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS'
+  const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT'
+  const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE'
+  const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL'
+  const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES'
+  const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED'
+  const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED'
+  const SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED'
+
+  describe('GasReducer()', () => {
+    it('should initialize state', () => {
+      assert.deepEqual(
+        GasReducer({}),
+        initState
+      )
+    })
+
+    it('should return state unchanged if it does not match a dispatched actions type', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: 'someOtherAction',
+          value: 'someValue',
+        }),
+        Object.assign({}, mockState.gas)
+      )
+    })
+
+    it('should set basicEstimateIsLoading to true when receiving a BASIC_GAS_ESTIMATE_LOADING_STARTED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: BASIC_GAS_ESTIMATE_LOADING_STARTED,
+        }),
+        Object.assign({basicEstimateIsLoading: true}, mockState.gas)
+      )
+    })
+
+    it('should set basicEstimateIsLoading to false when receiving a BASIC_GAS_ESTIMATE_LOADING_FINISHED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: BASIC_GAS_ESTIMATE_LOADING_FINISHED,
+        }),
+        Object.assign({basicEstimateIsLoading: false}, mockState.gas)
+      )
+    })
+
+    it('should set gasEstimatesLoading to true when receiving a GAS_ESTIMATE_LOADING_STARTED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: GAS_ESTIMATE_LOADING_STARTED,
+        }),
+        Object.assign({gasEstimatesLoading: true}, mockState.gas)
+      )
+    })
+
+    it('should set gasEstimatesLoading to false when receiving a GAS_ESTIMATE_LOADING_FINISHED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: GAS_ESTIMATE_LOADING_FINISHED,
+        }),
+        Object.assign({gasEstimatesLoading: false}, mockState.gas)
+      )
+    })
+
+    it('should return a new object (and not just modify the existing state object)', () => {
+      assert.deepEqual(GasReducer(mockState), mockState.gas)
+      assert.notEqual(GasReducer(mockState), mockState.gas)
+    })
+
+    it('should set basicEstimates when receiving a SET_BASIC_GAS_ESTIMATE_DATA action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: { someProp: 'someData123' },
+        }),
+        Object.assign({basicEstimates: {someProp: 'someData123'} }, mockState.gas)
+      )
+    })
+
+    it('should set priceAndTimeEstimates when receiving a SET_PRICE_AND_TIME_ESTIMATES action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_PRICE_AND_TIME_ESTIMATES,
+          value: { someProp: 'someData123' },
+        }),
+        Object.assign({priceAndTimeEstimates: {someProp: 'someData123'} }, mockState.gas)
+      )
+    })
+
+    it('should set customData.price when receiving a SET_CUSTOM_GAS_PRICE action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_CUSTOM_GAS_PRICE,
+          value: 4321,
+        }),
+        Object.assign({customData: {price: 4321} }, mockState.gas)
+      )
+    })
+
+    it('should set customData.limit when receiving a SET_CUSTOM_GAS_LIMIT action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_CUSTOM_GAS_LIMIT,
+          value: 9876,
+        }),
+        Object.assign({customData: {limit: 9876} }, mockState.gas)
+      )
+    })
+
+    it('should set customData.total when receiving a SET_CUSTOM_GAS_TOTAL action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_CUSTOM_GAS_TOTAL,
+          value: 10000,
+        }),
+        Object.assign({customData: {total: 10000} }, mockState.gas)
+      )
+    })
+
+    it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_API_ESTIMATES_LAST_RETRIEVED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_API_ESTIMATES_LAST_RETRIEVED,
+          value: 1500000000000,
+        }),
+        Object.assign({ priceAndTimeEstimatesLastRetrieved: 1500000000000 }, mockState.gas)
+      )
+    })
+
+    it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_BASIC_API_ESTIMATES_LAST_RETRIEVED action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED,
+          value: 1700000000000,
+        }),
+        Object.assign({ basicPriceAndTimeEstimatesLastRetrieved: 1700000000000 }, mockState.gas)
+      )
+    })
+
+    it('should set errors when receiving a SET_CUSTOM_GAS_ERRORS action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: SET_CUSTOM_GAS_ERRORS,
+          value: { someError: 'error_error' },
+        }),
+        Object.assign({errors: {someError: 'error_error'} }, mockState.gas)
+      )
+    })
+
+    it('should return the initial state in response to a RESET_CUSTOM_GAS_STATE action', () => {
+      assert.deepEqual(
+        GasReducer(mockState, {
+          type: RESET_CUSTOM_GAS_STATE,
+        }),
+        Object.assign({}, initState)
+      )
+    })
+  })
+
+  describe('basicGasEstimatesLoadingStarted', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        basicGasEstimatesLoadingStarted(),
+        { type: BASIC_GAS_ESTIMATE_LOADING_STARTED }
+      )
+    })
+  })
+
+  describe('basicGasEstimatesLoadingFinished', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        basicGasEstimatesLoadingFinished(),
+        { type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }
+      )
+    })
+  })
+
+  describe('fetchBasicGasEstimates', () => {
+    const mockDistpatch = sinon.spy()
+    it('should call fetch with the expected params', async () => {
+      await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        { basicPriceAEstimatesLastRetrieved: 1000000 }
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.deepEqual(
+        global.fetch.getCall(0).args,
+        [
+          'https://dev.blockscale.net/api/gasexpress.json',
+          {
+            'headers': {},
+            'referrer': 'https://dev.blockscale.net/api/',
+            'referrerPolicy': 'no-referrer-when-downgrade',
+            'body': null,
+            'method': 'GET',
+            'mode': 'cors',
+          },
+        ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 20,
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 30,
+            fastest: 40,
+            safeLow: 10,
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(3).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+  })
+
+  describe('fetchBasicGasAndTimeEstimates', () => {
+    const mockDistpatch = sinon.spy()
+    it('should call fetch with the expected params', async () => {
+      await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        { basicPriceAndTimeEstimatesLastRetrieved: 1000000 }
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.deepEqual(
+        global.fetch.getCall(0).args,
+        [
+          'https://ethgasstation.info/json/ethgasAPI.json',
+          {
+            'headers': {},
+            'referrer': 'http://ethgasstation.info/json/',
+            'referrerPolicy': 'no-referrer-when-downgrade',
+            'body': null,
+            'method': 'GET',
+            'mode': 'cors',
+          },
+        ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{ type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 2,
+            avgWait: 'mockAvgWait',
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 3,
+            fastest: 4,
+            fastestWait: 'mockFastestWait',
+            fastWait: 'mockFastWait',
+            safeLow: 1,
+            safeLowWait: 'mockSafeLowWait',
+            speed: 'mockSpeed',
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(3).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+  })
+
+  describe('fetchGasEstimates', () => {
+    const mockDistpatch = sinon.spy()
+
+    beforeEach(() => {
+      mockDistpatch.resetHistory()
+    })
+
+    it('should call fetch with the expected params', async () => {
+      global.fetch.resetHistory()
+      await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        { priceAndTimeEstimatesLastRetrieved: 1000000 }
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.deepEqual(
+        global.fetch.getCall(0).args,
+        [
+          'https://ethgasstation.info/json/predictTable.json',
+          {
+            'headers': {},
+            'referrer': 'http://ethgasstation.info/json/',
+            'referrerPolicy': 'no-referrer-when-downgrade',
+            'body': null,
+            'method': 'GET',
+            'mode': 'cors',
+          },
+        ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{ type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 }]
+      )
+
+      const { type: thirdDispatchCallType, value: priceAndTimeEstimateResult } = mockDistpatch.getCall(2).args[0]
+      assert.equal(thirdDispatchCallType, SET_PRICE_AND_TIME_ESTIMATES)
+      assert(priceAndTimeEstimateResult.length < mockPredictTableResponse.length * 3 - 2)
+      assert(!priceAndTimeEstimateResult.find(d => d.expectedTime > 100))
+      assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.expectedTime > a[a + 1].expectedTime))
+      assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.gasprice > a[a + 1].gasprice))
+
+      assert.deepEqual(
+        mockDistpatch.getCall(3).args,
+        [{ type: GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+
+    it('should not call fetch if the estimates were retrieved < 75000 ms ago', async () => {
+      global.fetch.resetHistory()
+      await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        {
+          priceAndTimeEstimatesLastRetrieved: Date.now(),
+          priceAndTimeEstimates: [{
+            expectedTime: '10',
+            expectedWait: 2,
+            gasprice: 50,
+          }],
+        }
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.equal(global.fetch.callCount, 0)
+
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{
+          type: SET_PRICE_AND_TIME_ESTIMATES,
+          value: [
+            {
+              expectedTime: '10',
+              expectedWait: 2,
+              gasprice: 50,
+            },
+          ],
+
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{ type: GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+  })
+
+  describe('gasEstimatesLoadingStarted', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        gasEstimatesLoadingStarted(),
+        { type: GAS_ESTIMATE_LOADING_STARTED }
+      )
+    })
+  })
+
+  describe('gasEstimatesLoadingFinished', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        gasEstimatesLoadingFinished(),
+        { type: GAS_ESTIMATE_LOADING_FINISHED }
+      )
+    })
+  })
+
+  describe('setPricesAndTimeEstimates', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setPricesAndTimeEstimates('mockPricesAndTimeEstimates'),
+        { type: SET_PRICE_AND_TIME_ESTIMATES, value: 'mockPricesAndTimeEstimates' }
+      )
+    })
+  })
+
+  describe('setBasicGasEstimateData', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setBasicGasEstimateData('mockBasicEstimatData'),
+        { type: SET_BASIC_GAS_ESTIMATE_DATA, value: 'mockBasicEstimatData' }
+      )
+    })
+  })
+
+  describe('setCustomGasPrice', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setCustomGasPrice('mockCustomGasPrice'),
+        { type: SET_CUSTOM_GAS_PRICE, value: 'mockCustomGasPrice' }
+      )
+    })
+  })
+
+  describe('setCustomGasLimit', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setCustomGasLimit('mockCustomGasLimit'),
+        { type: SET_CUSTOM_GAS_LIMIT, value: 'mockCustomGasLimit' }
+      )
+    })
+  })
+
+  describe('setCustomGasTotal', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setCustomGasTotal('mockCustomGasTotal'),
+        { type: SET_CUSTOM_GAS_TOTAL, value: 'mockCustomGasTotal' }
+      )
+    })
+  })
+
+  describe('setCustomGasErrors', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setCustomGasErrors('mockErrorObject'),
+        { type: SET_CUSTOM_GAS_ERRORS, value: 'mockErrorObject' }
+      )
+    })
+  })
+
+  describe('setApiEstimatesLastRetrieved', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        setApiEstimatesLastRetrieved(1234),
+        { type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 1234 }
+      )
+    })
+  })
+
+  describe('resetCustomGasState', () => {
+    it('should create the correct action', () => {
+      assert.deepEqual(
+        resetCustomGasState(),
+        { type: RESET_CUSTOM_GAS_STATE }
+      )
+    })
+  })
+
+})
diff --git a/ui/app/ducks/gas/gas.duck.js b/ui/app/ducks/gas/gas.duck.js
new file mode 100644
index 000000000..0a571a78e
--- /dev/null
+++ b/ui/app/ducks/gas/gas.duck.js
@@ -0,0 +1,517 @@
+import { clone, uniqBy, flatten } from 'ramda'
+import BigNumber from 'bignumber.js'
+import {
+  loadLocalStorageData,
+  saveLocalStorageData,
+} from '../../../lib/local-storage-helpers'
+import {
+  decGWEIToHexWEI,
+} from '../../helpers/utils/conversions.util'
+
+// Actions
+const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
+const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED'
+const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED'
+const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED'
+const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE'
+const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA'
+const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA'
+const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS'
+const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT'
+const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE'
+const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL'
+const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES'
+const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED'
+const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED'
+const SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED'
+
+// TODO: determine if this approach to initState is consistent with conventional ducks pattern
+const initState = {
+  customData: {
+    price: null,
+    limit: null,
+  },
+  basicEstimates: {
+    average: null,
+    fastestWait: null,
+    fastWait: null,
+    fast: null,
+    safeLowWait: null,
+    blockNum: null,
+    avgWait: null,
+    blockTime: null,
+    speed: null,
+    fastest: null,
+    safeLow: null,
+  },
+  basicEstimateIsLoading: true,
+  gasEstimatesLoading: true,
+  priceAndTimeEstimates: [],
+  basicPriceAndTimeEstimates: [],
+  priceAndTimeEstimatesLastRetrieved: 0,
+  basicPriceAndTimeEstimatesLastRetrieved: 0,
+  basicPriceEstimatesLastRetrieved: 0,
+  errors: {},
+}
+
+// Reducer
+export default function reducer ({ gas: gasState = initState }, action = {}) {
+  const newState = clone(gasState)
+
+  switch (action.type) {
+    case BASIC_GAS_ESTIMATE_LOADING_STARTED:
+      return {
+        ...newState,
+        basicEstimateIsLoading: true,
+      }
+    case BASIC_GAS_ESTIMATE_LOADING_FINISHED:
+      return {
+        ...newState,
+        basicEstimateIsLoading: false,
+      }
+    case GAS_ESTIMATE_LOADING_STARTED:
+      return {
+        ...newState,
+        gasEstimatesLoading: true,
+      }
+    case GAS_ESTIMATE_LOADING_FINISHED:
+      return {
+        ...newState,
+        gasEstimatesLoading: false,
+      }
+    case SET_BASIC_GAS_ESTIMATE_DATA:
+      return {
+        ...newState,
+        basicEstimates: action.value,
+      }
+    case SET_CUSTOM_GAS_PRICE:
+      return {
+        ...newState,
+        customData: {
+          ...newState.customData,
+          price: action.value,
+        },
+      }
+    case SET_CUSTOM_GAS_LIMIT:
+      return {
+        ...newState,
+        customData: {
+          ...newState.customData,
+          limit: action.value,
+        },
+      }
+    case SET_CUSTOM_GAS_TOTAL:
+      return {
+        ...newState,
+        customData: {
+          ...newState.customData,
+          total: action.value,
+        },
+      }
+    case SET_PRICE_AND_TIME_ESTIMATES:
+      return {
+        ...newState,
+        priceAndTimeEstimates: action.value,
+      }
+    case SET_CUSTOM_GAS_ERRORS:
+      return {
+        ...newState,
+        errors: {
+          ...newState.errors,
+          ...action.value,
+        },
+      }
+    case SET_API_ESTIMATES_LAST_RETRIEVED:
+      return {
+        ...newState,
+        priceAndTimeEstimatesLastRetrieved: action.value,
+      }
+    case SET_BASIC_API_ESTIMATES_LAST_RETRIEVED:
+      return {
+        ...newState,
+        basicPriceAndTimeEstimatesLastRetrieved: action.value,
+      }
+    case SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED:
+      return {
+        ...newState,
+        basicPriceEstimatesLastRetrieved: action.value,
+      }
+    case RESET_CUSTOM_DATA:
+      return {
+        ...newState,
+        customData: clone(initState.customData),
+      }
+    case RESET_CUSTOM_GAS_STATE:
+      return clone(initState)
+    default:
+      return newState
+  }
+}
+
+// Action Creators
+export function basicGasEstimatesLoadingStarted () {
+  return {
+    type: BASIC_GAS_ESTIMATE_LOADING_STARTED,
+  }
+}
+
+export function basicGasEstimatesLoadingFinished () {
+  return {
+    type: BASIC_GAS_ESTIMATE_LOADING_FINISHED,
+  }
+}
+
+export function gasEstimatesLoadingStarted () {
+  return {
+    type: GAS_ESTIMATE_LOADING_STARTED,
+  }
+}
+
+export function gasEstimatesLoadingFinished () {
+  return {
+    type: GAS_ESTIMATE_LOADING_FINISHED,
+  }
+}
+
+export function fetchBasicGasEstimates () {
+  return (dispatch, getState) => {
+    const {
+      basicPriceEstimatesLastRetrieved,
+      basicPriceAndTimeEstimates,
+    } = getState().gas
+    const timeLastRetrieved = basicPriceEstimatesLastRetrieved || loadLocalStorageData('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') || 0
+
+    dispatch(basicGasEstimatesLoadingStarted())
+
+    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
+    ? fetch('https://dev.blockscale.net/api/gasexpress.json', {
+      'headers': {},
+      'referrer': 'https://dev.blockscale.net/api/',
+      'referrerPolicy': 'no-referrer-when-downgrade',
+      'body': null,
+      'method': 'GET',
+      'mode': 'cors'}
+    )
+      .then(r => r.json())
+      .then(({
+        safeLow,
+        standard: average,
+        fast,
+        fastest,
+        block_time: blockTime,
+        blockNum,
+      }) => {
+        const basicEstimates = {
+          safeLow,
+          average,
+          fast,
+          fastest,
+          blockTime,
+          blockNum,
+        }
+
+        const timeRetrieved = Date.now()
+        dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved))
+        saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
+        saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES')
+
+        return basicEstimates
+      })
+    : Promise.resolve(basicPriceAndTimeEstimates.length
+        ? basicPriceAndTimeEstimates
+        : loadLocalStorageData('BASIC_PRICE_ESTIMATES')
+      )
+
+    return promiseToFetch.then(basicEstimates => {
+      dispatch(setBasicGasEstimateData(basicEstimates))
+      dispatch(basicGasEstimatesLoadingFinished())
+      return basicEstimates
+    })
+  }
+}
+
+export function fetchBasicGasAndTimeEstimates () {
+  return (dispatch, getState) => {
+    const {
+      basicPriceAndTimeEstimatesLastRetrieved,
+      basicPriceAndTimeEstimates,
+    } = getState().gas
+    const timeLastRetrieved = basicPriceAndTimeEstimatesLastRetrieved || loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') || 0
+
+    dispatch(basicGasEstimatesLoadingStarted())
+
+    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
+      ? fetch('https://ethgasstation.info/json/ethgasAPI.json', {
+        'headers': {},
+        'referrer': 'http://ethgasstation.info/json/',
+        'referrerPolicy': 'no-referrer-when-downgrade',
+        'body': null,
+        'method': 'GET',
+        'mode': 'cors'}
+      )
+        .then(r => r.json())
+        .then(({
+          average: averageTimes10,
+          avgWait,
+          block_time: blockTime,
+          blockNum,
+          fast: fastTimes10,
+          fastest: fastestTimes10,
+          fastestWait,
+          fastWait,
+          safeLow: safeLowTimes10,
+          safeLowWait,
+          speed,
+        }) => {
+          const [average, fast, fastest, safeLow] = [
+            averageTimes10,
+            fastTimes10,
+            fastestTimes10,
+            safeLowTimes10,
+          ].map(price => (new BigNumber(price)).div(10).toNumber())
+
+          const basicEstimates = {
+            average,
+            avgWait,
+            blockTime,
+            blockNum,
+            fast,
+            fastest,
+            fastestWait,
+            fastWait,
+            safeLow,
+            safeLowWait,
+            speed,
+          }
+
+          const timeRetrieved = Date.now()
+          dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved))
+          saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
+          saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES')
+
+          return basicEstimates
+        })
+      : Promise.resolve(basicPriceAndTimeEstimates.length
+          ? basicPriceAndTimeEstimates
+          : loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES')
+        )
+
+      return promiseToFetch.then(basicEstimates => {
+        dispatch(setBasicGasEstimateData(basicEstimates))
+        dispatch(basicGasEstimatesLoadingFinished())
+        return basicEstimates
+      })
+  }
+}
+
+function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) {
+  higherY = new BigNumber(higherY, 10)
+  lowerY = new BigNumber(lowerY, 10)
+  higherX = new BigNumber(higherX, 10)
+  lowerX = new BigNumber(lowerX, 10)
+  xForExtrapolation = new BigNumber(xForExtrapolation, 10)
+  const slope = (higherY.minus(lowerY)).div(higherX.minus(lowerX))
+  const newTimeEstimate = slope.times(higherX.minus(xForExtrapolation)).minus(higherY).negated()
+
+  return Number(newTimeEstimate.toPrecision(10))
+}
+
+function getRandomArbitrary (min, max) {
+  min = new BigNumber(min, 10)
+  max = new BigNumber(max, 10)
+  const random = new BigNumber(String(Math.random()), 10)
+  return new BigNumber(random.times(max.minus(min)).plus(min)).toPrecision(10)
+}
+
+function calcMedian (list) {
+  const medianPos = (Math.floor(list.length / 2) + Math.ceil(list.length / 2)) / 2
+  return medianPos === Math.floor(medianPos)
+    ? (list[medianPos - 1] + list[medianPos]) / 2
+    : list[Math.floor(medianPos)]
+}
+
+function quartiles (data) {
+  const lowerHalf = data.slice(0, Math.floor(data.length / 2))
+  const upperHalf = data.slice(Math.floor(data.length / 2) + (data.length % 2 === 0 ? 0 : 1))
+  const median = calcMedian(data)
+  const lowerQuartile = calcMedian(lowerHalf)
+  const upperQuartile = calcMedian(upperHalf)
+  return {
+    median,
+    lowerQuartile,
+    upperQuartile,
+  }
+}
+
+function inliersByIQR (data, prop) {
+  const { lowerQuartile, upperQuartile } = quartiles(data.map(d => prop ? d[prop] : d))
+  const IQR = upperQuartile - lowerQuartile
+  const lowerBound = lowerQuartile - 1.5 * IQR
+  const upperBound = upperQuartile + 1.5 * IQR
+  return data.filter(d => {
+    const value = prop ? d[prop] : d
+    return value >= lowerBound && value <= upperBound
+  })
+}
+
+export function fetchGasEstimates (blockTime) {
+  return (dispatch, getState) => {
+    const {
+      priceAndTimeEstimatesLastRetrieved,
+      priceAndTimeEstimates,
+    } = getState().gas
+    const timeLastRetrieved = priceAndTimeEstimatesLastRetrieved || loadLocalStorageData('GAS_API_ESTIMATES_LAST_RETRIEVED') || 0
+
+    dispatch(gasEstimatesLoadingStarted())
+
+    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
+      ? fetch('https://ethgasstation.info/json/predictTable.json', {
+          'headers': {},
+          'referrer': 'http://ethgasstation.info/json/',
+          'referrerPolicy': 'no-referrer-when-downgrade',
+          'body': null,
+          'method': 'GET',
+          'mode': 'cors'}
+        )
+        .then(r => r.json())
+        .then(r => {
+          const estimatedPricesAndTimes = r.map(({ expectedTime, expectedWait, gasprice }) => ({ expectedTime, expectedWait, gasprice }))
+          const estimatedTimeWithUniquePrices = uniqBy(({ expectedTime }) => expectedTime, estimatedPricesAndTimes)
+
+          const withSupplementalTimeEstimates = flatten(estimatedTimeWithUniquePrices.map(({ expectedWait, gasprice }, i, arr) => {
+            const next = arr[i + 1]
+            if (!next) {
+              return [{ expectedWait, gasprice }]
+            } else {
+              const supplementalPrice = getRandomArbitrary(gasprice, next.gasprice)
+              const supplementalTime = extrapolateY({
+                higherY: next.expectedWait,
+                lowerY: expectedWait,
+                higherX: next.gasprice,
+                lowerX: gasprice,
+                xForExtrapolation: supplementalPrice,
+              })
+              const supplementalPrice2 = getRandomArbitrary(supplementalPrice, next.gasprice)
+              const supplementalTime2 = extrapolateY({
+                higherY: next.expectedWait,
+                lowerY: supplementalTime,
+                higherX: next.gasprice,
+                lowerX: supplementalPrice,
+                xForExtrapolation: supplementalPrice2,
+              })
+              return [
+                { expectedWait, gasprice },
+                { expectedWait: supplementalTime, gasprice: supplementalPrice },
+                { expectedWait: supplementalTime2, gasprice: supplementalPrice2 },
+              ]
+            }
+          }))
+          const withOutliersRemoved = inliersByIQR(withSupplementalTimeEstimates.slice(0).reverse(), 'expectedWait').reverse()
+          const timeMappedToSeconds = withOutliersRemoved.map(({ expectedWait, gasprice }) => {
+            const expectedTime = (new BigNumber(expectedWait)).times(Number(blockTime), 10).toNumber()
+            return {
+              expectedTime,
+              gasprice: (new BigNumber(gasprice, 10).toNumber()),
+            }
+          })
+
+          const timeRetrieved = Date.now()
+          dispatch(setApiEstimatesLastRetrieved(timeRetrieved))
+          saveLocalStorageData(timeRetrieved, 'GAS_API_ESTIMATES_LAST_RETRIEVED')
+          saveLocalStorageData(timeMappedToSeconds, 'GAS_API_ESTIMATES')
+
+          return timeMappedToSeconds
+        })
+      : Promise.resolve(priceAndTimeEstimates.length
+          ? priceAndTimeEstimates
+          : loadLocalStorageData('GAS_API_ESTIMATES')
+        )
+
+      return promiseToFetch.then(estimates => {
+        dispatch(setPricesAndTimeEstimates(estimates))
+        dispatch(gasEstimatesLoadingFinished())
+      })
+  }
+}
+
+export function setCustomGasPriceForRetry (newPrice) {
+  return (dispatch) => {
+    if (newPrice !== '0x0') {
+      dispatch(setCustomGasPrice(newPrice))
+    } else {
+      const { fast } = loadLocalStorageData('BASIC_PRICE_ESTIMATES')
+      dispatch(setCustomGasPrice(decGWEIToHexWEI(fast)))
+    }
+  }
+}
+
+export function setBasicGasEstimateData (basicGasEstimateData) {
+  return {
+    type: SET_BASIC_GAS_ESTIMATE_DATA,
+    value: basicGasEstimateData,
+  }
+}
+
+export function setPricesAndTimeEstimates (estimatedPricesAndTimes) {
+  return {
+    type: SET_PRICE_AND_TIME_ESTIMATES,
+    value: estimatedPricesAndTimes,
+  }
+}
+
+export function setCustomGasPrice (newPrice) {
+  return {
+    type: SET_CUSTOM_GAS_PRICE,
+    value: newPrice,
+  }
+}
+
+export function setCustomGasLimit (newLimit) {
+  return {
+    type: SET_CUSTOM_GAS_LIMIT,
+    value: newLimit,
+  }
+}
+
+export function setCustomGasTotal (newTotal) {
+  return {
+    type: SET_CUSTOM_GAS_TOTAL,
+    value: newTotal,
+  }
+}
+
+export function setCustomGasErrors (newErrors) {
+  return {
+    type: SET_CUSTOM_GAS_ERRORS,
+    value: newErrors,
+  }
+}
+
+export function setApiEstimatesLastRetrieved (retrievalTime) {
+  return {
+    type: SET_API_ESTIMATES_LAST_RETRIEVED,
+    value: retrievalTime,
+  }
+}
+
+export function setBasicApiEstimatesLastRetrieved (retrievalTime) {
+  return {
+    type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED,
+    value: retrievalTime,
+  }
+}
+
+export function setBasicPriceEstimatesLastRetrieved (retrievalTime) {
+  return {
+    type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED,
+    value: retrievalTime,
+  }
+}
+
+export function resetCustomGasState () {
+  return { type: RESET_CUSTOM_GAS_STATE }
+}
+
+export function resetCustomData () {
+  return { type: RESET_CUSTOM_DATA }
+}
diff --git a/ui/app/ducks/index.js b/ui/app/ducks/index.js
new file mode 100644
index 000000000..2d33edcfa
--- /dev/null
+++ b/ui/app/ducks/index.js
@@ -0,0 +1,95 @@
+const clone = require('clone')
+const extend = require('xtend')
+const copyToClipboard = require('copy-to-clipboard')
+
+//
+// Sub-Reducers take in the complete state and return their sub-state
+//
+const reduceMetamask = require('./metamask/metamask')
+const reduceApp = require('./app/app')
+const reduceLocale = require('./locale/locale')
+const reduceSend = require('./send/send.duck').default
+import reduceConfirmTransaction from './confirm-transaction/confirm-transaction.duck'
+import reduceGas from './gas/gas.duck'
+
+window.METAMASK_CACHED_LOG_STATE = null
+
+module.exports = rootReducer
+
+function rootReducer (state, action) {
+  // clone
+  state = extend(state)
+
+  if (action.type === 'GLOBAL_FORCE_UPDATE') {
+    return action.value
+  }
+
+  //
+  // MetaMask
+  //
+
+  state.metamask = reduceMetamask(state, action)
+
+  //
+  // AppState
+  //
+
+  state.appState = reduceApp(state, action)
+
+  //
+  // LocaleMessages
+  //
+
+  state.localeMessages = reduceLocale(state, action)
+
+  //
+  // Send
+  //
+
+  state.send = reduceSend(state, action)
+
+  state.confirmTransaction = reduceConfirmTransaction(state, action)
+
+  state.gas = reduceGas(state, action)
+
+  window.METAMASK_CACHED_LOG_STATE = state
+  return state
+}
+
+window.getCleanAppState = function () {
+  const state = clone(window.METAMASK_CACHED_LOG_STATE)
+  // append additional information
+  state.version = global.platform.getVersion()
+  state.browser = window.navigator.userAgent
+  // ensure seedWords are not included
+  if (state.metamask) delete state.metamask.seedWords
+  if (state.appState.currentView) delete state.appState.currentView.seedWords
+  return state
+}
+
+window.logStateString = function (cb) {
+  const state = window.getCleanAppState()
+  global.platform.getPlatformInfo((err, platform) => {
+    if (err) return cb(err)
+    state.platform = platform
+    const stateString = JSON.stringify(state, removeSeedWords, 2)
+    cb(null, stateString)
+  })
+}
+
+window.logState = function (toClipboard) {
+  return window.logStateString((err, result) => {
+    if (err) {
+      console.error(err.message)
+    } else if (toClipboard) {
+      copyToClipboard(result)
+      console.log('State log copied')
+    } else {
+      console.log(result)
+    }
+  })
+}
+
+function removeSeedWords (key, value) {
+  return key === 'seedWords' ? undefined : value
+}
diff --git a/ui/app/ducks/locale/locale.js b/ui/app/ducks/locale/locale.js
new file mode 100644
index 000000000..bb8e1b08e
--- /dev/null
+++ b/ui/app/ducks/locale/locale.js
@@ -0,0 +1,17 @@
+const extend = require('xtend')
+const actions = require('../../store/actions')
+
+module.exports = reduceMetamask
+
+function reduceMetamask (state, action) {
+  const localeMessagesState = extend({}, state.localeMessages)
+
+  switch (action.type) {
+    case actions.SET_LOCALE_MESSAGES:
+      return extend(localeMessagesState, {
+        current: action.value,
+      })
+    default:
+      return localeMessagesState
+  }
+}
diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
new file mode 100644
index 000000000..864229e83
--- /dev/null
+++ b/ui/app/ducks/metamask/metamask.js
@@ -0,0 +1,419 @@
+const extend = require('xtend')
+const actions = require('../../store/actions')
+const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
+const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
+const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/controllers/network/enums')
+
+module.exports = reduceMetamask
+
+function reduceMetamask (state, action) {
+  let newState
+
+  // clone + defaults
+  var metamaskState = extend({
+    isInitialized: false,
+    isUnlocked: false,
+    isAccountMenuOpen: false,
+    isPopup: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP,
+    rpcTarget: 'https://rawtestrpc.metamask.io/',
+    identities: {},
+    unapprovedTxs: {},
+    noActiveNotices: true,
+    nextUnreadNotice: undefined,
+    frequentRpcList: [],
+    addressBook: [],
+    selectedTokenAddress: null,
+    contractExchangeRates: {},
+    tokenExchangeRates: {},
+    tokens: [],
+    pendingTokens: {},
+    send: {
+      gasLimit: null,
+      gasPrice: null,
+      gasTotal: null,
+      tokenBalance: '0x0',
+      from: '',
+      to: '',
+      amount: '0',
+      memo: '',
+      errors: {},
+      maxModeOn: false,
+      editingTransactionId: null,
+      forceGasMin: null,
+      toNickname: '',
+    },
+    coinOptions: {},
+    useBlockie: false,
+    featureFlags: {},
+    networkEndpointType: OLD_UI_NETWORK_TYPE,
+    isRevealingSeedWords: false,
+    welcomeScreenSeen: false,
+    currentLocale: '',
+    preferences: {
+      useNativeCurrencyAsPrimaryCurrency: true,
+      showFiatInTestnets: false,
+    },
+    firstTimeFlowType: null,
+    completedOnboarding: false,
+    knownMethodData: {},
+    participateInMetaMetrics: null,
+    metaMetricsSendCount: 0,
+  }, state.metamask)
+
+  switch (action.type) {
+
+    case actions.SHOW_ACCOUNTS_PAGE:
+      newState = extend(metamaskState, {
+        isRevealingSeedWords: false,
+      })
+      delete newState.seedWords
+      return newState
+
+    case actions.SHOW_NOTICE:
+      return extend(metamaskState, {
+        noActiveNotices: false,
+        nextUnreadNotice: action.value,
+      })
+
+    case actions.CLEAR_NOTICES:
+      return extend(metamaskState, {
+        noActiveNotices: true,
+        nextUnreadNotice: undefined,
+      })
+
+    case actions.UPDATE_METAMASK_STATE:
+      return extend(metamaskState, action.value)
+
+    case actions.UNLOCK_METAMASK:
+      return extend(metamaskState, {
+        isUnlocked: true,
+        isInitialized: true,
+        selectedAddress: action.value,
+      })
+
+    case actions.LOCK_METAMASK:
+      return extend(metamaskState, {
+        isUnlocked: false,
+      })
+
+    case actions.SET_RPC_LIST:
+      return extend(metamaskState, {
+        frequentRpcList: action.value,
+      })
+
+    case actions.SET_RPC_TARGET:
+      return extend(metamaskState, {
+        provider: {
+          type: 'rpc',
+          rpcTarget: action.value,
+        },
+      })
+
+    case actions.SET_PROVIDER_TYPE:
+      return extend(metamaskState, {
+        provider: {
+          type: action.value,
+        },
+      })
+
+    case actions.COMPLETED_TX:
+      var stringId = String(action.id)
+      newState = extend(metamaskState, {
+        unapprovedTxs: {},
+        unapprovedMsgs: {},
+      })
+      for (const id in metamaskState.unapprovedTxs) {
+        if (id !== stringId) {
+          newState.unapprovedTxs[id] = metamaskState.unapprovedTxs[id]
+        }
+      }
+      for (const id in metamaskState.unapprovedMsgs) {
+        if (id !== stringId) {
+          newState.unapprovedMsgs[id] = metamaskState.unapprovedMsgs[id]
+        }
+      }
+      return newState
+
+    case actions.EDIT_TX:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          editingTransactionId: action.value,
+        },
+      })
+
+
+    case actions.SHOW_NEW_VAULT_SEED:
+      return extend(metamaskState, {
+        isRevealingSeedWords: true,
+        seedWords: action.value,
+      })
+
+    case actions.CLEAR_SEED_WORD_CACHE:
+      newState = extend(metamaskState, {
+        isUnlocked: true,
+        isInitialized: true,
+        selectedAddress: action.value,
+      })
+      delete newState.seedWords
+      return newState
+
+    case actions.SHOW_ACCOUNT_DETAIL:
+      newState = extend(metamaskState, {
+        isUnlocked: true,
+        isInitialized: true,
+        selectedAddress: action.value,
+      })
+      delete newState.seedWords
+      return newState
+
+    case actions.SET_SELECTED_TOKEN:
+      return extend(metamaskState, {
+        selectedTokenAddress: action.value,
+      })
+
+    case actions.SET_ACCOUNT_LABEL:
+      const account = action.value.account
+      const name = action.value.label
+      const id = {}
+      id[account] = extend(metamaskState.identities[account], { name })
+      const identities = extend(metamaskState.identities, id)
+      return extend(metamaskState, { identities })
+
+    case actions.SET_CURRENT_FIAT:
+      return extend(metamaskState, {
+        currentCurrency: action.value.currentCurrency,
+        conversionRate: action.value.conversionRate,
+        conversionDate: action.value.conversionDate,
+      })
+
+    case actions.UPDATE_TOKENS:
+      return extend(metamaskState, {
+        tokens: action.newTokens,
+      })
+
+    // metamask.send
+    case actions.UPDATE_GAS_LIMIT:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasLimit: action.value,
+        },
+      })
+
+    case actions.UPDATE_GAS_PRICE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasPrice: action.value,
+        },
+      })
+
+    case actions.TOGGLE_ACCOUNT_MENU:
+      return extend(metamaskState, {
+        isAccountMenuOpen: !metamaskState.isAccountMenuOpen,
+      })
+
+    case actions.UPDATE_GAS_TOTAL:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasTotal: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_TOKEN_BALANCE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          tokenBalance: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_HEX_DATA:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          data: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_FROM:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          from: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_TO:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          to: action.value.to,
+          toNickname: action.value.nickname,
+        },
+      })
+
+    case actions.UPDATE_SEND_AMOUNT:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          amount: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_MEMO:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          memo: action.value,
+        },
+      })
+
+    case actions.UPDATE_MAX_MODE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          maxModeOn: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          ...action.value,
+        },
+      })
+
+    case actions.CLEAR_SEND:
+      return extend(metamaskState, {
+        send: {
+          gasLimit: null,
+          gasPrice: null,
+          gasTotal: null,
+          tokenBalance: null,
+          from: '',
+          to: '',
+          amount: '0x0',
+          memo: '',
+          errors: {},
+          maxModeOn: false,
+          editingTransactionId: null,
+          forceGasMin: null,
+          toNickname: '',
+        },
+      })
+
+    case actions.UPDATE_TRANSACTION_PARAMS:
+      const { id: txId, value } = action
+      let { selectedAddressTxList } = metamaskState
+      selectedAddressTxList = selectedAddressTxList.map(tx => {
+        if (tx.id === txId) {
+          tx.txParams = value
+        }
+        return tx
+      })
+
+      return extend(metamaskState, {
+        selectedAddressTxList,
+      })
+
+    case actions.PAIR_UPDATE:
+      const { value: { marketinfo: pairMarketInfo } } = action
+      return extend(metamaskState, {
+        tokenExchangeRates: {
+          ...metamaskState.tokenExchangeRates,
+          [pairMarketInfo.pair]: pairMarketInfo,
+        },
+      })
+
+    case actions.SHAPESHIFT_SUBVIEW:
+      const { value: { marketinfo: ssMarketInfo, coinOptions } } = action
+      return extend(metamaskState, {
+        tokenExchangeRates: {
+          ...metamaskState.tokenExchangeRates,
+          [ssMarketInfo.pair]: ssMarketInfo,
+        },
+        coinOptions,
+      })
+
+    case actions.SET_PARTICIPATE_IN_METAMETRICS:
+      return extend(metamaskState, {
+        participateInMetaMetrics: action.value,
+      })
+
+    case actions.SET_METAMETRICS_SEND_COUNT:
+      return extend(metamaskState, {
+        metaMetricsSendCount: action.value,
+      })
+
+    case actions.SET_USE_BLOCKIE:
+      return extend(metamaskState, {
+        useBlockie: action.value,
+      })
+
+    case actions.UPDATE_FEATURE_FLAGS:
+      return extend(metamaskState, {
+        featureFlags: action.value,
+      })
+
+    case actions.UPDATE_NETWORK_ENDPOINT_TYPE:
+      return extend(metamaskState, {
+        networkEndpointType: action.value,
+      })
+
+    case actions.CLOSE_WELCOME_SCREEN:
+      return extend(metamaskState, {
+        welcomeScreenSeen: true,
+      })
+
+    case actions.SET_CURRENT_LOCALE:
+      return extend(metamaskState, {
+        currentLocale: action.value,
+      })
+
+    case actions.SET_PENDING_TOKENS:
+      return extend(metamaskState, {
+        pendingTokens: { ...action.payload },
+      })
+
+    case actions.CLEAR_PENDING_TOKENS: {
+      return extend(metamaskState, {
+        pendingTokens: {},
+      })
+    }
+
+    case actions.UPDATE_PREFERENCES: {
+      return extend(metamaskState, {
+        preferences: {
+          ...metamaskState.preferences,
+          ...action.payload,
+        },
+      })
+    }
+
+    case actions.COMPLETE_ONBOARDING: {
+      return extend(metamaskState, {
+        completedOnboarding: true,
+      })
+    }
+
+    case actions.COMPLETE_UI_MIGRATION: {
+      return extend(metamaskState, {
+        completedUiMigration: true,
+      })
+    }
+
+    case actions.SET_FIRST_TIME_FLOW_TYPE: {
+      return extend(metamaskState, {
+        firstTimeFlowType: action.value,
+      })
+    }
+
+    default:
+      return metamaskState
+
+  }
+}
diff --git a/ui/app/ducks/mock-gas-estimate-data.js b/ui/app/ducks/mock-gas-estimate-data.js
deleted file mode 100644
index f2943df7c..000000000
--- a/ui/app/ducks/mock-gas-estimate-data.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  mockGasEstimateData: [{'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 6.2827225131, 'pct_remaining5m': 0.0, 'sum': 6.7965923077, 'tx_atabove': 3969.0, 'hashpower_accepting': 15.8974358974, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 1.0, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 7.1623036649, 'pct_remaining5m': 0.0, 'sum': 6.7841307692, 'tx_atabove': 3969.0, 'hashpower_accepting': 16.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 1.3, 'pct_mined_5m': 0.0, 'total_seen_5m': 8.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 7.3403141361, 'pct_remaining5m': 0.0, 'sum': 6.7841307692, 'tx_atabove': 3969.0, 'hashpower_accepting': 16.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 1.4, 'pct_mined_5m': 0.0, 'total_seen_5m': 13.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 1.0, 'hashpower_accepting2': 7.3926701571, 'pct_remaining5m': 0.0, 'sum': 6.7841307692, 'tx_atabove': 3969.0, 'hashpower_accepting': 16.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 1.5, 'pct_mined_5m': 0.0, 'total_seen_5m': 40.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 356.0, 'hashpower_accepting2': 7.5706806283, 'pct_remaining5m': 25.0, 'sum': 6.7769307692, 'tx_atabove': 3957.0, 'hashpower_accepting': 16.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': 33.0, 'int2': 6.9238, 'pct_remaining30m': 9.0, 'gasprice': 1.6, 'pct_mined_5m': 0.0, 'total_seen_5m': 346.0, 'pct_mined_30m': 6.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 1048.5, 'hashpower_accepting2': 7.6020942408, 'pct_remaining5m': 95.0, 'sum': 6.0111923077, 'tx_atabove': 2930.0, 'hashpower_accepting': 22.5641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 11.0, 'int2': 6.9238, 'pct_remaining30m': 100.0, 'gasprice': 2.0, 'pct_mined_5m': 0.0, 'total_seen_5m': 23.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 56.0, 'hashpower_accepting2': 7.6020942408, 'pct_remaining5m': 99.0, 'sum': 5.2227923077, 'tx_atabove': 1616.0, 'hashpower_accepting': 22.5641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 66.0, 'int2': 6.9238, 'pct_remaining30m': 100.0, 'gasprice': 2.1, 'pct_mined_5m': 0.0, 'total_seen_5m': 131.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 41.0, 'hashpower_accepting2': 7.6020942408, 'pct_remaining5m': 100.0, 'sum': 4.8633923077, 'tx_atabove': 1017.0, 'hashpower_accepting': 22.5641025641, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 2.8, 'pct_mined_5m': 0.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 31.0, 'hashpower_accepting2': 7.612565445, 'pct_remaining5m': 100.0, 'sum': 4.8615923077, 'tx_atabove': 1014.0, 'hashpower_accepting': 22.5641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 100.0, 'gasprice': 2.9, 'pct_mined_5m': 0.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 147.0, 'hashpower_accepting2': 12.3246073298, 'pct_remaining5m': 50.0, 'sum': 4.6965923077, 'tx_atabove': 1009.0, 'hashpower_accepting': 29.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 50.0, 'gasprice': 3.0, 'pct_mined_5m': 50.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 50.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 73.0, 'hashpower_accepting2': 12.3246073298, 'pct_remaining5m': 50.0, 'sum': 4.6437923077, 'tx_atabove': 921.0, 'hashpower_accepting': 29.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 100.0, 'gasprice': 3.1, 'pct_mined_5m': 0.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 93.0, 'hashpower_accepting2': 12.3246073298, 'pct_remaining5m': 100.0, 'sum': 4.6413923077, 'tx_atabove': 917.0, 'hashpower_accepting': 29.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 11.0, 'int2': 6.9238, 'pct_remaining30m': 100.0, 'gasprice': 3.2, 'pct_mined_5m': 0.0, 'total_seen_5m': 8.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 44.5, 'hashpower_accepting2': 12.3246073298, 'pct_remaining5m': 100.0, 'sum': 4.6107923077, 'tx_atabove': 866.0, 'hashpower_accepting': 29.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 50.0, 'gasprice': 3.3, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 0.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 256.68, 'avgdiff': 0, 'expectedWait': 1000.0, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 11.0, 'hashpower_accepting2': 12.3664921466, 'pct_remaining5m': 100.0, 'sum': 4.5893307692, 'tx_atabove': 851.0, 'hashpower_accepting': 29.7435897436, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 3.4, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 25.27, 'avgdiff': 0, 'expectedWait': 98.4285367101, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 31.0, 'hashpower_accepting2': 12.4712041885, 'pct_remaining5m': 100.0, 'sum': 4.5887307692, 'tx_atabove': 850.0, 'hashpower_accepting': 29.7435897436, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 3.5, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 25.25, 'avgdiff': 0, 'expectedWait': 98.3694973017, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 823.0, 'hashpower_accepting2': 12.4921465969, 'pct_remaining5m': 0.0, 'sum': 4.5428076923, 'tx_atabove': 815.0, 'hashpower_accepting': 30.7692307692, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 3.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 24.12, 'avgdiff': 0, 'expectedWait': 93.9542246928, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 35.0, 'hashpower_accepting2': 12.7539267016, 'pct_remaining5m': 10.0, 'sum': 4.5279461538, 'tx_atabove': 811.0, 'hashpower_accepting': 31.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 3.9, 'pct_mined_5m': 80.0, 'total_seen_5m': 10.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 23.76, 'avgdiff': 0, 'expectedWait': 92.5682447753, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 30.0, 'hashpower_accepting2': 15.4869109948, 'pct_remaining5m': 92.0, 'sum': 4.3896692308, 'tx_atabove': 809.0, 'hashpower_accepting': 36.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 16.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.0, 'pct_mined_5m': 5.0, 'total_seen_5m': 124.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 20.69, 'avgdiff': 0, 'expectedWait': 80.613750022, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 24.0, 'hashpower_accepting2': 16.7853403141, 'pct_remaining5m': 93.0, 'sum': 4.2840692308, 'tx_atabove': 633.0, 'hashpower_accepting': 36.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 20.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.1, 'pct_mined_5m': 6.0, 'total_seen_5m': 165.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 18.62, 'avgdiff': 0, 'expectedWait': 72.5350019424, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 126.0, 'hashpower_accepting2': 16.9005235602, 'pct_remaining5m': 50.0, 'sum': 4.1260846154, 'tx_atabove': 432.0, 'hashpower_accepting': 38.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.3, 'pct_mined_5m': 0.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 15.9, 'avgdiff': 0, 'expectedWait': 61.9349484316, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 33.0, 'hashpower_accepting2': 17.1204188482, 'pct_remaining5m': 100.0, 'sum': 4.1140846154, 'tx_atabove': 412.0, 'hashpower_accepting': 38.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.4, 'pct_mined_5m': 0.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 15.71, 'avgdiff': 0, 'expectedWait': 61.1961705828, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 24.0, 'hashpower_accepting2': 17.2460732984, 'pct_remaining5m': 100.0, 'sum': 4.1092846154, 'tx_atabove': 404.0, 'hashpower_accepting': 38.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 4.6, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 15.63, 'avgdiff': 0, 'expectedWait': 60.9031328173, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 19.0, 'hashpower_accepting2': 17.4659685864, 'pct_remaining5m': 0.0, 'sum': 4.0570384615, 'tx_atabove': 400.0, 'hashpower_accepting': 40.5128205128, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 4.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 10.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 14.84, 'avgdiff': 0, 'expectedWait': 57.8028719141, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 3.0, 'hashpower_accepting2': 17.612565445, 'pct_remaining5m': 0.0, 'sum': 4.0403769231, 'tx_atabove': 393.0, 'hashpower_accepting': 41.0256410256, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 14.59, 'avgdiff': 0, 'expectedWait': 56.8477660026, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 31.0, 'hashpower_accepting2': 17.6439790576, 'pct_remaining5m': 100.0, 'sum': 4.0397769231, 'tx_atabove': 392.0, 'hashpower_accepting': 41.0256410256, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 4.9, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 14.58, 'avgdiff': 0, 'expectedWait': 56.8136675736, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 3.0, 'hashpower_accepting2': 20.502617801, 'pct_remaining5m': 3.0, 'sum': 2.2680615385, 'tx_atabove': 390.0, 'hashpower_accepting': 46.1538461538, 'hpa_coef2': -0.067, 'total_seen_30m': 43.0, 'int2': 6.9238, 'pct_remaining30m': 2.0, 'gasprice': 5.0, 'pct_mined_5m': 93.0, 'total_seen_5m': 66.0, 'pct_mined_30m': 97.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.48, 'avgdiff': 1, 'expectedWait': 9.660655842, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 20.5863874346, 'pct_remaining5m': 0.0, 'sum': 2.2308615385, 'tx_atabove': 328.0, 'hashpower_accepting': 46.1538461538, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 5.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.39, 'avgdiff': 1, 'expectedWait': 9.3078817242, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 20.7015706806, 'pct_remaining5m': 0.0, 'sum': 2.216, 'tx_atabove': 324.0, 'hashpower_accepting': 46.6666666667, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 5.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.35, 'avgdiff': 1, 'expectedWait': 9.170575103, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 20.8481675393, 'pct_remaining5m': 0.0, 'sum': 2.1910769231, 'tx_atabove': 324.0, 'hashpower_accepting': 47.6923076923, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 5.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 5.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.3, 'avgdiff': 1, 'expectedWait': 8.9448408351, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 21.0261780105, 'pct_remaining5m': 0.0, 'sum': 2.1898769231, 'tx_atabove': 322.0, 'hashpower_accepting': 47.6923076923, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 5.4, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.29, 'avgdiff': 1, 'expectedWait': 8.9341134638, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 21.2041884817, 'pct_remaining5m': 0.0, 'sum': 2.1518923077, 'tx_atabove': 321.0, 'hashpower_accepting': 49.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 5.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 7.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.21, 'avgdiff': 1, 'expectedWait': 8.6011189709, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 21.277486911, 'pct_remaining5m': 0.0, 'sum': 2.1512923077, 'tx_atabove': 320.0, 'hashpower_accepting': 49.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 5.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.21, 'avgdiff': 1, 'expectedWait': 8.5959598474, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 21.3926701571, 'pct_remaining5m': 0.0, 'sum': 2.1494923077, 'tx_atabove': 317.0, 'hashpower_accepting': 49.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 5.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.2, 'avgdiff': 1, 'expectedWait': 8.5805010368, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 21.4136125654, 'pct_remaining5m': 0.0, 'sum': 2.1494923077, 'tx_atabove': 317.0, 'hashpower_accepting': 49.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 5.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 2.2, 'avgdiff': 1, 'expectedWait': 8.5805010368, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 25.5497382199, 'pct_remaining5m': 0.0, 'sum': 2.0124153846, 'tx_atabove': 317.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': 44.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 118.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.92, 'avgdiff': 1, 'expectedWait': 7.4813659176, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 25.5916230366, 'pct_remaining5m': 0.0, 'sum': 2.0010153846, 'tx_atabove': 298.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.9, 'avgdiff': 1, 'expectedWait': 7.3965626432, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 25.7068062827, 'pct_remaining5m': 0.0, 'sum': 2.0004153846, 'tx_atabove': 297.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.9, 'avgdiff': 1, 'expectedWait': 7.3921260367, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 25.8848167539, 'pct_remaining5m': 0.0, 'sum': 1.9986153846, 'tx_atabove': 294.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 5.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.89, 'avgdiff': 1, 'expectedWait': 7.3788321779, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 25.8952879581, 'pct_remaining5m': 0.0, 'sum': 1.9986153846, 'tx_atabove': 294.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 6.4, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.89, 'avgdiff': 1, 'expectedWait': 7.3788321779, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 25.9685863874, 'pct_remaining5m': 0.0, 'sum': 1.9986153846, 'tx_atabove': 294.0, 'hashpower_accepting': 54.8717948718, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.89, 'avgdiff': 1, 'expectedWait': 7.3788321779, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 26.3769633508, 'pct_remaining5m': 0.0, 'sum': 1.9612307692, 'tx_atabove': 294.0, 'hashpower_accepting': 56.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 6.6, 'pct_mined_5m': 96.0, 'total_seen_5m': 29.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.82, 'avgdiff': 1, 'expectedWait': 7.1080700777, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 26.7120418848, 'pct_remaining5m': 0.0, 'sum': 1.9421692308, 'tx_atabove': 283.0, 'hashpower_accepting': 56.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.79, 'avgdiff': 1, 'expectedWait': 6.9738624916, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 26.9109947644, 'pct_remaining5m': 0.0, 'sum': 1.9421692308, 'tx_atabove': 283.0, 'hashpower_accepting': 56.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 9.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.79, 'avgdiff': 1, 'expectedWait': 6.9738624916, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 27.109947644, 'pct_remaining5m': 0.0, 'sum': 1.9415692308, 'tx_atabove': 282.0, 'hashpower_accepting': 56.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 6.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.79, 'avgdiff': 1, 'expectedWait': 6.9696794292, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 3.0, 'hashpower_accepting2': 29.2356020942, 'pct_remaining5m': 0.0, 'sum': 1.8294153846, 'tx_atabove': 282.0, 'hashpower_accepting': 61.5384615385, 'hpa_coef2': -0.067, 'total_seen_30m': 60.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 50.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.6, 'avgdiff': 1, 'expectedWait': 6.2302432976, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 29.780104712, 'pct_remaining5m': 0.0, 'sum': 1.8115538462, 'tx_atabove': 273.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 18.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1199495079, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 29.8848167539, 'pct_remaining5m': 0.0, 'sum': 1.8109538462, 'tx_atabove': 272.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': 4.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1162786396, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 29.9476439791, 'pct_remaining5m': 0.0, 'sum': 1.8103538462, 'tx_atabove': 271.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 7.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1126099731, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 30.0209424084, 'pct_remaining5m': null, 'sum': 1.8085538462, 'tx_atabove': 268.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.4, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1016171717, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 30.1151832461, 'pct_remaining5m': 0.0, 'sum': 1.8085538462, 'tx_atabove': 268.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1016171717, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 30.2827225131, 'pct_remaining5m': 0.0, 'sum': 1.8085538462, 'tx_atabove': 268.0, 'hashpower_accepting': 62.0512820513, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.57, 'avgdiff': 1, 'expectedWait': 6.1016171717, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 30.8586387435, 'pct_remaining5m': 0.0, 'sum': 1.7681692308, 'tx_atabove': 263.0, 'hashpower_accepting': 63.5897435897, 'hpa_coef2': -0.067, 'total_seen_30m': 12.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 7.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.5, 'avgdiff': 1, 'expectedWait': 5.8601150164, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 30.9528795812, 'pct_remaining5m': 0.0, 'sum': 1.7681692308, 'tx_atabove': 263.0, 'hashpower_accepting': 63.5897435897, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 7.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.5, 'avgdiff': 1, 'expectedWait': 5.8601150164, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 31.3089005236, 'pct_remaining5m': 0.0, 'sum': 1.7432461538, 'tx_atabove': 263.0, 'hashpower_accepting': 64.6153846154, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 7.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.47, 'avgdiff': 1, 'expectedWait': 5.7158679264, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 33.2670157068, 'pct_remaining5m': 0.0, 'sum': 1.6928, 'tx_atabove': 262.0, 'hashpower_accepting': 66.6666666667, 'hpa_coef2': -0.067, 'total_seen_30m': 65.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 38.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.39, 'avgdiff': 1, 'expectedWait': 5.4346765153, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 33.4869109948, 'pct_remaining5m': 0.0, 'sum': 1.6624769231, 'tx_atabove': 253.0, 'hashpower_accepting': 67.6923076923, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.35, 'avgdiff': 1, 'expectedWait': 5.2723538995, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 34.2617801047, 'pct_remaining5m': null, 'sum': 1.6494153846, 'tx_atabove': 252.0, 'hashpower_accepting': 68.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.2, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.34, 'avgdiff': 1, 'expectedWait': 5.2039366363, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 34.2827225131, 'pct_remaining5m': null, 'sum': 1.6494153846, 'tx_atabove': 252.0, 'hashpower_accepting': 68.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.3, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.34, 'avgdiff': 1, 'expectedWait': 5.2039366363, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 35.2356020942, 'pct_remaining5m': 0.0, 'sum': 1.6244923077, 'tx_atabove': 252.0, 'hashpower_accepting': 69.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 33.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.3, 'avgdiff': 1, 'expectedWait': 5.0758414173, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 35.2984293194, 'pct_remaining5m': null, 'sum': 1.6244923077, 'tx_atabove': 252.0, 'hashpower_accepting': 69.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.6, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.3, 'avgdiff': 1, 'expectedWait': 5.0758414173, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 35.3612565445, 'pct_remaining5m': null, 'sum': 1.6244923077, 'tx_atabove': 252.0, 'hashpower_accepting': 69.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 8.8, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.3, 'avgdiff': 1, 'expectedWait': 5.0758414173, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 37.6335078534, 'pct_remaining5m': 0.0, 'sum': 1.5372615385, 'tx_atabove': 252.0, 'hashpower_accepting': 72.8205128205, 'hpa_coef2': -0.067, 'total_seen_30m': 35.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 91.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.19, 'avgdiff': 1, 'expectedWait': 4.6518339443, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 38.0209424084, 'pct_remaining5m': 0.0, 'sum': 1.5336615385, 'tx_atabove': 246.0, 'hashpower_accepting': 72.8205128205, 'hpa_coef2': -0.067, 'total_seen_30m': 14.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 7.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.19, 'avgdiff': 1, 'expectedWait': 4.6351174498, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.0732984293, 'pct_remaining5m': 0.0, 'sum': 1.5206, 'tx_atabove': 245.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5749693534, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.1151832461, 'pct_remaining5m': 0.0, 'sum': 1.5206, 'tx_atabove': 245.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 9.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5749693534, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.1465968586, 'pct_remaining5m': null, 'sum': 1.5206, 'tx_atabove': 245.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.4, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5749693534, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.2722513089, 'pct_remaining5m': null, 'sum': 1.52, 'tx_atabove': 244.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.5, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5722251951, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.6701570681, 'pct_remaining5m': null, 'sum': 1.5194, 'tx_atabove': 243.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.6, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5694826829, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 38.6910994764, 'pct_remaining5m': 0.0, 'sum': 1.5188, 'tx_atabove': 242.0, 'hashpower_accepting': 73.3333333333, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 9.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.17, 'avgdiff': 1, 'expectedWait': 4.5667418156, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 39.3403141361, 'pct_remaining5m': null, 'sum': 1.4979384615, 'tx_atabove': 228.0, 'hashpower_accepting': 73.8461538462, 'hpa_coef2': -0.067, 'total_seen_30m': 11.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.8, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.15, 'avgdiff': 1, 'expectedWait': 4.4724594129, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 39.7277486911, 'pct_remaining5m': 0.0, 'sum': 1.4979384615, 'tx_atabove': 228.0, 'hashpower_accepting': 73.8461538462, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 9.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 1.15, 'avgdiff': 1, 'expectedWait': 4.4724594129, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 44.2827225131, 'pct_remaining5m': 0.0, 'sum': 1.3472, 'tx_atabove': 226.0, 'hashpower_accepting': 80.0, 'hpa_coef2': -0.067, 'total_seen_30m': 126.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.0, 'pct_mined_5m': 98.0, 'total_seen_5m': 113.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.99, 'avgdiff': 1, 'expectedWait': 3.8466398462, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 44.4293193717, 'pct_remaining5m': 0.0, 'sum': 1.3448, 'tx_atabove': 222.0, 'hashpower_accepting': 80.0, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 5.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.99, 'avgdiff': 1, 'expectedWait': 3.8374189801, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 44.4921465969, 'pct_remaining5m': 0.0, 'sum': 1.3448, 'tx_atabove': 222.0, 'hashpower_accepting': 80.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.99, 'avgdiff': 1, 'expectedWait': 3.8374189801, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 44.502617801, 'pct_remaining5m': null, 'sum': 1.3448, 'tx_atabove': 222.0, 'hashpower_accepting': 80.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.3, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.99, 'avgdiff': 1, 'expectedWait': 3.8374189801, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 49.4240837696, 'pct_remaining5m': 0.0, 'sum': 1.2077230769, 'tx_atabove': 222.0, 'hashpower_accepting': 85.641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 169.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 95.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.86, 'avgdiff': 1, 'expectedWait': 3.3458577122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 49.4659685864, 'pct_remaining5m': 0.0, 'sum': 1.2077230769, 'tx_atabove': 222.0, 'hashpower_accepting': 85.641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.86, 'avgdiff': 1, 'expectedWait': 3.3458577122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 49.4869109948, 'pct_remaining5m': 0.0, 'sum': 1.2077230769, 'tx_atabove': 222.0, 'hashpower_accepting': 85.641025641, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 10.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.86, 'avgdiff': 1, 'expectedWait': 3.3458577122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 49.6858638743, 'pct_remaining5m': 0.0, 'sum': 1.2077230769, 'tx_atabove': 222.0, 'hashpower_accepting': 85.641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 10.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.86, 'avgdiff': 1, 'expectedWait': 3.3458577122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 1.0, 'hashpower_accepting2': 50.0628272251, 'pct_remaining5m': 0.0, 'sum': 1.2071230769, 'tx_atabove': 221.0, 'hashpower_accepting': 85.641025641, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 10.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 11.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.86, 'avgdiff': 1, 'expectedWait': 3.3438507997, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 56.1884816754, 'pct_remaining5m': 0.0, 'sum': 1.1358153846, 'tx_atabove': 206.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 144.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 178.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.8, 'avgdiff': 1, 'expectedWait': 3.1137113805, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 56.7434554974, 'pct_remaining5m': 0.0, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 56.7748691099, 'pct_remaining5m': null, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.2, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 57.109947644, 'pct_remaining5m': 0.0, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 14.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 58.2931937173, 'pct_remaining5m': 0.0, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 10.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 58.3141361257, 'pct_remaining5m': null, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.7, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 58.3769633508, 'pct_remaining5m': 0.0, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 11.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 58.4293193717, 'pct_remaining5m': 0.0, 'sum': 1.1280153846, 'tx_atabove': 193.0, 'hashpower_accepting': 88.2051282051, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 11.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.79, 'avgdiff': 1, 'expectedWait': 3.089518905, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 60.7958115183, 'pct_remaining5m': 0.0, 'sum': 1.1030923077, 'tx_atabove': 193.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 50.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 12.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 87.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0134702079, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 61.1413612565, 'pct_remaining5m': 0.0, 'sum': 1.1018923077, 'tx_atabove': 191.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 15.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 12.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 8.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0098562125, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 61.1727748691, 'pct_remaining5m': 0.0, 'sum': 1.1018923077, 'tx_atabove': 191.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0098562125, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 61.1832460733, 'pct_remaining5m': 0.0, 'sum': 1.1018923077, 'tx_atabove': 191.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0098562125, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 61.1937172775, 'pct_remaining5m': 0.0, 'sum': 1.1018923077, 'tx_atabove': 191.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.4, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0098562125, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 62.1989528796, 'pct_remaining5m': 0.0, 'sum': 1.1018923077, 'tx_atabove': 191.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 10.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 12.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0098562125, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 62.3246073298, 'pct_remaining5m': 0.0, 'sum': 1.1006923077, 'tx_atabove': 189.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0062465513, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 62.3560209424, 'pct_remaining5m': 0.0, 'sum': 1.1000923077, 'tx_atabove': 188.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0044433444, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 62.7434554974, 'pct_remaining5m': 0.0, 'sum': 1.1000923077, 'tx_atabove': 188.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 11.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 12.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0044433444, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 62.7643979058, 'pct_remaining5m': 0.0, 'sum': 1.1000923077, 'tx_atabove': 188.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 12.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0044433444, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 65.5183246073, 'pct_remaining5m': 0.0, 'sum': 1.0988923077, 'tx_atabove': 186.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 43.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 22.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0008401747, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 65.612565445, 'pct_remaining5m': 0.0, 'sum': 1.0988923077, 'tx_atabove': 186.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 3.0008401747, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 65.7277486911, 'pct_remaining5m': 0.0, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 65.7382198953, 'pct_remaining5m': null, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.4, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 67.1832460733, 'pct_remaining5m': 0.0, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 18.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 11.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 67.2041884817, 'pct_remaining5m': 0.0, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 13.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 67.3717277487, 'pct_remaining5m': null, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.7, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 67.3926701571, 'pct_remaining5m': 0.0, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 13.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 67.4136125654, 'pct_remaining5m': 0.0, 'sum': 1.0982923077, 'tx_atabove': 185.0, 'hashpower_accepting': 89.2307692308, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 13.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.77, 'avgdiff': 1, 'expectedWait': 2.9990402106, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 1.0, 'hashpower_accepting2': 69.8219895288, 'pct_remaining5m': 0.0, 'sum': 1.0727692308, 'tx_atabove': 184.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': 25.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 14.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 59.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9234640474, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 69.8743455497, 'pct_remaining5m': 0.0, 'sum': 1.0691692308, 'tx_atabove': 178.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 14.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9129584982, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 69.9057591623, 'pct_remaining5m': 0.0, 'sum': 1.0691692308, 'tx_atabove': 178.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 14.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9129584982, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 69.9581151832, 'pct_remaining5m': 0.0, 'sum': 1.0691692308, 'tx_atabove': 178.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 14.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9129584982, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 70.0104712042, 'pct_remaining5m': null, 'sum': 1.0691692308, 'tx_atabove': 178.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 14.6, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9129584982, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 70.1047120419, 'pct_remaining5m': 0.0, 'sum': 1.0691692308, 'tx_atabove': 178.0, 'hashpower_accepting': 90.2564102564, 'hpa_coef2': -0.067, 'total_seen_30m': 7.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 14.7, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.75, 'avgdiff': 1, 'expectedWait': 2.9129584982, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 72.7434554974, 'pct_remaining5m': 0.0, 'sum': 1.0442461538, 'tx_atabove': 178.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 83.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 15.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 59.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8412558463, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 72.7853403141, 'pct_remaining5m': 0.0, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 15.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 72.8062827225, 'pct_remaining5m': null, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 15.4, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 72.8586387435, 'pct_remaining5m': 0.0, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 15.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 73.3298429319, 'pct_remaining5m': 0.0, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 16.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 15.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 10.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 73.3403141361, 'pct_remaining5m': 0.0, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 15.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.4397905759, 'pct_remaining5m': 0.0, 'sum': 1.0400461538, 'tx_atabove': 171.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 36.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 16.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 28.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.73, 'avgdiff': 1, 'expectedWait': 2.8293475966, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.4502617801, 'pct_remaining5m': 0.0, 'sum': 1.0340461538, 'tx_atabove': 161.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 16.1, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8124223376, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.4607329843, 'pct_remaining5m': 0.0, 'sum': 1.0340461538, 'tx_atabove': 161.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 16.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8124223376, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.502617801, 'pct_remaining5m': 0.0, 'sum': 1.0340461538, 'tx_atabove': 161.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 16.3, 'pct_mined_5m': 50.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8124223376, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.6806282723, 'pct_remaining5m': 0.0, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 16.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.7120418848, 'pct_remaining5m': 0.0, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 16.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 74.7434554974, 'pct_remaining5m': null, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 16.8, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.0785340314, 'pct_remaining5m': 0.0, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 17.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 17.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 5.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.1204188482, 'pct_remaining5m': 0.0, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 17.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.1413612565, 'pct_remaining5m': 0.0, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 17.7, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.1518324607, 'pct_remaining5m': null, 'sum': 1.0334461538, 'tx_atabove': 160.0, 'hashpower_accepting': 91.2820512821, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 17.8, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.72, 'avgdiff': 1, 'expectedWait': 2.8107353903, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.4764397906, 'pct_remaining5m': 0.0, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 14.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 18.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.5183246073, 'pct_remaining5m': 0.0, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 18.1, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.5287958115, 'pct_remaining5m': null, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 18.3, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.5497382199, 'pct_remaining5m': 0.0, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 18.4, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.5811518325, 'pct_remaining5m': null, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 18.9, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.6230366492, 'pct_remaining5m': 0.0, 'sum': 1.0209846154, 'tx_atabove': 160.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 19.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7759266389, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.6753926702, 'pct_remaining5m': 0.0, 'sum': 1.0203846154, 'tx_atabove': 159.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 19.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7742615825, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.7068062827, 'pct_remaining5m': 0.0, 'sum': 1.0197846154, 'tx_atabove': 158.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 19.7, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7725975248, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 75.7172774869, 'pct_remaining5m': 0.0, 'sum': 1.0197846154, 'tx_atabove': 158.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 19.8, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7725975248, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 76.1570680628, 'pct_remaining5m': 0.0, 'sum': 1.0197846154, 'tx_atabove': 158.0, 'hashpower_accepting': 91.7948717949, 'hpa_coef2': -0.067, 'total_seen_30m': 16.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 19.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 12.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.71, 'avgdiff': 1, 'expectedWait': 2.7725975248, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 80.335078534, 'pct_remaining5m': 0.0, 'sum': 0.9076307692, 'tx_atabove': 158.0, 'hashpower_accepting': 96.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': 109.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 20.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 132.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.64, 'avgdiff': 1, 'expectedWait': 2.4784435671, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 80.3455497382, 'pct_remaining5m': 0.0, 'sum': 0.8446307692, 'tx_atabove': 53.0, 'hashpower_accepting': 96.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 20.2, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.6, 'avgdiff': 1, 'expectedWait': 2.3271184122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 80.3769633508, 'pct_remaining5m': 0.0, 'sum': 0.8446307692, 'tx_atabove': 53.0, 'hashpower_accepting': 96.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 20.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.6, 'avgdiff': 1, 'expectedWait': 2.3271184122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 80.3979057592, 'pct_remaining5m': 0.0, 'sum': 0.8446307692, 'tx_atabove': 53.0, 'hashpower_accepting': 96.4102564103, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 20.9, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.6, 'avgdiff': 1, 'expectedWait': 2.3271184122, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 82.6596858639, 'pct_remaining5m': 0.0, 'sum': 0.8321692308, 'tx_atabove': 53.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 37.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 21.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 30.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2982988774, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 2.0, 'hashpower_accepting2': 82.8586387435, 'pct_remaining5m': null, 'sum': 0.8303692308, 'tx_atabove': 50.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 21.1, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2941656605, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 82.9005235602, 'pct_remaining5m': 0.0, 'sum': 0.8297692308, 'tx_atabove': 49.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 21.3, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2927895739, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 82.9633507853, 'pct_remaining5m': 0.0, 'sum': 0.8297692308, 'tx_atabove': 49.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 21.6, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2927895739, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 82.9738219895, 'pct_remaining5m': null, 'sum': 0.8297692308, 'tx_atabove': 49.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 21.7, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2927895739, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 82.9947643979, 'pct_remaining5m': null, 'sum': 0.8297692308, 'tx_atabove': 49.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 21.9, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2927895739, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 1.0, 'hashpower_accepting2': 83.2041884817, 'pct_remaining5m': 0.0, 'sum': 0.8297692308, 'tx_atabove': 49.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 4.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 22.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 7.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2927895739, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 83.2565445026, 'pct_remaining5m': null, 'sum': 0.8291692308, 'tx_atabove': 48.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 22.6, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2914143128, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 83.2670157068, 'pct_remaining5m': null, 'sum': 0.8291692308, 'tx_atabove': 48.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 22.8, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2914143128, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 83.9895287958, 'pct_remaining5m': 0.0, 'sum': 0.8291692308, 'tx_atabove': 48.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 28.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 23.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 15.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2914143128, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.0523560209, 'pct_remaining5m': null, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 23.1, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.0628272251, 'pct_remaining5m': 0.0, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 23.4, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.0837696335, 'pct_remaining5m': null, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 23.5, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.1570680628, 'pct_remaining5m': 0.0, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 24.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.167539267, 'pct_remaining5m': null, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 24.2, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.1780104712, 'pct_remaining5m': null, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 24.3, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.1884816754, 'pct_remaining5m': 0.0, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 24.5, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.3664921466, 'pct_remaining5m': 0.0, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 25.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.502617801, 'pct_remaining5m': 0.0, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 26.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.5340314136, 'pct_remaining5m': null, 'sum': 0.8285692308, 'tx_atabove': 47.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 27.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2900398766, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.7120418848, 'pct_remaining5m': 0.0, 'sum': 0.8279692308, 'tx_atabove': 46.0, 'hashpower_accepting': 96.9230769231, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 28.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.59, 'avgdiff': 1, 'expectedWait': 2.2886662648, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 84.9633507853, 'pct_remaining5m': 0.0, 'sum': 0.8155076923, 'tx_atabove': 46.0, 'hashpower_accepting': 97.4358974359, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 29.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.58, 'avgdiff': 1, 'expectedWait': 2.2603229297, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 85.664921466, 'pct_remaining5m': 0.0, 'sum': 0.8143076923, 'tx_atabove': 44.0, 'hashpower_accepting': 97.4358974359, 'hpa_coef2': -0.067, 'total_seen_30m': 17.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 30.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 26.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.58, 'avgdiff': 1, 'expectedWait': 2.2576121689, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 85.7696335079, 'pct_remaining5m': 0.0, 'sum': 0.8143076923, 'tx_atabove': 44.0, 'hashpower_accepting': 97.4358974359, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 31.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.58, 'avgdiff': 1, 'expectedWait': 2.2576121689, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.0628272251, 'pct_remaining5m': 0.0, 'sum': 0.7893846154, 'tx_atabove': 44.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 14.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 32.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.57, 'avgdiff': 1, 'expectedWait': 2.2020409071, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.2617801047, 'pct_remaining5m': 0.0, 'sum': 0.7887846154, 'tx_atabove': 43.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 33.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 4.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.2007200789, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.3560209424, 'pct_remaining5m': 0.0, 'sum': 0.7887846154, 'tx_atabove': 43.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 34.0, 'pct_mined_5m': 50.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.2007200789, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.5235602094, 'pct_remaining5m': 0.0, 'sum': 0.7887846154, 'tx_atabove': 43.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 7.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 35.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.2007200789, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.5654450262, 'pct_remaining5m': 0.0, 'sum': 0.7881846154, 'tx_atabove': 42.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 36.0, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1994000429, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.5863874346, 'pct_remaining5m': null, 'sum': 0.7881846154, 'tx_atabove': 42.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 37.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1994000429, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.6178010471, 'pct_remaining5m': 0.0, 'sum': 0.7881846154, 'tx_atabove': 42.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 38.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1994000429, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 86.6701570681, 'pct_remaining5m': null, 'sum': 0.7881846154, 'tx_atabove': 42.0, 'hashpower_accepting': 98.4615384615, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 39.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1994000429, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 87.3612565445, 'pct_remaining5m': 0.0, 'sum': 0.7757230769, 'tx_atabove': 42.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 13.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 40.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 19.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1721621998, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 89.8115183246, 'pct_remaining5m': 0.0, 'sum': 0.7751230769, 'tx_atabove': 41.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 65.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 41.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 84.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.56, 'avgdiff': 1, 'expectedWait': 2.1708592934, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 90.3141361257, 'pct_remaining5m': 0.0, 'sum': 0.7709230769, 'tx_atabove': 34.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 13.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 42.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 16.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1617608046, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 90.3455497382, 'pct_remaining5m': 0.0, 'sum': 0.7697230769, 'tx_atabove': 32.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 43.0, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1591682475, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 90.3769633508, 'pct_remaining5m': 0.0, 'sum': 0.7697230769, 'tx_atabove': 32.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 44.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1591682475, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 92.0314136126, 'pct_remaining5m': 0.0, 'sum': 0.7697230769, 'tx_atabove': 32.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 19.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 45.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 28.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1591682475, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 92.0628272251, 'pct_remaining5m': 0.0, 'sum': 0.7691230769, 'tx_atabove': 31.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 46.0, 'pct_mined_5m': 0.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1578731351, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 92.1047120419, 'pct_remaining5m': 0.0, 'sum': 0.7691230769, 'tx_atabove': 31.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 47.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1578731351, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 92.1570680628, 'pct_remaining5m': 0.0, 'sum': 0.7685230769, 'tx_atabove': 30.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 48.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1565787996, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 92.1884816754, 'pct_remaining5m': 0.0, 'sum': 0.7685230769, 'tx_atabove': 30.0, 'hashpower_accepting': 98.9743589744, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 49.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.55, 'avgdiff': 1, 'expectedWait': 2.1565787996, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': 0.0, 'hashpower_accepting2': 95.5287958115, 'pct_remaining5m': 0.0, 'sum': 0.7436, 'tx_atabove': 30.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 87.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 50.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 54.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.54, 'avgdiff': 1, 'expectedWait': 2.1034944803, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 95.7172774869, 'pct_remaining5m': 0.0, 'sum': 0.734, 'tx_atabove': 14.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 51.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0833975529, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 95.9057591623, 'pct_remaining5m': 0.0, 'sum': 0.734, 'tx_atabove': 14.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 52.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 5.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0833975529, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 95.9371727749, 'pct_remaining5m': 0.0, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 54.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 95.9895287958, 'pct_remaining5m': null, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 55.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 96.0418848168, 'pct_remaining5m': 0.0, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 57.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 96.0523560209, 'pct_remaining5m': null, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 58.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 96.0628272251, 'pct_remaining5m': 0.0, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 59.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 96.4083769634, 'pct_remaining5m': 0.0, 'sum': 0.7316, 'tx_atabove': 10.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 60.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 13.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0784033942, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 97.445026178, 'pct_remaining5m': 0.0, 'sum': 0.7298, 'tx_atabove': 7.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 21.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 61.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 14.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0746656331, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.1570680628, 'pct_remaining5m': 0.0, 'sum': 0.7292, 'tx_atabove': 6.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 12.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 63.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 15.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.073421207, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.3979057592, 'pct_remaining5m': 0.0, 'sum': 0.7286, 'tx_atabove': 5.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 7.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 64.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0721775275, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.4293193717, 'pct_remaining5m': 0.0, 'sum': 0.7286, 'tx_atabove': 5.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 65.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0721775275, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.6492146597, 'pct_remaining5m': 0.0, 'sum': 0.7286, 'tx_atabove': 5.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 66.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0721775275, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.6701570681, 'pct_remaining5m': 0.0, 'sum': 0.7286, 'tx_atabove': 5.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 67.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0721775275, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.6806282723, 'pct_remaining5m': null, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 68.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.7120418848, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 70.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.7958115183, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 71.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 98.8376963351, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 77.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.0261780105, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 5.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 80.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 9.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.0471204188, 'pct_remaining5m': null, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 81.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.057591623, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 85.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.0680628272, 'pct_remaining5m': null, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 86.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.1937172775, 'pct_remaining5m': 0.0, 'sum': 0.728, 'tx_atabove': 4.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 88.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0709345939, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.3717277487, 'pct_remaining5m': 0.0, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 90.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 3.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.4031413613, 'pct_remaining5m': null, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 91.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.4136125654, 'pct_remaining5m': null, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 94.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.4240837696, 'pct_remaining5m': null, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 98.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.5287958115, 'pct_remaining5m': 0.0, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 3.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 99.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.780104712, 'pct_remaining5m': 0.0, 'sum': 0.7268, 'tx_atabove': 2.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 6.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 100.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 6.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0684509628, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.7905759162, 'pct_remaining5m': 0.0, 'sum': 0.7262, 'tx_atabove': 1.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 101.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0672102645, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.8848167539, 'pct_remaining5m': 0.0, 'sum': 0.7262, 'tx_atabove': 1.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 1.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 102.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0672102645, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.8952879581, 'pct_remaining5m': 0.0, 'sum': 0.7262, 'tx_atabove': 1.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 120.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0672102645, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.9371727749, 'pct_remaining5m': 0.0, 'sum': 0.7262, 'tx_atabove': 1.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 122.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 2.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0672102645, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 99.9790575916, 'pct_remaining5m': null, 'sum': 0.7256, 'tx_atabove': 0.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': 2.0, 'int2': 6.9238, 'pct_remaining30m': 0.0, 'gasprice': 134.0, 'pct_mined_5m': null, 'total_seen_5m': null, 'pct_mined_30m': 100.0, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0659703104, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}, {'intercept': 4.8015, 'age': null, 'hashpower_accepting2': 100.0, 'pct_remaining5m': 0.0, 'sum': 0.7256, 'tx_atabove': 0.0, 'hashpower_accepting': 100.0, 'hpa_coef2': -0.067, 'total_seen_30m': null, 'int2': 6.9238, 'pct_remaining30m': null, 'gasprice': 180.0, 'pct_mined_5m': 100.0, 'total_seen_5m': 1.0, 'pct_mined_30m': null, 'tx_atabove_coef': 0.0006, 'average': 500, 'safelow': 500, 'nomine': 330, 'expectedTime': 0.53, 'avgdiff': 1, 'expectedWait': 2.0659703104, 'avgdiff_coef': -1.6459, 'hpa_coef': -0.0243}],
-}
diff --git a/ui/app/ducks/send/send-duck.test.js b/ui/app/ducks/send/send-duck.test.js
new file mode 100644
index 000000000..92c8dffd8
--- /dev/null
+++ b/ui/app/ducks/send/send-duck.test.js
@@ -0,0 +1,186 @@
+import assert from 'assert'
+
+import SendReducer, {
+  openToDropdown,
+  closeToDropdown,
+  updateSendErrors,
+  showGasButtonGroup,
+  hideGasButtonGroup,
+  updateSendWarnings,
+} from './send.duck.js'
+
+describe('Send Duck', () => {
+  const mockState = {
+    send: {
+      mockProp: 123,
+    },
+  }
+  const initState = {
+    fromDropdownOpen: false,
+    toDropdownOpen: false,
+    errors: {},
+    gasButtonGroupShown: true,
+    warnings: {},
+  }
+  const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN'
+  const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN'
+  const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN'
+  const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN'
+  const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS'
+  const UPDATE_SEND_WARNINGS = 'metamask/send/UPDATE_SEND_WARNINGS'
+  const RESET_SEND_STATE = 'metamask/send/RESET_SEND_STATE'
+  const SHOW_GAS_BUTTON_GROUP = 'metamask/send/SHOW_GAS_BUTTON_GROUP'
+  const HIDE_GAS_BUTTON_GROUP = 'metamask/send/HIDE_GAS_BUTTON_GROUP'
+
+  describe('SendReducer()', () => {
+    it('should initialize state', () => {
+      assert.deepEqual(
+        SendReducer({}),
+        initState
+      )
+    })
+
+    it('should return state unchanged if it does not match a dispatched actions type', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: 'someOtherAction',
+          value: 'someValue',
+        }),
+        Object.assign({}, mockState.send)
+      )
+    })
+
+    it('should set fromDropdownOpen to true when receiving a OPEN_FROM_DROPDOWN action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: OPEN_FROM_DROPDOWN,
+        }),
+        Object.assign({fromDropdownOpen: true}, mockState.send)
+      )
+    })
+
+    it('should return a new object (and not just modify the existing state object)', () => {
+      assert.deepEqual(SendReducer(mockState), mockState.send)
+      assert.notEqual(SendReducer(mockState), mockState.send)
+    })
+
+    it('should set fromDropdownOpen to false when receiving a CLOSE_FROM_DROPDOWN action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: CLOSE_FROM_DROPDOWN,
+        }),
+        Object.assign({fromDropdownOpen: false}, mockState.send)
+      )
+    })
+
+    it('should set toDropdownOpen to true when receiving a OPEN_TO_DROPDOWN action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: OPEN_TO_DROPDOWN,
+        }),
+        Object.assign({toDropdownOpen: true}, mockState.send)
+      )
+    })
+
+    it('should set toDropdownOpen to false when receiving a CLOSE_TO_DROPDOWN action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: CLOSE_TO_DROPDOWN,
+        }),
+        Object.assign({toDropdownOpen: false}, mockState.send)
+      )
+    })
+
+    it('should set gasButtonGroupShown to true when receiving a SHOW_GAS_BUTTON_GROUP action', () => {
+      assert.deepEqual(
+        SendReducer(Object.assign({}, mockState, { gasButtonGroupShown: false }), {
+          type: SHOW_GAS_BUTTON_GROUP,
+        }),
+        Object.assign({gasButtonGroupShown: true}, mockState.send)
+      )
+    })
+
+    it('should set gasButtonGroupShown to false when receiving a HIDE_GAS_BUTTON_GROUP action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: HIDE_GAS_BUTTON_GROUP,
+        }),
+        Object.assign({gasButtonGroupShown: false}, mockState.send)
+      )
+    })
+
+    it('should extend send.errors with the value of a UPDATE_SEND_ERRORS action', () => {
+      const modifiedMockState = Object.assign({}, mockState, {
+        send: {
+          errors: {
+            someError: false,
+          },
+        },
+      })
+      assert.deepEqual(
+        SendReducer(modifiedMockState, {
+          type: UPDATE_SEND_ERRORS,
+          value: { someOtherError: true },
+        }),
+        Object.assign({}, modifiedMockState.send, {
+          errors: {
+            someError: false,
+            someOtherError: true,
+          },
+        })
+      )
+    })
+
+    it('should return the initial state in response to a RESET_SEND_STATE action', () => {
+      assert.deepEqual(
+        SendReducer(mockState, {
+          type: RESET_SEND_STATE,
+        }),
+        Object.assign({}, initState)
+      )
+    })
+  })
+
+  describe('openToDropdown', () => {
+    assert.deepEqual(
+      openToDropdown(),
+      { type: OPEN_TO_DROPDOWN }
+    )
+  })
+
+  describe('closeToDropdown', () => {
+    assert.deepEqual(
+      closeToDropdown(),
+      { type: CLOSE_TO_DROPDOWN }
+    )
+  })
+
+  describe('showGasButtonGroup', () => {
+    assert.deepEqual(
+      showGasButtonGroup(),
+      { type: SHOW_GAS_BUTTON_GROUP }
+    )
+  })
+
+  describe('hideGasButtonGroup', () => {
+    assert.deepEqual(
+      hideGasButtonGroup(),
+      { type: HIDE_GAS_BUTTON_GROUP }
+    )
+  })
+
+  describe('updateSendErrors', () => {
+    assert.deepEqual(
+      updateSendErrors('mockErrorObject'),
+      { type: UPDATE_SEND_ERRORS, value: 'mockErrorObject' }
+    )
+  })
+
+  describe('updateSendWarnings', () => {
+    assert.deepEqual(
+      updateSendWarnings('mockWarningObject'),
+      { type: UPDATE_SEND_WARNINGS, value: 'mockWarningObject' }
+    )
+  })
+
+})
diff --git a/ui/app/ducks/send.duck.js b/ui/app/ducks/send/send.duck.js
index 90e92140b..90e92140b 100644
--- a/ui/app/ducks/send.duck.js
+++ b/ui/app/ducks/send/send.duck.js
diff --git a/ui/app/ducks/tests/confirm-transaction.duck.test.js b/ui/app/ducks/tests/confirm-transaction.duck.test.js
deleted file mode 100644
index eceacd0bd..000000000
--- a/ui/app/ducks/tests/confirm-transaction.duck.test.js
+++ /dev/null
@@ -1,685 +0,0 @@
-import assert from 'assert'
-import configureMockStore from 'redux-mock-store'
-import thunk from 'redux-thunk'
-import sinon from 'sinon'
-
-import ConfirmTransactionReducer, * as actions from '../confirm-transaction.duck.js'
-
-const initialState = {
-  txData: {},
-  tokenData: {},
-  methodData: {},
-  tokenProps: {
-    tokenDecimals: '',
-    tokenSymbol: '',
-  },
-  fiatTransactionAmount: '',
-  fiatTransactionFee: '',
-  fiatTransactionTotal: '',
-  ethTransactionAmount: '',
-  ethTransactionFee: '',
-  ethTransactionTotal: '',
-  hexTransactionAmount: '',
-  hexTransactionFee: '',
-  hexTransactionTotal: '',
-  nonce: '',
-  toSmartContract: false,
-  fetchingData: false,
-}
-
-const UPDATE_TX_DATA = 'metamask/confirm-transaction/UPDATE_TX_DATA'
-const CLEAR_TX_DATA = 'metamask/confirm-transaction/CLEAR_TX_DATA'
-const UPDATE_TOKEN_DATA = 'metamask/confirm-transaction/UPDATE_TOKEN_DATA'
-const CLEAR_TOKEN_DATA = 'metamask/confirm-transaction/CLEAR_TOKEN_DATA'
-const UPDATE_METHOD_DATA = 'metamask/confirm-transaction/UPDATE_METHOD_DATA'
-const CLEAR_METHOD_DATA = 'metamask/confirm-transaction/CLEAR_METHOD_DATA'
-const UPDATE_TRANSACTION_AMOUNTS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS'
-const UPDATE_TRANSACTION_FEES = 'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES'
-const UPDATE_TRANSACTION_TOTALS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS'
-const UPDATE_TOKEN_PROPS = 'metamask/confirm-transaction/UPDATE_TOKEN_PROPS'
-const UPDATE_NONCE = 'metamask/confirm-transaction/UPDATE_NONCE'
-const UPDATE_TO_SMART_CONTRACT = 'metamask/confirm-transaction/UPDATE_TO_SMART_CONTRACT'
-const FETCH_DATA_START = 'metamask/confirm-transaction/FETCH_DATA_START'
-const FETCH_DATA_END = 'metamask/confirm-transaction/FETCH_DATA_END'
-const CLEAR_CONFIRM_TRANSACTION = 'metamask/confirm-transaction/CLEAR_CONFIRM_TRANSACTION'
-
-describe('Confirm Transaction Duck', () => {
-  describe('State changes', () => {
-    const mockState = {
-      confirmTransaction: {
-        txData: {
-          id: 1,
-        },
-        tokenData: {
-          name: 'abcToken',
-        },
-        methodData: {
-          name: 'approve',
-        },
-        tokenProps: {
-          tokenDecimals: '3',
-          tokenSymbol: 'ABC',
-        },
-        fiatTransactionAmount: '469.26',
-        fiatTransactionFee: '0.01',
-        fiatTransactionTotal: '1.000021',
-        ethTransactionAmount: '1',
-        ethTransactionFee: '0.000021',
-        ethTransactionTotal: '469.27',
-        hexTransactionAmount: '',
-        hexTransactionFee: '0x1319718a5000',
-        hexTransactionTotal: '',
-        nonce: '0x0',
-        toSmartContract: false,
-        fetchingData: false,
-      },
-    }
-
-    it('should initialize state', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer({}),
-        initialState
-      )
-    })
-
-    it('should return state unchanged if it does not match a dispatched actions type', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: 'someOtherAction',
-          value: 'someValue',
-        }),
-        { ...mockState.confirmTransaction },
-      )
-    })
-
-    it('should set txData when receiving a UPDATE_TX_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TX_DATA,
-          payload: {
-            id: 2,
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          txData: {
-            ...mockState.confirmTransaction.txData,
-            id: 2,
-          },
-        }
-      )
-    })
-
-    it('should clear txData when receiving a CLEAR_TX_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: CLEAR_TX_DATA,
-        }),
-        {
-          ...mockState.confirmTransaction,
-          txData: {},
-        }
-      )
-    })
-
-    it('should set tokenData when receiving a UPDATE_TOKEN_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TOKEN_DATA,
-          payload: {
-            name: 'defToken',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          tokenData: {
-            ...mockState.confirmTransaction.tokenData,
-            name: 'defToken',
-          },
-        }
-      )
-    })
-
-    it('should clear tokenData when receiving a CLEAR_TOKEN_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: CLEAR_TOKEN_DATA,
-        }),
-        {
-          ...mockState.confirmTransaction,
-          tokenData: {},
-        }
-      )
-    })
-
-    it('should set methodData when receiving a UPDATE_METHOD_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_METHOD_DATA,
-          payload: {
-            name: 'transferFrom',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          methodData: {
-            ...mockState.confirmTransaction.methodData,
-            name: 'transferFrom',
-          },
-        }
-      )
-    })
-
-    it('should clear methodData when receiving a CLEAR_METHOD_DATA action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: CLEAR_METHOD_DATA,
-        }),
-        {
-          ...mockState.confirmTransaction,
-          methodData: {},
-        }
-      )
-    })
-
-    it('should update transaction amounts when receiving an UPDATE_TRANSACTION_AMOUNTS action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TRANSACTION_AMOUNTS,
-          payload: {
-            fiatTransactionAmount: '123.45',
-            ethTransactionAmount: '.5',
-            hexTransactionAmount: '0x1',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          fiatTransactionAmount: '123.45',
-          ethTransactionAmount: '.5',
-          hexTransactionAmount: '0x1',
-        }
-      )
-    })
-
-    it('should update transaction fees when receiving an UPDATE_TRANSACTION_FEES action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TRANSACTION_FEES,
-          payload: {
-            fiatTransactionFee: '123.45',
-            ethTransactionFee: '.5',
-            hexTransactionFee: '0x1',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          fiatTransactionFee: '123.45',
-          ethTransactionFee: '.5',
-          hexTransactionFee: '0x1',
-        }
-      )
-    })
-
-    it('should update transaction totals when receiving an UPDATE_TRANSACTION_TOTALS action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TRANSACTION_TOTALS,
-          payload: {
-            fiatTransactionTotal: '123.45',
-            ethTransactionTotal: '.5',
-            hexTransactionTotal: '0x1',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          fiatTransactionTotal: '123.45',
-          ethTransactionTotal: '.5',
-          hexTransactionTotal: '0x1',
-        }
-      )
-    })
-
-    it('should update tokenProps when receiving an UPDATE_TOKEN_PROPS action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TOKEN_PROPS,
-          payload: {
-            tokenSymbol: 'DEF',
-            tokenDecimals: '1',
-          },
-        }),
-        {
-          ...mockState.confirmTransaction,
-          tokenProps: {
-            tokenSymbol: 'DEF',
-            tokenDecimals: '1',
-          },
-        }
-      )
-    })
-
-    it('should update nonce when receiving an UPDATE_NONCE action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_NONCE,
-          payload: '0x1',
-        }),
-        {
-          ...mockState.confirmTransaction,
-          nonce: '0x1',
-        }
-      )
-    })
-
-    it('should update nonce when receiving an UPDATE_TO_SMART_CONTRACT action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_TO_SMART_CONTRACT,
-          payload: true,
-        }),
-        {
-          ...mockState.confirmTransaction,
-          toSmartContract: true,
-        }
-      )
-    })
-
-    it('should set fetchingData to true when receiving a FETCH_DATA_START action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: FETCH_DATA_START,
-        }),
-        {
-          ...mockState.confirmTransaction,
-          fetchingData: true,
-        }
-      )
-    })
-
-    it('should set fetchingData to false when receiving a FETCH_DATA_END action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer({ confirmTransaction: { fetchingData: true } }, {
-          type: FETCH_DATA_END,
-        }),
-        {
-          fetchingData: false,
-        }
-      )
-    })
-
-    it('should clear confirmTransaction when receiving a FETCH_DATA_END action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: CLEAR_CONFIRM_TRANSACTION,
-        }),
-        {
-          ...initialState,
-        }
-      )
-    })
-  })
-
-  describe('Single actions', () => {
-    it('should create an action to update txData', () => {
-      const txData = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_TX_DATA,
-        payload: txData,
-      }
-
-      assert.deepEqual(
-        actions.updateTxData(txData),
-        expectedAction
-      )
-    })
-
-    it('should create an action to clear txData', () => {
-      const expectedAction = {
-        type: CLEAR_TX_DATA,
-      }
-
-      assert.deepEqual(
-        actions.clearTxData(),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update tokenData', () => {
-      const tokenData = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_TOKEN_DATA,
-        payload: tokenData,
-      }
-
-      assert.deepEqual(
-        actions.updateTokenData(tokenData),
-        expectedAction
-      )
-    })
-
-    it('should create an action to clear tokenData', () => {
-      const expectedAction = {
-        type: CLEAR_TOKEN_DATA,
-      }
-
-      assert.deepEqual(
-        actions.clearTokenData(),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update methodData', () => {
-      const methodData = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_METHOD_DATA,
-        payload: methodData,
-      }
-
-      assert.deepEqual(
-        actions.updateMethodData(methodData),
-        expectedAction
-      )
-    })
-
-    it('should create an action to clear methodData', () => {
-      const expectedAction = {
-        type: CLEAR_METHOD_DATA,
-      }
-
-      assert.deepEqual(
-        actions.clearMethodData(),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update transaction amounts', () => {
-      const transactionAmounts = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_TRANSACTION_AMOUNTS,
-        payload: transactionAmounts,
-      }
-
-      assert.deepEqual(
-        actions.updateTransactionAmounts(transactionAmounts),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update transaction fees', () => {
-      const transactionFees = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_TRANSACTION_FEES,
-        payload: transactionFees,
-      }
-
-      assert.deepEqual(
-        actions.updateTransactionFees(transactionFees),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update transaction totals', () => {
-      const transactionTotals = { test: 123 }
-      const expectedAction = {
-        type: UPDATE_TRANSACTION_TOTALS,
-        payload: transactionTotals,
-      }
-
-      assert.deepEqual(
-        actions.updateTransactionTotals(transactionTotals),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update tokenProps', () => {
-      const tokenProps = {
-        tokenDecimals: '1',
-        tokenSymbol: 'abc',
-      }
-      const expectedAction = {
-        type: UPDATE_TOKEN_PROPS,
-        payload: tokenProps,
-      }
-
-      assert.deepEqual(
-        actions.updateTokenProps(tokenProps),
-        expectedAction
-      )
-    })
-
-    it('should create an action to update nonce', () => {
-      const nonce = '0x1'
-      const expectedAction = {
-        type: UPDATE_NONCE,
-        payload: nonce,
-      }
-
-      assert.deepEqual(
-        actions.updateNonce(nonce),
-        expectedAction
-      )
-    })
-
-    it('should create an action to set fetchingData to true', () => {
-      const expectedAction = {
-        type: FETCH_DATA_START,
-      }
-
-      assert.deepEqual(
-        actions.setFetchingData(true),
-        expectedAction
-      )
-    })
-
-    it('should create an action to set fetchingData to false', () => {
-      const expectedAction = {
-        type: FETCH_DATA_END,
-      }
-
-      assert.deepEqual(
-        actions.setFetchingData(false),
-        expectedAction
-      )
-    })
-
-    it('should create an action to clear confirmTransaction', () => {
-      const expectedAction = {
-        type: CLEAR_CONFIRM_TRANSACTION,
-      }
-
-      assert.deepEqual(
-        actions.clearConfirmTransaction(),
-        expectedAction
-      )
-    })
-  })
-
-  describe('Thunk actions', done => {
-    beforeEach(() => {
-      global.eth = {
-        getCode: sinon.stub().callsFake(
-          address => Promise.resolve(address && address.match(/isContract/) ? 'not-0x' : '0x')
-        ),
-      }
-    })
-
-    afterEach(() => {
-      global.eth.getCode.resetHistory()
-    })
-
-    it('updates txData and gas on an existing transaction in confirmTransaction', () => {
-      const mockState = {
-        metamask: {
-          conversionRate: 468.58,
-          currentCurrency: 'usd',
-        },
-        confirmTransaction: {
-          ethTransactionAmount: '1',
-          ethTransactionFee: '0.000021',
-          ethTransactionTotal: '1.000021',
-          fetchingData: false,
-          fiatTransactionAmount: '469.26',
-          fiatTransactionFee: '0.01',
-          fiatTransactionTotal: '469.27',
-          hexGasTotal: '0x1319718a5000',
-          methodData: {},
-          nonce: '',
-          tokenData: {},
-          tokenProps: {
-            tokenDecimals: '',
-            tokenSymbol: '',
-          },
-          txData: {
-            estimatedGas: '0x5208',
-            gasLimitSpecified: false,
-            gasPriceSpecified: false,
-            history: [],
-            id: 2603411941761054,
-            loadingDefaults: false,
-            metamaskNetworkId: '3',
-            origin: 'faucet.metamask.io',
-            simpleSend: true,
-            status: 'unapproved',
-            time: 1530838113716,
-          },
-        },
-      }
-
-      const middlewares = [thunk]
-      const mockStore = configureMockStore(middlewares)
-      const store = mockStore(mockState)
-      const expectedActions = [
-        'metamask/confirm-transaction/UPDATE_TX_DATA',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
-      ]
-
-      store.dispatch(actions.updateGasAndCalculate({ gasLimit: '0x2', gasPrice: '0x25' }))
-
-      const storeActions = store.getActions()
-      assert.equal(storeActions.length, expectedActions.length)
-      storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
-    })
-
-    it('updates txData and updates gas values in confirmTransaction', () => {
-      const txData = {
-        estimatedGas: '0x5208',
-        gasLimitSpecified: false,
-        gasPriceSpecified: false,
-        history: [],
-        id: 2603411941761054,
-        loadingDefaults: false,
-        metamaskNetworkId: '3',
-        origin: 'faucet.metamask.io',
-        simpleSend: true,
-        status: 'unapproved',
-        time: 1530838113716,
-        txParams: {
-          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
-          gas: '0x33450',
-          gasPrice: '0x2540be400',
-          to: '0x81b7e08f65bdf5648606c89998a9cc8164397647',
-          value: '0xde0b6b3a7640000',
-        },
-      }
-      const mockState = {
-        metamask: {
-          conversionRate: 468.58,
-          currentCurrency: 'usd',
-        },
-        confirmTransaction: {
-          ethTransactionAmount: '1',
-          ethTransactionFee: '0.000021',
-          ethTransactionTotal: '1.000021',
-          fetchingData: false,
-          fiatTransactionAmount: '469.26',
-          fiatTransactionFee: '0.01',
-          fiatTransactionTotal: '469.27',
-          hexGasTotal: '0x1319718a5000',
-          methodData: {},
-          nonce: '',
-          tokenData: {},
-          tokenProps: {
-            tokenDecimals: '',
-            tokenSymbol: '',
-          },
-          txData: {
-            ...txData,
-            txParams: {
-              ...txData.txParams,
-            },
-          },
-        },
-      }
-
-      const middlewares = [thunk]
-      const mockStore = configureMockStore(middlewares)
-      const store = mockStore(mockState)
-      const expectedActions = [
-        'metamask/confirm-transaction/UPDATE_TX_DATA',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
-      ]
-
-      store.dispatch(actions.updateTxDataAndCalculate(txData))
-
-      const storeActions = store.getActions()
-      assert.equal(storeActions.length, expectedActions.length)
-      storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
-    })
-
-    it('updates confirmTransaction transaction', done => {
-      const mockState = {
-        metamask: {
-          conversionRate: 468.58,
-          currentCurrency: 'usd',
-          network: '3',
-          unapprovedTxs: {
-            2603411941761054: {
-              estimatedGas: '0x5208',
-              gasLimitSpecified: false,
-              gasPriceSpecified: false,
-              history: [],
-              id: 2603411941761054,
-              loadingDefaults: false,
-              metamaskNetworkId: '3',
-              origin: 'faucet.metamask.io',
-              simpleSend: true,
-              status: 'unapproved',
-              time: 1530838113716,
-              txParams: {
-                from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
-                gas: '0x33450',
-                gasPrice: '0x2540be400',
-                to: '0x81b7e08f65bdf5648606c89998a9cc8164397647',
-                value: '0xde0b6b3a7640000',
-              },
-            },
-          },
-        },
-        confirmTransaction: {},
-      }
-
-      const middlewares = [thunk]
-      const mockStore = configureMockStore(middlewares)
-      const store = mockStore(mockState)
-      const expectedActions = [
-        'metamask/confirm-transaction/UPDATE_TX_DATA',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
-        'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
-      ]
-
-      store.dispatch(actions.setTransactionToConfirm(2603411941761054))
-        .then(() => {
-          const storeActions = store.getActions()
-          assert.equal(storeActions.length, expectedActions.length)
-
-          storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
-          done()
-        })
-    })
-  })
-})
diff --git a/ui/app/ducks/tests/gas-duck.test.js b/ui/app/ducks/tests/gas-duck.test.js
deleted file mode 100644
index cd963aed4..000000000
--- a/ui/app/ducks/tests/gas-duck.test.js
+++ /dev/null
@@ -1,600 +0,0 @@
-import assert from 'assert'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-
-
-const GasDuck = proxyquire('../gas.duck.js', {
-  '../../lib/local-storage-helpers': {
-    loadLocalStorageData: sinon.spy(),
-    saveLocalStorageData: sinon.spy(),
-  },
-})
-
-const {
-  basicGasEstimatesLoadingStarted,
-  basicGasEstimatesLoadingFinished,
-  setBasicGasEstimateData,
-  setCustomGasPrice,
-  setCustomGasLimit,
-  setCustomGasTotal,
-  setCustomGasErrors,
-  resetCustomGasState,
-  fetchBasicGasAndTimeEstimates,
-  fetchBasicGasEstimates,
-  gasEstimatesLoadingStarted,
-  gasEstimatesLoadingFinished,
-  setPricesAndTimeEstimates,
-  fetchGasEstimates,
-  setApiEstimatesLastRetrieved,
-} = GasDuck
-const GasReducer = GasDuck.default
-
-describe('Gas Duck', () => {
-  let tempFetch
-  let tempDateNow
-  const mockEthGasApiResponse = {
-    average: 20,
-    avgWait: 'mockAvgWait',
-    block_time: 'mockBlock_time',
-    blockNum: 'mockBlockNum',
-    fast: 30,
-    fastest: 40,
-    fastestWait: 'mockFastestWait',
-    fastWait: 'mockFastWait',
-    safeLow: 10,
-    safeLowWait: 'mockSafeLowWait',
-    speed: 'mockSpeed',
-    standard: 20,
-  }
-  const mockPredictTableResponse = [
-    { expectedTime: 400, expectedWait: 40, gasprice: 0.25, somethingElse: 'foobar' },
-    { expectedTime: 200, expectedWait: 20, gasprice: 0.5, somethingElse: 'foobar' },
-    { expectedTime: 100, expectedWait: 10, gasprice: 1, somethingElse: 'foobar' },
-    { expectedTime: 75, expectedWait: 7.5, gasprice: 1.5, somethingElse: 'foobar' },
-    { expectedTime: 50, expectedWait: 5, gasprice: 2, somethingElse: 'foobar' },
-    { expectedTime: 35, expectedWait: 4.5, gasprice: 3, somethingElse: 'foobar' },
-    { expectedTime: 34, expectedWait: 4.4, gasprice: 3.1, somethingElse: 'foobar' },
-    { expectedTime: 25, expectedWait: 4.2, gasprice: 3.5, somethingElse: 'foobar' },
-    { expectedTime: 20, expectedWait: 4, gasprice: 4, somethingElse: 'foobar' },
-    { expectedTime: 19, expectedWait: 3.9, gasprice: 4.1, somethingElse: 'foobar' },
-    { expectedTime: 15, expectedWait: 3, gasprice: 7, somethingElse: 'foobar' },
-    { expectedTime: 14, expectedWait: 2.9, gasprice: 7.1, somethingElse: 'foobar' },
-    { expectedTime: 12, expectedWait: 2.5, gasprice: 8, somethingElse: 'foobar' },
-    { expectedTime: 10, expectedWait: 2, gasprice: 10, somethingElse: 'foobar' },
-    { expectedTime: 9, expectedWait: 1.9, gasprice: 10.1, somethingElse: 'foobar' },
-    { expectedTime: 5, expectedWait: 1, gasprice: 15, somethingElse: 'foobar' },
-    { expectedTime: 4, expectedWait: 0.9, gasprice: 15.1, somethingElse: 'foobar' },
-    { expectedTime: 2, expectedWait: 0.8, gasprice: 17, somethingElse: 'foobar' },
-    { expectedTime: 1.1, expectedWait: 0.6, gasprice: 19.9, somethingElse: 'foobar' },
-    { expectedTime: 1, expectedWait: 0.5, gasprice: 20, somethingElse: 'foobar' },
-  ]
-  const fetchStub = sinon.stub().callsFake((url) => new Promise(resolve => {
-    const dataToResolve = url.match(/ethgasAPI|gasexpress/)
-      ? mockEthGasApiResponse
-      : mockPredictTableResponse
-    resolve({
-      json: () => new Promise(resolve => resolve(dataToResolve)),
-    })
-  }))
-
-  beforeEach(() => {
-    tempFetch = global.fetch
-    tempDateNow = global.Date.now
-    global.fetch = fetchStub
-    global.Date.now = () => 2000000
-  })
-
-  afterEach(() => {
-    fetchStub.resetHistory()
-    global.fetch = tempFetch
-    global.Date.now = tempDateNow
-  })
-
-  const mockState = {
-    gas: {
-      mockProp: 123,
-    },
-  }
-  const initState = {
-    customData: {
-      price: null,
-      limit: null,
-    },
-    basicEstimates: {
-      average: null,
-      fastestWait: null,
-      fastWait: null,
-      fast: null,
-      safeLowWait: null,
-      blockNum: null,
-      avgWait: null,
-      blockTime: null,
-      speed: null,
-      fastest: null,
-      safeLow: null,
-    },
-    basicEstimateIsLoading: true,
-    errors: {},
-    gasEstimatesLoading: true,
-    priceAndTimeEstimates: [],
-    priceAndTimeEstimatesLastRetrieved: 0,
-    basicPriceAndTimeEstimates: [],
-    basicPriceAndTimeEstimatesLastRetrieved: 0,
-    basicPriceEstimatesLastRetrieved: 0,
-  }
-  const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
-  const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED'
-  const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED'
-  const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED'
-  const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE'
-  const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA'
-  const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS'
-  const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT'
-  const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE'
-  const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL'
-  const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES'
-  const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED'
-  const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED'
-  const SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED'
-
-  describe('GasReducer()', () => {
-    it('should initialize state', () => {
-      assert.deepEqual(
-        GasReducer({}),
-        initState
-      )
-    })
-
-    it('should return state unchanged if it does not match a dispatched actions type', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: 'someOtherAction',
-          value: 'someValue',
-        }),
-        Object.assign({}, mockState.gas)
-      )
-    })
-
-    it('should set basicEstimateIsLoading to true when receiving a BASIC_GAS_ESTIMATE_LOADING_STARTED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: BASIC_GAS_ESTIMATE_LOADING_STARTED,
-        }),
-        Object.assign({basicEstimateIsLoading: true}, mockState.gas)
-      )
-    })
-
-    it('should set basicEstimateIsLoading to false when receiving a BASIC_GAS_ESTIMATE_LOADING_FINISHED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: BASIC_GAS_ESTIMATE_LOADING_FINISHED,
-        }),
-        Object.assign({basicEstimateIsLoading: false}, mockState.gas)
-      )
-    })
-
-    it('should set gasEstimatesLoading to true when receiving a GAS_ESTIMATE_LOADING_STARTED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: GAS_ESTIMATE_LOADING_STARTED,
-        }),
-        Object.assign({gasEstimatesLoading: true}, mockState.gas)
-      )
-    })
-
-    it('should set gasEstimatesLoading to false when receiving a GAS_ESTIMATE_LOADING_FINISHED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: GAS_ESTIMATE_LOADING_FINISHED,
-        }),
-        Object.assign({gasEstimatesLoading: false}, mockState.gas)
-      )
-    })
-
-    it('should return a new object (and not just modify the existing state object)', () => {
-      assert.deepEqual(GasReducer(mockState), mockState.gas)
-      assert.notEqual(GasReducer(mockState), mockState.gas)
-    })
-
-    it('should set basicEstimates when receiving a SET_BASIC_GAS_ESTIMATE_DATA action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_BASIC_GAS_ESTIMATE_DATA,
-          value: { someProp: 'someData123' },
-        }),
-        Object.assign({basicEstimates: {someProp: 'someData123'} }, mockState.gas)
-      )
-    })
-
-    it('should set priceAndTimeEstimates when receiving a SET_PRICE_AND_TIME_ESTIMATES action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_PRICE_AND_TIME_ESTIMATES,
-          value: { someProp: 'someData123' },
-        }),
-        Object.assign({priceAndTimeEstimates: {someProp: 'someData123'} }, mockState.gas)
-      )
-    })
-
-    it('should set customData.price when receiving a SET_CUSTOM_GAS_PRICE action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_CUSTOM_GAS_PRICE,
-          value: 4321,
-        }),
-        Object.assign({customData: {price: 4321} }, mockState.gas)
-      )
-    })
-
-    it('should set customData.limit when receiving a SET_CUSTOM_GAS_LIMIT action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_CUSTOM_GAS_LIMIT,
-          value: 9876,
-        }),
-        Object.assign({customData: {limit: 9876} }, mockState.gas)
-      )
-    })
-
-    it('should set customData.total when receiving a SET_CUSTOM_GAS_TOTAL action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_CUSTOM_GAS_TOTAL,
-          value: 10000,
-        }),
-        Object.assign({customData: {total: 10000} }, mockState.gas)
-      )
-    })
-
-    it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_API_ESTIMATES_LAST_RETRIEVED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_API_ESTIMATES_LAST_RETRIEVED,
-          value: 1500000000000,
-        }),
-        Object.assign({ priceAndTimeEstimatesLastRetrieved: 1500000000000 }, mockState.gas)
-      )
-    })
-
-    it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_BASIC_API_ESTIMATES_LAST_RETRIEVED action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED,
-          value: 1700000000000,
-        }),
-        Object.assign({ basicPriceAndTimeEstimatesLastRetrieved: 1700000000000 }, mockState.gas)
-      )
-    })
-
-    it('should set errors when receiving a SET_CUSTOM_GAS_ERRORS action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: SET_CUSTOM_GAS_ERRORS,
-          value: { someError: 'error_error' },
-        }),
-        Object.assign({errors: {someError: 'error_error'} }, mockState.gas)
-      )
-    })
-
-    it('should return the initial state in response to a RESET_CUSTOM_GAS_STATE action', () => {
-      assert.deepEqual(
-        GasReducer(mockState, {
-          type: RESET_CUSTOM_GAS_STATE,
-        }),
-        Object.assign({}, initState)
-      )
-    })
-  })
-
-  describe('basicGasEstimatesLoadingStarted', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        basicGasEstimatesLoadingStarted(),
-        { type: BASIC_GAS_ESTIMATE_LOADING_STARTED }
-      )
-    })
-  })
-
-  describe('basicGasEstimatesLoadingFinished', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        basicGasEstimatesLoadingFinished(),
-        { type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }
-      )
-    })
-  })
-
-  describe('fetchBasicGasEstimates', () => {
-    const mockDistpatch = sinon.spy()
-    it('should call fetch with the expected params', async () => {
-      await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign(
-        {},
-        initState,
-        { basicPriceAEstimatesLastRetrieved: 1000000 }
-      ) }))
-      assert.deepEqual(
-        mockDistpatch.getCall(0).args,
-        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
-      )
-      assert.deepEqual(
-        global.fetch.getCall(0).args,
-        [
-          'https://dev.blockscale.net/api/gasexpress.json',
-          {
-            'headers': {},
-            'referrer': 'https://dev.blockscale.net/api/',
-            'referrerPolicy': 'no-referrer-when-downgrade',
-            'body': null,
-            'method': 'GET',
-            'mode': 'cors',
-          },
-        ]
-      )
-
-      assert.deepEqual(
-        mockDistpatch.getCall(1).args,
-        [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
-      )
-
-      assert.deepEqual(
-        mockDistpatch.getCall(2).args,
-        [{
-          type: SET_BASIC_GAS_ESTIMATE_DATA,
-          value: {
-            average: 20,
-            blockTime: 'mockBlock_time',
-            blockNum: 'mockBlockNum',
-            fast: 30,
-            fastest: 40,
-            safeLow: 10,
-          },
-        }]
-      )
-      assert.deepEqual(
-        mockDistpatch.getCall(3).args,
-        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
-      )
-    })
-  })
-
-  describe('fetchBasicGasAndTimeEstimates', () => {
-    const mockDistpatch = sinon.spy()
-    it('should call fetch with the expected params', async () => {
-      await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign(
-        {},
-        initState,
-        { basicPriceAndTimeEstimatesLastRetrieved: 1000000 }
-      ) }))
-      assert.deepEqual(
-        mockDistpatch.getCall(0).args,
-        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
-      )
-      assert.deepEqual(
-        global.fetch.getCall(0).args,
-        [
-          'https://ethgasstation.info/json/ethgasAPI.json',
-          {
-            'headers': {},
-            'referrer': 'http://ethgasstation.info/json/',
-            'referrerPolicy': 'no-referrer-when-downgrade',
-            'body': null,
-            'method': 'GET',
-            'mode': 'cors',
-          },
-        ]
-      )
-
-      assert.deepEqual(
-        mockDistpatch.getCall(1).args,
-        [{ type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
-      )
-
-      assert.deepEqual(
-        mockDistpatch.getCall(2).args,
-        [{
-          type: SET_BASIC_GAS_ESTIMATE_DATA,
-          value: {
-            average: 2,
-            avgWait: 'mockAvgWait',
-            blockTime: 'mockBlock_time',
-            blockNum: 'mockBlockNum',
-            fast: 3,
-            fastest: 4,
-            fastestWait: 'mockFastestWait',
-            fastWait: 'mockFastWait',
-            safeLow: 1,
-            safeLowWait: 'mockSafeLowWait',
-            speed: 'mockSpeed',
-          },
-        }]
-      )
-      assert.deepEqual(
-        mockDistpatch.getCall(3).args,
-        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
-      )
-    })
-  })
-
-  describe('fetchGasEstimates', () => {
-    const mockDistpatch = sinon.spy()
-
-    beforeEach(() => {
-      mockDistpatch.resetHistory()
-    })
-
-    it('should call fetch with the expected params', async () => {
-      global.fetch.resetHistory()
-      await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
-        {},
-        initState,
-        { priceAndTimeEstimatesLastRetrieved: 1000000 }
-      ) }))
-      assert.deepEqual(
-        mockDistpatch.getCall(0).args,
-        [{ type: GAS_ESTIMATE_LOADING_STARTED} ]
-      )
-      assert.deepEqual(
-        global.fetch.getCall(0).args,
-        [
-          'https://ethgasstation.info/json/predictTable.json',
-          {
-            'headers': {},
-            'referrer': 'http://ethgasstation.info/json/',
-            'referrerPolicy': 'no-referrer-when-downgrade',
-            'body': null,
-            'method': 'GET',
-            'mode': 'cors',
-          },
-        ]
-      )
-
-      assert.deepEqual(
-        mockDistpatch.getCall(1).args,
-        [{ type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 }]
-      )
-
-      const { type: thirdDispatchCallType, value: priceAndTimeEstimateResult } = mockDistpatch.getCall(2).args[0]
-      assert.equal(thirdDispatchCallType, SET_PRICE_AND_TIME_ESTIMATES)
-      assert(priceAndTimeEstimateResult.length < mockPredictTableResponse.length * 3 - 2)
-      assert(!priceAndTimeEstimateResult.find(d => d.expectedTime > 100))
-      assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.expectedTime > a[a + 1].expectedTime))
-      assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.gasprice > a[a + 1].gasprice))
-
-      assert.deepEqual(
-        mockDistpatch.getCall(3).args,
-        [{ type: GAS_ESTIMATE_LOADING_FINISHED }]
-      )
-    })
-
-    it('should not call fetch if the estimates were retrieved < 75000 ms ago', async () => {
-      global.fetch.resetHistory()
-      await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
-        {},
-        initState,
-        {
-          priceAndTimeEstimatesLastRetrieved: Date.now(),
-          priceAndTimeEstimates: [{
-            expectedTime: '10',
-            expectedWait: 2,
-            gasprice: 50,
-          }],
-        }
-      ) }))
-      assert.deepEqual(
-        mockDistpatch.getCall(0).args,
-        [{ type: GAS_ESTIMATE_LOADING_STARTED} ]
-      )
-      assert.equal(global.fetch.callCount, 0)
-
-      assert.deepEqual(
-        mockDistpatch.getCall(1).args,
-        [{
-          type: SET_PRICE_AND_TIME_ESTIMATES,
-          value: [
-            {
-              expectedTime: '10',
-              expectedWait: 2,
-              gasprice: 50,
-            },
-          ],
-
-        }]
-      )
-      assert.deepEqual(
-        mockDistpatch.getCall(2).args,
-        [{ type: GAS_ESTIMATE_LOADING_FINISHED }]
-      )
-    })
-  })
-
-  describe('gasEstimatesLoadingStarted', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        gasEstimatesLoadingStarted(),
-        { type: GAS_ESTIMATE_LOADING_STARTED }
-      )
-    })
-  })
-
-  describe('gasEstimatesLoadingFinished', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        gasEstimatesLoadingFinished(),
-        { type: GAS_ESTIMATE_LOADING_FINISHED }
-      )
-    })
-  })
-
-  describe('setPricesAndTimeEstimates', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setPricesAndTimeEstimates('mockPricesAndTimeEstimates'),
-        { type: SET_PRICE_AND_TIME_ESTIMATES, value: 'mockPricesAndTimeEstimates' }
-      )
-    })
-  })
-
-  describe('setBasicGasEstimateData', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setBasicGasEstimateData('mockBasicEstimatData'),
-        { type: SET_BASIC_GAS_ESTIMATE_DATA, value: 'mockBasicEstimatData' }
-      )
-    })
-  })
-
-  describe('setCustomGasPrice', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setCustomGasPrice('mockCustomGasPrice'),
-        { type: SET_CUSTOM_GAS_PRICE, value: 'mockCustomGasPrice' }
-      )
-    })
-  })
-
-  describe('setCustomGasLimit', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setCustomGasLimit('mockCustomGasLimit'),
-        { type: SET_CUSTOM_GAS_LIMIT, value: 'mockCustomGasLimit' }
-      )
-    })
-  })
-
-  describe('setCustomGasTotal', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setCustomGasTotal('mockCustomGasTotal'),
-        { type: SET_CUSTOM_GAS_TOTAL, value: 'mockCustomGasTotal' }
-      )
-    })
-  })
-
-  describe('setCustomGasErrors', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setCustomGasErrors('mockErrorObject'),
-        { type: SET_CUSTOM_GAS_ERRORS, value: 'mockErrorObject' }
-      )
-    })
-  })
-
-  describe('setApiEstimatesLastRetrieved', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        setApiEstimatesLastRetrieved(1234),
-        { type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 1234 }
-      )
-    })
-  })
-
-  describe('resetCustomGasState', () => {
-    it('should create the correct action', () => {
-      assert.deepEqual(
-        resetCustomGasState(),
-        { type: RESET_CUSTOM_GAS_STATE }
-      )
-    })
-  })
-
-})
diff --git a/ui/app/ducks/tests/send-duck.test.js b/ui/app/ducks/tests/send-duck.test.js
deleted file mode 100644
index 43f51c631..000000000
--- a/ui/app/ducks/tests/send-duck.test.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import assert from 'assert'
-
-import SendReducer, {
-  openToDropdown,
-  closeToDropdown,
-  updateSendErrors,
-  showGasButtonGroup,
-  hideGasButtonGroup,
-  updateSendWarnings,
-} from '../send.duck.js'
-
-describe('Send Duck', () => {
-  const mockState = {
-    send: {
-      mockProp: 123,
-    },
-  }
-  const initState = {
-    fromDropdownOpen: false,
-    toDropdownOpen: false,
-    errors: {},
-    gasButtonGroupShown: true,
-    warnings: {},
-  }
-  const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN'
-  const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN'
-  const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN'
-  const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN'
-  const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS'
-  const UPDATE_SEND_WARNINGS = 'metamask/send/UPDATE_SEND_WARNINGS'
-  const RESET_SEND_STATE = 'metamask/send/RESET_SEND_STATE'
-  const SHOW_GAS_BUTTON_GROUP = 'metamask/send/SHOW_GAS_BUTTON_GROUP'
-  const HIDE_GAS_BUTTON_GROUP = 'metamask/send/HIDE_GAS_BUTTON_GROUP'
-
-  describe('SendReducer()', () => {
-    it('should initialize state', () => {
-      assert.deepEqual(
-        SendReducer({}),
-        initState
-      )
-    })
-
-    it('should return state unchanged if it does not match a dispatched actions type', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: 'someOtherAction',
-          value: 'someValue',
-        }),
-        Object.assign({}, mockState.send)
-      )
-    })
-
-    it('should set fromDropdownOpen to true when receiving a OPEN_FROM_DROPDOWN action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: OPEN_FROM_DROPDOWN,
-        }),
-        Object.assign({fromDropdownOpen: true}, mockState.send)
-      )
-    })
-
-    it('should return a new object (and not just modify the existing state object)', () => {
-      assert.deepEqual(SendReducer(mockState), mockState.send)
-      assert.notEqual(SendReducer(mockState), mockState.send)
-    })
-
-    it('should set fromDropdownOpen to false when receiving a CLOSE_FROM_DROPDOWN action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: CLOSE_FROM_DROPDOWN,
-        }),
-        Object.assign({fromDropdownOpen: false}, mockState.send)
-      )
-    })
-
-    it('should set toDropdownOpen to true when receiving a OPEN_TO_DROPDOWN action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: OPEN_TO_DROPDOWN,
-        }),
-        Object.assign({toDropdownOpen: true}, mockState.send)
-      )
-    })
-
-    it('should set toDropdownOpen to false when receiving a CLOSE_TO_DROPDOWN action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: CLOSE_TO_DROPDOWN,
-        }),
-        Object.assign({toDropdownOpen: false}, mockState.send)
-      )
-    })
-
-    it('should set gasButtonGroupShown to true when receiving a SHOW_GAS_BUTTON_GROUP action', () => {
-      assert.deepEqual(
-        SendReducer(Object.assign({}, mockState, { gasButtonGroupShown: false }), {
-          type: SHOW_GAS_BUTTON_GROUP,
-        }),
-        Object.assign({gasButtonGroupShown: true}, mockState.send)
-      )
-    })
-
-    it('should set gasButtonGroupShown to false when receiving a HIDE_GAS_BUTTON_GROUP action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: HIDE_GAS_BUTTON_GROUP,
-        }),
-        Object.assign({gasButtonGroupShown: false}, mockState.send)
-      )
-    })
-
-    it('should extend send.errors with the value of a UPDATE_SEND_ERRORS action', () => {
-      const modifiedMockState = Object.assign({}, mockState, {
-        send: {
-          errors: {
-            someError: false,
-          },
-        },
-      })
-      assert.deepEqual(
-        SendReducer(modifiedMockState, {
-          type: UPDATE_SEND_ERRORS,
-          value: { someOtherError: true },
-        }),
-        Object.assign({}, modifiedMockState.send, {
-          errors: {
-            someError: false,
-            someOtherError: true,
-          },
-        })
-      )
-    })
-
-    it('should return the initial state in response to a RESET_SEND_STATE action', () => {
-      assert.deepEqual(
-        SendReducer(mockState, {
-          type: RESET_SEND_STATE,
-        }),
-        Object.assign({}, initState)
-      )
-    })
-  })
-
-  describe('openToDropdown', () => {
-    assert.deepEqual(
-      openToDropdown(),
-      { type: OPEN_TO_DROPDOWN }
-    )
-  })
-
-  describe('closeToDropdown', () => {
-    assert.deepEqual(
-      closeToDropdown(),
-      { type: CLOSE_TO_DROPDOWN }
-    )
-  })
-
-  describe('showGasButtonGroup', () => {
-    assert.deepEqual(
-      showGasButtonGroup(),
-      { type: SHOW_GAS_BUTTON_GROUP }
-    )
-  })
-
-  describe('hideGasButtonGroup', () => {
-    assert.deepEqual(
-      hideGasButtonGroup(),
-      { type: HIDE_GAS_BUTTON_GROUP }
-    )
-  })
-
-  describe('updateSendErrors', () => {
-    assert.deepEqual(
-      updateSendErrors('mockErrorObject'),
-      { type: UPDATE_SEND_ERRORS, value: 'mockErrorObject' }
-    )
-  })
-
-  describe('updateSendWarnings', () => {
-    assert.deepEqual(
-      updateSendWarnings('mockWarningObject'),
-      { type: UPDATE_SEND_WARNINGS, value: 'mockWarningObject' }
-    )
-  })
-
-})
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
deleted file mode 100644
index 0451824e8..000000000
--- a/ui/app/helpers/confirm-transaction/util.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import currencyFormatter from 'currency-formatter'
-import currencies from 'currency-formatter/currencies'
-import ethUtil from 'ethereumjs-util'
-import BigNumber from 'bignumber.js'
-
-import {
-  conversionUtil,
-  addCurrencies,
-  multiplyCurrencies,
-  conversionGreaterThan,
-} from '../../conversion-util'
-
-import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-
-export function increaseLastGasPrice (lastGasPrice) {
-  return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    toNumericBase: 'hex',
-  }))
-}
-
-export function hexGreaterThan (a, b) {
-  return conversionGreaterThan(
-    { value: a, fromNumericBase: 'hex' },
-    { value: b, fromNumericBase: 'hex' },
-  )
-}
-
-export function getHexGasTotal ({ gasLimit, gasPrice }) {
-  return ethUtil.addHexPrefix(multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  }))
-}
-
-export function addEth (...args) {
-  return args.reduce((acc, base) => {
-    return addCurrencies(acc, base, {
-      toNumericBase: 'dec',
-      numberOfDecimals: 6,
-    })
-  })
-}
-
-export function addFiat (...args) {
-  return args.reduce((acc, base) => {
-    return addCurrencies(acc, base, {
-      toNumericBase: 'dec',
-      numberOfDecimals: 2,
-    })
-  })
-}
-
-export function getValueFromWeiHex ({
-  value,
-  fromCurrency = 'ETH',
-  toCurrency,
-  conversionRate,
-  numberOfDecimals,
-  toDenomination,
-}) {
-  return conversionUtil(value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency,
-    toCurrency,
-    numberOfDecimals,
-    fromDenomination: 'WEI',
-    toDenomination,
-    conversionRate,
-  })
-}
-
-export function getTransactionFee ({
-  value,
-  fromCurrency = 'ETH',
-  toCurrency,
-  conversionRate,
-  numberOfDecimals,
-}) {
-  return conversionUtil(value, {
-    fromNumericBase: 'BN',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    fromCurrency,
-    toCurrency,
-    numberOfDecimals,
-    conversionRate,
-  })
-}
-
-export function formatCurrency (value, currencyCode) {
-  const upperCaseCurrencyCode = currencyCode.toUpperCase()
-
-  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
-    ? currencyFormatter.format(Number(value), { code: upperCaseCurrencyCode, style: 'currency' })
-    : value
-}
-
-export function convertTokenToFiat ({
-  value,
-  fromCurrency = 'ETH',
-  toCurrency,
-  conversionRate,
-  contractExchangeRate,
-}) {
-  const totalExchangeRate = conversionRate * contractExchangeRate
-
-  return conversionUtil(value, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'dec',
-    fromCurrency,
-    toCurrency,
-    numberOfDecimals: 2,
-    conversionRate: totalExchangeRate,
-  })
-}
-
-export function hasUnconfirmedTransactions (state) {
-  return unconfirmedTransactionsCountSelector(state) > 0
-}
-
-export function roundExponential (value) {
-  const PRECISION = 4
-  const bigNumberValue = new BigNumber(String(value))
-
-  // In JS, numbers with exponentials greater than 20 get displayed as an exponential.
-  return bigNumberValue.e > 20 ? Number(bigNumberValue.toPrecision(PRECISION)) : value
-}
diff --git a/ui/app/helpers/confirm-transaction/util.test.js b/ui/app/helpers/confirm-transaction/util.test.js
deleted file mode 100644
index 4c1a3e16b..000000000
--- a/ui/app/helpers/confirm-transaction/util.test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as utils from './util'
-import assert from 'assert'
-
-describe('Confirm Transaction utils', () => {
-  describe('increaseLastGasPrice', () => {
-    it('should increase the gasPrice by 10%', () => {
-      const increasedGasPrice = utils.increaseLastGasPrice('0xa')
-      assert.equal(increasedGasPrice, '0xb')
-    })
-
-    it('should prefix the result with 0x', () => {
-      const increasedGasPrice = utils.increaseLastGasPrice('a')
-      assert.equal(increasedGasPrice, '0xb')
-    })
-  })
-
-  describe('hexGreaterThan', () => {
-    it('should return true if the first value is greater than the second value', () => {
-      assert.equal(
-        utils.hexGreaterThan('0xb', '0xa'),
-        true
-      )
-    })
-
-    it('should return false if the first value is less than the second value', () => {
-      assert.equal(
-        utils.hexGreaterThan('0xa', '0xb'),
-        false
-      )
-    })
-
-    it('should return false if the first value is equal to the second value', () => {
-      assert.equal(
-        utils.hexGreaterThan('0xa', '0xa'),
-        false
-      )
-    })
-
-    it('should correctly compare prefixed and non-prefixed hex values', () => {
-      assert.equal(
-        utils.hexGreaterThan('0xb', 'a'),
-        true
-      )
-    })
-  })
-
-  describe('getHexGasTotal', () => {
-    it('should multiply the hex gasLimit and hex gasPrice values together', () => {
-      assert.equal(
-        utils.getHexGasTotal({ gasLimit: '0x5208', gasPrice: '0x3b9aca00' }),
-        '0x1319718a5000'
-      )
-    })
-
-    it('should prefix the result with 0x', () => {
-      assert.equal(
-        utils.getHexGasTotal({ gasLimit: '5208', gasPrice: '3b9aca00' }),
-        '0x1319718a5000'
-      )
-    })
-  })
-
-  describe('addEth', () => {
-    it('should add two values together rounding to 6 decimal places', () => {
-      assert.equal(
-        utils.addEth('0.12345678', '0'),
-        '0.123457'
-      )
-    })
-
-    it('should add any number of values together rounding to 6 decimal places', () => {
-      assert.equal(
-        utils.addEth('0.1', '0.02', '0.003', '0.0004', '0.00005', '0.000006', '0.0000007'),
-        '0.123457'
-      )
-    })
-  })
-
-  describe('addFiat', () => {
-    it('should add two values together rounding to 2 decimal places', () => {
-      assert.equal(
-        utils.addFiat('0.12345678', '0'),
-        '0.12'
-      )
-    })
-
-    it('should add any number of values together rounding to 2 decimal places', () => {
-      assert.equal(
-        utils.addFiat('0.1', '0.02', '0.003', '0.0004', '0.00005', '0.000006', '0.0000007'),
-        '0.12'
-      )
-    })
-  })
-
-  describe('getValueFromWeiHex', () => {
-    it('should get the transaction amount in ETH', () => {
-      const ethTransactionAmount = utils.getValueFromWeiHex({
-        value: '0xde0b6b3a7640000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
-      })
-
-      assert.equal(ethTransactionAmount, '1')
-    })
-
-    it('should get the transaction amount in fiat', () => {
-      const fiatTransactionAmount = utils.getValueFromWeiHex({
-        value: '0xde0b6b3a7640000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
-      })
-
-      assert.equal(fiatTransactionAmount, '468.58')
-    })
-  })
-
-  describe('getTransactionFee', () => {
-    it('should get the transaction fee in ETH', () => {
-      const ethTransactionFee = utils.getTransactionFee({
-        value: '0x1319718a5000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
-      })
-
-      assert.equal(ethTransactionFee, '0.000021')
-    })
-
-    it('should get the transaction fee in fiat', () => {
-      const fiatTransactionFee = utils.getTransactionFee({
-        value: '0x1319718a5000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
-      })
-
-      assert.equal(fiatTransactionFee, '0.01')
-    })
-  })
-
-  describe('formatCurrency', () => {
-    it('should format USD values', () => {
-      const value = utils.formatCurrency('123.45', 'usd')
-      assert.equal(value, '$123.45')
-    })
-  })
-})
diff --git a/ui/app/constants/common.js b/ui/app/helpers/constants/common.js
index c6e566b8b..c6e566b8b 100644
--- a/ui/app/constants/common.js
+++ b/ui/app/helpers/constants/common.js
diff --git a/ui/app/constants/error-keys.js b/ui/app/helpers/constants/error-keys.js
index 704064c96..704064c96 100644
--- a/ui/app/constants/error-keys.js
+++ b/ui/app/helpers/constants/error-keys.js
diff --git a/ui/app/infura-conversion.json b/ui/app/helpers/constants/infura-conversion.json
index 9a96fe069..9a96fe069 100644
--- a/ui/app/infura-conversion.json
+++ b/ui/app/helpers/constants/infura-conversion.json
diff --git a/ui/app/routes.js b/ui/app/helpers/constants/routes.js
index 932dfa7df..932dfa7df 100644
--- a/ui/app/routes.js
+++ b/ui/app/helpers/constants/routes.js
diff --git a/ui/app/constants/transactions.js b/ui/app/helpers/constants/transactions.js
index d0a819b9b..d0a819b9b 100644
--- a/ui/app/constants/transactions.js
+++ b/ui/app/helpers/constants/transactions.js
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
deleted file mode 100644
index 065d67e8e..000000000
--- a/ui/app/helpers/conversions.util.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import ethUtil from 'ethereumjs-util'
-import { ETH, GWEI, WEI } from '../constants/common'
-import { conversionUtil, addCurrencies } from '../conversion-util'
-
-export function bnToHex (inputBn) {
-  return ethUtil.addHexPrefix(inputBn.toString(16))
-}
-
-export function hexToDecimal (hexValue) {
-  return conversionUtil(hexValue, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-  })
-}
-
-export function decimalToHex (decimal) {
-  return conversionUtil(decimal, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-  })
-}
-
-export function getEthConversionFromWeiHex ({ value, fromCurrency = ETH, conversionRate, numberOfDecimals = 6 }) {
-  const denominations = [fromCurrency, GWEI, WEI]
-
-  let nonZeroDenomination
-
-  for (let i = 0; i < denominations.length; i++) {
-    const convertedValue = getValueFromWeiHex({
-      value,
-      conversionRate,
-      fromCurrency,
-      toCurrency: fromCurrency,
-      numberOfDecimals,
-      toDenomination: denominations[i],
-    })
-
-    if (convertedValue !== '0' || i === denominations.length - 1) {
-      nonZeroDenomination = `${convertedValue} ${denominations[i]}`
-      break
-    }
-  }
-
-  return nonZeroDenomination
-}
-
-export function getValueFromWeiHex ({
-  value,
-  fromCurrency = ETH,
-  toCurrency,
-  conversionRate,
-  numberOfDecimals,
-  toDenomination,
-}) {
-  return conversionUtil(value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency,
-    toCurrency,
-    numberOfDecimals,
-    fromDenomination: WEI,
-    toDenomination,
-    conversionRate,
-  })
-}
-
-export function getWeiHexFromDecimalValue ({
-  value,
-  fromCurrency,
-  conversionRate,
-  fromDenomination,
-  invertConversionRate,
-}) {
-  return conversionUtil(value, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-    toCurrency: ETH,
-    fromCurrency,
-    conversionRate,
-    invertConversionRate,
-    fromDenomination,
-    toDenomination: WEI,
-  })
-}
-
-export function addHexWEIsToDec (aHexWEI, bHexWEI) {
-  return addCurrencies(aHexWEI, bHexWEI, {
-    aBase: 16,
-    bBase: 16,
-    fromDenomination: 'WEI',
-    numberOfDecimals: 6,
-  })
-}
-
-export function decEthToConvertedCurrency (ethTotal, convertedCurrency, conversionRate) {
-  return conversionUtil(ethTotal, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: convertedCurrency,
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-}
-
-export function decGWEIToHexWEI (decGWEI) {
-  return conversionUtil(decGWEI, {
-    fromNumericBase: 'dec',
-    toNumericBase: 'hex',
-    fromDenomination: 'GWEI',
-    toDenomination: 'WEI',
-  })
-}
-
-export function hexWEIToDecGWEI (decGWEI) {
-  return conversionUtil(decGWEI, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    toDenomination: 'GWEI',
-  })
-}
diff --git a/ui/app/helpers/higher-order-components/authenticated/authenticated.component.js b/ui/app/helpers/higher-order-components/authenticated/authenticated.component.js
new file mode 100644
index 000000000..c195d0e21
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/authenticated/authenticated.component.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Redirect, Route } from 'react-router-dom'
+import { UNLOCK_ROUTE, INITIALIZE_ROUTE } from '../../constants/routes'
+
+export default function Authenticated (props) {
+  const { isUnlocked, completedOnboarding } = props
+
+  switch (true) {
+    case isUnlocked && completedOnboarding:
+      return <Route { ...props } />
+    case !completedOnboarding:
+      return <Redirect to={{ pathname: INITIALIZE_ROUTE }} />
+    default:
+      return <Redirect to={{ pathname: UNLOCK_ROUTE }} />
+  }
+}
+
+Authenticated.propTypes = {
+  isUnlocked: PropTypes.bool,
+  completedOnboarding: PropTypes.bool,
+}
diff --git a/ui/app/higher-order-components/authenticated/authenticated.container.js b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js
index 6124b0fcd..6124b0fcd 100644
--- a/ui/app/higher-order-components/authenticated/authenticated.container.js
+++ b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js
diff --git a/ui/app/higher-order-components/authenticated/index.js b/ui/app/helpers/higher-order-components/authenticated/index.js
index 05632ed21..05632ed21 100644
--- a/ui/app/higher-order-components/authenticated/index.js
+++ b/ui/app/helpers/higher-order-components/authenticated/index.js
diff --git a/ui/app/helpers/higher-order-components/i18n-provider.js b/ui/app/helpers/higher-order-components/i18n-provider.js
new file mode 100644
index 000000000..0e34e17e0
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/i18n-provider.js
@@ -0,0 +1,55 @@
+const { Component } = require('react')
+const connect = require('react-redux').connect
+const PropTypes = require('prop-types')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const t = require('../utils/i18n-helper').getMessage
+
+class I18nProvider extends Component {
+  tOrDefault = (key, defaultValue, ...args) => {
+    const { localeMessages: { current, en } = {} } = this.props
+    return t(current, key, ...args) || t(en, key, ...args) || defaultValue
+  }
+
+  getChildContext () {
+    const { localeMessages } = this.props
+    const { current, en } = localeMessages
+    return {
+      t (key, ...args) {
+        return t(current, key, ...args) || t(en, key, ...args) || `[${key}]`
+      },
+      tOrDefault: this.tOrDefault,
+      tOrKey (key, ...args) {
+        return this.tOrDefault(key, key, ...args)
+      },
+    }
+  }
+
+  render () {
+    return this.props.children
+  }
+}
+
+I18nProvider.propTypes = {
+  localeMessages: PropTypes.object,
+  children: PropTypes.object,
+}
+
+I18nProvider.childContextTypes = {
+  t: PropTypes.func,
+  tOrDefault: PropTypes.func,
+  tOrKey: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { localeMessages } = state
+  return {
+    localeMessages,
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(I18nProvider)
+
diff --git a/ui/app/higher-order-components/initialized/index.js b/ui/app/helpers/higher-order-components/initialized/index.js
index 863fcb389..863fcb389 100644
--- a/ui/app/higher-order-components/initialized/index.js
+++ b/ui/app/helpers/higher-order-components/initialized/index.js
diff --git a/ui/app/helpers/higher-order-components/initialized/initialized.component.js b/ui/app/helpers/higher-order-components/initialized/initialized.component.js
new file mode 100644
index 000000000..2042c0046
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/initialized/initialized.component.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Redirect, Route } from 'react-router-dom'
+import { INITIALIZE_ROUTE } from '../../constants/routes'
+
+export default function Initialized (props) {
+  return props.completedOnboarding
+    ? <Route { ...props } />
+    : <Redirect to={{ pathname: INITIALIZE_ROUTE }} />
+}
+
+Initialized.propTypes = {
+  completedOnboarding: PropTypes.bool,
+}
diff --git a/ui/app/higher-order-components/initialized/initialized.container.js b/ui/app/helpers/higher-order-components/initialized/initialized.container.js
index 0e7f72bcb..0e7f72bcb 100644
--- a/ui/app/higher-order-components/initialized/initialized.container.js
+++ b/ui/app/helpers/higher-order-components/initialized/initialized.container.js
diff --git a/ui/app/helpers/higher-order-components/metametrics/metametrics.provider.js b/ui/app/helpers/higher-order-components/metametrics/metametrics.provider.js
new file mode 100644
index 000000000..6086e03fb
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/metametrics/metametrics.provider.js
@@ -0,0 +1,106 @@
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import {
+  getCurrentNetworkId,
+  getSelectedAsset,
+  getAccountType,
+  getNumberOfAccounts,
+  getNumberOfTokens,
+} from '../../../selectors/selectors'
+import {
+  txDataSelector,
+} from '../../../selectors/confirm-transaction'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import {
+  sendMetaMetricsEvent,
+  sendCountIsTrackable,
+} from '../../utils/metametrics.util'
+
+class MetaMetricsProvider extends Component {
+  static propTypes = {
+    network: PropTypes.string.isRequired,
+    environmentType: PropTypes.string.isRequired,
+    activeCurrency: PropTypes.string.isRequired,
+    accountType: PropTypes.string.isRequired,
+    metaMetricsSendCount: PropTypes.number.isRequired,
+    children: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
+  }
+
+  static childContextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      previousPath: '',
+      currentPath: window.location.href,
+    }
+
+    props.history.listen(locationObj => {
+      this.setState({
+        previousPath: this.state.currentPath,
+        currentPath: window.location.href,
+      })
+    })
+  }
+
+  getChildContext () {
+    const props = this.props
+    const { pathname } = location
+    const { previousPath, currentPath } = this.state
+
+    return {
+      metricsEvent: (config = {}, overrides = {}) => {
+        const { eventOpts = {} } = config
+        const { name = '' } = eventOpts
+        const { pathname: overRidePathName = '' } = overrides
+        const isSendFlow = Boolean(name.match(/^send|^confirm/) || overRidePathName.match(/send|confirm/))
+
+        if (props.participateInMetaMetrics || config.isOptIn) {
+          return sendMetaMetricsEvent({
+            ...props,
+            ...config,
+            previousPath,
+            currentPath,
+            pathname,
+            excludeMetaMetricsId: isSendFlow && !sendCountIsTrackable(props.metaMetricsSendCount + 1),
+            ...overrides,
+          })
+        }
+      },
+    }
+  }
+
+  render () {
+    return this.props.children
+  }
+}
+
+const mapStateToProps = state => {
+  const txData = txDataSelector(state) || {}
+
+  return {
+    network: getCurrentNetworkId(state),
+    environmentType: getEnvironmentType(),
+    activeCurrency: getSelectedAsset(state),
+    accountType: getAccountType(state),
+    confirmTransactionOrigin: txData.origin,
+    metaMetricsId: state.metamask.metaMetricsId,
+    participateInMetaMetrics: state.metamask.participateInMetaMetrics,
+    metaMetricsSendCount: state.metamask.metaMetricsSendCount,
+    numberOfTokens: getNumberOfTokens(state),
+    numberOfAccounts: getNumberOfAccounts(state),
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(MetaMetricsProvider)
+
diff --git a/ui/app/higher-order-components/with-method-data/index.js b/ui/app/helpers/higher-order-components/with-method-data/index.js
index f511e1ae7..f511e1ae7 100644
--- a/ui/app/higher-order-components/with-method-data/index.js
+++ b/ui/app/helpers/higher-order-components/with-method-data/index.js
diff --git a/ui/app/helpers/higher-order-components/with-method-data/with-method-data.component.js b/ui/app/helpers/higher-order-components/with-method-data/with-method-data.component.js
new file mode 100644
index 000000000..efa9ad0a2
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/with-method-data/with-method-data.component.js
@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getMethodData, getFourBytePrefix } from '../../utils/transactions.util'
+
+export default function withMethodData (WrappedComponent) {
+  return class MethodDataWrappedComponent extends PureComponent {
+    static propTypes = {
+      transaction: PropTypes.object,
+      knownMethodData: PropTypes.object,
+      addKnownMethodData: PropTypes.func,
+    }
+
+    static defaultProps = {
+      transaction: {},
+      knownMethodData: {},
+    }
+
+    state = {
+      methodData: {},
+      done: false,
+      error: null,
+    }
+
+    componentDidMount () {
+      this.fetchMethodData()
+    }
+
+    async fetchMethodData () {
+      const { transaction, knownMethodData, addKnownMethodData } = this.props
+      const { txParams: { data = '' } = {} } = transaction
+
+      if (data) {
+        try {
+          let methodData
+          const fourBytePrefix = getFourBytePrefix(data)
+          if (fourBytePrefix in knownMethodData) {
+            methodData = knownMethodData[fourBytePrefix]
+          } else {
+            methodData = await getMethodData(data)
+            if (!Object.entries(methodData).length === 0) {
+              addKnownMethodData(fourBytePrefix, methodData)
+            }
+          }
+
+          this.setState({ methodData, done: true })
+        } catch (error) {
+          this.setState({ done: true, error })
+        }
+      } else {
+        this.setState({ done: true })
+      }
+    }
+
+    render () {
+      const { methodData, done, error } = this.state
+
+      return (
+        <WrappedComponent
+          { ...this.props }
+          methodData={{ data: methodData, done, error }}
+        />
+      )
+    }
+  }
+}
diff --git a/ui/app/higher-order-components/with-modal-props/index.js b/ui/app/helpers/higher-order-components/with-modal-props/index.js
index e476b51d2..e476b51d2 100644
--- a/ui/app/higher-order-components/with-modal-props/index.js
+++ b/ui/app/helpers/higher-order-components/with-modal-props/index.js
diff --git a/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js b/ui/app/helpers/higher-order-components/with-modal-props/tests/with-modal-props.test.js
index 654e7062a..654e7062a 100644
--- a/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
+++ b/ui/app/helpers/higher-order-components/with-modal-props/tests/with-modal-props.test.js
diff --git a/ui/app/helpers/higher-order-components/with-modal-props/with-modal-props.js b/ui/app/helpers/higher-order-components/with-modal-props/with-modal-props.js
new file mode 100644
index 000000000..aac6b5a61
--- /dev/null
+++ b/ui/app/helpers/higher-order-components/with-modal-props/with-modal-props.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import { hideModal } from '../../../store/actions'
+
+const mapStateToProps = state => {
+  const { appState } = state
+  const { props: modalProps } = appState.modal.modalState
+
+  return {
+    ...modalProps,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default function withModalProps (Component) {
+  return connect(mapStateToProps, mapDispatchToProps)(Component)
+}
diff --git a/ui/app/higher-order-components/with-token-tracker/index.js b/ui/app/helpers/higher-order-components/with-token-tracker/index.js
index d401e81f1..d401e81f1 100644
--- a/ui/app/higher-order-components/with-token-tracker/index.js
+++ b/ui/app/helpers/higher-order-components/with-token-tracker/index.js
diff --git a/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js b/ui/app/helpers/higher-order-components/with-token-tracker/with-token-tracker.component.js
index 36f6a6efd..36f6a6efd 100644
--- a/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
+++ b/ui/app/helpers/higher-order-components/with-token-tracker/with-token-tracker.component.js
diff --git a/ui/app/helpers/tests/common.util.test.js b/ui/app/helpers/tests/common.util.test.js
deleted file mode 100644
index a52b91a10..000000000
--- a/ui/app/helpers/tests/common.util.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as utils from '../common.util'
-import assert from 'assert'
-
-describe('Common utils', () => {
-  describe('camelCaseToCapitalize', () => {
-    it('should return a capitalized string from a camel-cased string', () => {
-      const tests = [
-        {
-          test: undefined,
-          expected: '',
-        },
-        {
-          test: '',
-          expected: '',
-        },
-        {
-          test: 'thisIsATest',
-          expected: 'This Is A Test',
-        },
-      ]
-
-      tests.forEach(({ test, expected }) => {
-        assert.equal(utils.camelCaseToCapitalize(test), expected)
-      })
-    })
-  })
-})
diff --git a/ui/app/helpers/tests/transactions.util.test.js b/ui/app/helpers/tests/transactions.util.test.js
deleted file mode 100644
index 838522e35..000000000
--- a/ui/app/helpers/tests/transactions.util.test.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as utils from '../transactions.util'
-import assert from 'assert'
-
-describe('Transactions utils', () => {
-  describe('getTokenData', () => {
-    it('should return token data', () => {
-      const tokenData = utils.getTokenData('0xa9059cbb00000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000004e20')
-      assert.ok(tokenData)
-      const { name, params } = tokenData
-      assert.equal(name, 'transfer')
-      const [to, value] = params
-      assert.equal(to.name, '_to')
-      assert.equal(to.type, 'address')
-      assert.equal(value.name, '_value')
-      assert.equal(value.type, 'uint256')
-    })
-
-    it('should not throw errors when called without arguments', () => {
-      assert.doesNotThrow(() => utils.getTokenData())
-    })
-  })
-
-  describe('getStatusKey', () => {
-    it('should return the correct status', () => {
-      const tests = [
-        {
-          transaction: {
-            status: 'confirmed',
-            txReceipt: {
-              status: '0x0',
-            },
-          },
-          expected: 'failed',
-        },
-        {
-          transaction: {
-            status: 'confirmed',
-            txReceipt: {
-              status: '0x1',
-            },
-          },
-          expected: 'confirmed',
-        },
-        {
-          transaction: {
-            status: 'pending',
-          },
-          expected: 'pending',
-        },
-      ]
-
-      tests.forEach(({ transaction, expected }) => {
-        assert.equal(utils.getStatusKey(transaction), expected)
-      })
-    })
-  })
-})
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
deleted file mode 100644
index d5b7f4958..000000000
--- a/ui/app/helpers/transactions.util.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import ethUtil from 'ethereumjs-util'
-import MethodRegistry from 'eth-method-registry'
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
-import {
-  TRANSACTION_TYPE_CANCEL,
-  TRANSACTION_STATUS_CONFIRMED,
-} from '../../../app/scripts/controllers/transactions/enums'
-
-import {
-  TOKEN_METHOD_TRANSFER,
-  TOKEN_METHOD_APPROVE,
-  TOKEN_METHOD_TRANSFER_FROM,
-  SEND_ETHER_ACTION_KEY,
-  DEPLOY_CONTRACT_ACTION_KEY,
-  APPROVE_ACTION_KEY,
-  SEND_TOKEN_ACTION_KEY,
-  TRANSFER_FROM_ACTION_KEY,
-  SIGNATURE_REQUEST_KEY,
-  CONTRACT_INTERACTION_KEY,
-  CANCEL_ATTEMPT_ACTION_KEY,
-} from '../constants/transactions'
-
-import { addCurrencies } from '../conversion-util'
-
-abiDecoder.addABI(abi)
-
-export function getTokenData (data = '') {
-  return abiDecoder.decodeMethod(data)
-}
-
-const registry = new MethodRegistry({ provider: global.ethereumProvider })
-
-/**
- * Attempts to return the method data from the MethodRegistry library, if the method exists in the
- * registry. Otherwise, returns an empty object.
- * @param {string} data - The hex data (@code txParams.data) of a transaction
- * @returns {Object}
- */
-export async function getMethodData (data = '') {
-  const prefixedData = ethUtil.addHexPrefix(data)
-  const fourBytePrefix = prefixedData.slice(0, 10)
-  const sig = await registry.lookup(fourBytePrefix)
-
-  if (!sig) {
-    return {}
-  }
-
-  const parsedResult = registry.parse(sig)
-
-  return {
-    name: parsedResult.name,
-    params: parsedResult.args,
-  }
-}
-
-export function isConfirmDeployContract (txData = {}) {
-  const { txParams = {} } = txData
-  return !txParams.to
-}
-
-/**
- * Returns four-byte method signature from data
- *
- * @param {string} data - The hex data (@code txParams.data) of a transaction
- * @returns {string} - The four-byte method signature
- */
-export function getFourBytePrefix (data = '') {
-  const prefixedData = ethUtil.addHexPrefix(data)
-  const fourBytePrefix = prefixedData.slice(0, 10)
-  return fourBytePrefix
-}
-
-/**
- * Returns the action of a transaction as a key to be passed into the translator.
- * @param {Object} transaction - txData object
- * @param {Object} methodData - Data returned from eth-method-registry
- * @returns {string|undefined}
- */
-export async function getTransactionActionKey (transaction, methodData) {
-  const { txParams: { data, to } = {}, msgParams, type } = transaction
-
-  if (type === 'cancel') {
-    return CANCEL_ATTEMPT_ACTION_KEY
-  }
-
-  if (msgParams) {
-    return SIGNATURE_REQUEST_KEY
-  }
-
-  if (isConfirmDeployContract(transaction)) {
-    return DEPLOY_CONTRACT_ACTION_KEY
-  }
-
-  if (data) {
-    const toSmartContract = await isSmartContractAddress(to)
-
-    if (!toSmartContract) {
-      return SEND_ETHER_ACTION_KEY
-    }
-
-    const { name } = methodData
-    const methodName = name && name.toLowerCase()
-
-    if (!methodName) {
-      return CONTRACT_INTERACTION_KEY
-    }
-
-    switch (methodName) {
-      case TOKEN_METHOD_TRANSFER:
-        return SEND_TOKEN_ACTION_KEY
-      case TOKEN_METHOD_APPROVE:
-        return APPROVE_ACTION_KEY
-      case TOKEN_METHOD_TRANSFER_FROM:
-        return TRANSFER_FROM_ACTION_KEY
-      default:
-        return undefined
-    }
-  } else {
-    return SEND_ETHER_ACTION_KEY
-  }
-}
-
-export function getLatestSubmittedTxWithNonce (transactions = [], nonce = '0x0') {
-  if (!transactions.length) {
-    return {}
-  }
-
-  return transactions.reduce((acc, current) => {
-    const { submittedTime, txParams: { nonce: currentNonce } = {} } = current
-
-    if (currentNonce === nonce) {
-      return acc.submittedTime
-        ? submittedTime > acc.submittedTime ? current : acc
-        : current
-    } else {
-      return acc
-    }
-  }, {})
-}
-
-export async function isSmartContractAddress (address) {
-  const code = await global.eth.getCode(address)
-  // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
-  const codeIsEmpty = !code || code === '0x' || code === '0x0'
-  return !codeIsEmpty
-}
-
-export function sumHexes (...args) {
-  const total = args.reduce((acc, base) => {
-    return addCurrencies(acc, base, {
-      toNumericBase: 'hex',
-    })
-  })
-
-  return ethUtil.addHexPrefix(total)
-}
-
-/**
- * Returns a status key for a transaction. Requires parsing the txMeta.txReceipt on top of
- * txMeta.status because txMeta.status does not reflect on-chain errors.
- * @param {Object} transaction - The txMeta object of a transaction.
- * @param {Object} transaction.txReceipt - The transaction receipt.
- * @returns {string}
- */
-export function getStatusKey (transaction) {
-  const { txReceipt: { status: receiptStatus } = {}, type, status } = transaction
-
-  // There was an on-chain failure
-  if (receiptStatus === '0x0') {
-    return 'failed'
-  }
-
-  if (status === TRANSACTION_STATUS_CONFIRMED && type === TRANSACTION_TYPE_CANCEL) {
-    return 'cancelled'
-  }
-
-  return transaction.status
-}
diff --git a/ui/app/helpers/common.util.js b/ui/app/helpers/utils/common.util.js
index 0c02481e6..0c02481e6 100644
--- a/ui/app/helpers/common.util.js
+++ b/ui/app/helpers/utils/common.util.js
diff --git a/ui/app/helpers/utils/common.util.test.js b/ui/app/helpers/utils/common.util.test.js
new file mode 100644
index 000000000..6259f4a89
--- /dev/null
+++ b/ui/app/helpers/utils/common.util.test.js
@@ -0,0 +1,27 @@
+import * as utils from './common.util'
+import assert from 'assert'
+
+describe('Common utils', () => {
+  describe('camelCaseToCapitalize', () => {
+    it('should return a capitalized string from a camel-cased string', () => {
+      const tests = [
+        {
+          test: undefined,
+          expected: '',
+        },
+        {
+          test: '',
+          expected: '',
+        },
+        {
+          test: 'thisIsATest',
+          expected: 'This Is A Test',
+        },
+      ]
+
+      tests.forEach(({ test, expected }) => {
+        assert.equal(utils.camelCaseToCapitalize(test), expected)
+      })
+    })
+  })
+})
diff --git a/ui/app/helpers/utils/confirm-tx.util.js b/ui/app/helpers/utils/confirm-tx.util.js
new file mode 100644
index 000000000..f843db118
--- /dev/null
+++ b/ui/app/helpers/utils/confirm-tx.util.js
@@ -0,0 +1,131 @@
+import currencyFormatter from 'currency-formatter'
+import currencies from 'currency-formatter/currencies'
+import ethUtil from 'ethereumjs-util'
+import BigNumber from 'bignumber.js'
+
+import {
+  conversionUtil,
+  addCurrencies,
+  multiplyCurrencies,
+  conversionGreaterThan,
+} from './conversion-util'
+
+import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
+
+export function increaseLastGasPrice (lastGasPrice) {
+  return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    toNumericBase: 'hex',
+  }))
+}
+
+export function hexGreaterThan (a, b) {
+  return conversionGreaterThan(
+    { value: a, fromNumericBase: 'hex' },
+    { value: b, fromNumericBase: 'hex' },
+  )
+}
+
+export function getHexGasTotal ({ gasLimit, gasPrice }) {
+  return ethUtil.addHexPrefix(multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  }))
+}
+
+export function addEth (...args) {
+  return args.reduce((acc, base) => {
+    return addCurrencies(acc, base, {
+      toNumericBase: 'dec',
+      numberOfDecimals: 6,
+    })
+  })
+}
+
+export function addFiat (...args) {
+  return args.reduce((acc, base) => {
+    return addCurrencies(acc, base, {
+      toNumericBase: 'dec',
+      numberOfDecimals: 2,
+    })
+  })
+}
+
+export function getValueFromWeiHex ({
+  value,
+  fromCurrency = 'ETH',
+  toCurrency,
+  conversionRate,
+  numberOfDecimals,
+  toDenomination,
+}) {
+  return conversionUtil(value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency,
+    toCurrency,
+    numberOfDecimals,
+    fromDenomination: 'WEI',
+    toDenomination,
+    conversionRate,
+  })
+}
+
+export function getTransactionFee ({
+  value,
+  fromCurrency = 'ETH',
+  toCurrency,
+  conversionRate,
+  numberOfDecimals,
+}) {
+  return conversionUtil(value, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency,
+    toCurrency,
+    numberOfDecimals,
+    conversionRate,
+  })
+}
+
+export function formatCurrency (value, currencyCode) {
+  const upperCaseCurrencyCode = currencyCode.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(value), { code: upperCaseCurrencyCode, style: 'currency' })
+    : value
+}
+
+export function convertTokenToFiat ({
+  value,
+  fromCurrency = 'ETH',
+  toCurrency,
+  conversionRate,
+  contractExchangeRate,
+}) {
+  const totalExchangeRate = conversionRate * contractExchangeRate
+
+  return conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'dec',
+    fromCurrency,
+    toCurrency,
+    numberOfDecimals: 2,
+    conversionRate: totalExchangeRate,
+  })
+}
+
+export function hasUnconfirmedTransactions (state) {
+  return unconfirmedTransactionsCountSelector(state) > 0
+}
+
+export function roundExponential (value) {
+  const PRECISION = 4
+  const bigNumberValue = new BigNumber(String(value))
+
+  // In JS, numbers with exponentials greater than 20 get displayed as an exponential.
+  return bigNumberValue.e > 20 ? Number(bigNumberValue.toPrecision(PRECISION)) : value
+}
diff --git a/ui/app/helpers/utils/confirm-tx.util.test.js b/ui/app/helpers/utils/confirm-tx.util.test.js
new file mode 100644
index 000000000..e818601ca
--- /dev/null
+++ b/ui/app/helpers/utils/confirm-tx.util.test.js
@@ -0,0 +1,137 @@
+import * as utils from './confirm-tx.util'
+import assert from 'assert'
+
+describe('Confirm Transaction utils', () => {
+  describe('increaseLastGasPrice', () => {
+    it('should increase the gasPrice by 10%', () => {
+      const increasedGasPrice = utils.increaseLastGasPrice('0xa')
+      assert.equal(increasedGasPrice, '0xb')
+    })
+
+    it('should prefix the result with 0x', () => {
+      const increasedGasPrice = utils.increaseLastGasPrice('a')
+      assert.equal(increasedGasPrice, '0xb')
+    })
+  })
+
+  describe('hexGreaterThan', () => {
+    it('should return true if the first value is greater than the second value', () => {
+      assert.equal(
+        utils.hexGreaterThan('0xb', '0xa'),
+        true
+      )
+    })
+
+    it('should return false if the first value is less than the second value', () => {
+      assert.equal(
+        utils.hexGreaterThan('0xa', '0xb'),
+        false
+      )
+    })
+
+    it('should return false if the first value is equal to the second value', () => {
+      assert.equal(
+        utils.hexGreaterThan('0xa', '0xa'),
+        false
+      )
+    })
+
+    it('should correctly compare prefixed and non-prefixed hex values', () => {
+      assert.equal(
+        utils.hexGreaterThan('0xb', 'a'),
+        true
+      )
+    })
+  })
+
+  describe('getHexGasTotal', () => {
+    it('should multiply the hex gasLimit and hex gasPrice values together', () => {
+      assert.equal(
+        utils.getHexGasTotal({ gasLimit: '0x5208', gasPrice: '0x3b9aca00' }),
+        '0x1319718a5000'
+      )
+    })
+
+    it('should prefix the result with 0x', () => {
+      assert.equal(
+        utils.getHexGasTotal({ gasLimit: '5208', gasPrice: '3b9aca00' }),
+        '0x1319718a5000'
+      )
+    })
+  })
+
+  describe('addEth', () => {
+    it('should add two values together rounding to 6 decimal places', () => {
+      assert.equal(
+        utils.addEth('0.12345678', '0'),
+        '0.123457'
+      )
+    })
+
+    it('should add any number of values together rounding to 6 decimal places', () => {
+      assert.equal(
+        utils.addEth('0.1', '0.02', '0.003', '0.0004', '0.00005', '0.000006', '0.0000007'),
+        '0.123457'
+      )
+    })
+  })
+
+  describe('addFiat', () => {
+    it('should add two values together rounding to 2 decimal places', () => {
+      assert.equal(
+        utils.addFiat('0.12345678', '0'),
+        '0.12'
+      )
+    })
+
+    it('should add any number of values together rounding to 2 decimal places', () => {
+      assert.equal(
+        utils.addFiat('0.1', '0.02', '0.003', '0.0004', '0.00005', '0.000006', '0.0000007'),
+        '0.12'
+      )
+    })
+  })
+
+  describe('getValueFromWeiHex', () => {
+    it('should get the transaction amount in ETH', () => {
+      const ethTransactionAmount = utils.getValueFromWeiHex({
+        value: '0xde0b6b3a7640000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
+      })
+
+      assert.equal(ethTransactionAmount, '1')
+    })
+
+    it('should get the transaction amount in fiat', () => {
+      const fiatTransactionAmount = utils.getValueFromWeiHex({
+        value: '0xde0b6b3a7640000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
+      })
+
+      assert.equal(fiatTransactionAmount, '468.58')
+    })
+  })
+
+  describe('getTransactionFee', () => {
+    it('should get the transaction fee in ETH', () => {
+      const ethTransactionFee = utils.getTransactionFee({
+        value: '0x1319718a5000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
+      })
+
+      assert.equal(ethTransactionFee, '0.000021')
+    })
+
+    it('should get the transaction fee in fiat', () => {
+      const fiatTransactionFee = utils.getTransactionFee({
+        value: '0x1319718a5000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
+      })
+
+      assert.equal(fiatTransactionFee, '0.01')
+    })
+  })
+
+  describe('formatCurrency', () => {
+    it('should format USD values', () => {
+      const value = utils.formatCurrency('123.45', 'usd')
+      assert.equal(value, '$123.45')
+    })
+  })
+})
diff --git a/ui/app/conversion-util.js b/ui/app/helpers/utils/conversion-util.js
index 8cc531773..8cc531773 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/helpers/utils/conversion-util.js
diff --git a/ui/app/conversion-util.test.js b/ui/app/helpers/utils/conversion-util.test.js
index 368ce3bba..368ce3bba 100644
--- a/ui/app/conversion-util.test.js
+++ b/ui/app/helpers/utils/conversion-util.test.js
diff --git a/ui/app/helpers/utils/conversions.util.js b/ui/app/helpers/utils/conversions.util.js
new file mode 100644
index 000000000..b4ec50626
--- /dev/null
+++ b/ui/app/helpers/utils/conversions.util.js
@@ -0,0 +1,122 @@
+import ethUtil from 'ethereumjs-util'
+import { ETH, GWEI, WEI } from '../constants/common'
+import { conversionUtil, addCurrencies } from './conversion-util'
+
+export function bnToHex (inputBn) {
+  return ethUtil.addHexPrefix(inputBn.toString(16))
+}
+
+export function hexToDecimal (hexValue) {
+  return conversionUtil(hexValue, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+}
+
+export function decimalToHex (decimal) {
+  return conversionUtil(decimal, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  })
+}
+
+export function getEthConversionFromWeiHex ({ value, fromCurrency = ETH, conversionRate, numberOfDecimals = 6 }) {
+  const denominations = [fromCurrency, GWEI, WEI]
+
+  let nonZeroDenomination
+
+  for (let i = 0; i < denominations.length; i++) {
+    const convertedValue = getValueFromWeiHex({
+      value,
+      conversionRate,
+      fromCurrency,
+      toCurrency: fromCurrency,
+      numberOfDecimals,
+      toDenomination: denominations[i],
+    })
+
+    if (convertedValue !== '0' || i === denominations.length - 1) {
+      nonZeroDenomination = `${convertedValue} ${denominations[i]}`
+      break
+    }
+  }
+
+  return nonZeroDenomination
+}
+
+export function getValueFromWeiHex ({
+  value,
+  fromCurrency = ETH,
+  toCurrency,
+  conversionRate,
+  numberOfDecimals,
+  toDenomination,
+}) {
+  return conversionUtil(value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency,
+    toCurrency,
+    numberOfDecimals,
+    fromDenomination: WEI,
+    toDenomination,
+    conversionRate,
+  })
+}
+
+export function getWeiHexFromDecimalValue ({
+  value,
+  fromCurrency,
+  conversionRate,
+  fromDenomination,
+  invertConversionRate,
+}) {
+  return conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    toCurrency: ETH,
+    fromCurrency,
+    conversionRate,
+    invertConversionRate,
+    fromDenomination,
+    toDenomination: WEI,
+  })
+}
+
+export function addHexWEIsToDec (aHexWEI, bHexWEI) {
+  return addCurrencies(aHexWEI, bHexWEI, {
+    aBase: 16,
+    bBase: 16,
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+  })
+}
+
+export function decEthToConvertedCurrency (ethTotal, convertedCurrency, conversionRate) {
+  return conversionUtil(ethTotal, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+}
+
+export function decGWEIToHexWEI (decGWEI) {
+  return conversionUtil(decGWEI, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  })
+}
+
+export function hexWEIToDecGWEI (decGWEI) {
+  return conversionUtil(decGWEI, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+}
diff --git a/ui/app/helpers/formatters.js b/ui/app/helpers/utils/formatters.js
index 106a2520d..106a2520d 100644
--- a/ui/app/helpers/formatters.js
+++ b/ui/app/helpers/utils/formatters.js
diff --git a/ui/app/helpers/utils/i18n-helper.js b/ui/app/helpers/utils/i18n-helper.js
new file mode 100644
index 000000000..db07049e1
--- /dev/null
+++ b/ui/app/helpers/utils/i18n-helper.js
@@ -0,0 +1,44 @@
+// cross-browser connection to extension i18n API
+const log = require('loglevel')
+
+/**
+ * Returns a localized message for the given key
+ * @param {object} locale The locale
+ * @param {string} key The message key
+ * @param {string[]} substitutions A list of message substitution replacements
+ * @return {null|string} The localized message
+ */
+const getMessage = (locale, key, substitutions) => {
+  if (!locale) {
+    return null
+  }
+  if (!locale[key]) {
+    log.warn(`Translator - Unable to find value for key "${key}"`)
+    return null
+  }
+  const entry = locale[key]
+  let phrase = entry.message
+  // perform substitutions
+  if (substitutions && substitutions.length) {
+    substitutions.forEach((substitution, index) => {
+      const regex = new RegExp(`\\$${index + 1}`, 'g')
+      phrase = phrase.replace(regex, substitution)
+    })
+  }
+  return phrase
+}
+
+async function fetchLocale (localeName) {
+  try {
+    const response = await fetch(`./_locales/${localeName}/messages.json`)
+    return await response.json()
+  } catch (error) {
+    log.error(`failed to fetch ${localeName} locale because of ${error}`)
+    return {}
+  }
+}
+
+module.exports = {
+  getMessage,
+  fetchLocale,
+}
diff --git a/ui/app/metametrics/metametrics.util.js b/ui/app/helpers/utils/metametrics.util.js
index 01984bd5e..01984bd5e 100644
--- a/ui/app/metametrics/metametrics.util.js
+++ b/ui/app/helpers/utils/metametrics.util.js
diff --git a/ui/app/token-util.js b/ui/app/helpers/utils/token-util.js
index 35a19a69f..35a19a69f 100644
--- a/ui/app/token-util.js
+++ b/ui/app/helpers/utils/token-util.js
diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js
new file mode 100644
index 000000000..edf2e24f6
--- /dev/null
+++ b/ui/app/helpers/utils/transactions.util.js
@@ -0,0 +1,179 @@
+import ethUtil from 'ethereumjs-util'
+import MethodRegistry from 'eth-method-registry'
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
+import {
+  TRANSACTION_TYPE_CANCEL,
+  TRANSACTION_STATUS_CONFIRMED,
+} from '../../../../app/scripts/controllers/transactions/enums'
+
+import {
+  TOKEN_METHOD_TRANSFER,
+  TOKEN_METHOD_APPROVE,
+  TOKEN_METHOD_TRANSFER_FROM,
+  SEND_ETHER_ACTION_KEY,
+  DEPLOY_CONTRACT_ACTION_KEY,
+  APPROVE_ACTION_KEY,
+  SEND_TOKEN_ACTION_KEY,
+  TRANSFER_FROM_ACTION_KEY,
+  SIGNATURE_REQUEST_KEY,
+  CONTRACT_INTERACTION_KEY,
+  CANCEL_ATTEMPT_ACTION_KEY,
+} from '../constants/transactions'
+
+import { addCurrencies } from './conversion-util'
+
+abiDecoder.addABI(abi)
+
+export function getTokenData (data = '') {
+  return abiDecoder.decodeMethod(data)
+}
+
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
+/**
+ * Attempts to return the method data from the MethodRegistry library, if the method exists in the
+ * registry. Otherwise, returns an empty object.
+ * @param {string} data - The hex data (@code txParams.data) of a transaction
+ * @returns {Object}
+ */
+export async function getMethodData (data = '') {
+  const prefixedData = ethUtil.addHexPrefix(data)
+  const fourBytePrefix = prefixedData.slice(0, 10)
+  const sig = await registry.lookup(fourBytePrefix)
+
+  if (!sig) {
+    return {}
+  }
+
+  const parsedResult = registry.parse(sig)
+
+  return {
+    name: parsedResult.name,
+    params: parsedResult.args,
+  }
+}
+
+export function isConfirmDeployContract (txData = {}) {
+  const { txParams = {} } = txData
+  return !txParams.to
+}
+
+/**
+ * Returns four-byte method signature from data
+ *
+ * @param {string} data - The hex data (@code txParams.data) of a transaction
+ * @returns {string} - The four-byte method signature
+ */
+export function getFourBytePrefix (data = '') {
+  const prefixedData = ethUtil.addHexPrefix(data)
+  const fourBytePrefix = prefixedData.slice(0, 10)
+  return fourBytePrefix
+}
+
+/**
+ * Returns the action of a transaction as a key to be passed into the translator.
+ * @param {Object} transaction - txData object
+ * @param {Object} methodData - Data returned from eth-method-registry
+ * @returns {string|undefined}
+ */
+export async function getTransactionActionKey (transaction, methodData) {
+  const { txParams: { data, to } = {}, msgParams, type } = transaction
+
+  if (type === 'cancel') {
+    return CANCEL_ATTEMPT_ACTION_KEY
+  }
+
+  if (msgParams) {
+    return SIGNATURE_REQUEST_KEY
+  }
+
+  if (isConfirmDeployContract(transaction)) {
+    return DEPLOY_CONTRACT_ACTION_KEY
+  }
+
+  if (data) {
+    const toSmartContract = await isSmartContractAddress(to)
+
+    if (!toSmartContract) {
+      return SEND_ETHER_ACTION_KEY
+    }
+
+    const { name } = methodData
+    const methodName = name && name.toLowerCase()
+
+    if (!methodName) {
+      return CONTRACT_INTERACTION_KEY
+    }
+
+    switch (methodName) {
+      case TOKEN_METHOD_TRANSFER:
+        return SEND_TOKEN_ACTION_KEY
+      case TOKEN_METHOD_APPROVE:
+        return APPROVE_ACTION_KEY
+      case TOKEN_METHOD_TRANSFER_FROM:
+        return TRANSFER_FROM_ACTION_KEY
+      default:
+        return undefined
+    }
+  } else {
+    return SEND_ETHER_ACTION_KEY
+  }
+}
+
+export function getLatestSubmittedTxWithNonce (transactions = [], nonce = '0x0') {
+  if (!transactions.length) {
+    return {}
+  }
+
+  return transactions.reduce((acc, current) => {
+    const { submittedTime, txParams: { nonce: currentNonce } = {} } = current
+
+    if (currentNonce === nonce) {
+      return acc.submittedTime
+        ? submittedTime > acc.submittedTime ? current : acc
+        : current
+    } else {
+      return acc
+    }
+  }, {})
+}
+
+export async function isSmartContractAddress (address) {
+  const code = await global.eth.getCode(address)
+  // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
+  const codeIsEmpty = !code || code === '0x' || code === '0x0'
+  return !codeIsEmpty
+}
+
+export function sumHexes (...args) {
+  const total = args.reduce((acc, base) => {
+    return addCurrencies(acc, base, {
+      toNumericBase: 'hex',
+    })
+  })
+
+  return ethUtil.addHexPrefix(total)
+}
+
+/**
+ * Returns a status key for a transaction. Requires parsing the txMeta.txReceipt on top of
+ * txMeta.status because txMeta.status does not reflect on-chain errors.
+ * @param {Object} transaction - The txMeta object of a transaction.
+ * @param {Object} transaction.txReceipt - The transaction receipt.
+ * @returns {string}
+ */
+export function getStatusKey (transaction) {
+  const { txReceipt: { status: receiptStatus } = {}, type, status } = transaction
+
+  // There was an on-chain failure
+  if (receiptStatus === '0x0') {
+    return 'failed'
+  }
+
+  if (status === TRANSACTION_STATUS_CONFIRMED && type === TRANSACTION_TYPE_CANCEL) {
+    return 'cancelled'
+  }
+
+  return transaction.status
+}
diff --git a/ui/app/helpers/utils/transactions.util.test.js b/ui/app/helpers/utils/transactions.util.test.js
new file mode 100644
index 000000000..4a8ca5c9d
--- /dev/null
+++ b/ui/app/helpers/utils/transactions.util.test.js
@@ -0,0 +1,57 @@
+import * as utils from './transactions.util'
+import assert from 'assert'
+
+describe('Transactions utils', () => {
+  describe('getTokenData', () => {
+    it('should return token data', () => {
+      const tokenData = utils.getTokenData('0xa9059cbb00000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000004e20')
+      assert.ok(tokenData)
+      const { name, params } = tokenData
+      assert.equal(name, 'transfer')
+      const [to, value] = params
+      assert.equal(to.name, '_to')
+      assert.equal(to.type, 'address')
+      assert.equal(value.name, '_value')
+      assert.equal(value.type, 'uint256')
+    })
+
+    it('should not throw errors when called without arguments', () => {
+      assert.doesNotThrow(() => utils.getTokenData())
+    })
+  })
+
+  describe('getStatusKey', () => {
+    it('should return the correct status', () => {
+      const tests = [
+        {
+          transaction: {
+            status: 'confirmed',
+            txReceipt: {
+              status: '0x0',
+            },
+          },
+          expected: 'failed',
+        },
+        {
+          transaction: {
+            status: 'confirmed',
+            txReceipt: {
+              status: '0x1',
+            },
+          },
+          expected: 'confirmed',
+        },
+        {
+          transaction: {
+            status: 'pending',
+          },
+          expected: 'pending',
+        },
+      ]
+
+      tests.forEach(({ transaction, expected }) => {
+        assert.equal(utils.getStatusKey(transaction), expected)
+      })
+    })
+  })
+})
diff --git a/ui/app/helpers/utils/util.js b/ui/app/helpers/utils/util.js
new file mode 100644
index 000000000..c50d7cbe5
--- /dev/null
+++ b/ui/app/helpers/utils/util.js
@@ -0,0 +1,326 @@
+const abi = require('human-standard-token-abi')
+const ethUtil = require('ethereumjs-util')
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+import { DateTime } from 'luxon'
+
+const MIN_GAS_PRICE_GWEI_BN = new ethUtil.BN(1)
+const GWEI_FACTOR = new ethUtil.BN(1e9)
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
+
+// formatData :: ( date: <Unix Timestamp> ) -> String
+function formatDate (date, format = 'M/d/y \'at\' T') {
+  return DateTime.fromMillis(date).toFormat(format)
+}
+
+var valueTable = {
+  wei: '1000000000000000000',
+  kwei: '1000000000000000',
+  mwei: '1000000000000',
+  gwei: '1000000000',
+  szabo: '1000000',
+  finney: '1000',
+  ether: '1',
+  kether: '0.001',
+  mether: '0.000001',
+  gether: '0.000000001',
+  tether: '0.000000000001',
+}
+var bnTable = {}
+for (var currency in valueTable) {
+  bnTable[currency] = new ethUtil.BN(valueTable[currency], 10)
+}
+
+module.exports = {
+  valuesFor: valuesFor,
+  addressSummary: addressSummary,
+  miniAddressSummary: miniAddressSummary,
+  isAllOneCase: isAllOneCase,
+  isValidAddress: isValidAddress,
+  isValidENSAddress,
+  numericBalance: numericBalance,
+  parseBalance: parseBalance,
+  formatBalance: formatBalance,
+  generateBalanceObject: generateBalanceObject,
+  dataSize: dataSize,
+  readableDate: readableDate,
+  normalizeToWei: normalizeToWei,
+  normalizeEthStringToWei: normalizeEthStringToWei,
+  normalizeNumberToWei: normalizeNumberToWei,
+  valueTable: valueTable,
+  bnTable: bnTable,
+  isHex: isHex,
+  formatDate,
+  bnMultiplyByFraction,
+  getTxFeeBn,
+  shortenBalance,
+  getContractAtAddress,
+  exportAsFile: exportAsFile,
+  isInvalidChecksumAddress,
+  allNull,
+  getTokenAddressFromTokenObject,
+  checksumAddress,
+  addressSlicer,
+  isEthNetwork,
+}
+
+function isEthNetwork (netId) {
+  if (!netId || netId === '1' || netId === '3' || netId === '4' || netId === '42' || netId === '5777') {
+    return true
+  }
+
+  return false
+}
+
+function valuesFor (obj) {
+  if (!obj) return []
+  return Object.keys(obj)
+    .map(function (key) { return obj[key] })
+}
+
+function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includeHex = true) {
+  if (!address) return ''
+  let checked = checksumAddress(address)
+  if (!includeHex) {
+    checked = ethUtil.stripHexPrefix(checked)
+  }
+  return checked ? checked.slice(0, firstSegLength) + '...' + checked.slice(checked.length - lastSegLength) : '...'
+}
+
+function miniAddressSummary (address) {
+  if (!address) return ''
+  var checked = checksumAddress(address)
+  return checked ? checked.slice(0, 4) + '...' + checked.slice(-4) : '...'
+}
+
+function isValidAddress (address, network) {
+  var prefixed = ethUtil.addHexPrefix(address)
+  if (address === '0x0000000000000000000000000000000000000000') return false
+  return (isAllOneCase(prefixed) && ethUtil.isValidAddress(prefixed)) || ethUtil.isValidChecksumAddress(prefixed)
+}
+
+function isValidENSAddress (address) {
+  return address.match(/^.{7,}\.(eth|test)$/)
+}
+
+function isInvalidChecksumAddress (address) {
+  var prefixed = ethUtil.addHexPrefix(address)
+  if (address === '0x0000000000000000000000000000000000000000') return false
+  return !isAllOneCase(prefixed) && !ethUtil.isValidChecksumAddress(prefixed) && ethUtil.isValidAddress(prefixed)
+}
+
+function isAllOneCase (address) {
+  if (!address) return true
+  var lower = address.toLowerCase()
+  var upper = address.toUpperCase()
+  return address === lower || address === upper
+}
+
+// Takes wei Hex, returns wei BN, even if input is null
+function numericBalance (balance) {
+  if (!balance) return new ethUtil.BN(0, 16)
+  var stripped = ethUtil.stripHexPrefix(balance)
+  return new ethUtil.BN(stripped, 16)
+}
+
+// Takes  hex, returns [beforeDecimal, afterDecimal]
+function parseBalance (balance) {
+  var beforeDecimal, afterDecimal
+  const wei = numericBalance(balance)
+  var weiString = wei.toString()
+  const trailingZeros = /0+$/
+
+  beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0'
+  afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '')
+  if (afterDecimal === '') { afterDecimal = '0' }
+  return [beforeDecimal, afterDecimal]
+}
+
+// Takes wei hex, returns an object with three properties.
+// Its "formatted" property is what we generally use to render values.
+function formatBalance (balance, decimalsToKeep, needsParse = true, ticker = 'ETH') {
+  var parsed = needsParse ? parseBalance(balance) : balance.split('.')
+  var beforeDecimal = parsed[0]
+  var afterDecimal = parsed[1]
+  var formatted = 'None'
+  if (decimalsToKeep === undefined) {
+    if (beforeDecimal === '0') {
+      if (afterDecimal !== '0') {
+        var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
+        if (sigFigs) { afterDecimal = sigFigs[0] }
+        formatted = '0.' + afterDecimal + ` ${ticker}`
+      }
+    } else {
+      formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ` ${ticker}`
+    }
+  } else {
+    afterDecimal += Array(decimalsToKeep).join('0')
+    formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ` ${ticker}`
+  }
+  return formatted
+}
+
+
+function generateBalanceObject (formattedBalance, decimalsToKeep = 1) {
+  var balance = formattedBalance.split(' ')[0]
+  var label = formattedBalance.split(' ')[1]
+  var beforeDecimal = balance.split('.')[0]
+  var afterDecimal = balance.split('.')[1]
+  var shortBalance = shortenBalance(balance, decimalsToKeep)
+
+  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') {
+    // eslint-disable-next-line eqeqeq
+    if (afterDecimal == 0) {
+      balance = '0'
+    } else {
+      balance = '<1.0e-5'
+    }
+  } else if (beforeDecimal !== '0') {
+    balance = `${beforeDecimal}.${afterDecimal.slice(0, decimalsToKeep)}`
+  }
+
+  return { balance, label, shortBalance }
+}
+
+function shortenBalance (balance, decimalsToKeep = 1) {
+  var truncatedValue
+  var convertedBalance = parseFloat(balance)
+  if (convertedBalance > 1000000) {
+    truncatedValue = (balance / 1000000).toFixed(decimalsToKeep)
+    return `${truncatedValue}m`
+  } else if (convertedBalance > 1000) {
+    truncatedValue = (balance / 1000).toFixed(decimalsToKeep)
+    return `${truncatedValue}k`
+  } else if (convertedBalance === 0) {
+    return '0'
+  } else if (convertedBalance < 0.001) {
+    return '<0.001'
+  } else if (convertedBalance < 1) {
+    var stringBalance = convertedBalance.toString()
+    if (stringBalance.split('.')[1].length > 3) {
+      return convertedBalance.toFixed(3)
+    } else {
+      return stringBalance
+    }
+  } else {
+    return convertedBalance.toFixed(decimalsToKeep)
+  }
+}
+
+function dataSize (data) {
+  var size = data ? ethUtil.stripHexPrefix(data).length : 0
+  return size + ' bytes'
+}
+
+// Takes a BN and an ethereum currency name,
+// returns a BN in wei
+function normalizeToWei (amount, currency) {
+  try {
+    return amount.mul(bnTable.wei).div(bnTable[currency])
+  } catch (e) {}
+  return amount
+}
+
+function normalizeEthStringToWei (str) {
+  const parts = str.split('.')
+  let eth = new ethUtil.BN(parts[0], 10).mul(bnTable.wei)
+  if (parts[1]) {
+    var decimal = parts[1]
+    while (decimal.length < 18) {
+      decimal += '0'
+    }
+    if (decimal.length > 18) {
+      decimal = decimal.slice(0, 18)
+    }
+    const decimalBN = new ethUtil.BN(decimal, 10)
+    eth = eth.add(decimalBN)
+  }
+  return eth
+}
+
+var multiple = new ethUtil.BN('10000', 10)
+function normalizeNumberToWei (n, currency) {
+  var enlarged = n * 10000
+  var amount = new ethUtil.BN(String(enlarged), 10)
+  return normalizeToWei(amount, currency).div(multiple)
+}
+
+function readableDate (ms) {
+  var date = new Date(ms)
+  var month = date.getMonth()
+  var day = date.getDate()
+  var year = date.getFullYear()
+  var hours = date.getHours()
+  var minutes = '0' + date.getMinutes()
+  var seconds = '0' + date.getSeconds()
+
+  var dateStr = `${month}/${day}/${year}`
+  var time = `${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}`
+  return `${dateStr} ${time}`
+}
+
+function isHex (str) {
+  return Boolean(str.match(/^(0x)?[0-9a-fA-F]+$/))
+}
+
+function bnMultiplyByFraction (targetBN, numerator, denominator) {
+  const numBN = new ethUtil.BN(numerator)
+  const denomBN = new ethUtil.BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
+function getTxFeeBn (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16), blockGasLimit) {
+  const gasBn = hexToBn(gas)
+  const gasPriceBn = hexToBn(gasPrice)
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  return txFeeBn.toString(16)
+}
+
+function getContractAtAddress (tokenAddress) {
+  return global.eth.contract(abi).at(tokenAddress)
+}
+
+function exportAsFile (filename, data, type = 'text/csv') {
+  // source: https://stackoverflow.com/a/33542499 by Ludovic Feltz
+  const blob = new Blob([data], {type})
+  if (window.navigator.msSaveOrOpenBlob) {
+    window.navigator.msSaveBlob(blob, filename)
+  } else {
+    const elem = window.document.createElement('a')
+    elem.target = '_blank'
+    elem.href = window.URL.createObjectURL(blob)
+    elem.download = filename
+    document.body.appendChild(elem)
+    elem.click()
+    document.body.removeChild(elem)
+  }
+}
+
+function allNull (obj) {
+  return Object.entries(obj).every(([key, value]) => value === null)
+}
+
+function getTokenAddressFromTokenObject (token) {
+  return Object.values(token)[0].address.toLowerCase()
+}
+
+/**
+ * Safely checksumms a potentially-null address
+ *
+ * @param {String} [address] - address to checksum
+ * @param {String} [network] - network id
+ * @returns {String} - checksummed address
+ *
+ */
+function checksumAddress (address, network) {
+  const checksummed = address ? ethUtil.toChecksumAddress(address) : ''
+  return checksummed
+}
+
+function addressSlicer (address = '') {
+  if (address.length < 11) {
+    return address
+  }
+
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
diff --git a/ui/app/higher-order-components/authenticated/authenticated.component.js b/ui/app/higher-order-components/authenticated/authenticated.component.js
deleted file mode 100644
index 7b64d4895..000000000
--- a/ui/app/higher-order-components/authenticated/authenticated.component.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Redirect, Route } from 'react-router-dom'
-import { UNLOCK_ROUTE, INITIALIZE_ROUTE } from '../../routes'
-
-export default function Authenticated (props) {
-  const { isUnlocked, completedOnboarding } = props
-
-  switch (true) {
-    case isUnlocked && completedOnboarding:
-      return <Route { ...props } />
-    case !completedOnboarding:
-      return <Redirect to={{ pathname: INITIALIZE_ROUTE }} />
-    default:
-      return <Redirect to={{ pathname: UNLOCK_ROUTE }} />
-  }
-}
-
-Authenticated.propTypes = {
-  isUnlocked: PropTypes.bool,
-  completedOnboarding: PropTypes.bool,
-}
diff --git a/ui/app/higher-order-components/initialized/initialized.component.js b/ui/app/higher-order-components/initialized/initialized.component.js
deleted file mode 100644
index 0736ceff4..000000000
--- a/ui/app/higher-order-components/initialized/initialized.component.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Redirect, Route } from 'react-router-dom'
-import { INITIALIZE_ROUTE } from '../../routes'
-
-export default function Initialized (props) {
-  return props.completedOnboarding
-    ? <Route { ...props } />
-    : <Redirect to={{ pathname: INITIALIZE_ROUTE }} />
-}
-
-Initialized.propTypes = {
-  completedOnboarding: PropTypes.bool,
-}
diff --git a/ui/app/higher-order-components/with-method-data/with-method-data.component.js b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
deleted file mode 100644
index 08b9083e1..000000000
--- a/ui/app/higher-order-components/with-method-data/with-method-data.component.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { getMethodData, getFourBytePrefix } from '../../helpers/transactions.util'
-
-export default function withMethodData (WrappedComponent) {
-  return class MethodDataWrappedComponent extends PureComponent {
-    static propTypes = {
-      transaction: PropTypes.object,
-      knownMethodData: PropTypes.object,
-      addKnownMethodData: PropTypes.func,
-    }
-
-    static defaultProps = {
-      transaction: {},
-      knownMethodData: {},
-    }
-
-    state = {
-      methodData: {},
-      done: false,
-      error: null,
-    }
-
-    componentDidMount () {
-      this.fetchMethodData()
-    }
-
-    async fetchMethodData () {
-      const { transaction, knownMethodData, addKnownMethodData } = this.props
-      const { txParams: { data = '' } = {} } = transaction
-
-      if (data) {
-        try {
-          let methodData
-          const fourBytePrefix = getFourBytePrefix(data)
-          if (fourBytePrefix in knownMethodData) {
-            methodData = knownMethodData[fourBytePrefix]
-          } else {
-            methodData = await getMethodData(data)
-            if (!Object.entries(methodData).length === 0) {
-              addKnownMethodData(fourBytePrefix, methodData)
-            }
-          }
-
-          this.setState({ methodData, done: true })
-        } catch (error) {
-          this.setState({ done: true, error })
-        }
-      } else {
-        this.setState({ done: true })
-      }
-    }
-
-    render () {
-      const { methodData, done, error } = this.state
-
-      return (
-        <WrappedComponent
-          { ...this.props }
-          methodData={{ data: methodData, done, error }}
-        />
-      )
-    }
-  }
-}
diff --git a/ui/app/higher-order-components/with-modal-props/with-modal-props.js b/ui/app/higher-order-components/with-modal-props/with-modal-props.js
deleted file mode 100644
index 02f3855af..000000000
--- a/ui/app/higher-order-components/with-modal-props/with-modal-props.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux'
-import { hideModal } from '../../actions'
-
-const mapStateToProps = state => {
-  const { appState } = state
-  const { props: modalProps } = appState.modal.modalState
-
-  return {
-    ...modalProps,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => dispatch(hideModal()),
-  }
-}
-
-export default function withModalProps (Component) {
-  return connect(mapStateToProps, mapDispatchToProps)(Component)
-}
diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js
deleted file mode 100644
index 3419474c4..000000000
--- a/ui/app/i18n-provider.js
+++ /dev/null
@@ -1,55 +0,0 @@
-const { Component } = require('react')
-const connect = require('react-redux').connect
-const PropTypes = require('prop-types')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const t = require('../i18n-helper').getMessage
-
-class I18nProvider extends Component {
-  tOrDefault = (key, defaultValue, ...args) => {
-    const { localeMessages: { current, en } = {} } = this.props
-    return t(current, key, ...args) || t(en, key, ...args) || defaultValue
-  }
-
-  getChildContext () {
-    const { localeMessages } = this.props
-    const { current, en } = localeMessages
-    return {
-      t (key, ...args) {
-        return t(current, key, ...args) || t(en, key, ...args) || `[${key}]`
-      },
-      tOrDefault: this.tOrDefault,
-      tOrKey (key, ...args) {
-        return this.tOrDefault(key, key, ...args)
-      },
-    }
-  }
-
-  render () {
-    return this.props.children
-  }
-}
-
-I18nProvider.propTypes = {
-  localeMessages: PropTypes.object,
-  children: PropTypes.object,
-}
-
-I18nProvider.childContextTypes = {
-  t: PropTypes.func,
-  tOrDefault: PropTypes.func,
-  tOrKey: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  const { localeMessages } = state
-  return {
-    localeMessages,
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps)
-)(I18nProvider)
-
diff --git a/ui/app/img/identicon-tardigrade.png b/ui/app/img/identicon-tardigrade.png
deleted file mode 100644
index 1742a32b8..000000000
--- a/ui/app/img/identicon-tardigrade.png
+++ /dev/null
diff --git a/ui/app/img/identicon-walrus.png b/ui/app/img/identicon-walrus.png
deleted file mode 100644
index d58fae912..000000000
--- a/ui/app/img/identicon-walrus.png
+++ /dev/null
diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js
deleted file mode 100644
index 5ab5d4c33..000000000
--- a/ui/app/keychains/hd/create-vault-complete.js
+++ /dev/null
@@ -1,91 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const actions = require('../../actions')
-const exportAsFile = require('../../util').exportAsFile
-
-module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen)
-
-inherits(CreateVaultCompleteScreen, Component)
-function CreateVaultCompleteScreen () {
-  Component.call(this)
-}
-
-function mapStateToProps (state) {
-  return {
-    seed: state.appState.currentView.seedWords,
-    cachedSeed: state.metamask.seedWords,
-  }
-}
-
-CreateVaultCompleteScreen.prototype.render = function () {
-  var state = this.props
-  var seed = state.seed || state.cachedSeed || ''
-
-  return (
-
-    h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
-      // // subtitle and nav
-      // h('.section-title.flex-row.flex-center', [
-      //   h('h2.page-subtitle', 'Vault Created'),
-      // ]),
-
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          marginTop: 36,
-          marginBottom: 8,
-          width: '100%',
-          fontSize: '20px',
-          padding: 6,
-        },
-      }, [
-        'Vault Created',
-      ]),
-
-      h('div', {
-        style: {
-          fontSize: '1em',
-          marginTop: '10px',
-          textAlign: 'center',
-        },
-      }, [
-        h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
-      ]),
-
-      h('textarea.twelve-word-phrase', {
-        readOnly: true,
-        value: seed,
-      }),
-
-      h('button.primary', {
-        onClick: () => this.confirmSeedWords()
-          .then(account => this.showAccountDetail(account)),
-        style: {
-          margin: '24px',
-          fontSize: '0.9em',
-          marginBottom: '10px',
-        },
-      }, 'I\'ve copied it somewhere safe'),
-
-      h('button.primary', {
-        onClick: () => exportAsFile(`MetaMask Seed Words`, seed),
-        style: {
-          margin: '10px',
-          fontSize: '0.9em',
-        },
-      }, 'Save Seed Words As File'),
-    ])
-  )
-}
-
-CreateVaultCompleteScreen.prototype.confirmSeedWords = function () {
-  return this.props.dispatch(actions.confirmSeedWords())
-}
-
-CreateVaultCompleteScreen.prototype.showAccountDetail = function (account) {
-  return this.props.dispatch(actions.showAccountDetail(account))
-}
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
deleted file mode 100644
index 913d20505..000000000
--- a/ui/app/keychains/hd/restore-vault.js
+++ /dev/null
@@ -1,181 +0,0 @@
-const inherits = require('util').inherits
-const PropTypes = require('prop-types')
-const PersistentForm = require('../../../lib/persistent-form')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const actions = require('../../actions')
-const log = require('loglevel')
-
-RestoreVaultScreen.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(RestoreVaultScreen)
-
-
-inherits(RestoreVaultScreen, PersistentForm)
-function RestoreVaultScreen () {
-  PersistentForm.call(this)
-}
-
-function mapStateToProps (state) {
-  return {
-    warning: state.appState.warning,
-    forgottenPassword: state.appState.forgottenPassword,
-  }
-}
-
-RestoreVaultScreen.prototype.render = function () {
-  var state = this.props
-  this.persistentFormParentId = 'restore-vault-form'
-
-  return (
-
-    h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          marginBottom: 24,
-          width: '100%',
-          fontSize: '20px',
-          padding: 6,
-        },
-      }, [
-        this.context.t('restoreVault'),
-      ]),
-
-      // wallet seed entry
-      h('h3', this.context.t('walletSeed')),
-      h('textarea.twelve-word-phrase.letter-spacey', {
-        dataset: {
-          persistentFormId: 'wallet-seed',
-        },
-        placeholder: this.context.t('secretPhrase'),
-      }),
-
-      // password
-      h('input.large-input.letter-spacey', {
-        type: 'password',
-        id: 'password-box',
-        placeholder: this.context.t('newPassword8Chars'),
-        dataset: {
-          persistentFormId: 'password',
-        },
-        style: {
-          width: 260,
-          marginTop: 12,
-        },
-      }),
-
-      // confirm password
-      h('input.large-input.letter-spacey', {
-        type: 'password',
-        id: 'password-box-confirm',
-        placeholder: this.context.t('confirmPassword'),
-        onKeyPress: this.createOnEnter.bind(this),
-        dataset: {
-          persistentFormId: 'password-confirmation',
-        },
-        style: {
-          width: 260,
-          marginTop: 16,
-        },
-      }),
-
-      (state.warning) && (
-        h('span.error.in-progress-notification', state.warning)
-      ),
-
-      // submit
-
-      h('.flex-row.flex-space-between', {
-        style: {
-          marginTop: 30,
-          width: '50%',
-        },
-      }, [
-
-        // cancel
-        h('button.primary', {
-          onClick: this.showInitializeMenu.bind(this),
-          style: {
-            textTransform: 'uppercase',
-          },
-        }, this.context.t('cancel')),
-
-        // submit
-        h('button.primary', {
-          onClick: this.createNewVaultAndRestore.bind(this),
-          style: {
-            textTransform: 'uppercase',
-          },
-        }, this.context.t('ok')),
-      ]),
-    ])
-  )
-}
-
-RestoreVaultScreen.prototype.showInitializeMenu = function () {
-  const { dispatch, forgottenPassword } = this.props
-  dispatch(actions.unMarkPasswordForgotten())
-    .then(() => {
-      if (forgottenPassword) {
-        dispatch(actions.backToUnlockView())
-      } else {
-        dispatch(actions.showInitializeMenu())
-      }
-    })
-}
-
-RestoreVaultScreen.prototype.createOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    this.createNewVaultAndRestore()
-  }
-}
-
-RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
-  // check password
-  var passwordBox = document.getElementById('password-box')
-  var password = passwordBox.value
-  var passwordConfirmBox = document.getElementById('password-box-confirm')
-  var passwordConfirm = passwordConfirmBox.value
-  if (password.length < 8) {
-    this.warning = this.context.t('passwordNotLongEnough')
-
-    this.props.dispatch(actions.displayWarning(this.warning))
-    return
-  }
-  if (password !== passwordConfirm) {
-    this.warning = this.context.t('passwordsDontMatch')
-    this.props.dispatch(actions.displayWarning(this.warning))
-    return
-  }
-  // check seed
-  var seedBox = document.querySelector('textarea.twelve-word-phrase')
-  var seed = seedBox.value.trim()
-
-  // true if the string has more than a space between words.
-  if (seed.split('  ').length > 1) {
-    this.warning = this.context.t('spaceBetween')
-    this.props.dispatch(actions.displayWarning(this.warning))
-    return
-  }
-  // true if seed contains a character that is not between a-z or a space
-  if (!seed.match(/^[a-z ]+$/)) {
-    this.warning = this.context.t('loweCaseWords')
-      this.props.dispatch(actions.displayWarning(this.warning))
-    return
-  }
-  if (seed.split(' ').length !== 12) {
-    this.warning = this.context.t('seedPhraseReq')
-    this.props.dispatch(actions.displayWarning(this.warning))
-    return
-  }
-  // submit
-  this.warning = null
-  this.props.dispatch(actions.displayWarning(this.warning))
-  this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
-    .catch(err => log.error(err.message))
-}
diff --git a/ui/app/metametrics/metametrics.provider.js b/ui/app/metametrics/metametrics.provider.js
deleted file mode 100644
index 5ff0294e5..000000000
--- a/ui/app/metametrics/metametrics.provider.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Component } from 'react'
-import { connect } from 'react-redux'
-import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import {
-  getCurrentNetworkId,
-  getSelectedAsset,
-  getAccountType,
-  getNumberOfAccounts,
-  getNumberOfTokens,
-} from '../selectors'
-import {
-  txDataSelector,
-} from '../selectors/confirm-transaction'
-import { getEnvironmentType } from '../../../app/scripts/lib/util'
-import {
-  sendMetaMetricsEvent,
-  sendCountIsTrackable,
-} from './metametrics.util'
-
-class MetaMetricsProvider extends Component {
-  static propTypes = {
-    network: PropTypes.string.isRequired,
-    environmentType: PropTypes.string.isRequired,
-    activeCurrency: PropTypes.string.isRequired,
-    accountType: PropTypes.string.isRequired,
-    metaMetricsSendCount: PropTypes.number.isRequired,
-    children: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-  }
-
-  static childContextTypes = {
-    metricsEvent: PropTypes.func,
-  }
-
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      previousPath: '',
-      currentPath: window.location.href,
-    }
-
-    props.history.listen(locationObj => {
-      this.setState({
-        previousPath: this.state.currentPath,
-        currentPath: window.location.href,
-      })
-    })
-  }
-
-  getChildContext () {
-    const props = this.props
-    const { pathname } = location
-    const { previousPath, currentPath } = this.state
-
-    return {
-      metricsEvent: (config = {}, overrides = {}) => {
-        const { eventOpts = {} } = config
-        const { name = '' } = eventOpts
-        const { pathname: overRidePathName = '' } = overrides
-        const isSendFlow = Boolean(name.match(/^send|^confirm/) || overRidePathName.match(/send|confirm/))
-
-        if (props.participateInMetaMetrics || config.isOptIn) {
-          return sendMetaMetricsEvent({
-            ...props,
-            ...config,
-            previousPath,
-            currentPath,
-            pathname,
-            excludeMetaMetricsId: isSendFlow && !sendCountIsTrackable(props.metaMetricsSendCount + 1),
-            ...overrides,
-          })
-        }
-      },
-    }
-  }
-
-  render () {
-    return this.props.children
-  }
-}
-
-const mapStateToProps = state => {
-  const txData = txDataSelector(state) || {}
-
-  return {
-    network: getCurrentNetworkId(state),
-    environmentType: getEnvironmentType(),
-    activeCurrency: getSelectedAsset(state),
-    accountType: getAccountType(state),
-    confirmTransactionOrigin: txData.origin,
-    metaMetricsId: state.metamask.metaMetricsId,
-    participateInMetaMetrics: state.metamask.participateInMetaMetrics,
-    metaMetricsSendCount: state.metamask.metaMetricsSendCount,
-    numberOfTokens: getNumberOfTokens(state),
-    numberOfAccounts: getNumberOfAccounts(state),
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps)
-)(MetaMetricsProvider)
-
diff --git a/ui/app/pages/add-token/add-token.component.js b/ui/app/pages/add-token/add-token.component.js
new file mode 100644
index 000000000..40c1ff7fd
--- /dev/null
+++ b/ui/app/pages/add-token/add-token.component.js
@@ -0,0 +1,335 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ethUtil from 'ethereumjs-util'
+import { checkExistingAddresses } from './util'
+import { tokenInfoGetter } from '../../helpers/utils/token-util'
+import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../helpers/constants/routes'
+import TextField from '../../components/ui/text-field'
+import TokenList from './token-list'
+import TokenSearch from './token-search'
+import PageContainer from '../../components/ui/page-container'
+import { Tabs, Tab } from '../../components/ui/tabs'
+
+const emptyAddr = '0x0000000000000000000000000000000000000000'
+const SEARCH_TAB = 'SEARCH'
+const CUSTOM_TOKEN_TAB = 'CUSTOM_TOKEN'
+
+class AddToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    setPendingTokens: PropTypes.func,
+    pendingTokens: PropTypes.object,
+    clearPendingTokens: PropTypes.func,
+    tokens: PropTypes.array,
+    identities: PropTypes.object,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      customAddress: '',
+      customSymbol: '',
+      customDecimals: 0,
+      searchResults: [],
+      selectedTokens: {},
+      tokenSelectorError: null,
+      customAddressError: null,
+      customSymbolError: null,
+      customDecimalsError: null,
+      autoFilled: false,
+      displayedTab: SEARCH_TAB,
+      forceEditSymbol: false,
+    }
+  }
+
+  componentDidMount () {
+    this.tokenInfoGetter = tokenInfoGetter()
+    const { pendingTokens = {} } = this.props
+    const pendingTokenKeys = Object.keys(pendingTokens)
+
+    if (pendingTokenKeys.length > 0) {
+      let selectedTokens = {}
+      let customToken = {}
+
+      pendingTokenKeys.forEach(tokenAddress => {
+        const token = pendingTokens[tokenAddress]
+        const { isCustom } = token
+
+        if (isCustom) {
+          customToken = { ...token }
+        } else {
+          selectedTokens = { ...selectedTokens, [tokenAddress]: { ...token } }
+        }
+      })
+
+      const {
+        address: customAddress = '',
+        symbol: customSymbol = '',
+        decimals: customDecimals = 0,
+      } = customToken
+
+      const displayedTab = Object.keys(selectedTokens).length > 0 ? SEARCH_TAB : CUSTOM_TOKEN_TAB
+      this.setState({ selectedTokens, customAddress, customSymbol, customDecimals, displayedTab })
+    }
+  }
+
+  handleToggleToken (token) {
+    const { address } = token
+    const { selectedTokens = {} } = this.state
+    const selectedTokensCopy = { ...selectedTokens }
+
+    if (address in selectedTokensCopy) {
+      delete selectedTokensCopy[address]
+    } else {
+      selectedTokensCopy[address] = token
+    }
+
+    this.setState({
+      selectedTokens: selectedTokensCopy,
+      tokenSelectorError: null,
+    })
+  }
+
+  hasError () {
+    const {
+      tokenSelectorError,
+      customAddressError,
+      customSymbolError,
+      customDecimalsError,
+    } = this.state
+
+    return tokenSelectorError || customAddressError || customSymbolError || customDecimalsError
+  }
+
+  hasSelected () {
+    const { customAddress = '', selectedTokens = {} } = this.state
+    return customAddress || Object.keys(selectedTokens).length > 0
+  }
+
+  handleNext () {
+    if (this.hasError()) {
+      return
+    }
+
+    if (!this.hasSelected()) {
+      this.setState({ tokenSelectorError: this.context.t('mustSelectOne') })
+      return
+    }
+
+    const { setPendingTokens, history } = this.props
+    const {
+      customAddress: address,
+      customSymbol: symbol,
+      customDecimals: decimals,
+      selectedTokens,
+    } = this.state
+
+    const customToken = {
+      address,
+      symbol,
+      decimals,
+    }
+
+    setPendingTokens({ customToken, selectedTokens })
+    history.push(CONFIRM_ADD_TOKEN_ROUTE)
+  }
+
+  async attemptToAutoFillTokenParams (address) {
+    const { symbol = '', decimals = 0 } = await this.tokenInfoGetter(address)
+
+    const autoFilled = Boolean(symbol && decimals)
+    this.setState({ autoFilled })
+    this.handleCustomSymbolChange(symbol || '')
+    this.handleCustomDecimalsChange(decimals)
+  }
+
+  handleCustomAddressChange (value) {
+    const customAddress = value.trim()
+    this.setState({
+      customAddress,
+      customAddressError: null,
+      tokenSelectorError: null,
+      autoFilled: false,
+    })
+
+    const isValidAddress = ethUtil.isValidAddress(customAddress)
+    const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase()
+
+    switch (true) {
+      case !isValidAddress:
+        this.setState({
+          customAddressError: this.context.t('invalidAddress'),
+          customSymbol: '',
+          customDecimals: 0,
+          customSymbolError: null,
+          customDecimalsError: null,
+        })
+
+        break
+      case Boolean(this.props.identities[standardAddress]):
+        this.setState({
+          customAddressError: this.context.t('personalAddressDetected'),
+        })
+
+        break
+      case checkExistingAddresses(customAddress, this.props.tokens):
+        this.setState({
+          customAddressError: this.context.t('tokenAlreadyAdded'),
+        })
+
+        break
+      default:
+        if (customAddress !== emptyAddr) {
+          this.attemptToAutoFillTokenParams(customAddress)
+        }
+    }
+  }
+
+  handleCustomSymbolChange (value) {
+    const customSymbol = value.trim()
+    const symbolLength = customSymbol.length
+    let customSymbolError = null
+
+    if (symbolLength <= 0 || symbolLength >= 12) {
+      customSymbolError = this.context.t('symbolBetweenZeroTwelve')
+    }
+
+    this.setState({ customSymbol, customSymbolError })
+  }
+
+  handleCustomDecimalsChange (value) {
+    const customDecimals = value.trim()
+    const validDecimals = customDecimals !== null &&
+      customDecimals !== '' &&
+      customDecimals >= 0 &&
+      customDecimals <= 36
+    let customDecimalsError = null
+
+    if (!validDecimals) {
+      customDecimalsError = this.context.t('decimalsMustZerotoTen')
+    }
+
+    this.setState({ customDecimals, customDecimalsError })
+  }
+
+  renderCustomTokenForm () {
+    const {
+      customAddress,
+      customSymbol,
+      customDecimals,
+      customAddressError,
+      customSymbolError,
+      customDecimalsError,
+      autoFilled,
+      forceEditSymbol,
+    } = this.state
+
+    return (
+      <div className="add-token__custom-token-form">
+        <TextField
+          id="custom-address"
+          label={this.context.t('tokenContractAddress')}
+          type="text"
+          value={customAddress}
+          onChange={e => this.handleCustomAddressChange(e.target.value)}
+          error={customAddressError}
+          fullWidth
+          margin="normal"
+        />
+        <TextField
+          id="custom-symbol"
+          label={(
+            <div className="add-token__custom-symbol__label-wrapper">
+              <span className="add-token__custom-symbol__label">
+                {this.context.t('tokenSymbol')}
+              </span>
+              {(autoFilled && !forceEditSymbol) && (
+                <div
+                  className="add-token__custom-symbol__edit"
+                  onClick={() => this.setState({ forceEditSymbol: true })}
+                >
+                  {this.context.t('edit')}
+                </div>
+              )}
+            </div>
+          )}
+          type="text"
+          value={customSymbol}
+          onChange={e => this.handleCustomSymbolChange(e.target.value)}
+          error={customSymbolError}
+          fullWidth
+          margin="normal"
+          disabled={autoFilled && !forceEditSymbol}
+        />
+        <TextField
+          id="custom-decimals"
+          label={this.context.t('decimal')}
+          type="number"
+          value={customDecimals}
+          onChange={e => this.handleCustomDecimalsChange(e.target.value)}
+          error={customDecimalsError}
+          fullWidth
+          margin="normal"
+          disabled={autoFilled}
+        />
+      </div>
+    )
+  }
+
+  renderSearchToken () {
+    const { tokenSelectorError, selectedTokens, searchResults } = this.state
+
+    return (
+      <div className="add-token__search-token">
+        <TokenSearch
+          onSearch={({ results = [] }) => this.setState({ searchResults: results })}
+          error={tokenSelectorError}
+        />
+        <div className="add-token__token-list">
+          <TokenList
+            results={searchResults}
+            selectedTokens={selectedTokens}
+            onToggleToken={token => this.handleToggleToken(token)}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderTabs () {
+    return (
+      <Tabs>
+        <Tab name={this.context.t('search')}>
+          { this.renderSearchToken() }
+        </Tab>
+        <Tab name={this.context.t('customToken')}>
+          { this.renderCustomTokenForm() }
+        </Tab>
+      </Tabs>
+    )
+  }
+
+  render () {
+    const { history, clearPendingTokens } = this.props
+
+    return (
+      <PageContainer
+        title={this.context.t('addTokens')}
+        tabsComponent={this.renderTabs()}
+        onSubmit={() => this.handleNext()}
+        disabled={this.hasError() || !this.hasSelected()}
+        onCancel={() => {
+          clearPendingTokens()
+          history.push(DEFAULT_ROUTE)
+        }}
+      />
+    )
+  }
+}
+
+export default AddToken
diff --git a/ui/app/pages/add-token/add-token.container.js b/ui/app/pages/add-token/add-token.container.js
new file mode 100644
index 000000000..eee16dfc7
--- /dev/null
+++ b/ui/app/pages/add-token/add-token.container.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import AddToken from './add-token.component'
+
+const { setPendingTokens, clearPendingTokens } = require('../../store/actions')
+
+const mapStateToProps = ({ metamask }) => {
+  const { identities, tokens, pendingTokens } = metamask
+  return {
+    identities,
+    tokens,
+    pendingTokens,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setPendingTokens: tokens => dispatch(setPendingTokens(tokens)),
+    clearPendingTokens: () => dispatch(clearPendingTokens()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddToken)
diff --git a/ui/app/components/pages/add-token/index.js b/ui/app/pages/add-token/index.js
index 3666cae82..3666cae82 100644
--- a/ui/app/components/pages/add-token/index.js
+++ b/ui/app/pages/add-token/index.js
diff --git a/ui/app/pages/add-token/index.scss b/ui/app/pages/add-token/index.scss
new file mode 100644
index 000000000..ef6802f96
--- /dev/null
+++ b/ui/app/pages/add-token/index.scss
@@ -0,0 +1,45 @@
+@import 'token-list/index';
+
+.add-token {
+  &__custom-token-form {
+    padding: 8px 16px 16px;
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+  }
+
+  &__search-token {
+    padding: 16px;
+  }
+
+  &__token-list {
+    margin-top: 16px;
+  }
+
+  &__custom-symbol {
+
+    &__label-wrapper {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+
+    &__label {
+      flex: 0 0 auto;
+    }
+
+    &__edit {
+      flex: 1 1 auto;
+      text-align: right;
+      color: $curious-blue;
+      padding-right: 4px;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/ui/app/components/pages/add-token/token-list/index.js b/ui/app/pages/add-token/token-list/index.js
index 21dd5ac72..21dd5ac72 100644
--- a/ui/app/components/pages/add-token/token-list/index.js
+++ b/ui/app/pages/add-token/token-list/index.js
diff --git a/ui/app/pages/add-token/token-list/index.scss b/ui/app/pages/add-token/token-list/index.scss
new file mode 100644
index 000000000..b7787a18e
--- /dev/null
+++ b/ui/app/pages/add-token/token-list/index.scss
@@ -0,0 +1,65 @@
+@import 'token-list-placeholder/index';
+
+.token-list {
+  &__title {
+    font-size: .75rem;
+  }
+
+  &__tokens-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__token {
+    transition: 200ms ease-in-out;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 8px;
+    margin-top: 8px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    position: relative;
+
+    &:hover {
+      border: 2px solid rgba($malibu-blue, .5);
+    }
+
+    &--selected {
+      border: 2px solid $malibu-blue !important;
+    }
+
+    &--disabled {
+      opacity: .4;
+      pointer-events: none;
+    }
+  }
+
+  &__token-icon {
+    width: 48px;
+    height: 48px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    border-radius: 50%;
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba($black, .24);
+    margin-right: 12px;
+    flex: 0 0 auto;
+  }
+
+  &__token-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__token-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.js b/ui/app/pages/add-token/token-list/token-list-placeholder/index.js
index b82f45e93..b82f45e93 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.js
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.js
diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss
index cc495dfb0..cc495dfb0 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss
diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
index 20f550927..20f550927 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
diff --git a/ui/app/components/pages/add-token/token-list/token-list.component.js b/ui/app/pages/add-token/token-list/token-list.component.js
index 724a68d6e..724a68d6e 100644
--- a/ui/app/components/pages/add-token/token-list/token-list.component.js
+++ b/ui/app/pages/add-token/token-list/token-list.component.js
diff --git a/ui/app/components/pages/add-token/token-list/token-list.container.js b/ui/app/pages/add-token/token-list/token-list.container.js
index cd7b07a37..cd7b07a37 100644
--- a/ui/app/components/pages/add-token/token-list/token-list.container.js
+++ b/ui/app/pages/add-token/token-list/token-list.container.js
diff --git a/ui/app/components/pages/add-token/token-search/index.js b/ui/app/pages/add-token/token-search/index.js
index acaa6b084..acaa6b084 100644
--- a/ui/app/components/pages/add-token/token-search/index.js
+++ b/ui/app/pages/add-token/token-search/index.js
diff --git a/ui/app/pages/add-token/token-search/token-search.component.js b/ui/app/pages/add-token/token-search/token-search.component.js
new file mode 100644
index 000000000..5542a19ff
--- /dev/null
+++ b/ui/app/pages/add-token/token-search/token-search.component.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import contractMap from 'eth-contract-metadata'
+import Fuse from 'fuse.js'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import TextField from '../../../components/ui/text-field'
+
+const contractList = Object.entries(contractMap)
+  .map(([ _, tokenData]) => tokenData)
+  .filter(tokenData => Boolean(tokenData.erc20))
+
+const fuse = new Fuse(contractList, {
+  shouldSort: true,
+  threshold: 0.45,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    { name: 'name', weight: 0.5 },
+    { name: 'symbol', weight: 0.5 },
+  ],
+})
+
+export default class TokenSearch extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    error: null,
+  }
+
+  static propTypes = {
+    onSearch: PropTypes.func,
+    error: PropTypes.string,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      searchQuery: '',
+    }
+  }
+
+  handleSearch (searchQuery) {
+    this.setState({ searchQuery })
+    const fuseSearchResult = fuse.search(searchQuery)
+    const addressSearchResult = contractList.filter(token => {
+      return token.address.toLowerCase() === searchQuery.toLowerCase()
+    })
+    const results = [...addressSearchResult, ...fuseSearchResult]
+    this.props.onSearch({ searchQuery, results })
+  }
+
+  renderAdornment () {
+    return (
+      <InputAdornment
+        position="start"
+        style={{ marginRight: '12px' }}
+      >
+        <img src="images/search.svg" />
+      </InputAdornment>
+    )
+  }
+
+  render () {
+    const { error } = this.props
+    const { searchQuery } = this.state
+
+    return (
+      <TextField
+        id="search-tokens"
+        placeholder={this.context.t('searchTokens')}
+        type="text"
+        value={searchQuery}
+        onChange={e => this.handleSearch(e.target.value)}
+        error={error}
+        fullWidth
+        startAdornment={this.renderAdornment()}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/add-token/util.js b/ui/app/pages/add-token/util.js
index 579c56cc0..579c56cc0 100644
--- a/ui/app/components/pages/add-token/util.js
+++ b/ui/app/pages/add-token/util.js
diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
new file mode 100644
index 000000000..7edb8f541
--- /dev/null
+++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
+import Button from '../../components/ui/button'
+import Identicon from '../../components/ui/identicon'
+import TokenBalance from '../../components/ui/token-balance'
+
+export default class ConfirmAddSuggestedToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    clearPendingTokens: PropTypes.func,
+    addToken: PropTypes.func,
+    pendingTokens: PropTypes.object,
+    removeSuggestedTokens: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { pendingTokens = {}, history } = this.props
+
+    if (Object.keys(pendingTokens).length === 0) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  getTokenName (name, symbol) {
+    return typeof name === 'undefined'
+      ? symbol
+      : `${name} (${symbol})`
+  }
+
+  render () {
+    const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
+    const pendingTokenKey = Object.keys(pendingTokens)[0]
+    const pendingToken = pendingTokens[pendingTokenKey]
+
+    return (
+      <div className="page-container">
+        <div className="page-container__header">
+          <div className="page-container__title">
+            { this.context.t('addSuggestedTokens') }
+          </div>
+          <div className="page-container__subtitle">
+            { this.context.t('likeToAddTokens') }
+          </div>
+        </div>
+        <div className="page-container__content">
+          <div className="confirm-add-token">
+            <div className="confirm-add-token__header">
+              <div className="confirm-add-token__token">
+                { this.context.t('token') }
+              </div>
+              <div className="confirm-add-token__balance">
+                { this.context.t('balance') }
+              </div>
+            </div>
+            <div className="confirm-add-token__token-list">
+              {
+                Object.entries(pendingTokens)
+                  .map(([ address, token ]) => {
+                    const { name, symbol, image } = token
+
+                    return (
+                      <div
+                        className="confirm-add-token__token-list-item"
+                        key={address}
+                      >
+                        <div className="confirm-add-token__token confirm-add-token__data">
+                          <Identicon
+                            className="confirm-add-token__token-icon"
+                            diameter={48}
+                            address={address}
+                            image={image}
+                          />
+                          <div className="confirm-add-token__name">
+                            { this.getTokenName(name, symbol) }
+                          </div>
+                        </div>
+                        <div className="confirm-add-token__balance">
+                          <TokenBalance token={token} />
+                        </div>
+                      </div>
+                    )
+                })
+              }
+            </div>
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                removeSuggestedTokens()
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('cancel') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addToken(pendingToken)
+                  .then(() => removeSuggestedTokens())
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('addToken') }
+            </Button>
+          </header>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
new file mode 100644
index 000000000..a90fe148f
--- /dev/null
+++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -0,0 +1,29 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
+import { withRouter } from 'react-router-dom'
+
+const extend = require('xtend')
+
+const { addToken, removeSuggestedTokens } = require('../../store/actions')
+
+const mapStateToProps = ({ metamask }) => {
+  const { pendingTokens, suggestedTokens } = metamask
+  const params = extend(pendingTokens, suggestedTokens)
+
+  return {
+    pendingTokens: params,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)),
+    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/confirm-add-suggested-token/index.js b/ui/app/pages/confirm-add-suggested-token/index.js
index 2ca56b43c..2ca56b43c 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/index.js
+++ b/ui/app/pages/confirm-add-suggested-token/index.js
diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
new file mode 100644
index 000000000..c0ec624ac
--- /dev/null
+++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
@@ -0,0 +1,117 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../helpers/constants/routes'
+import Button from '../../components/ui/button'
+import Identicon from '../../components/ui/identicon'
+import TokenBalance from '../../components/ui/token-balance'
+
+export default class ConfirmAddToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    clearPendingTokens: PropTypes.func,
+    addTokens: PropTypes.func,
+    pendingTokens: PropTypes.object,
+  }
+
+  componentDidMount () {
+    const { pendingTokens = {}, history } = this.props
+
+    if (Object.keys(pendingTokens).length === 0) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  getTokenName (name, symbol) {
+    return typeof name === 'undefined'
+      ? symbol
+      : `${name} (${symbol})`
+  }
+
+  render () {
+    const { history, addTokens, clearPendingTokens, pendingTokens } = this.props
+
+    return (
+      <div className="page-container">
+        <div className="page-container__header">
+          <div className="page-container__title">
+            { this.context.t('addTokens') }
+          </div>
+          <div className="page-container__subtitle">
+            { this.context.t('likeToAddTokens') }
+          </div>
+        </div>
+        <div className="page-container__content">
+          <div className="confirm-add-token">
+            <div className="confirm-add-token__header">
+              <div className="confirm-add-token__token">
+                { this.context.t('token') }
+              </div>
+              <div className="confirm-add-token__balance">
+                { this.context.t('balance') }
+              </div>
+            </div>
+            <div className="confirm-add-token__token-list">
+              {
+                Object.entries(pendingTokens)
+                  .map(([ address, token ]) => {
+                    const { name, symbol } = token
+
+                    return (
+                      <div
+                        className="confirm-add-token__token-list-item"
+                        key={address}
+                      >
+                        <div className="confirm-add-token__token confirm-add-token__data">
+                          <Identicon
+                            className="confirm-add-token__token-icon"
+                            diameter={48}
+                            address={address}
+                          />
+                          <div className="confirm-add-token__name">
+                            { this.getTokenName(name, symbol) }
+                          </div>
+                        </div>
+                        <div className="confirm-add-token__balance">
+                          <TokenBalance token={token} />
+                        </div>
+                      </div>
+                    )
+                })
+              }
+            </div>
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => history.push(ADD_TOKEN_ROUTE)}
+            >
+              { this.context.t('back') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addTokens(pendingTokens)
+                  .then(() => {
+                    clearPendingTokens()
+                    history.push(DEFAULT_ROUTE)
+                  })
+              }}
+            >
+              { this.context.t('addTokens') }
+            </Button>
+          </header>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/pages/confirm-add-token/confirm-add-token.container.js
new file mode 100644
index 000000000..961626177
--- /dev/null
+++ b/ui/app/pages/confirm-add-token/confirm-add-token.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import ConfirmAddToken from './confirm-add-token.component'
+
+const { addTokens, clearPendingTokens } = require('../../store/actions')
+
+const mapStateToProps = ({ metamask }) => {
+  const { pendingTokens } = metamask
+  return {
+    pendingTokens,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addTokens: tokens => dispatch(addTokens(tokens)),
+    clearPendingTokens: () => dispatch(clearPendingTokens()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddToken)
diff --git a/ui/app/components/pages/confirm-add-token/index.js b/ui/app/pages/confirm-add-token/index.js
index b7decabec..b7decabec 100644
--- a/ui/app/components/pages/confirm-add-token/index.js
+++ b/ui/app/pages/confirm-add-token/index.js
diff --git a/ui/app/components/pages/confirm-add-token/index.scss b/ui/app/pages/confirm-add-token/index.scss
index 66146cf78..66146cf78 100644
--- a/ui/app/components/pages/confirm-add-token/index.scss
+++ b/ui/app/pages/confirm-add-token/index.scss
diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.component.js b/ui/app/pages/confirm-approve/confirm-approve.component.js
index b71eaa1d4..b71eaa1d4 100644
--- a/ui/app/components/pages/confirm-approve/confirm-approve.component.js
+++ b/ui/app/pages/confirm-approve/confirm-approve.component.js
diff --git a/ui/app/pages/confirm-approve/confirm-approve.container.js b/ui/app/pages/confirm-approve/confirm-approve.container.js
new file mode 100644
index 000000000..5f8bb8f0b
--- /dev/null
+++ b/ui/app/pages/confirm-approve/confirm-approve.container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import ConfirmApprove from './confirm-approve.component'
+import { approveTokenAmountAndToAddressSelector } from '../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  const { confirmTransaction: { tokenProps: { tokenSymbol } = {} } } = state
+  const { tokenAmount } = approveTokenAmountAndToAddressSelector(state)
+
+  return {
+    tokenAmount,
+    tokenSymbol,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmApprove)
diff --git a/ui/app/components/pages/confirm-approve/index.js b/ui/app/pages/confirm-approve/index.js
index 791297be7..791297be7 100644
--- a/ui/app/components/pages/confirm-approve/index.js
+++ b/ui/app/pages/confirm-approve/index.js
diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
index 9bc0daab9..9bc0daab9 100644
--- a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
+++ b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
index 336ee83ea..336ee83ea 100644
--- a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
+++ b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
diff --git a/ui/app/components/pages/confirm-deploy-contract/index.js b/ui/app/pages/confirm-deploy-contract/index.js
index c4fb01b52..c4fb01b52 100644
--- a/ui/app/components/pages/confirm-deploy-contract/index.js
+++ b/ui/app/pages/confirm-deploy-contract/index.js
diff --git a/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js
new file mode 100644
index 000000000..8daad675e
--- /dev/null
+++ b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import { SEND_ROUTE } from '../../helpers/constants/routes'
+
+export default class ConfirmSendEther extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    editTransaction: PropTypes.func,
+    history: PropTypes.object,
+    txParams: PropTypes.object,
+  }
+
+  handleEdit ({ txData }) {
+    const { editTransaction, history } = this.props
+    editTransaction(txData)
+    history.push(SEND_ROUTE)
+  }
+
+  shouldHideData () {
+    const { txParams = {} } = this.props
+    return !txParams.data
+  }
+
+  render () {
+    const hideData = this.shouldHideData()
+
+    return (
+      <ConfirmTransactionBase
+        action={this.context.t('confirm')}
+        hideData={hideData}
+        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
+      />
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/app/pages/confirm-send-ether/confirm-send-ether.container.js
new file mode 100644
index 000000000..713da702d
--- /dev/null
+++ b/ui/app/pages/confirm-send-ether/confirm-send-ether.container.js
@@ -0,0 +1,45 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import { updateSend } from '../../store/actions'
+import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'
+import ConfirmSendEther from './confirm-send-ether.component'
+
+const mapStateToProps = state => {
+  const { confirmTransaction: { txData: { txParams } = {} } } = state
+
+  return {
+    txParams,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    editTransaction: txData => {
+      const { id, txParams } = txData
+      const {
+        gas: gasLimit,
+        gasPrice,
+        to,
+        value: amount,
+      } = txParams
+
+      dispatch(updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount,
+        errors: { to: null, amount: null },
+        editingTransactionId: id && id.toString(),
+      }))
+
+      dispatch(clearConfirmTransaction())
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmSendEther)
diff --git a/ui/app/components/pages/confirm-send-ether/index.js b/ui/app/pages/confirm-send-ether/index.js
index 2d5767c39..2d5767c39 100644
--- a/ui/app/components/pages/confirm-send-ether/index.js
+++ b/ui/app/pages/confirm-send-ether/index.js
diff --git a/ui/app/pages/confirm-send-token/confirm-send-token.component.js b/ui/app/pages/confirm-send-token/confirm-send-token.component.js
new file mode 100644
index 000000000..7f3b1c082
--- /dev/null
+++ b/ui/app/pages/confirm-send-token/confirm-send-token.component.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
+import { SEND_ROUTE } from '../../helpers/constants/routes'
+
+export default class ConfirmSendToken extends Component {
+  static propTypes = {
+    history: PropTypes.object,
+    editTransaction: PropTypes.func,
+    tokenAmount: PropTypes.number,
+  }
+
+  handleEdit (confirmTransactionData) {
+    const { editTransaction, history } = this.props
+    editTransaction(confirmTransactionData)
+    history.push(SEND_ROUTE)
+  }
+
+  render () {
+    const { tokenAmount } = this.props
+
+    return (
+      <ConfirmTokenTransactionBase
+        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
+        tokenAmount={tokenAmount}
+      />
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-send-token/confirm-send-token.container.js b/ui/app/pages/confirm-send-token/confirm-send-token.container.js
new file mode 100644
index 000000000..db9b08c48
--- /dev/null
+++ b/ui/app/pages/confirm-send-token/confirm-send-token.container.js
@@ -0,0 +1,52 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import ConfirmSendToken from './confirm-send-token.component'
+import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'
+import { setSelectedToken, updateSend, showSendTokenPage } from '../../store/actions'
+import { conversionUtil } from '../../helpers/utils/conversion-util'
+import { sendTokenTokenAmountAndToAddressSelector } from '../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  const { tokenAmount } = sendTokenTokenAmountAndToAddressSelector(state)
+
+  return {
+    tokenAmount,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    editTransaction: ({ txData, tokenData, tokenProps }) => {
+      const { txParams: { to: tokenAddress, gas: gasLimit, gasPrice } = {}, id } = txData
+      const { params = [] } = tokenData
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
+        fromNumericBase: 'dec',
+        toNumericBase: 'hex',
+      })
+      dispatch(setSelectedToken(tokenAddress))
+      dispatch(updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount: tokenAmountInHex,
+        errors: { to: null, amount: null },
+        editingTransactionId: id && id.toString(),
+        token: {
+          ...tokenProps,
+          address: tokenAddress,
+        },
+      }))
+      dispatch(clearConfirmTransaction())
+      dispatch(showSendTokenPage())
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmSendToken)
diff --git a/ui/app/components/pages/confirm-send-token/index.js b/ui/app/pages/confirm-send-token/index.js
index 409b6ef3d..409b6ef3d 100644
--- a/ui/app/components/pages/confirm-send-token/index.js
+++ b/ui/app/pages/confirm-send-token/index.js
diff --git a/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
new file mode 100644
index 000000000..dbda3c1dc
--- /dev/null
+++ b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display'
+import {
+  formatCurrency,
+  convertTokenToFiat,
+  addFiat,
+  roundExponential,
+} from '../../helpers/utils/confirm-tx.util'
+import { getWeiHexFromDecimalValue } from '../../helpers/utils/conversions.util'
+import { ETH, PRIMARY } from '../../helpers/constants/common'
+
+export default class ConfirmTokenTransactionBase extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    tokenAddress: PropTypes.string,
+    toAddress: PropTypes.string,
+    tokenAmount: PropTypes.number,
+    tokenSymbol: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    contractExchangeRate: PropTypes.number,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+  }
+
+  getFiatTransactionAmount () {
+    const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props
+
+    return convertTokenToFiat({
+      value: tokenAmount,
+      toCurrency: currentCurrency,
+      conversionRate,
+      contractExchangeRate,
+    })
+  }
+
+  renderSubtitleComponent () {
+    const { contractExchangeRate, tokenAmount } = this.props
+
+    const decimalEthValue = (tokenAmount * contractExchangeRate) || 0
+    const hexWeiValue = getWeiHexFromDecimalValue({
+      value: decimalEthValue,
+      fromCurrency: ETH,
+      fromDenomination: ETH,
+    })
+
+    return typeof contractExchangeRate === 'undefined'
+      ? (
+        <span>
+          { this.context.t('noConversionRateAvailable') }
+        </span>
+      ) : (
+        <UserPreferencedCurrencyDisplay
+          value={hexWeiValue}
+          type={PRIMARY}
+          showEthLogo
+          hideLabel
+        />
+      )
+  }
+
+  renderPrimaryTotalTextOverride () {
+    const { tokenAmount, tokenSymbol, ethTransactionTotal } = this.props
+    const tokensText = `${tokenAmount} ${tokenSymbol}`
+
+    return (
+      <div>
+        <span>{ `${tokensText} + ` }</span>
+        <img
+          src="/images/eth.svg"
+          height="18"
+        />
+        <span>{ ethTransactionTotal }</span>
+      </div>
+    )
+  }
+
+  getSecondaryTotalTextOverride () {
+    const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props
+
+    if (typeof contractExchangeRate === 'undefined') {
+      return formatCurrency(fiatTransactionTotal, currentCurrency)
+    } else {
+      const fiatTransactionAmount = this.getFiatTransactionAmount()
+      const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
+      const roundedFiatTotal = roundExponential(fiatTotal)
+      return formatCurrency(roundedFiatTotal, currentCurrency)
+    }
+  }
+
+  render () {
+    const {
+      toAddress,
+      tokenAddress,
+      tokenSymbol,
+      tokenAmount,
+      ...restProps
+    } = this.props
+
+    const tokensText = `${tokenAmount} ${tokenSymbol}`
+
+    return (
+      <ConfirmTransactionBase
+        toAddress={toAddress}
+        identiconAddress={tokenAddress}
+        title={tokensText}
+        subtitleComponent={this.renderSubtitleComponent()}
+        primaryTotalTextOverride={this.renderPrimaryTotalTextOverride()}
+        secondaryTotalTextOverride={this.getSecondaryTotalTextOverride()}
+        {...restProps}
+      />
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
new file mode 100644
index 000000000..f5f30a460
--- /dev/null
+++ b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux'
+import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
+import {
+  tokenAmountAndToAddressSelector,
+  contractExchangeRateSelector,
+} from '../../selectors/confirm-transaction'
+
+const mapStateToProps = (state, ownProps) => {
+  const { tokenAmount: ownTokenAmount } = ownProps
+  const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state
+  const {
+    txData: { txParams: { to: tokenAddress } = {} } = {},
+    tokenProps: { tokenSymbol } = {},
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  } = confirmTransaction
+
+  const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state)
+  const contractExchangeRate = contractExchangeRateSelector(state)
+
+  return {
+    toAddress,
+    tokenAddress,
+    tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount,
+    tokenSymbol,
+    currentCurrency,
+    conversionRate,
+    contractExchangeRate,
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmTokenTransactionBase)
diff --git a/ui/app/components/pages/confirm-token-transaction-base/index.js b/ui/app/pages/confirm-token-transaction-base/index.js
index e15c5d56b..e15c5d56b 100644
--- a/ui/app/components/pages/confirm-token-transaction-base/index.js
+++ b/ui/app/pages/confirm-token-transaction-base/index.js
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
new file mode 100644
index 000000000..1da9c34bd
--- /dev/null
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -0,0 +1,574 @@
+import ethUtil from 'ethereumjs-util'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container'
+import { isBalanceSufficient } from '../../components/app/send/send.utils'
+import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes'
+import {
+  INSUFFICIENT_FUNDS_ERROR_KEY,
+  TRANSACTION_ERROR_KEY,
+} from '../../helpers/constants/error-keys'
+import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../helpers/constants/transactions'
+import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../helpers/constants/common'
+import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs'
+
+export default class ConfirmTransactionBase extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    // react-router props
+    match: PropTypes.object,
+    history: PropTypes.object,
+    // Redux props
+    balance: PropTypes.string,
+    cancelTransaction: PropTypes.func,
+    cancelAllTransactions: PropTypes.func,
+    clearConfirmTransaction: PropTypes.func,
+    clearSend: PropTypes.func,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    editTransaction: PropTypes.func,
+    ethTransactionAmount: PropTypes.string,
+    ethTransactionFee: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    fiatTransactionAmount: PropTypes.string,
+    fiatTransactionFee: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    fromAddress: PropTypes.string,
+    fromName: PropTypes.string,
+    hexTransactionAmount: PropTypes.string,
+    hexTransactionFee: PropTypes.string,
+    hexTransactionTotal: PropTypes.string,
+    isTxReprice: PropTypes.bool,
+    methodData: PropTypes.object,
+    nonce: PropTypes.string,
+    assetImage: PropTypes.string,
+    sendTransaction: PropTypes.func,
+    showCustomizeGasModal: PropTypes.func,
+    showTransactionConfirmedModal: PropTypes.func,
+    showRejectTransactionsConfirmationModal: PropTypes.func,
+    toAddress: PropTypes.string,
+    tokenData: PropTypes.object,
+    tokenProps: PropTypes.object,
+    toName: PropTypes.string,
+    transactionStatus: PropTypes.string,
+    txData: PropTypes.object,
+    unapprovedTxCount: PropTypes.number,
+    currentNetworkUnapprovedTxs: PropTypes.object,
+    updateGasAndCalculate: PropTypes.func,
+    customGas: PropTypes.object,
+    // Component props
+    action: PropTypes.string,
+    contentComponent: PropTypes.node,
+    dataComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    errorKey: PropTypes.string,
+    errorMessage: PropTypes.string,
+    primaryTotalTextOverride: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    secondaryTotalTextOverride: PropTypes.string,
+    hideData: PropTypes.bool,
+    hideDetails: PropTypes.bool,
+    hideSubtitle: PropTypes.bool,
+    identiconAddress: PropTypes.string,
+    onCancel: PropTypes.func,
+    onEdit: PropTypes.func,
+    onEditGas: PropTypes.func,
+    onSubmit: PropTypes.func,
+    setMetaMetricsSendCount: PropTypes.func,
+    metaMetricsSendCount: PropTypes.number,
+    subtitle: PropTypes.string,
+    subtitleComponent: PropTypes.node,
+    summaryComponent: PropTypes.node,
+    title: PropTypes.string,
+    titleComponent: PropTypes.node,
+    valid: PropTypes.bool,
+    warning: PropTypes.string,
+    advancedInlineGasShown: PropTypes.bool,
+    insufficientBalance: PropTypes.bool,
+    hideFiatConversion: PropTypes.bool,
+  }
+
+  state = {
+    submitting: false,
+    submitError: null,
+  }
+
+  componentDidUpdate () {
+    const {
+      transactionStatus,
+      showTransactionConfirmedModal,
+      history,
+      clearConfirmTransaction,
+    } = this.props
+
+    if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
+      showTransactionConfirmedModal({
+        onSubmit: () => {
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
+        },
+      })
+
+      return
+    }
+  }
+
+  getErrorKey () {
+    const {
+      balance,
+      conversionRate,
+      hexTransactionFee,
+      txData: {
+        simulationFails,
+        txParams: {
+          value: amount,
+        } = {},
+      } = {},
+    } = this.props
+
+    const insufficientBalance = balance && !isBalanceSufficient({
+      amount,
+      gasTotal: hexTransactionFee || '0x0',
+      balance,
+      conversionRate,
+    })
+
+    if (insufficientBalance) {
+      return {
+        valid: false,
+        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
+      }
+    }
+
+    if (simulationFails) {
+      return {
+        valid: true,
+        errorKey: simulationFails.errorKey ? simulationFails.errorKey : TRANSACTION_ERROR_KEY,
+      }
+    }
+
+    return {
+      valid: true,
+    }
+  }
+
+  handleEditGas () {
+    const { onEditGas, showCustomizeGasModal, action, txData: { origin }, methodData = {} } = this.props
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Transactions',
+        action: 'Confirm Screen',
+        name: 'User clicks "Edit" on gas',
+      },
+      customVariables: {
+        recipientKnown: null,
+        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+        origin,
+      },
+    })
+
+    if (onEditGas) {
+      onEditGas()
+    } else {
+      showCustomizeGasModal()
+    }
+  }
+
+  renderDetails () {
+    const {
+      detailsComponent,
+      primaryTotalTextOverride,
+      secondaryTotalTextOverride,
+      hexTransactionFee,
+      hexTransactionTotal,
+      hideDetails,
+      advancedInlineGasShown,
+      customGas,
+      insufficientBalance,
+      updateGasAndCalculate,
+      hideFiatConversion,
+    } = this.props
+
+    if (hideDetails) {
+      return null
+    }
+
+    return (
+      detailsComponent || (
+        <div className="confirm-page-container-content__details">
+          <div className="confirm-page-container-content__gas-fee">
+            <ConfirmDetailRow
+              label="Gas Fee"
+              value={hexTransactionFee}
+              headerText="Edit"
+              headerTextClassName="confirm-detail-row__header-text--edit"
+              onHeaderClick={() => this.handleEditGas()}
+              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
+            />
+            {advancedInlineGasShown
+              ? <AdvancedGasInputs
+                updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
+                updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
+                customGasPrice={customGas.gasPrice}
+                customGasLimit={customGas.gasLimit}
+                insufficientBalance={insufficientBalance}
+                customPriceIsSafe={true}
+                isSpeedUp={false}
+              />
+              : null
+            }
+          </div>
+          <div>
+            <ConfirmDetailRow
+              label="Total"
+              value={hexTransactionTotal}
+              primaryText={primaryTotalTextOverride}
+              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : secondaryTotalTextOverride}
+              headerText="Amount + Gas Fee"
+              headerTextClassName="confirm-detail-row__header-text--total"
+              primaryValueTextColor="#2f9ae0"
+            />
+          </div>
+        </div>
+      )
+    )
+  }
+
+  renderData () {
+    const { t } = this.context
+    const {
+      txData: {
+        txParams: {
+          data,
+        } = {},
+      } = {},
+      methodData: {
+        name,
+        params,
+      } = {},
+      hideData,
+      dataComponent,
+    } = this.props
+
+    if (hideData) {
+      return null
+    }
+
+    return dataComponent || (
+      <div className="confirm-page-container-content__data">
+        <div className="confirm-page-container-content__data-box-label">
+          {`${t('functionType')}:`}
+          <span className="confirm-page-container-content__function-type">
+            { name || t('notFound') }
+          </span>
+        </div>
+        {
+          params && (
+            <div className="confirm-page-container-content__data-box">
+              <div className="confirm-page-container-content__data-field-label">
+                { `${t('parameters')}:` }
+              </div>
+              <div>
+                <pre>{ JSON.stringify(params, null, 2) }</pre>
+              </div>
+            </div>
+          )
+        }
+        <div className="confirm-page-container-content__data-box-label">
+          {`${t('hexData')}: ${ethUtil.toBuffer(data).length} bytes`}
+        </div>
+        <div className="confirm-page-container-content__data-box">
+          { data }
+        </div>
+      </div>
+    )
+  }
+
+  handleEdit () {
+    const { txData, tokenData, tokenProps, onEdit, action, txData: { origin }, methodData = {} } = this.props
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Transactions',
+        action: 'Confirm Screen',
+        name: 'Edit Transaction',
+      },
+      customVariables: {
+        recipientKnown: null,
+        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+        origin,
+      },
+    })
+
+    onEdit({ txData, tokenData, tokenProps })
+  }
+
+  handleCancelAll () {
+    const {
+      cancelAllTransactions,
+      clearConfirmTransaction,
+      history,
+      showRejectTransactionsConfirmationModal,
+      unapprovedTxCount,
+    } = this.props
+
+    showRejectTransactionsConfirmationModal({
+      unapprovedTxCount,
+      async onSubmit () {
+        await cancelAllTransactions()
+        clearConfirmTransaction()
+        history.push(DEFAULT_ROUTE)
+      },
+    })
+  }
+
+  handleCancel () {
+    const { metricsEvent } = this.context
+    const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, action, txData: { origin }, methodData = {} } = this.props
+
+    if (onCancel) {
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Confirm Screen',
+          name: 'Cancel',
+        },
+        customVariables: {
+          recipientKnown: null,
+          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+          origin,
+        },
+      })
+      onCancel(txData)
+    } else {
+      cancelTransaction(txData)
+        .then(() => {
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
+        })
+    }
+  }
+
+  handleSubmit () {
+    const { metricsEvent } = this.context
+    const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, action, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props
+    const { submitting } = this.state
+
+    if (submitting) {
+      return
+    }
+
+    this.setState({
+      submitting: true,
+      submitError: null,
+    }, () => {
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Confirm Screen',
+          name: 'Transaction Completed',
+        },
+        customVariables: {
+          recipientKnown: null,
+          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+          origin,
+        },
+      })
+
+      setMetaMetricsSendCount(metaMetricsSendCount + 1)
+        .then(() => {
+          if (onSubmit) {
+            Promise.resolve(onSubmit(txData))
+              .then(() => {
+                this.setState({
+                  submitting: false,
+                })
+              })
+          } else {
+            sendTransaction(txData)
+              .then(() => {
+                clearConfirmTransaction()
+                this.setState({
+                  submitting: false,
+                }, () => {
+                  history.push(DEFAULT_ROUTE)
+                })
+              })
+              .catch(error => {
+                this.setState({
+                  submitting: false,
+                  submitError: error.message,
+                })
+              })
+          }
+        })
+    })
+  }
+
+  renderTitleComponent () {
+    const { title, titleComponent, hexTransactionAmount } = this.props
+
+    // Title string passed in by props takes priority
+    if (title) {
+      return null
+    }
+
+    return titleComponent || (
+      <UserPreferencedCurrencyDisplay
+        value={hexTransactionAmount}
+        type={PRIMARY}
+        showEthLogo
+        ethLogoHeight="26"
+        hideLabel
+      />
+    )
+  }
+
+  renderSubtitleComponent () {
+    const { subtitle, subtitleComponent, hexTransactionAmount } = this.props
+
+    // Subtitle string passed in by props takes priority
+    if (subtitle) {
+      return null
+    }
+
+    return subtitleComponent || (
+      <UserPreferencedCurrencyDisplay
+        value={hexTransactionAmount}
+        type={SECONDARY}
+        showEthLogo
+        hideLabel
+      />
+    )
+  }
+
+  handleNextTx (txId) {
+    const { history, clearConfirmTransaction } = this.props
+    if (txId) {
+      clearConfirmTransaction()
+      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`)
+    }
+  }
+
+  getNavigateTxData () {
+    const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props
+    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs).reverse()
+    const currentPosition = enumUnapprovedTxs.indexOf(id.toString())
+
+    return {
+      totalTx: enumUnapprovedTxs.length,
+      positionOfCurrentTx: currentPosition + 1,
+      nextTxId: enumUnapprovedTxs[currentPosition + 1],
+      prevTxId: enumUnapprovedTxs[currentPosition - 1],
+      showNavigation: enumUnapprovedTxs.length > 1,
+      firstTx: enumUnapprovedTxs[0],
+      lastTx: enumUnapprovedTxs[enumUnapprovedTxs.length - 1],
+      ofText: this.context.t('ofTextNofM'),
+      requestsWaitingText: this.context.t('requestsAwaitingAcknowledgement'),
+    }
+  }
+
+  componentDidMount () {
+    const { txData: { origin } = {} } = this.props
+    const { metricsEvent } = this.context
+    metricsEvent({
+      eventOpts: {
+        category: 'Transactions',
+        action: 'Confirm Screen',
+        name: 'Confirm: Started',
+      },
+      customVariables: {
+        origin,
+      },
+    })
+  }
+
+  render () {
+    const {
+      isTxReprice,
+      fromName,
+      fromAddress,
+      toName,
+      toAddress,
+      methodData,
+      valid: propsValid = true,
+      errorMessage,
+      errorKey: propsErrorKey,
+      action,
+      title,
+      subtitle,
+      hideSubtitle,
+      identiconAddress,
+      summaryComponent,
+      contentComponent,
+      onEdit,
+      nonce,
+      assetImage,
+      warning,
+      unapprovedTxCount,
+    } = this.props
+    const { submitting, submitError } = this.state
+
+    const { name } = methodData
+    const { valid, errorKey } = this.getErrorKey()
+    const { totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = this.getNavigateTxData()
+
+    return (
+      <ConfirmPageContainer
+        fromName={fromName}
+        fromAddress={fromAddress}
+        toName={toName}
+        toAddress={toAddress}
+        showEdit={onEdit && !isTxReprice}
+        action={action || getMethodName(name) || this.context.t('contractInteraction')}
+        title={title}
+        titleComponent={this.renderTitleComponent()}
+        subtitle={subtitle}
+        subtitleComponent={this.renderSubtitleComponent()}
+        hideSubtitle={hideSubtitle}
+        summaryComponent={summaryComponent}
+        detailsComponent={this.renderDetails()}
+        dataComponent={this.renderData()}
+        contentComponent={contentComponent}
+        nonce={nonce}
+        unapprovedTxCount={unapprovedTxCount}
+        assetImage={assetImage}
+        identiconAddress={identiconAddress}
+        errorMessage={errorMessage || submitError}
+        errorKey={propsErrorKey || errorKey}
+        warning={warning}
+        totalTx={totalTx}
+        positionOfCurrentTx={positionOfCurrentTx}
+        nextTxId={nextTxId}
+        prevTxId={prevTxId}
+        showNavigation={showNavigation}
+        onNextTx={(txId) => this.handleNextTx(txId)}
+        firstTx={firstTx}
+        lastTx={lastTx}
+        ofText={ofText}
+        requestsWaitingText={requestsWaitingText}
+        disabled={!propsValid || !valid || submitting}
+        onEdit={() => this.handleEdit()}
+        onCancelAll={() => this.handleCancelAll()}
+        onCancel={() => this.handleCancel()}
+        onSubmit={() => this.handleSubmit()}
+      />
+    )
+  }
+}
+
+export function getMethodName (camelCase) {
+  if (!camelCase || typeof camelCase !== 'string') {
+    return ''
+  }
+
+  return camelCase
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z])([a-z])/g, ' $1$2')
+    .replace(/ +/g, ' ')
+}
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
new file mode 100644
index 000000000..83543f1a4
--- /dev/null
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -0,0 +1,242 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import R from 'ramda'
+import contractMap from 'eth-contract-metadata'
+import ConfirmTransactionBase from './confirm-transaction-base.component'
+import {
+  clearConfirmTransaction,
+  updateGasAndCalculate,
+} from '../../ducks/confirm-transaction/confirm-transaction.duck'
+import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal, setMetaMetricsSendCount } from '../../store/actions'
+import {
+  INSUFFICIENT_FUNDS_ERROR_KEY,
+  GAS_LIMIT_TOO_LOW_ERROR_KEY,
+} from '../../helpers/constants/error-keys'
+import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util'
+import { isBalanceSufficient, calcGasTotal } from '../../components/app/send/send.utils'
+import { conversionGreaterThan } from '../../helpers/utils/conversion-util'
+import { MIN_GAS_LIMIT_DEC } from '../../components/app/send/send.constants'
+import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util'
+import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors'
+
+const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
+  return {
+    ...acc,
+    [base.toLowerCase()]: contractMap[base],
+  }
+}, {})
+
+const mapStateToProps = (state, props) => {
+  const { toAddress: propsToAddress } = props
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+  const { confirmTransaction, metamask, gas } = state
+  const {
+    ethTransactionAmount,
+    ethTransactionFee,
+    ethTransactionTotal,
+    fiatTransactionAmount,
+    fiatTransactionFee,
+    fiatTransactionTotal,
+    hexTransactionAmount,
+    hexTransactionFee,
+    hexTransactionTotal,
+    tokenData,
+    methodData,
+    txData,
+    tokenProps,
+    nonce,
+  } = confirmTransaction
+  const { txParams = {}, lastGasPrice, id: transactionId } = txData
+  const {
+    from: fromAddress,
+    to: txParamsToAddress,
+    gasPrice,
+    gas: gasLimit,
+    value: amount,
+  } = txParams
+  const accounts = getMetaMaskAccounts(state)
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+    selectedAddress,
+    selectedAddressTxList,
+    assetImages,
+    network,
+    unapprovedTxs,
+    metaMetricsSendCount,
+  } = metamask
+  const assetImage = assetImages[txParamsToAddress]
+
+  const {
+    customGasLimit,
+    customGasPrice,
+  } = gas
+
+  const { balance } = accounts[selectedAddress]
+  const { name: fromName } = identities[selectedAddress]
+  const toAddress = propsToAddress || txParamsToAddress
+  const toName = identities[toAddress]
+    ? identities[toAddress].name
+    : (
+      casedContractMap[toAddress]
+        ? casedContractMap[toAddress].name
+        : addressSlicer(checksumAddress(toAddress))
+    )
+
+  const isTxReprice = Boolean(lastGasPrice)
+
+  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
+  const transactionStatus = transaction ? transaction.status : ''
+
+  const currentNetworkUnapprovedTxs = R.filter(
+    ({ metamaskNetworkId }) => metamaskNetworkId === network,
+    unapprovedTxs,
+  )
+  const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount,
+    gasTotal: calcGasTotal(gasLimit, gasPrice),
+    balance,
+    conversionRate,
+  })
+
+  return {
+    balance,
+    fromAddress,
+    fromName,
+    toAddress,
+    toName,
+    ethTransactionAmount,
+    ethTransactionFee,
+    ethTransactionTotal,
+    fiatTransactionAmount,
+    fiatTransactionFee,
+    fiatTransactionTotal,
+    hexTransactionAmount,
+    hexTransactionFee,
+    hexTransactionTotal,
+    txData,
+    tokenData,
+    methodData,
+    tokenProps,
+    isTxReprice,
+    currentCurrency,
+    conversionRate,
+    transactionStatus,
+    nonce,
+    assetImage,
+    unapprovedTxs,
+    unapprovedTxCount,
+    currentNetworkUnapprovedTxs,
+    customGas: {
+      gasLimit: customGasLimit || gasLimit,
+      gasPrice: customGasPrice || gasPrice,
+    },
+    advancedInlineGasShown: getAdvancedInlineGasShown(state),
+    insufficientBalance,
+    hideSubtitle: (!isMainnet && !showFiatInTestnets),
+    hideFiatConversion: (!isMainnet && !showFiatInTestnets),
+    metaMetricsSendCount,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+    clearSend: () => dispatch(clearSend()),
+    showTransactionConfirmedModal: ({ onSubmit }) => {
+      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }))
+    },
+    showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
+      return dispatch(showModal({ name: 'CUSTOMIZE_GAS', txData, onSubmit, validate }))
+    },
+    updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
+      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
+    },
+    showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
+      return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
+    },
+    cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
+    cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
+    sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
+    setMetaMetricsSendCount: val => dispatch(setMetaMetricsSendCount(val)),
+  }
+}
+
+const getValidateEditGas = ({ balance, conversionRate, txData }) => {
+  const { txParams: { value: amount } = {} } = txData
+
+  return ({ gasLimit, gasPrice }) => {
+    const gasTotal = getHexGasTotal({ gasLimit, gasPrice })
+    const hasSufficientBalance = isBalanceSufficient({
+      amount,
+      gasTotal,
+      balance,
+      conversionRate,
+    })
+
+    if (!hasSufficientBalance) {
+      return {
+        valid: false,
+        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
+      }
+    }
+
+    const gasLimitTooLow = gasLimit && conversionGreaterThan(
+      {
+        value: MIN_GAS_LIMIT_DEC,
+        fromNumericBase: 'dec',
+        conversionRate,
+      },
+      {
+        value: gasLimit,
+        fromNumericBase: 'hex',
+      },
+    )
+
+    if (gasLimitTooLow) {
+      return {
+        valid: false,
+        errorKey: GAS_LIMIT_TOO_LOW_ERROR_KEY,
+      }
+    }
+
+    return {
+      valid: true,
+    }
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { balance, conversionRate, txData, unapprovedTxs } = stateProps
+  const {
+    cancelAllTransactions: dispatchCancelAllTransactions,
+    showCustomizeGasModal: dispatchShowCustomizeGasModal,
+    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  const validateEditGas = getValidateEditGas({ balance, conversionRate, txData })
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    showCustomizeGasModal: () => dispatchShowCustomizeGasModal({
+      txData,
+      onSubmit: customGas => dispatchUpdateGasAndCalculate(customGas),
+      validate: validateEditGas,
+    }),
+    cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
+    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(ConfirmTransactionBase)
diff --git a/ui/app/components/pages/confirm-transaction-base/index.js b/ui/app/pages/confirm-transaction-base/index.js
index 9996e9aeb..9996e9aeb 100644
--- a/ui/app/components/pages/confirm-transaction-base/index.js
+++ b/ui/app/pages/confirm-transaction-base/index.js
diff --git a/ui/app/components/pages/confirm-transaction-base/tests/confirm-transaction-base.component.test.js b/ui/app/pages/confirm-transaction-base/tests/confirm-transaction-base.component.test.js
index 8ca7ca4e7..8ca7ca4e7 100644
--- a/ui/app/components/pages/confirm-transaction-base/tests/confirm-transaction-base.component.test.js
+++ b/ui/app/pages/confirm-transaction-base/tests/confirm-transaction-base.component.test.js
diff --git a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
new file mode 100644
index 000000000..cd471b822
--- /dev/null
+++ b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -0,0 +1,92 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Redirect } from 'react-router-dom'
+import Loading from '../../components/ui/loading-screen'
+import {
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TRANSFER_FROM_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
+} from '../../helpers/constants/routes'
+import { isConfirmDeployContract } from '../../helpers/utils/transactions.util'
+import {
+  TOKEN_METHOD_TRANSFER,
+  TOKEN_METHOD_APPROVE,
+  TOKEN_METHOD_TRANSFER_FROM,
+} from '../../helpers/constants/transactions'
+
+export default class ConfirmTransactionSwitch extends Component {
+  static propTypes = {
+    txData: PropTypes.object,
+    methodData: PropTypes.object,
+    fetchingData: PropTypes.bool,
+    isEtherTransaction: PropTypes.bool,
+  }
+
+  redirectToTransaction () {
+    const {
+      txData,
+      methodData: { name },
+      fetchingData,
+      isEtherTransaction,
+    } = this.props
+    const { id, txParams: { data } = {} } = txData
+
+    if (fetchingData) {
+      return <Loading />
+    }
+
+    if (isConfirmDeployContract(txData)) {
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
+      return <Redirect to={{ pathname }} />
+    }
+
+    if (isEtherTransaction) {
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+      return <Redirect to={{ pathname }} />
+    }
+
+    if (data) {
+      const methodName = name && name.toLowerCase()
+
+      switch (methodName) {
+        case TOKEN_METHOD_TRANSFER: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        case TOKEN_METHOD_APPROVE: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        case TOKEN_METHOD_TRANSFER_FROM: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TRANSFER_FROM_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        default: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+      }
+    }
+
+    const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+    return <Redirect to={{ pathname }} />
+  }
+
+  render () {
+    const { txData } = this.props
+
+    if (txData.txParams) {
+      return this.redirectToTransaction()
+    } else if (txData.msgParams) {
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
+      return <Redirect to={{ pathname }} />
+    }
+
+    return <Loading />
+  }
+}
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
index 7f2c36af2..7f2c36af2 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
+++ b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
index 536aa5212..536aa5212 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
+++ b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
diff --git a/ui/app/components/pages/confirm-transaction-switch/index.js b/ui/app/pages/confirm-transaction-switch/index.js
index c288acb1a..c288acb1a 100644
--- a/ui/app/components/pages/confirm-transaction-switch/index.js
+++ b/ui/app/pages/confirm-transaction-switch/index.js
diff --git a/ui/app/pages/confirm-transaction/conf-tx.js b/ui/app/pages/confirm-transaction/conf-tx.js
new file mode 100644
index 000000000..f9af6624e
--- /dev/null
+++ b/ui/app/pages/confirm-transaction/conf-tx.js
@@ -0,0 +1,225 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const actions = require('../../store/actions')
+const txHelper = require('../../../lib/tx-helper')
+const log = require('loglevel')
+const R = require('ramda')
+
+const SignatureRequest = require('../../components/app/signature-request')
+const Loading = require('../../components/ui/loading-screen')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+const { getMetaMaskAccounts } = require('../../selectors/selectors')
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(ConfirmTxScreen)
+
+function mapStateToProps (state) {
+  const { metamask } = state
+  const {
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+  } = metamask
+
+  return {
+    identities: state.metamask.identities,
+    accounts: getMetaMaskAccounts(state),
+    selectedAddress: state.metamask.selectedAddress,
+    unapprovedTxs: state.metamask.unapprovedTxs,
+    unapprovedMsgs: state.metamask.unapprovedMsgs,
+    unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
+    unapprovedTypedMessages: state.metamask.unapprovedTypedMessages,
+    index: state.appState.currentView.context,
+    warning: state.appState.warning,
+    network: state.metamask.network,
+    provider: state.metamask.provider,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+    blockGasLimit: state.metamask.currentBlockGasLimit,
+    computedBalances: state.metamask.computedBalances,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+    send: state.metamask.send,
+    selectedAddressTxList: state.metamask.selectedAddressTxList,
+  }
+}
+
+inherits(ConfirmTxScreen, Component)
+function ConfirmTxScreen () {
+  Component.call(this)
+}
+
+ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () {
+  const {
+    unapprovedMsgCount = 0,
+    unapprovedPersonalMsgCount = 0,
+    unapprovedTypedMessagesCount = 0,
+  } = this.props
+
+  return unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount
+}
+
+ConfirmTxScreen.prototype.componentDidMount = function () {
+  const {
+    unapprovedTxs = {},
+    network,
+    send,
+  } = this.props
+  const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
+
+  if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+}
+
+ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
+  const {
+    unapprovedTxs = {},
+    network,
+    selectedAddressTxList,
+    send,
+    history,
+    match: { params: { id: transactionId } = {} },
+  } = this.props
+
+  let prevTx
+
+  if (transactionId) {
+    prevTx = R.find(({ id }) => id + '' === transactionId)(selectedAddressTxList)
+  } else {
+    const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps
+    const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network)
+    const prevTxData = prevUnconfTxList[prevIndex] || {}
+    prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {}
+  }
+
+  const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
+
+  if (prevTx && prevTx.status === 'dropped') {
+    this.props.dispatch(actions.showModal({
+      name: 'TRANSACTION_CONFIRMED',
+      onSubmit: () => history.push(DEFAULT_ROUTE),
+    }))
+
+    return
+  }
+
+  if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+}
+
+ConfirmTxScreen.prototype.getTxData = function () {
+  const {
+    network,
+    index,
+    unapprovedTxs,
+    unapprovedMsgs,
+    unapprovedPersonalMsgs,
+    unapprovedTypedMessages,
+    match: { params: { id: transactionId } = {} },
+  } = this.props
+
+  const unconfTxList = txHelper(
+    unapprovedTxs,
+    unapprovedMsgs,
+    unapprovedPersonalMsgs,
+    unapprovedTypedMessages,
+    network
+  )
+
+  log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`)
+
+  return transactionId
+    ? R.find(({ id }) => id + '' === transactionId)(unconfTxList)
+    : unconfTxList[index]
+}
+
+ConfirmTxScreen.prototype.render = function () {
+  const props = this.props
+  const {
+    currentCurrency,
+    conversionRate,
+    blockGasLimit,
+  } = props
+
+  var txData = this.getTxData() || {}
+  const { msgParams } = txData
+  log.debug('msgParams detected, rendering pending msg')
+
+  return msgParams
+    ? h(SignatureRequest, {
+      // Properties
+      txData: txData,
+      key: txData.id,
+      selectedAddress: props.selectedAddress,
+      accounts: props.accounts,
+      identities: props.identities,
+      conversionRate,
+      currentCurrency,
+      blockGasLimit,
+      // Actions
+      signMessage: this.signMessage.bind(this, txData),
+      signPersonalMessage: this.signPersonalMessage.bind(this, txData),
+      signTypedMessage: this.signTypedMessage.bind(this, txData),
+      cancelMessage: this.cancelMessage.bind(this, txData),
+      cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
+      cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
+    })
+    : h(Loading)
+}
+
+ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing message')
+  var params = msgData.msgParams
+  params.metamaskId = msgData.id
+  this.stopPropagation(event)
+  return 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
+  this.stopPropagation(event)
+  return this.props.dispatch(actions.signPersonalMsg(params))
+}
+
+ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing typed message')
+  var params = msgData.msgParams
+  params.metamaskId = msgData.id
+  this.stopPropagation(event)
+  return this.props.dispatch(actions.signTypedMsg(params))
+}
+
+ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
+  log.info('canceling message')
+  this.stopPropagation(event)
+  return this.props.dispatch(actions.cancelMsg(msgData))
+}
+
+ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
+  log.info('canceling personal message')
+  this.stopPropagation(event)
+  return this.props.dispatch(actions.cancelPersonalMsg(msgData))
+}
+
+ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) {
+  log.info('canceling typed message')
+  this.stopPropagation(event)
+  return this.props.dispatch(actions.cancelTypedMsg(msgData))
+}
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
new file mode 100644
index 000000000..35b8dc5aa
--- /dev/null
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
@@ -0,0 +1,160 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route } from 'react-router-dom'
+import Loading from '../../components/ui/loading-screen'
+import ConfirmTransactionSwitch from '../confirm-transaction-switch'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import ConfirmSendEther from '../confirm-send-ether'
+import ConfirmSendToken from '../confirm-send-token'
+import ConfirmDeployContract from '../confirm-deploy-contract'
+import ConfirmApprove from '../confirm-approve'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
+import ConfTx from './conf-tx'
+import {
+  DEFAULT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TRANSFER_FROM_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
+} from '../../helpers/constants/routes'
+
+export default class ConfirmTransaction extends Component {
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    totalUnapprovedCount: PropTypes.number.isRequired,
+    match: PropTypes.object,
+    send: PropTypes.object,
+    unconfirmedTransactions: PropTypes.array,
+    setTransactionToConfirm: PropTypes.func,
+    confirmTransaction: PropTypes.object,
+    clearConfirmTransaction: PropTypes.func,
+    fetchBasicGasAndTimeEstimates: PropTypes.func,
+  }
+
+  getParamsTransactionId () {
+    const { match: { params: { id } = {} } } = this.props
+    return id || null
+  }
+
+  componentDidMount () {
+    const {
+      totalUnapprovedCount = 0,
+      send = {},
+      history,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+      fetchBasicGasAndTimeEstimates,
+    } = this.props
+
+    if (!totalUnapprovedCount && !send.to) {
+      history.replace(DEFAULT_ROUTE)
+      return
+    }
+
+    if (!transactionId) {
+      fetchBasicGasAndTimeEstimates()
+      this.setTransactionToConfirm()
+    }
+  }
+
+  componentDidUpdate () {
+    const {
+      setTransactionToConfirm,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+      clearConfirmTransaction,
+    } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
+
+    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
+      clearConfirmTransaction()
+      setTransactionToConfirm(paramsTransactionId)
+      return
+    }
+
+    if (!transactionId) {
+      this.setTransactionToConfirm()
+    }
+  }
+
+  setTransactionToConfirm () {
+    const {
+      history,
+      unconfirmedTransactions,
+      setTransactionToConfirm,
+    } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
+
+    if (paramsTransactionId) {
+      // Check to make sure params ID is valid
+      const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId)
+
+      if (!tx) {
+        history.replace(DEFAULT_ROUTE)
+      } else {
+        setTransactionToConfirm(paramsTransactionId)
+      }
+    } else if (unconfirmedTransactions.length) {
+      const totalUnconfirmed = unconfirmedTransactions.length
+      const transaction = unconfirmedTransactions[totalUnconfirmed - 1]
+      const { id: transactionId, loadingDefaults } = transaction
+
+      if (!loadingDefaults) {
+        setTransactionToConfirm(transactionId)
+      }
+    }
+  }
+
+  render () {
+    const { confirmTransaction: { txData: { id } } = {} } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
+
+    // Show routes when state.confirmTransaction has been set and when either the ID in the params
+    // isn't specified or is specified and matches the ID in state.confirmTransaction in order to
+    // support URLs of /confirm-transaction or /confirm-transaction/<transactionId>
+    return id && (!paramsTransactionId || paramsTransactionId === id + '')
+      ? (
+        <Switch>
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_DEPLOY_CONTRACT_PATH}`}
+            component={ConfirmDeployContract}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
+            component={ConfirmTransactionBase}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_ETHER_PATH}`}
+            component={ConfirmSendEther}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_TOKEN_PATH}`}
+            component={ConfirmSendToken}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
+            component={ConfirmApprove}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TRANSFER_FROM_PATH}`}
+            component={ConfirmTokenTransactionBase}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
+            component={ConfTx}
+          />
+          <Route path="*" component={ConfirmTransactionSwitch} />
+        </Switch>
+      )
+      : <Loading />
+  }
+}
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
new file mode 100644
index 000000000..2dd5e833e
--- /dev/null
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
@@ -0,0 +1,37 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import {
+  setTransactionToConfirm,
+  clearConfirmTransaction,
+} from '../../ducks/confirm-transaction/confirm-transaction.duck'
+import {
+  fetchBasicGasAndTimeEstimates,
+} from '../../ducks/gas/gas.duck'
+import ConfirmTransaction from './confirm-transaction.component'
+import { getTotalUnapprovedCount } from '../../selectors/selectors'
+import { unconfirmedTransactionsListSelector } from '../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  const { metamask: { send }, confirmTransaction } = state
+
+  return {
+    totalUnapprovedCount: getTotalUnapprovedCount(state),
+    send,
+    confirmTransaction,
+    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps),
+)(ConfirmTransaction)
diff --git a/ui/app/components/pages/confirm-transaction/index.js b/ui/app/pages/confirm-transaction/index.js
index 4bf42d85c..4bf42d85c 100644
--- a/ui/app/components/pages/confirm-transaction/index.js
+++ b/ui/app/pages/confirm-transaction/index.js
diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js
new file mode 100644
index 000000000..617fb8833
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/account-list.js
@@ -0,0 +1,205 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const genAccountLink = require('../../../../lib/account-link.js')
+const Select = require('react-select').default
+import Button from '../../../components/ui/button'
+
+class AccountList extends Component {
+    constructor (props, context) {
+        super(props)
+    }
+
+    getHdPaths () {
+      return [
+        {
+          label: `Ledger Live`,
+          value: `m/44'/60'/0'/0/0`,
+        },
+        {
+          label: `Legacy (MEW / MyCrypto)`,
+          value: `m/44'/60'/0'`,
+        },
+      ]
+    }
+
+    goToNextPage = () => {
+      // If we have < 5 accounts, it's restricted by BIP-44
+      if (this.props.accounts.length === 5) {
+        this.props.getPage(this.props.device, 1, this.props.selectedPath)
+      } else {
+        this.props.onAccountRestriction()
+      }
+    }
+
+    goToPreviousPage = () => {
+      this.props.getPage(this.props.device, -1, this.props.selectedPath)
+    }
+
+    renderHdPathSelector () {
+      const { onPathChange, selectedPath } = this.props
+
+      const options = this.getHdPaths()
+      return h('div', [
+        h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')),
+        h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')),
+        h('div.hw-connect__hdPath', [
+          h(Select, {
+            className: 'hw-connect__hdPath__select',
+            name: 'hd-path-select',
+            clearable: false,
+            value: selectedPath,
+            options,
+            onChange: (opt) => {
+              onPathChange(opt.value)
+            },
+          }),
+        ]),
+      ])
+    }
+
+    capitalizeDevice (device) {
+      return device.slice(0, 1).toUpperCase() + device.slice(1)
+    }
+
+    renderHeader () {
+      const { device } = this.props
+      return (
+        h('div.hw-connect', [
+
+          h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`),
+
+          device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
+
+          h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')),
+          h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
+        ])
+      )
+    }
+
+    renderAccounts () {
+        return h('div.hw-account-list', [
+            this.props.accounts.map((a, i) => {
+
+                return h('div.hw-account-list__item', { key: a.address }, [
+                h('div.hw-account-list__item__radio', [
+                    h('input', {
+                        type: 'radio',
+                        name: 'selectedAccount',
+                        id: `address-${i}`,
+                        value: a.index,
+                        onChange: (e) => this.props.onAccountChange(e.target.value),
+                        checked: this.props.selectedAccount === a.index.toString(),
+                    }),
+                    h(
+                    'label.hw-account-list__item__label',
+                    {
+                        htmlFor: `address-${i}`,
+                    },
+                    [
+                      h('span.hw-account-list__item__index', a.index + 1),
+                      `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
+                      h('span.hw-account-list__item__balance', `${a.balance}`),
+                    ]),
+                ]),
+                h(
+                    'a.hw-account-list__item__link',
+                    {
+                    href: genAccountLink(a.address, this.props.network),
+                    target: '_blank',
+                    title: this.context.t('etherscanView'),
+                    },
+                    h('img', { src: 'images/popout.svg' })
+                ),
+                ])
+            }),
+        ])
+    }
+
+  renderPagination () {
+    return h('div.hw-list-pagination', [
+      h(
+        'button.hw-list-pagination__button',
+        {
+          onClick: this.goToPreviousPage,
+        },
+        `< ${this.context.t('prev')}`
+      ),
+
+      h(
+        'button.hw-list-pagination__button',
+        {
+          onClick: this.goToNextPage,
+        },
+        `${this.context.t('next')} >`
+      ),
+    ])
+  }
+
+  renderButtons () {
+    const disabled = this.props.selectedAccount === null
+    const buttonProps = {}
+    if (disabled) {
+      buttonProps.disabled = true
+    }
+
+    return h('div.new-account-connect-form__buttons', {}, [
+      h(Button, {
+        type: 'default',
+        large: true,
+        className: 'new-account-connect-form__button',
+        onClick: this.props.onCancel.bind(this),
+      }, [this.context.t('cancel')]),
+
+      h(Button, {
+        type: 'confirm',
+        large: true,
+        className: 'new-account-connect-form__button unlock',
+        disabled,
+        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+      }, [this.context.t('unlock')]),
+    ])
+  }
+
+  renderForgetDevice () {
+    return h('div.hw-forget-device-container', {}, [
+      h('a', {
+        onClick: this.props.onForgetDevice.bind(this, this.props.device),
+      }, this.context.t('forgetDevice')),
+    ])
+  }
+
+  render () {
+    return h('div.new-account-connect-form.account-list', {}, [
+        this.renderHeader(),
+        this.renderAccounts(),
+        this.renderPagination(),
+        this.renderButtons(),
+        this.renderForgetDevice(),
+    ])
+  }
+
+}
+
+
+AccountList.propTypes = {
+    onPathChange: PropTypes.func.isRequired,
+    selectedPath: PropTypes.string.isRequired,
+    device: PropTypes.string.isRequired,
+    accounts: PropTypes.array.isRequired,
+    onAccountChange: PropTypes.func.isRequired,
+    onForgetDevice: PropTypes.func.isRequired,
+    getPage: PropTypes.func.isRequired,
+    network: PropTypes.string,
+    selectedAccount: PropTypes.string,
+    history: PropTypes.object,
+    onUnlockAccount: PropTypes.func,
+    onCancel: PropTypes.func,
+    onAccountRestriction: PropTypes.func,
+}
+
+AccountList.contextTypes = {
+    t: PropTypes.func,
+}
+
+module.exports = AccountList
diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js
new file mode 100644
index 000000000..7e9dee970
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js
@@ -0,0 +1,197 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+import Button from '../../../components/ui/button'
+
+class ConnectScreen extends Component {
+    constructor (props, context) {
+        super(props)
+        this.state = {
+          selectedDevice: null,
+        }
+    }
+
+    connect = () => {
+      if (this.state.selectedDevice) {
+        this.props.connectToHardwareWallet(this.state.selectedDevice)
+      }
+      return null
+    }
+
+    renderConnectToTrezorButton () {
+        return h(
+            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/trezor-logo.svg',
+            })
+        )
+    }
+
+    renderConnectToLedgerButton () {
+        return h(
+          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/ledger-logo.svg',
+            })
+        )
+    }
+
+    renderButtons () {
+      return (
+        h('div', {}, [
+          h('div.hw-connect__btn-wrapper', {}, [
+            this.renderConnectToLedgerButton(),
+            this.renderConnectToTrezorButton(),
+          ]),
+          h(Button, {
+            type: 'confirm',
+            large: true,
+            className: 'hw-connect__connect-btn',
+            onClick: this.connect,
+            disabled: !this.state.selectedDevice,
+          }, this.context.t('connect')),
+        ])
+      )
+    }
+
+    renderUnsupportedBrowser () {
+        return (
+            h('div.new-account-connect-form.unsupported-browser', {}, [
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
+                ]),
+                h(Button, {
+                  type: 'primary',
+                  large: true,
+                  onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                  }),
+                }, this.context.t('downloadGoogleChrome')),
+            ])
+        )
+    }
+
+    renderHeader () {
+        return (
+            h('div.hw-connect__header', {}, [
+                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
+                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
+            ])
+        )
+    }
+
+    getAffiliateLinks () {
+      const links = {
+        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+        ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
+      }
+
+      const text = this.context.t('orderOneHere')
+      const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
+    }
+
+    renderTrezorAffiliateLink () {
+        return h('div.hw-connect__get-hw', {}, [
+            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+            this.getAffiliateLinks(),
+          ])
+    }
+
+
+    scrollToTutorial = (e) => {
+      if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
+    }
+
+    renderLearnMore () {
+        return (
+            h('p.hw-connect__learn-more', {
+                onClick: this.scrollToTutorial,
+            }, [
+                this.context.t('learnMore'),
+                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
+            ])
+        )
+    }
+
+    renderTutorialSteps () {
+        const steps = [
+            {
+                asset: 'hardware-wallet-step-1',
+                dimensions: {width: '225px', height: '75px'},
+             },
+             {
+                asset: 'hardware-wallet-step-2',
+                dimensions: {width: '300px', height: '100px'},
+             },
+             {
+                asset: 'hardware-wallet-step-3',
+                dimensions: {width: '120px', height: '90px'},
+             },
+        ]
+
+        return h('.hw-tutorial', {
+          ref: node => { this.referenceNode = node },
+        },
+            steps.map((step, i) => (
+            h('div.hw-connect', {}, [
+                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
+                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
+                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+            ])
+            ))
+        )
+    }
+
+    renderFooter () {
+        return (
+            h('div.hw-connect__footer', {}, [
+                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
+                this.renderButtons(),
+                h('p.hw-connect__footer__msg', {}, [
+                    this.context.t(`havingTroubleConnecting`),
+                    h('a.hw-connect__footer__link', {
+                        href: 'https://support.metamask.io/',
+                        target: '_blank',
+                      }, this.context.t('getHelp')),
+                ]),
+            ])
+        )
+    }
+
+    renderConnectScreen () {
+        return (
+            h('div.new-account-connect-form', {}, [
+                this.renderHeader(),
+                this.renderButtons(),
+                this.renderTrezorAffiliateLink(),
+                this.renderLearnMore(),
+                this.renderTutorialSteps(),
+                this.renderFooter(),
+            ])
+        )
+    }
+
+    render () {
+        if (this.props.browserSupported) {
+            return this.renderConnectScreen()
+        }
+        return this.renderUnsupportedBrowser()
+    }
+}
+
+ConnectScreen.propTypes = {
+    connectToHardwareWallet: PropTypes.func.isRequired,
+    browserSupported: PropTypes.bool.isRequired,
+}
+
+ConnectScreen.contextTypes = {
+    t: PropTypes.func,
+}
+
+module.exports = ConnectScreen
+
diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js
new file mode 100644
index 000000000..1398fa680
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/index.js
@@ -0,0 +1,293 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+const ConnectScreen = require('./connect-screen')
+const AccountList = require('./account-list')
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { formatBalance } = require('../../../helpers/utils/util')
+const { getPlatform } = require('../../../../../app/scripts/lib/util')
+const { PLATFORM_FIREFOX } = require('../../../../../app/scripts/lib/enums')
+
+class ConnectHardwareForm extends Component {
+  constructor (props, context) {
+    super(props)
+    this.state = {
+      error: null,
+      selectedAccount: null,
+      accounts: [],
+      browserSupported: true,
+      unlocked: false,
+      device: null,
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { accounts } = nextProps
+    const newAccounts = this.state.accounts.map(a => {
+      const normalizedAddress = a.address.toLowerCase()
+      const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null
+      a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      return a
+    })
+    this.setState({accounts: newAccounts})
+  }
+
+
+  componentDidMount () {
+    this.checkIfUnlocked()
+  }
+
+  async checkIfUnlocked () {
+    ['trezor', 'ledger'].forEach(async device => {
+      const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
+      if (unlocked) {
+        this.setState({unlocked: true})
+        this.getPage(device, 0, this.props.defaultHdPaths[device])
+      }
+    })
+  }
+
+  connectToHardwareWallet = (device) => {
+    // Ledger hardware wallets are not supported on firefox
+    if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') {
+      this.setState({ browserSupported: false, error: null})
+      return null
+    }
+
+    if (this.state.accounts.length) {
+      return null
+    }
+
+    // Default values
+    this.getPage(device, 0, this.props.defaultHdPaths[device])
+  }
+
+  onPathChange = (path) => {
+    this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
+    this.getPage(this.state.device, 0, path)
+  }
+
+  onAccountChange = (account) => {
+    this.setState({selectedAccount: account.toString(), error: null})
+  }
+
+  onAccountRestriction = () => {
+    this.setState({error: this.context.t('ledgerAccountRestriction') })
+  }
+
+  showTemporaryAlert () {
+    this.props.showAlert(this.context.t('hardwareWalletConnected'))
+    // Autohide the alert after 5 seconds
+    setTimeout(_ => {
+      this.props.hideAlert()
+    }, 5000)
+  }
+
+  getPage = (device, page, hdPath) => {
+    this.props
+      .connectHardware(device, page, hdPath)
+      .then(accounts => {
+        if (accounts.length) {
+
+          // If we just loaded the accounts for the first time
+          // (device previously locked) show the global alert
+          if (this.state.accounts.length === 0 && !this.state.unlocked) {
+            this.showTemporaryAlert()
+          }
+
+          const newState = { unlocked: true, device, error: null }
+          // Default to the first account
+          if (this.state.selectedAccount === null) {
+            accounts.forEach((a, i) => {
+              if (a.address.toLowerCase() === this.props.address) {
+                newState.selectedAccount = a.index.toString()
+              }
+            })
+          // If the page doesn't contain the selected account, let's deselect it
+          } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
+            newState.selectedAccount = null
+          }
+
+
+          // Map accounts with balances
+          newState.accounts = accounts.map(account => {
+            const normalizedAddress = account.address.toLowerCase()
+            const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null
+            account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+            return account
+          })
+
+          this.setState(newState)
+        }
+      })
+      .catch(e => {
+        if (e === 'Window blocked') {
+          this.setState({ browserSupported: false, error: null})
+        } else if (e !== 'Window closed' && e !== 'Popup closed') {
+          this.setState({ error: e.toString() })
+        }
+      })
+  }
+
+  onForgetDevice = (device) => {
+    this.props.forgetDevice(device)
+    .then(_ => {
+      this.setState({
+        error: null,
+        selectedAccount: null,
+        accounts: [],
+        unlocked: false,
+      })
+    }).catch(e => {
+      this.setState({ error: e.toString() })
+    })
+  }
+
+  onUnlockAccount = (device) => {
+
+    if (this.state.selectedAccount === null) {
+      this.setState({ error: this.context.t('accountSelectionRequired') })
+    }
+
+    this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
+    .then(_ => {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Accounts',
+          action: 'Connected Hardware Wallet',
+          name: 'Connected Account with: ' + device,
+        },
+      })
+      this.props.history.push(DEFAULT_ROUTE)
+    }).catch(e => {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Accounts',
+          action: 'Connected Hardware Wallet',
+          name: 'Error connecting hardware wallet',
+        },
+        customVariables: {
+          error: e.toString(),
+        },
+      })
+      this.setState({ error: e.toString() })
+    })
+  }
+
+  onCancel = () => {
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  renderError () {
+    return this.state.error
+      ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
+      : null
+  }
+
+  renderContent () {
+    if (!this.state.accounts.length) {
+      return h(ConnectScreen, {
+        connectToHardwareWallet: this.connectToHardwareWallet,
+        browserSupported: this.state.browserSupported,
+      })
+    }
+
+    return h(AccountList, {
+      onPathChange: this.onPathChange,
+      selectedPath: this.props.defaultHdPaths[this.state.device],
+      device: this.state.device,
+      accounts: this.state.accounts,
+      selectedAccount: this.state.selectedAccount,
+      onAccountChange: this.onAccountChange,
+      network: this.props.network,
+      getPage: this.getPage,
+      history: this.props.history,
+      onUnlockAccount: this.onUnlockAccount,
+      onForgetDevice: this.onForgetDevice,
+      onCancel: this.onCancel,
+      onAccountRestriction: this.onAccountRestriction,
+    })
+  }
+
+  render () {
+    return h('div', [
+      this.renderError(),
+      this.renderContent(),
+    ])
+  }
+}
+
+ConnectHardwareForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  connectHardware: PropTypes.func,
+  checkHardwareStatus: PropTypes.func,
+  forgetDevice: PropTypes.func,
+  showAlert: PropTypes.func,
+  hideAlert: PropTypes.func,
+  unlockHardwareWalletAccount: PropTypes.func,
+  setHardwareWalletDefaultHdPath: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+  network: PropTypes.string,
+  accounts: PropTypes.object,
+  address: PropTypes.string,
+  defaultHdPaths: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const {
+    metamask: { network, selectedAddress, identities = {} },
+  } = state
+  const accounts = getMetaMaskAccounts(state)
+  const numberOfExistingAccounts = Object.keys(identities).length
+  const {
+    appState: { defaultHdPaths },
+  } = state
+
+  return {
+    network,
+    accounts,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+    defaultHdPaths,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setHardwareWalletDefaultHdPath: ({device, path}) => {
+      return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
+    },
+    connectHardware: (deviceName, page, hdPath) => {
+      return dispatch(actions.connectHardware(deviceName, page, hdPath))
+    },
+    checkHardwareStatus: (deviceName, hdPath) => {
+      return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
+    },
+    forgetDevice: (deviceName) => {
+      return dispatch(actions.forgetDevice(deviceName))
+    },
+    unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
+      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+    showAlert: (msg) => dispatch(actions.showAlert(msg)),
+    hideAlert: () => dispatch(actions.hideAlert()),
+  }
+}
+
+ConnectHardwareForm.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(
+  ConnectHardwareForm
+)
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/pages/create-account/import-account/index.js
index 48d8f8838..48d8f8838 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/pages/create-account/import-account/index.js
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
new file mode 100644
index 000000000..17bef763c
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -0,0 +1,170 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const FileInput = require('react-simple-file-input').default
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../components/ui/button'
+
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
+  }
+
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', this.context.t('usedByClients')),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, this.context.t('fileImportFail')),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 34%',
+            fontSize: '15px',
+            display: 'flex',
+            justifyContent: 'center',
+          },
+        }),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          placeholder: this.context.t('enterPassword'),
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+        }),
+
+        h('div.new-account-create-form__buttons', {}, [
+
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'new-account-create-form__button',
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, [this.context.t('cancel')]),
+
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'new-account-create-form__button',
+            onClick: () => this.createNewKeychain(),
+          }, [this.context.t('import')]),
+
+        ]),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
+
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
+
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  createNewKeychain () {
+    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
+    const state = this.state
+
+    if (!state) {
+      const message = this.context.t('validFileImport')
+      return displayWarning(message)
+    }
+
+    const { fileContents } = state
+
+    if (!fileContents) {
+      const message = this.context.t('needImportFile')
+      return displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
+
+    importNewJsonAccount([ fileContents, password ])
+      .then(({ selectedAddress }) => {
+        if (selectedAddress) {
+          history.push(DEFAULT_ROUTE)
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Imported Account with JSON',
+            },
+          })
+          displayWarning(null)
+        } else {
+          displayWarning('Error importing account.')
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Error importing JSON',
+            },
+          })
+          setSelectedAddress(firstAddress)
+        }
+      })
+      .catch(err => err && displayWarning(err.message || err))
+  }
+}
+
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  firstAddress: PropTypes.string,
+  importNewJsonAccount: PropTypes.func,
+  history: PropTypes.object,
+  setSelectedAddress: PropTypes.func,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
+  }
+}
+
+JsonImportSubview.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(JsonImportSubview)
diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js
new file mode 100644
index 000000000..450614e87
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/private-key.js
@@ -0,0 +1,128 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+import Button from '../../../components/ui/button'
+
+PrivateKeyImportView.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
+
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    importNewAccount: (strategy, [ privateKey ]) => {
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+    },
+    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
+  }
+}
+
+inherits(PrivateKeyImportView, Component)
+function PrivateKeyImportView () {
+  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
+  Component.call(this)
+}
+
+PrivateKeyImportView.prototype.render = function () {
+  const { error, displayWarning } = this.props
+
+  return (
+    h('div.new-account-import-form__private-key', [
+
+      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),
+
+      h('div.new-account-import-form__private-key-password-container', [
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: e => this.createKeyringOnEnter(e),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
+
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => {
+            displayWarning(null)
+            this.props.history.push(DEFAULT_ROUTE)
+          },
+        }, [this.context.t('cancel')]),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => this.createNewKeychain(),
+        }, [this.context.t('import')]),
+
+      ]),
+
+      error ? h('span.error', error) : null,
+    ])
+  )
+}
+
+PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+PrivateKeyImportView.prototype.createNewKeychain = function () {
+  const input = document.getElementById('private-key-box')
+  const privateKey = input.value
+  const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
+
+  importNewAccount('Private Key', [ privateKey ])
+    .then(({ selectedAddress }) => {
+      if (selectedAddress) {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Import Account',
+            name: 'Imported Account with Private Key',
+          },
+        })
+        history.push(DEFAULT_ROUTE)
+        displayWarning(null)
+      } else {
+        displayWarning('Error importing account.')
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Import Account',
+            name: 'Error importing with Private Key',
+          },
+        })
+        setSelectedAddress(firstAddress)
+      }
+    })
+    .catch(err => err && displayWarning(err.message || err))
+}
diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/pages/create-account/import-account/seed.js
index d98909baa..d98909baa 100644
--- a/ui/app/components/pages/create-account/import-account/seed.js
+++ b/ui/app/pages/create-account/import-account/seed.js
diff --git a/ui/app/pages/create-account/index.js b/ui/app/pages/create-account/index.js
new file mode 100644
index 000000000..ce84db028
--- /dev/null
+++ b/ui/app/pages/create-account/index.js
@@ -0,0 +1,113 @@
+const Component = require('react').Component
+const { Switch, Route, matchPath } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../store/actions')
+const { getCurrentViewContext } = require('../../selectors/selectors')
+const classnames = require('classnames')
+const NewAccountCreateForm = require('./new-account')
+const NewAccountImportForm = require('./import-account')
+const ConnectHardwareForm = require('./connect-hardware')
+const {
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  CONNECT_HARDWARE_ROUTE,
+} = require('../../helpers/constants/routes')
+
+class CreateAccountPage extends Component {
+  renderTabs () {
+    const { history, location } = this.props
+
+    return h('div.new-account__tabs', [
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: NEW_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
+      }, [
+        this.context.t('create'),
+      ]),
+
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: IMPORT_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
+      }, [
+        this.context.t('import'),
+      ]),
+      h(
+        'div.new-account__tabs__tab',
+        {
+          className: classnames('new-account__tabs__tab', {
+            'new-account__tabs__selected': matchPath(location.pathname, {
+              path: CONNECT_HARDWARE_ROUTE,
+              exact: true,
+            }),
+          }),
+          onClick: () => history.push(CONNECT_HARDWARE_ROUTE),
+        },
+        this.context.t('connect')
+      ),
+    ])
+  }
+
+  render () {
+    return h('div.new-account', {}, [
+      h('div.new-account__header', [
+        h('div.new-account__title', this.context.t('newAccount')),
+        this.renderTabs(),
+      ]),
+      h('div.new-account__form', [
+        h(Switch, [
+          h(Route, {
+            exact: true,
+            path: NEW_ACCOUNT_ROUTE,
+            component: NewAccountCreateForm,
+          }),
+          h(Route, {
+            exact: true,
+            path: IMPORT_ACCOUNT_ROUTE,
+            component: NewAccountImportForm,
+          }),
+          h(Route, {
+            exact: true,
+            path: CONNECT_HARDWARE_ROUTE,
+            component: ConnectHardwareForm,
+          }),
+        ]),
+      ]),
+    ])
+  }
+}
+
+CreateAccountPage.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+CreateAccountPage.contextTypes = {
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => ({
+  displayedForm: getCurrentViewContext(state),
+})
+
+const mapDispatchToProps = dispatch => ({
+  displayForm: form => dispatch(actions.setNewAccountForm(form)),
+  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+  showExportPrivateKeyModal: () => {
+    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+  },
+  hideModal: () => dispatch(actions.hideModal()),
+  setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
+})
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
diff --git a/ui/app/pages/create-account/new-account.js b/ui/app/pages/create-account/new-account.js
new file mode 100644
index 000000000..316fbe6f1
--- /dev/null
+++ b/ui/app/pages/create-account/new-account.js
@@ -0,0 +1,130 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../store/actions')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+import Button from '../../components/ui/button'
+
+class NewAccountCreateForm extends Component {
+  constructor (props, context) {
+    super(props)
+
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: '',
+      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
+    }
+  }
+
+  render () {
+    const { newAccountName, defaultAccountName } = this.state
+    const { history, createAccount } = this.props
+
+    return h('div.new-account-create-form', [
+
+      h('div.new-account-create-form__input-label', {}, [
+        this.context.t('accountName'),
+      ]),
+
+      h('div.new-account-create-form__input-wrapper', {}, [
+        h('input.new-account-create-form__input', {
+          value: newAccountName,
+          placeholder: defaultAccountName,
+          onChange: event => this.setState({ newAccountName: event.target.value }),
+        }, []),
+      ]),
+
+      h('div.new-account-create-form__buttons', {}, [
+
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => history.push(DEFAULT_ROUTE),
+        }, [this.context.t('cancel')]),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => {
+            createAccount(newAccountName || defaultAccountName)
+              .then(() => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Accounts',
+                    action: 'Add New Account',
+                    name: 'Added New Account',
+                  },
+                })
+                history.push(DEFAULT_ROUTE)
+              })
+              .catch((e) => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Accounts',
+                    action: 'Add New Account',
+                    name: 'Error',
+                  },
+                  customVariables: {
+                    errorMessage: e.message,
+                  },
+                })
+              })
+          },
+        }, [this.context.t('create')]),
+
+      ]),
+
+    ])
+  }
+}
+
+NewAccountCreateForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
+    hideModal: () => dispatch(actions.hideModal()),
+    createAccount: newAccountName => {
+      return dispatch(actions.addNewAccount())
+        .then(newAccountAddress => {
+          if (newAccountName) {
+            dispatch(actions.setAccountLabel(newAccountAddress, newAccountName))
+          }
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+  }
+}
+
+NewAccountCreateForm.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
+
diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js
new file mode 100644
index 000000000..5e67a2244
--- /dev/null
+++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js
@@ -0,0 +1,71 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route } from 'react-router-dom'
+import NewAccount from './new-account'
+import ImportWithSeedPhrase from './import-with-seed-phrase'
+import {
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  INITIALIZE_SEED_PHRASE_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class CreatePassword extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    isInitialized: PropTypes.bool,
+    onCreateNewAccount: PropTypes.func,
+    onCreateNewAccountFromSeed: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { isInitialized, history } = this.props
+
+    if (isInitialized) {
+      history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+    }
+  }
+
+  render () {
+    const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props
+
+    return (
+      <div className="first-time-flow__wrapper">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+        <Switch>
+          <Route
+            exact
+            path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
+            render={props => (
+              <ImportWithSeedPhrase
+                { ...props }
+                onSubmit={onCreateNewAccountFromSeed}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={INITIALIZE_CREATE_PASSWORD_ROUTE}
+            render={props => (
+              <NewAccount
+                { ...props }
+                onSubmit={onCreateNewAccount}
+              />
+            )}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.container.js b/ui/app/pages/first-time-flow/create-password/create-password.container.js
index 89106f016..89106f016 100644
--- a/ui/app/components/pages/first-time-flow/create-password/create-password.container.js
+++ b/ui/app/pages/first-time-flow/create-password/create-password.container.js
diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
new file mode 100644
index 000000000..433dad6e2
--- /dev/null
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@@ -0,0 +1,256 @@
+import {validateMnemonic} from 'bip39'
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TextField from '../../../../components/ui/text-field'
+import Button from '../../../../components/ui/button'
+import {
+  INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
+} from '../../../../helpers/constants/routes'
+
+export default class ImportWithSeedPhrase extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    onSubmit: PropTypes.func.isRequired,
+  }
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: '',
+    passwordError: '',
+    confirmPasswordError: '',
+    termsChecked: false,
+  }
+
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .trim()
+      .match(/\w+/g)
+      .join(' ')
+  }
+
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = ''
+
+    if (seedPhrase) {
+      const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase)
+      if (parsedSeedPhrase.split(' ').length !== 12) {
+        seedPhraseError = this.context.t('seedPhraseReq')
+      } else if (!validateMnemonic(parsedSeedPhrase)) {
+        seedPhraseError = this.context.t('invalidSeedPhrase')
+      }
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
+
+  handlePasswordChange (password) {
+    const { t } = this.context
+
+    this.setState(state => {
+      const { confirmPassword } = state
+      let confirmPasswordError = ''
+      let passwordError = ''
+
+      if (password && password.length < 8) {
+        passwordError = t('passwordNotLongEnough')
+      }
+
+      if (confirmPassword && password !== confirmPassword) {
+        confirmPasswordError = t('passwordsDontMatch')
+      }
+
+      return {
+        password,
+        passwordError,
+        confirmPasswordError,
+      }
+    })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { t } = this.context
+
+    this.setState(state => {
+      const { password } = state
+      let confirmPasswordError = ''
+
+      if (password !== confirmPassword) {
+        confirmPasswordError = t('passwordsDontMatch')
+      }
+
+      return {
+        confirmPassword,
+        confirmPasswordError,
+      }
+    })
+  }
+
+  handleImport = async event => {
+    event.preventDefault()
+
+    if (!this.isValid()) {
+      return
+    }
+
+    const { password, seedPhrase } = this.state
+    const { history, onSubmit } = this.props
+
+    try {
+      await onSubmit(password, this.parseSeedPhrase(seedPhrase))
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Onboarding',
+          action: 'Import Seed Phrase',
+          name: 'Import Complete',
+        },
+      })
+      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+    } catch (error) {
+      this.setState({ seedPhraseError: error.message })
+    }
+  }
+
+  isValid () {
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      passwordError,
+      confirmPasswordError,
+      seedPhraseError,
+    } = this.state
+
+    if (!password || !confirmPassword || !seedPhrase || password !== confirmPassword) {
+      return false
+    }
+
+    if (password.length < 8) {
+      return false
+    }
+
+    return !passwordError && !confirmPasswordError && !seedPhraseError
+  }
+
+  toggleTermsCheck = () => {
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Import Seed Phrase',
+        name: 'Check ToS',
+      },
+    })
+
+    this.setState((prevState) => ({
+        termsChecked: !prevState.termsChecked,
+    }))
+  }
+
+  render () {
+    const { t } = this.context
+    const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
+
+    return (
+      <form
+        className="first-time-flow__form"
+        onSubmit={this.handleImport}
+      >
+        <div className="first-time-flow__create-back">
+          <a
+            onClick={e => {
+              e.preventDefault()
+              this.context.metricsEvent({
+                eventOpts: {
+                  category: 'Onboarding',
+                  action: 'Import Seed Phrase',
+                  name: 'Go Back from Onboarding Import',
+                },
+              })
+              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+        </div>
+        <div className="first-time-flow__header">
+          { t('importAccountSeedPhrase') }
+        </div>
+        <div className="first-time-flow__text-block">
+          { t('secretPhrase') }
+        </div>
+        <div className="first-time-flow__textarea-wrapper">
+          <label>{ t('walletSeed') }</label>
+          <textarea
+            className="first-time-flow__textarea"
+            onChange={e => this.handleSeedPhraseChange(e.target.value)}
+            value={this.state.seedPhrase}
+            placeholder={t('seedPhrasePlaceholder')}
+          />
+        </div>
+        {
+          seedPhraseError && (
+            <span className="error">
+              { seedPhraseError }
+            </span>
+          )
+        }
+        <TextField
+          id="password"
+          label={t('newPassword')}
+          type="password"
+          className="first-time-flow__input"
+          value={this.state.password}
+          onChange={event => this.handlePasswordChange(event.target.value)}
+          error={passwordError}
+          autoComplete="new-password"
+          margin="normal"
+          largeLabel
+        />
+        <TextField
+          id="confirm-password"
+          label={t('confirmPassword')}
+          type="password"
+          className="first-time-flow__input"
+          value={this.state.confirmPassword}
+          onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+          error={confirmPasswordError}
+          autoComplete="confirm-password"
+          margin="normal"
+          largeLabel
+        />
+        <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
+          <div className="first-time-flow__checkbox">
+            {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
+          </div>
+          <span className="first-time-flow__checkbox-label">
+            I have read and agree to the <a
+              href="https://metamask.io/terms.html"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="first-time-flow__link-text">
+                { 'Terms of Use' }
+              </span>
+            </a>
+          </span>
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          disabled={!this.isValid() || !termsChecked}
+          onClick={this.handleImport}
+        >
+          { t('import') }
+        </Button>
+      </form>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
index e5ff1fde5..e5ff1fde5 100644
--- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
diff --git a/ui/app/components/pages/first-time-flow/create-password/index.js b/ui/app/pages/first-time-flow/create-password/index.js
index 42e7436f9..42e7436f9 100644
--- a/ui/app/components/pages/first-time-flow/create-password/index.js
+++ b/ui/app/pages/first-time-flow/create-password/index.js
diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/index.js b/ui/app/pages/first-time-flow/create-password/new-account/index.js
index 97db39cc3..97db39cc3 100644
--- a/ui/app/components/pages/first-time-flow/create-password/new-account/index.js
+++ b/ui/app/pages/first-time-flow/create-password/new-account/index.js
diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
new file mode 100644
index 000000000..c040cff88
--- /dev/null
+++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
@@ -0,0 +1,225 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../../components/ui/button'
+import {
+  INITIALIZE_SEED_PHRASE_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
+} from '../../../../helpers/constants/routes'
+import TextField from '../../../../components/ui/text-field'
+
+export default class NewAccount extends PureComponent {
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+  }
+
+  state = {
+    password: '',
+    confirmPassword: '',
+    passwordError: '',
+    confirmPasswordError: '',
+    termsChecked: false,
+  }
+
+  isValid () {
+    const {
+      password,
+      confirmPassword,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+
+    if (!password || !confirmPassword || password !== confirmPassword) {
+      return false
+    }
+
+    if (password.length < 8) {
+      return false
+    }
+
+    return !passwordError && !confirmPasswordError
+  }
+
+  handlePasswordChange (password) {
+    const { t } = this.context
+
+    this.setState(state => {
+      const { confirmPassword } = state
+      let passwordError = ''
+      let confirmPasswordError = ''
+
+      if (password && password.length < 8) {
+        passwordError = t('passwordNotLongEnough')
+      }
+
+      if (confirmPassword && password !== confirmPassword) {
+        confirmPasswordError = t('passwordsDontMatch')
+      }
+
+      return {
+        password,
+        passwordError,
+        confirmPasswordError,
+      }
+    })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { t } = this.context
+
+    this.setState(state => {
+      const { password } = state
+      let confirmPasswordError = ''
+
+      if (password !== confirmPassword) {
+        confirmPasswordError = t('passwordsDontMatch')
+      }
+
+      return {
+        confirmPassword,
+        confirmPasswordError,
+      }
+    })
+  }
+
+  handleCreate = async event => {
+    event.preventDefault()
+
+    if (!this.isValid()) {
+      return
+    }
+
+    const { password } = this.state
+    const { onSubmit, history } = this.props
+
+    try {
+      await onSubmit(password)
+
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Onboarding',
+          action: 'Create Password',
+          name: 'Submit Password',
+        },
+      })
+
+      history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+    } catch (error) {
+      this.setState({ passwordError: error.message })
+    }
+  }
+
+  handleImportWithSeedPhrase = event => {
+    const { history } = this.props
+
+    event.preventDefault()
+    history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
+  }
+
+  toggleTermsCheck = () => {
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Create Password',
+        name: 'Check ToS',
+      },
+    })
+
+    this.setState((prevState) => ({
+      termsChecked: !prevState.termsChecked,
+    }))
+  }
+
+  render () {
+    const { t } = this.context
+    const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state
+
+    return (
+      <div>
+        <div className="first-time-flow__create-back">
+          <a
+            onClick={e => {
+              e.preventDefault()
+              this.context.metricsEvent({
+                eventOpts: {
+                  category: 'Onboarding',
+                  action: 'Create Password',
+                  name: 'Go Back from Onboarding Create',
+                },
+              })
+              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+        </div>
+        <div className="first-time-flow__header">
+          { t('createPassword') }
+        </div>
+        <form
+          className="first-time-flow__form"
+          onSubmit={this.handleCreate}
+        >
+          <TextField
+            id="create-password"
+            label={t('newPassword')}
+            type="password"
+            className="first-time-flow__input"
+            value={password}
+            onChange={event => this.handlePasswordChange(event.target.value)}
+            error={passwordError}
+            autoFocus
+            autoComplete="new-password"
+            margin="normal"
+            fullWidth
+            largeLabel
+          />
+          <TextField
+            id="confirm-password"
+            label={t('confirmPassword')}
+            type="password"
+            className="first-time-flow__input"
+            value={confirmPassword}
+            onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+            error={confirmPasswordError}
+            autoComplete="confirm-password"
+            margin="normal"
+            fullWidth
+            largeLabel
+          />
+          <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
+            <div className="first-time-flow__checkbox">
+              {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
+            </div>
+            <span className="first-time-flow__checkbox-label">
+              I have read and agree to the <a
+                href="https://metamask.io/terms.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <span className="first-time-flow__link-text">
+                  { 'Terms of Use' }
+                </span>
+              </a>
+            </span>
+          </div>
+          <Button
+            type="confirm"
+            className="first-time-flow__button"
+            disabled={!this.isValid() || !termsChecked}
+            onClick={this.handleCreate}
+          >
+            { t('create') }
+          </Button>
+        </form>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/index.js b/ui/app/pages/first-time-flow/create-password/unique-image/index.js
index 0e97bf755..0e97bf755 100644
--- a/ui/app/components/pages/first-time-flow/create-password/unique-image/index.js
+++ b/ui/app/pages/first-time-flow/create-password/unique-image/index.js
diff --git a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js
new file mode 100644
index 000000000..3434d117a
--- /dev/null
+++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../../components/ui/button'
+import { INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../helpers/constants/routes'
+
+export default class UniqueImageScreen extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+  }
+
+  render () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div>
+        <img
+          src="/images/sleuth.svg"
+          height={42}
+          width={42}
+        />
+        <div className="first-time-flow__header">
+          { t('protectYourKeys') }
+        </div>
+        <div className="first-time-flow__text-block">
+          { t('protectYourKeysMessage1') }
+        </div>
+        <div className="first-time-flow__text-block">
+          { t('protectYourKeysMessage2') }
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={() => {
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Onboarding',
+                action: 'Agree to Phishing Warning',
+                name: 'Agree to Phishing Warning',
+              },
+            })
+            history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+          }}
+        >
+          { t('next') }
+        </Button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.container.js
index 34874aaec..34874aaec 100644
--- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js
+++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.container.js
diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
new file mode 100644
index 000000000..c4292331b
--- /dev/null
+++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
@@ -0,0 +1,93 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../components/ui/button'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+
+export default class EndOfFlowScreen extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    completeOnboarding: PropTypes.func,
+    completionMetaMetricsName: PropTypes.string,
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, completeOnboarding, completionMetaMetricsName } = this.props
+
+    return (
+      <div className="end-of-flow">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+        <div className="end-of-flow__emoji">🎉</div>
+        <div className="first-time-flow__header">
+          { t('congratulations') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-1">
+          { t('endOfFlowMessage1') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-2">
+          { t('endOfFlowMessage2') }
+        </div>
+        <div className="end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage3') }
+        </div>
+        <div className="end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage4') }
+        </div>
+        <div className="end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage5') }
+        </div>
+        <div className="end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage6') }
+        </div>
+        <div className="end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage7') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-4">
+          *MetaMask cannot recover your seedphrase. <a
+            href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="first-time-flow__link-text">
+              Learn More
+            </span>
+          </a>.
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={async () => {
+            await completeOnboarding()
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Onboarding',
+                action: 'Onboarding Complete',
+                name: completionMetaMetricsName,
+              },
+            })
+            history.push(DEFAULT_ROUTE)
+          }}
+        >
+          { 'All Done' }
+        </Button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.container.js
new file mode 100644
index 000000000..38313806c
--- /dev/null
+++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.container.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import EndOfFlow from './end-of-flow.component'
+import { setCompletedOnboarding } from '../../../store/actions'
+
+const firstTimeFlowTypeNameMap = {
+  create: 'New Wallet Created',
+  'import': 'New Wallet Imported',
+}
+
+const mapStateToProps = ({ metamask }) => {
+  const { firstTimeFlowType } = metamask
+
+  return {
+    completionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType],
+  }
+}
+
+
+const mapDispatchToProps = dispatch => {
+  return {
+    completeOnboarding: () => dispatch(setCompletedOnboarding()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow)
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.js b/ui/app/pages/first-time-flow/end-of-flow/index.js
index b0643d155..b0643d155 100644
--- a/ui/app/components/pages/first-time-flow/end-of-flow/index.js
+++ b/ui/app/pages/first-time-flow/end-of-flow/index.js
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/pages/first-time-flow/end-of-flow/index.scss
index d7eb4513b..d7eb4513b 100644
--- a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss
+++ b/ui/app/pages/first-time-flow/end-of-flow/index.scss
diff --git a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
new file mode 100644
index 000000000..4fd028482
--- /dev/null
+++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Redirect } from 'react-router-dom'
+import {
+  DEFAULT_ROUTE,
+  LOCK_ROUTE,
+  INITIALIZE_WELCOME_ROUTE,
+  INITIALIZE_UNLOCK_ROUTE,
+  INITIALIZE_SEED_PHRASE_ROUTE,
+  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class FirstTimeFlowSwitch extends PureComponent {
+  static propTypes = {
+    completedOnboarding: PropTypes.bool,
+    isInitialized: PropTypes.bool,
+    isUnlocked: PropTypes.bool,
+    seedPhrase: PropTypes.string,
+    optInMetaMetrics: PropTypes.bool,
+  }
+
+  render () {
+    const {
+      completedOnboarding,
+      isInitialized,
+      isUnlocked,
+      seedPhrase,
+      optInMetaMetrics,
+    } = this.props
+
+    if (completedOnboarding) {
+      return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
+    }
+
+    if (isUnlocked && !seedPhrase) {
+      return <Redirect to={{ pathname: LOCK_ROUTE }} />
+    }
+
+    if (!isInitialized) {
+      return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} />
+    }
+
+    if (!isUnlocked) {
+      return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} />
+    }
+
+    if (seedPhrase) {
+      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} />
+    }
+
+    if (optInMetaMetrics === null) {
+      return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} />
+    }
+
+    return <Redirect to={{ pathname: INITIALIZE_METAMETRICS_OPT_IN_ROUTE }} />
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
index d68f7a153..d68f7a153 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
+++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/index.js b/ui/app/pages/first-time-flow/first-time-flow-switch/index.js
index 3647756ef..3647756ef 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/index.js
+++ b/ui/app/pages/first-time-flow/first-time-flow-switch/index.js
diff --git a/ui/app/pages/first-time-flow/first-time-flow.component.js b/ui/app/pages/first-time-flow/first-time-flow.component.js
new file mode 100644
index 000000000..bf6e80ca9
--- /dev/null
+++ b/ui/app/pages/first-time-flow/first-time-flow.component.js
@@ -0,0 +1,152 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route } from 'react-router-dom'
+import FirstTimeFlowSwitch from './first-time-flow-switch'
+import Welcome from './welcome'
+import SelectAction from './select-action'
+import EndOfFlow from './end-of-flow'
+import Unlock from '../unlock-page'
+import CreatePassword from './create-password'
+import SeedPhrase from './seed-phrase'
+import MetaMetricsOptInScreen from './metametrics-opt-in'
+import {
+  DEFAULT_ROUTE,
+  INITIALIZE_WELCOME_ROUTE,
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
+  INITIALIZE_SEED_PHRASE_ROUTE,
+  INITIALIZE_UNLOCK_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
+  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+} from '../../helpers/constants/routes'
+
+export default class FirstTimeFlow extends PureComponent {
+  static propTypes = {
+    completedOnboarding: PropTypes.bool,
+    createNewAccount: PropTypes.func,
+    createNewAccountFromSeed: PropTypes.func,
+    history: PropTypes.object,
+    isInitialized: PropTypes.bool,
+    isUnlocked: PropTypes.bool,
+    unlockAccount: PropTypes.func,
+    nextRoute: PropTypes.func,
+  }
+
+  state = {
+    seedPhrase: '',
+    isImportedKeyring: false,
+  }
+
+  componentDidMount () {
+    const { completedOnboarding, history, isInitialized, isUnlocked } = this.props
+
+    if (completedOnboarding) {
+      history.push(DEFAULT_ROUTE)
+      return
+    }
+
+    if (isInitialized && !isUnlocked) {
+      history.push(INITIALIZE_UNLOCK_ROUTE)
+      return
+    }
+  }
+
+  handleCreateNewAccount = async password => {
+    const { createNewAccount } = this.props
+
+    try {
+      const seedPhrase = await createNewAccount(password)
+      this.setState({ seedPhrase })
+    } catch (error) {
+      throw new Error(error.message)
+    }
+  }
+
+  handleImportWithSeedPhrase = async (password, seedPhrase) => {
+    const { createNewAccountFromSeed } = this.props
+
+    try {
+      await createNewAccountFromSeed(password, seedPhrase)
+      this.setState({ isImportedKeyring: true })
+    } catch (error) {
+      throw new Error(error.message)
+    }
+  }
+
+  handleUnlock = async password => {
+    const { unlockAccount, history, nextRoute } = this.props
+
+    try {
+      const seedPhrase = await unlockAccount(password)
+      this.setState({ seedPhrase }, () => {
+        history.push(nextRoute)
+      })
+    } catch (error) {
+      throw new Error(error.message)
+    }
+  }
+
+  render () {
+    const { seedPhrase, isImportedKeyring } = this.state
+
+    return (
+      <div className="first-time-flow">
+        <Switch>
+          <Route
+            path={INITIALIZE_SEED_PHRASE_ROUTE}
+            render={props => (
+              <SeedPhrase
+                { ...props }
+                seedPhrase={seedPhrase}
+              />
+            )}
+          />
+          <Route
+            path={INITIALIZE_CREATE_PASSWORD_ROUTE}
+            render={props => (
+              <CreatePassword
+                { ...props }
+                isImportedKeyring={isImportedKeyring}
+                onCreateNewAccount={this.handleCreateNewAccount}
+                onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase}
+              />
+            )}
+          />
+          <Route
+            path={INITIALIZE_SELECT_ACTION_ROUTE}
+            component={SelectAction}
+          />
+          <Route
+            path={INITIALIZE_UNLOCK_ROUTE}
+            render={props => (
+              <Unlock
+                { ...props }
+                onSubmit={this.handleUnlock}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={INITIALIZE_END_OF_FLOW_ROUTE}
+            component={EndOfFlow}
+          />
+          <Route
+            exact
+            path={INITIALIZE_WELCOME_ROUTE}
+            component={Welcome}
+          />
+          <Route
+            exact
+            path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE}
+            component={MetaMetricsOptInScreen}
+          />
+          <Route
+            exact
+            path="*"
+            component={FirstTimeFlowSwitch}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/first-time-flow.container.js b/ui/app/pages/first-time-flow/first-time-flow.container.js
new file mode 100644
index 000000000..16025a489
--- /dev/null
+++ b/ui/app/pages/first-time-flow/first-time-flow.container.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import FirstTimeFlow from './first-time-flow.component'
+import { getFirstTimeFlowTypeRoute } from './first-time-flow.selectors'
+import {
+  createNewVaultAndGetSeedPhrase,
+  createNewVaultAndRestore,
+  unlockAndGetSeedPhrase,
+} from '../../store/actions'
+
+const mapStateToProps = state => {
+  const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state
+
+  return {
+    completedOnboarding,
+    isInitialized,
+    isUnlocked,
+    nextRoute: getFirstTimeFlowTypeRoute(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    createNewAccount: password => dispatch(createNewVaultAndGetSeedPhrase(password)),
+    createNewAccountFromSeed: (password, seedPhrase) => {
+      return dispatch(createNewVaultAndRestore(password, seedPhrase))
+    },
+    unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FirstTimeFlow)
diff --git a/ui/app/pages/first-time-flow/first-time-flow.selectors.js b/ui/app/pages/first-time-flow/first-time-flow.selectors.js
new file mode 100644
index 000000000..e6cd5a84a
--- /dev/null
+++ b/ui/app/pages/first-time-flow/first-time-flow.selectors.js
@@ -0,0 +1,26 @@
+import {
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  DEFAULT_ROUTE,
+} from '../../helpers/constants/routes'
+
+const selectors = {
+  getFirstTimeFlowTypeRoute,
+}
+
+module.exports = selectors
+
+function getFirstTimeFlowTypeRoute (state) {
+  const { firstTimeFlowType } = state.metamask
+
+  let nextRoute
+  if (firstTimeFlowType === 'create') {
+    nextRoute = INITIALIZE_CREATE_PASSWORD_ROUTE
+  } else if (firstTimeFlowType === 'import') {
+    nextRoute = INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE
+  } else {
+    nextRoute = DEFAULT_ROUTE
+  }
+
+  return nextRoute
+}
diff --git a/ui/app/components/pages/first-time-flow/index.js b/ui/app/pages/first-time-flow/index.js
index 5db42437c..5db42437c 100644
--- a/ui/app/components/pages/first-time-flow/index.js
+++ b/ui/app/pages/first-time-flow/index.js
diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss
new file mode 100644
index 000000000..6c65cfdae
--- /dev/null
+++ b/ui/app/pages/first-time-flow/index.scss
@@ -0,0 +1,159 @@
+@import 'welcome/index';
+
+@import 'select-action/index';
+
+@import 'seed-phrase/index';
+
+@import 'end-of-flow/index';
+
+@import 'metametrics-opt-in/index';
+
+
+.first-time-flow {
+  width: 100%;
+  background-color: $white;
+  display: flex;
+  justify-content: center;
+
+  &__wrapper {
+    @media screen and (min-width: $break-large) {
+      max-width: 742px;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-top: 2%;
+    }
+
+    .app-header__metafox-logo {
+      margin-bottom: 40px;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__create-back {
+    margin-bottom: 16px;
+  }
+
+  &__header {
+    font-size: 2.5rem;
+    margin-bottom: 24px;
+    color: black;
+  }
+
+  &__subheader {
+    margin-bottom: 16px;
+  }
+
+  &__input {
+    max-width: 350px;
+  }
+
+  &__textarea-wrapper {
+    margin-bottom: 8px;
+    display: inline-flex;
+    padding: 0;
+    position: relative;
+    min-width: 0;
+    flex-direction: column;
+    max-width: 350px;
+  }
+
+  &__textarea-label {
+    margin-bottom: 9px;
+    color: #1B344D;
+    font-size: 18px;
+  }
+
+  &__textarea {
+    font-size: 1rem;
+    font-family: Roboto;
+    height: 190px;
+    border: 1px solid #CDCDCD;
+    border-radius: 6px;
+    background-color: #FFFFFF;
+    padding: 16px;
+    margin-top: 8px;
+  }
+
+  &__breadcrumbs {
+    margin: 36px 0;
+  }
+
+  &__unique-image {
+    margin-bottom: 20px;
+  }
+
+  &__markdown {
+    border: 1px solid #979797;
+    border-radius: 8px;
+    background-color: $white;
+    height: 200px;
+    overflow-y: auto;
+    color: #757575;
+    font-size: .75rem;
+    line-height: 15px;
+    text-align: justify;
+    margin: 0;
+    padding: 16px 20px;
+    height: 30vh;
+  }
+
+  &__text-block {
+    margin-bottom: 24px;
+    color: black;
+
+    @media screen and (max-width: $break-small) {
+      margin-bottom: 16px;
+      font-size: .875rem;
+    }
+  }
+
+  &__button {
+    margin: 35px 0 14px;
+    width: 140px;
+    height: 44px;
+  }
+
+  &__checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+  }
+
+  &__checkbox {
+    background: #FFFFFF;
+    border: 1px solid #CDCDCD;
+    box-sizing: border-box;
+    height: 34px;
+    width: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      border: 1.5px solid #2f9ae0;
+    }
+
+    .fa-check {
+      color: #2f9ae0
+    }
+  }
+
+  &__checkbox-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 18px;
+    color: #939090;
+    margin-left: 18px;
+  }
+
+  &__link-text {
+    color: $curious-blue;
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js b/ui/app/pages/first-time-flow/metametrics-opt-in/index.js
index 4bc2fc3a7..4bc2fc3a7 100644
--- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/index.js
diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss
index 6c2e37785..6c2e37785 100644
--- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss
diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
new file mode 100644
index 000000000..19c668278
--- /dev/null
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
@@ -0,0 +1,169 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../../components/ui/page-container/page-container-footer'
+
+export default class MetaMetricsOptIn extends Component {
+  static propTypes = {
+    history: PropTypes.object,
+    setParticipateInMetaMetrics: PropTypes.func,
+    nextRoute: PropTypes.string,
+    firstTimeSelectionMetaMetricsName: PropTypes.string,
+    participateInMetaMetrics: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  render () {
+    const { metricsEvent } = this.context
+    const {
+      nextRoute,
+      history,
+      setParticipateInMetaMetrics,
+      firstTimeSelectionMetaMetricsName,
+      participateInMetaMetrics,
+    } = this.props
+
+    return (
+      <div className="metametrics-opt-in">
+        <div className="metametrics-opt-in__main">
+          <div className="app-header__logo-container">
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+              src="/images/logo/metamask-logo-horizontal.svg"
+              height={30}
+            />
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--icon"
+              src="/images/logo/metamask-fox.svg"
+              height={42}
+              width={42}
+            />
+          </div>
+          <div className="metametrics-opt-in__body-graphic">
+            <img src="images/metrics-chart.svg" />
+          </div>
+          <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
+          <div className="metametrics-opt-in__body">
+            <div className="metametrics-opt-in__description">
+             MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
+             will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem.
+            </div>
+            <div className="metametrics-opt-in__description">
+             MetaMask will..
+            </div>
+
+            <div className="metametrics-opt-in__committments">
+              <div className="metametrics-opt-in__row">
+                <i className="fa fa-check" />
+                <div className="metametrics-opt-in__row-description">
+                  Always allow you to opt-out via Settings
+                </div>
+              </div>
+              <div className="metametrics-opt-in__row">
+                <i className="fa fa-check" />
+                <div className="metametrics-opt-in__row-description">
+                  Send anonymized click & pageview events
+                </div>
+              </div>
+              <div className="metametrics-opt-in__row">
+                <i className="fa fa-check" />
+                <div className="metametrics-opt-in__row-description">
+                  Maintain a public aggregate dashboard to educate the community
+                </div>
+              </div>
+              <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
+                <i className="fa fa-times" />
+                <div className="metametrics-opt-in__row-description">
+                  <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
+                </div>
+              </div>
+              <div className="metametrics-opt-in__row">
+                <i className="fa fa-times" />
+                <div className="metametrics-opt-in__row-description">
+                  <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
+                </div>
+              </div>
+              <div className="metametrics-opt-in__row">
+                <i className="fa fa-times" />
+                <div className="metametrics-opt-in__row-description">
+                  <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="metametrics-opt-in__footer">
+            <PageContainerFooter
+              onCancel={() => {
+                setParticipateInMetaMetrics(false)
+                  .then(() => {
+                    const promise = participateInMetaMetrics !== false
+                      ? metricsEvent({
+                        eventOpts: {
+                          category: 'Onboarding',
+                          action: 'Metrics Option',
+                          name: 'Metrics Opt Out',
+                        },
+                        isOptIn: true,
+                      })
+                      : Promise.resolve()
+
+                    promise
+                      .then(() => {
+                        history.push(nextRoute)
+                      })
+                })
+              }}
+              cancelText={'No Thanks'}
+              hideCancel={false}
+              onSubmit={() => {
+                setParticipateInMetaMetrics(true)
+                  .then(([participateStatus, metaMetricsId]) => {
+                    const promise = participateInMetaMetrics !== true
+                      ? metricsEvent({
+                        eventOpts: {
+                          category: 'Onboarding',
+                          action: 'Metrics Option',
+                          name: 'Metrics Opt In',
+                        },
+                        isOptIn: true,
+                      })
+                      : Promise.resolve()
+
+                    promise
+                      .then(() => {
+                        return metricsEvent({
+                          eventOpts: {
+                            category: 'Onboarding',
+                            action: 'Import or Create',
+                            name: firstTimeSelectionMetaMetricsName,
+                          },
+                          isOptIn: true,
+                          metaMetricsId,
+                        })
+                      })
+                      .then(() => {
+                        history.push(nextRoute)
+                      })
+                })
+              }}
+              submitText={'I agree'}
+              submitButtonType={'confirm'}
+              disabled={false}
+            />
+            <div className="metametrics-opt-in__bottom-text">
+              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
+                href="https://metamask.io/privacy.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Privacy Policy here
+              </a>.
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js
new file mode 100644
index 000000000..2566a2a56
--- /dev/null
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import MetaMetricsOptIn from './metametrics-opt-in.component'
+import { setParticipateInMetaMetrics } from '../../../store/actions'
+import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors'
+
+const firstTimeFlowTypeNameMap = {
+  create: 'Selected Create New Wallet',
+  'import': 'Selected Import Wallet',
+}
+
+const mapStateToProps = (state) => {
+  const { firstTimeFlowType, participateInMetaMetrics } = state.metamask
+
+  return {
+    nextRoute: getFirstTimeFlowTypeRoute(state),
+    firstTimeSelectionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType],
+    participateInMetaMetrics,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MetaMetricsOptIn)
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
new file mode 100644
index 000000000..59b4f73a6
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -0,0 +1,155 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import shuffle from 'lodash.shuffle'
+import Button from '../../../../components/ui/button'
+import {
+  INITIALIZE_END_OF_FLOW_ROUTE,
+  INITIALIZE_SEED_PHRASE_ROUTE,
+} from '../../../../helpers/constants/routes'
+import { exportAsFile } from '../../../../helpers/utils/util'
+import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state'
+
+export default class ConfirmSeedPhrase extends PureComponent {
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    seedPhrase: '',
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    onSubmit: PropTypes.func,
+    seedPhrase: PropTypes.string,
+  }
+
+  state = {
+    selectedSeedWords: [],
+    shuffledSeedWords: [],
+    // Hash of shuffledSeedWords index {Number} to selectedSeedWords index {Number}
+    selectedSeedWordsHash: {},
+  }
+
+  componentDidMount () {
+    const { seedPhrase = '' } = this.props
+    const shuffledSeedWords = shuffle(seedPhrase.split(' ')) || []
+    this.setState({ shuffledSeedWords })
+  }
+
+  handleExport = () => {
+    exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain')
+  }
+
+  handleSubmit = async () => {
+    const { history } = this.props
+
+    if (!this.isValid()) {
+      return
+    }
+
+    try {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Onboarding',
+          action: 'Seed Phrase Setup',
+          name: 'Verify Complete',
+        },
+      })
+      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  handleSelectSeedWord = (word, shuffledIndex) => {
+    this.setState(selectSeedWord(word, shuffledIndex))
+  }
+
+  handleDeselectSeedWord = shuffledIndex => {
+    this.setState(deselectSeedWord(shuffledIndex))
+  }
+
+  isValid () {
+    const { seedPhrase } = this.props
+    const { selectedSeedWords } = this.state
+    return seedPhrase === selectedSeedWords.join(' ')
+  }
+
+  render () {
+    const { t } = this.context
+    const { history } = this.props
+    const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state
+
+    return (
+      <div className="confirm-seed-phrase">
+        <div className="confirm-seed-phrase__back-button">
+          <a
+            onClick={e => {
+              e.preventDefault()
+              history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+        </div>
+        <div className="first-time-flow__header">
+          { t('confirmSecretBackupPhrase') }
+        </div>
+        <div className="first-time-flow__text-block">
+          { t('selectEachPhrase') }
+        </div>
+        <div className="confirm-seed-phrase__selected-seed-words">
+          {
+            selectedSeedWords.map((word, index) => (
+              <div
+                key={index}
+                className="confirm-seed-phrase__seed-word"
+              >
+                { word }
+              </div>
+            ))
+          }
+        </div>
+        <div className="confirm-seed-phrase__shuffled-seed-words">
+          {
+            shuffledSeedWords.map((word, index) => {
+              const isSelected = index in selectedSeedWordsHash
+
+              return (
+                <div
+                  key={index}
+                  className={classnames(
+                    'confirm-seed-phrase__seed-word',
+                    'confirm-seed-phrase__seed-word--shuffled',
+                    { 'confirm-seed-phrase__seed-word--selected': isSelected }
+                  )}
+                  onClick={() => {
+                    if (!isSelected) {
+                      this.handleSelectSeedWord(word, index)
+                    } else {
+                      this.handleDeselectSeedWord(index)
+                    }
+                  }}
+                >
+                  { word }
+                </div>
+              )
+            })
+          }
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={this.handleSubmit}
+          disabled={!this.isValid()}
+        >
+          { t('confirm') }
+        </Button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js
index f2476fc5c..f2476fc5c 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
index c7b511503..c7b511503 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index 93137618c..93137618c 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/index.js
index 185b3f089..185b3f089 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/index.js
diff --git a/ui/app/pages/first-time-flow/seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/index.scss
new file mode 100644
index 000000000..24da45ded
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/index.scss
@@ -0,0 +1,40 @@
+@import 'confirm-seed-phrase/index';
+
+@import 'reveal-seed-phrase/index';
+
+.seed-phrase {
+
+  &__sections {
+    display: flex;
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+    }
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+  }
+
+  &__main {
+    flex: 3;
+    min-width: 0;
+  }
+
+  &__side {
+    flex: 2;
+    min-width: 0;
+
+    @media screen and (min-width: $break-large) {
+      margin-left: 81px;
+    }
+
+    @media screen and (max-width: $break-small) {
+      margin-top: 24px;
+    }
+
+    .first-time-flow__text-block {
+      color: #5A5A5A;
+    }
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
index 4a1b191b5..4a1b191b5 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 8a47447ed..8a47447ed 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
new file mode 100644
index 000000000..ee352d74e
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -0,0 +1,143 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import LockIcon from '../../../../components/ui/lock-icon'
+import Button from '../../../../components/ui/button'
+import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes'
+import { exportAsFile } from '../../../../helpers/utils/util'
+
+export default class RevealSeedPhrase extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    seedPhrase: PropTypes.string,
+  }
+
+  state = {
+    isShowingSeedPhrase: false,
+  }
+
+  handleExport = () => {
+    exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain')
+  }
+
+  handleNext = event => {
+    event.preventDefault()
+    const { isShowingSeedPhrase } = this.state
+    const { history } = this.props
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Seed Phrase Setup',
+        name: 'Advance to Verify',
+      },
+    })
+
+    if (!isShowingSeedPhrase) {
+      return
+    }
+
+    history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE)
+  }
+
+  renderSecretWordsContainer () {
+    const { t } = this.context
+    const { seedPhrase } = this.props
+    const { isShowingSeedPhrase } = this.state
+
+    return (
+      <div className="reveal-seed-phrase__secret">
+        <div className={classnames(
+          'reveal-seed-phrase__secret-words',
+          { 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase }
+        )}>
+          { seedPhrase }
+        </div>
+        {
+          !isShowingSeedPhrase && (
+            <div
+              className="reveal-seed-phrase__secret-blocker"
+              onClick={() => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Onboarding',
+                    action: 'Seed Phrase Setup',
+                    name: 'Revealed Words',
+                  },
+                })
+                this.setState({ isShowingSeedPhrase: true })
+              }}
+            >
+              <LockIcon
+                width="28px"
+                height="35px"
+                fill="#FFFFFF"
+              />
+              <div className="reveal-seed-phrase__reveal-button">
+                { t('clickToRevealSeed') }
+              </div>
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { isShowingSeedPhrase } = this.state
+
+    return (
+      <div className="reveal-seed-phrase">
+        <div className="seed-phrase__sections">
+          <div className="seed-phrase__main">
+            <div className="first-time-flow__header">
+              { t('secretBackupPhrase') }
+            </div>
+            <div className="first-time-flow__text-block">
+              { t('secretBackupPhraseDescription') }
+            </div>
+            <div className="first-time-flow__text-block">
+              { t('secretBackupPhraseWarning') }
+            </div>
+            { this.renderSecretWordsContainer() }
+          </div>
+          <div className="seed-phrase__side">
+            <div className="first-time-flow__text-block">
+              { `${t('tips')}:` }
+            </div>
+            <div className="first-time-flow__text-block">
+              { t('storePhrase') }
+            </div>
+            <div className="first-time-flow__text-block">
+              { t('writePhrase') }
+            </div>
+            <div className="first-time-flow__text-block">
+              { t('memorizePhrase') }
+            </div>
+            <div className="first-time-flow__text-block">
+              <a
+                className="reveal-seed-phrase__export-text"
+                onClick={this.handleExport}>
+                { t('downloadSecretBackup') }
+              </a>
+            </div>
+          </div>
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={this.handleNext}
+          disabled={!isShowingSeedPhrase}
+        >
+          { t('next') }
+        </Button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
new file mode 100644
index 000000000..9a9f84049
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route } from 'react-router-dom'
+import RevealSeedPhrase from './reveal-seed-phrase'
+import ConfirmSeedPhrase from './confirm-seed-phrase'
+import {
+  INITIALIZE_SEED_PHRASE_ROUTE,
+  INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
+  DEFAULT_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class SeedPhrase extends PureComponent {
+  static propTypes = {
+    address: PropTypes.string,
+    history: PropTypes.object,
+    seedPhrase: PropTypes.string,
+  }
+
+  componentDidMount () {
+    const { seedPhrase, history } = this.props
+
+    if (!seedPhrase) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  render () {
+    const { seedPhrase } = this.props
+
+    return (
+      <div className="first-time-flow__wrapper">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+        <Switch>
+          <Route
+            exact
+            path={INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE}
+            render={props => (
+              <ConfirmSeedPhrase
+                { ...props }
+                seedPhrase={seedPhrase}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={INITIALIZE_SEED_PHRASE_ROUTE}
+            render={props => (
+              <RevealSeedPhrase
+                { ...props }
+                seedPhrase={seedPhrase}
+              />
+            )}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/select-action/index.js b/ui/app/pages/first-time-flow/select-action/index.js
index 4fbe1823b..4fbe1823b 100644
--- a/ui/app/components/pages/first-time-flow/select-action/index.js
+++ b/ui/app/pages/first-time-flow/select-action/index.js
diff --git a/ui/app/components/pages/first-time-flow/select-action/index.scss b/ui/app/pages/first-time-flow/select-action/index.scss
index e1b22d05b..e1b22d05b 100644
--- a/ui/app/components/pages/first-time-flow/select-action/index.scss
+++ b/ui/app/pages/first-time-flow/select-action/index.scss
diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js
new file mode 100644
index 000000000..b25a15514
--- /dev/null
+++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js
@@ -0,0 +1,112 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../components/ui/button'
+import {
+  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class SelectAction extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    isInitialized: PropTypes.bool,
+    setFirstTimeFlowType: PropTypes.func,
+    nextRoute: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { history, isInitialized, nextRoute } = this.props
+
+    if (isInitialized) {
+      history.push(nextRoute)
+    }
+  }
+
+  handleCreate = () => {
+    this.props.setFirstTimeFlowType('create')
+    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE)
+  }
+
+  handleImport = () => {
+    this.props.setFirstTimeFlowType('import')
+    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE)
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+       <div className="select-action">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+
+        <div className="select-action__wrapper">
+
+
+          <div className="select-action__body">
+            <div className="select-action__body-header">
+              { t('newToMetaMask') }
+            </div>
+            <div className="select-action__select-buttons">
+              <div className="select-action__select-button">
+                <div className="select-action__button-content">
+                  <div className="select-action__button-symbol">
+                    <img src="/images/download-alt.svg" />
+                  </div>
+                  <div className="select-action__button-text-big">
+                    { t('noAlreadyHaveSeed') }
+                  </div>
+                  <div className="select-action__button-text-small">
+                    { t('importYourExisting') }
+                  </div>
+                </div>
+                <Button
+                  type="primary"
+                  className="first-time-flow__button"
+                  onClick={this.handleImport}
+                >
+                  { t('importWallet') }
+                </Button>
+              </div>
+              <div className="select-action__select-button">
+                <div className="select-action__button-content">
+                  <div className="select-action__button-symbol">
+                    <img src="/images/thin-plus.svg" />
+                  </div>
+                  <div className="select-action__button-text-big">
+                    { t('letsGoSetUp') }
+                  </div>
+                  <div className="select-action__button-text-small">
+                    { t('thisWillCreate') }
+                  </div>
+                </div>
+                <Button
+                  type="confirm"
+                  className="first-time-flow__button"
+                  onClick={this.handleCreate}
+                >
+                  { t('createAWallet') }
+                </Button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+       </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/select-action/select-action.container.js b/ui/app/pages/first-time-flow/select-action/select-action.container.js
new file mode 100644
index 000000000..9dc988430
--- /dev/null
+++ b/ui/app/pages/first-time-flow/select-action/select-action.container.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import { setFirstTimeFlowType } from '../../../store/actions'
+import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors'
+import Welcome from './select-action.component'
+
+const mapStateToProps = (state) => {
+  return {
+    nextRoute: getFirstTimeFlowTypeRoute(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setFirstTimeFlowType: type => dispatch(setFirstTimeFlowType(type)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Welcome)
diff --git a/ui/app/components/pages/first-time-flow/welcome/index.js b/ui/app/pages/first-time-flow/welcome/index.js
index 8abeddaa1..8abeddaa1 100644
--- a/ui/app/components/pages/first-time-flow/welcome/index.js
+++ b/ui/app/pages/first-time-flow/welcome/index.js
diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/pages/first-time-flow/welcome/index.scss
index 3b5071480..3b5071480 100644
--- a/ui/app/components/pages/first-time-flow/welcome/index.scss
+++ b/ui/app/pages/first-time-flow/welcome/index.scss
diff --git a/ui/app/pages/first-time-flow/welcome/welcome.component.js b/ui/app/pages/first-time-flow/welcome/welcome.component.js
new file mode 100644
index 000000000..3b8d6eb17
--- /dev/null
+++ b/ui/app/pages/first-time-flow/welcome/welcome.component.js
@@ -0,0 +1,69 @@
+import EventEmitter from 'events'
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Mascot from '../../../components/ui/mascot'
+import Button from '../../../components/ui/button'
+import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE } from '../../../helpers/constants/routes'
+
+export default class Welcome extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    isInitialized: PropTypes.bool,
+    participateInMetaMetrics: PropTypes.bool,
+    welcomeScreenSeen: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  componentDidMount () {
+    const { history, participateInMetaMetrics, welcomeScreenSeen } = this.props
+
+    if (welcomeScreenSeen && participateInMetaMetrics !== null) {
+      history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+    } else if (welcomeScreenSeen) {
+      history.push(INITIALIZE_SELECT_ACTION_ROUTE)
+    }
+  }
+
+  handleContinue = () => {
+    this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="welcome-page__wrapper">
+        <div className="welcome-page">
+          <Mascot
+            animationEventEmitter={this.animationEventEmitter}
+            width="125"
+            height="125"
+          />
+          <div className="welcome-page__header">
+            { t('welcome') }
+          </div>
+          <div className="welcome-page__description">
+            <div>{ t('metamaskDescription') }</div>
+            <div>{ t('happyToSeeYou') }</div>
+          </div>
+          <Button
+            type="confirm"
+            className="first-time-flow__button"
+            onClick={this.handleContinue}
+          >
+            { t('getStarted') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/first-time-flow/welcome/welcome.container.js b/ui/app/pages/first-time-flow/welcome/welcome.container.js
new file mode 100644
index 000000000..ce4b2b471
--- /dev/null
+++ b/ui/app/pages/first-time-flow/welcome/welcome.container.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import { closeWelcomeScreen } from '../../../store/actions'
+import Welcome from './welcome.component'
+
+const mapStateToProps = ({ metamask }) => {
+  const { welcomeScreenSeen, isInitialized, participateInMetaMetrics } = metamask
+
+  return {
+    welcomeScreenSeen,
+    isInitialized,
+    participateInMetaMetrics,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Welcome)
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
new file mode 100644
index 000000000..29d93a9fa
--- /dev/null
+++ b/ui/app/pages/home/home.component.js
@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Media from 'react-media'
+import { Redirect } from 'react-router-dom'
+import WalletView from '../../components/app/wallet-view'
+import TransactionView from '../../components/app/transaction-view'
+import ProviderApproval from '../provider-approval'
+
+import {
+  INITIALIZE_SEED_PHRASE_ROUTE,
+  RESTORE_VAULT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+} from '../../helpers/constants/routes'
+
+export default class Home extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    forgottenPassword: PropTypes.bool,
+    seedWords: PropTypes.string,
+    suggestedTokens: PropTypes.object,
+    unconfirmedTransactionsCount: PropTypes.number,
+    providerRequests: PropTypes.array,
+  }
+
+  componentDidMount () {
+    const {
+      history,
+      suggestedTokens = {},
+      unconfirmedTransactionsCount = 0,
+    } = this.props
+
+    // suggested new tokens
+    if (Object.keys(suggestedTokens).length > 0) {
+        history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
+    }
+
+    if (unconfirmedTransactionsCount > 0) {
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
+  }
+
+  render () {
+    const {
+      forgottenPassword,
+      seedWords,
+      providerRequests,
+    } = this.props
+
+    // seed words
+    if (seedWords) {
+      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/>
+    }
+
+    if (forgottenPassword) {
+      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
+    }
+
+    if (providerRequests && providerRequests.length > 0) {
+      return (
+        <ProviderApproval providerRequest={providerRequests[0]} />
+      )
+    }
+
+    return (
+      <div className="main-container">
+        <div className="account-and-transaction-details">
+          <Media
+            query="(min-width: 576px)"
+            render={() => <WalletView />}
+          />
+          <TransactionView />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
new file mode 100644
index 000000000..02ec4b9c6
--- /dev/null
+++ b/ui/app/pages/home/home.container.js
@@ -0,0 +1,32 @@
+import Home from './home.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  const { metamask, appState } = state
+  const {
+    noActiveNotices,
+    lostAccounts,
+    seedWords,
+    suggestedTokens,
+    providerRequests,
+  } = metamask
+  const { forgottenPassword } = appState
+
+  return {
+    noActiveNotices,
+    lostAccounts,
+    forgottenPassword,
+    seedWords,
+    suggestedTokens,
+    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
+    providerRequests,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(Home)
diff --git a/ui/app/components/pages/home/index.js b/ui/app/pages/home/index.js
index 4474ba5b8..4474ba5b8 100644
--- a/ui/app/components/pages/home/index.js
+++ b/ui/app/pages/home/index.js
diff --git a/ui/app/pages/index.js b/ui/app/pages/index.js
new file mode 100644
index 000000000..56fc4af04
--- /dev/null
+++ b/ui/app/pages/index.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+const PropTypes = require('prop-types')
+const { Provider } = require('react-redux')
+const { HashRouter } = require('react-router-dom')
+const Routes = require('./routes')
+const I18nProvider = require('../helpers/higher-order-components/i18n-provider')
+const MetaMetricsProvider = require('../helpers/higher-order-components/metametrics/metametrics.provider')
+
+class Index extends Component {
+  render () {
+    const { store } = this.props
+
+    return (
+      <Provider store={store}>
+        <HashRouter hashType="noslash">
+          <MetaMetricsProvider>
+            <I18nProvider>
+              <Routes />
+            </I18nProvider>
+          </MetaMetricsProvider>
+        </HashRouter>
+      </Provider>
+    )
+  }
+}
+
+Index.propTypes = {
+  store: PropTypes.object,
+}
+
+module.exports = Index
diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss
new file mode 100644
index 000000000..cb9f0d80c
--- /dev/null
+++ b/ui/app/pages/index.scss
@@ -0,0 +1,11 @@
+@import 'unlock-page/index';
+
+@import 'add-token/index';
+
+@import 'confirm-add-token/index';
+
+@import 'settings/index';
+
+@import 'first-time-flow/index';
+
+@import 'keychains/index';
diff --git a/ui/app/components/pages/keychains/index.scss b/ui/app/pages/keychains/index.scss
index 868185419..868185419 100644
--- a/ui/app/components/pages/keychains/index.scss
+++ b/ui/app/pages/keychains/index.scss
diff --git a/ui/app/pages/keychains/restore-vault.js b/ui/app/pages/keychains/restore-vault.js
new file mode 100644
index 000000000..574949258
--- /dev/null
+++ b/ui/app/pages/keychains/restore-vault.js
@@ -0,0 +1,197 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {
+  createNewVaultAndRestore,
+  unMarkPasswordForgotten,
+} from '../../store/actions'
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
+import TextField from '../../components/ui/text-field'
+import Button from '../../components/ui/button'
+
+class RestoreVaultPage extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    warning: PropTypes.string,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: null,
+    passwordError: null,
+    confirmPasswordError: null,
+  }
+
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
+
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = null
+
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      seedPhraseError = this.context.t('seedPhraseReq')
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
+
+  handlePasswordChange (password) {
+    const { confirmPassword } = this.state
+    let confirmPasswordError = null
+    let passwordError = null
+
+    if (password && password.length < 8) {
+      passwordError = this.context.t('passwordNotLongEnough')
+    }
+
+    if (confirmPassword && password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ password, passwordError, confirmPasswordError })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { password } = this.state
+    let confirmPasswordError = null
+
+    if (password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ confirmPassword, confirmPasswordError })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      leaveImportSeedScreenState,
+      history,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(() => {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Retention',
+            action: 'userEntersSeedPhrase',
+            name: 'onboardingRestoredVault',
+          },
+        })
+        history.push(DEFAULT_ROUTE)
+      })
+  }
+
+  hasError () {
+    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
+    return passwordError || confirmPasswordError || seedPhraseError
+  }
+
+  render () {
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      seedPhraseError,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+    const { t } = this.context
+    const { isLoading } = this.props
+    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
+
+    return (
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.history.goBack()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              { this.context.t('restoreAccountWithSeed') }
+            </div>
+            <div className="import-account__selector-label">
+              { this.context.t('secretPhrase') }
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.handleSeedPhraseChange(e.target.value)}
+                value={this.state.seedPhrase}
+                placeholder={this.context.t('separateEachWord')}
+              />
+            </div>
+            <span className="error">
+              { seedPhraseError }
+            </span>
+            <TextField
+              id="password"
+              label={t('newPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.password}
+              onChange={event => this.handlePasswordChange(event.target.value)}
+              error={passwordError}
+              autoComplete="new-password"
+              margin="normal"
+              largeLabel
+            />
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.confirmPassword}
+              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+              error={confirmPasswordError}
+              autoComplete="confirm-password"
+              margin="normal"
+              largeLabel
+            />
+            <Button
+              type="first-time"
+              className="first-time-flow__button"
+              onClick={() => !disabled && this.onClick()}
+              disabled={disabled}
+            >
+              {this.context.t('restore')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+  })
+)(RestoreVaultPage)
diff --git a/ui/app/pages/keychains/reveal-seed.js b/ui/app/pages/keychains/reveal-seed.js
new file mode 100644
index 000000000..edc9db5a0
--- /dev/null
+++ b/ui/app/pages/keychains/reveal-seed.js
@@ -0,0 +1,177 @@
+const { Component } = require('react')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+
+const { requestRevealSeedWords } = require('../../store/actions')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+const ExportTextContainer = require('../../components/ui/export-text-container')
+
+import Button from '../../components/ui/button'
+
+const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
+const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
+
+class RevealSeedPage extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      screen: PASSWORD_PROMPT_SCREEN,
+      password: '',
+      seedWords: null,
+      error: null,
+    }
+  }
+
+  componentDidMount () {
+    const passwordBox = document.getElementById('password-box')
+    if (passwordBox) {
+      passwordBox.focus()
+    }
+  }
+
+  handleSubmit (event) {
+    event.preventDefault()
+    this.setState({ seedWords: null, error: null })
+    this.props.requestRevealSeedWords(this.state.password)
+      .then(seedWords => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }))
+      .catch(error => this.setState({ error: error.message }))
+  }
+
+  renderWarning () {
+    return (
+      h('.page-container__warning-container', [
+        h('img.page-container__warning-icon', {
+          src: 'images/warning.svg',
+        }),
+        h('.page-container__warning-message', [
+          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
+          h('div', [this.context.t('revealSeedWordsWarning')]),
+        ]),
+      ])
+    )
+  }
+
+  renderContent () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptContent()
+      : this.renderRevealSeedContent()
+  }
+
+  renderPasswordPromptContent () {
+    const { t } = this.context
+
+    return (
+      h('form', {
+        onSubmit: event => this.handleSubmit(event),
+      }, [
+        h('label.input-label', {
+          htmlFor: 'password-box',
+        }, t('enterPasswordContinue')),
+        h('.input-group', [
+          h('input.form-control', {
+            type: 'password',
+            placeholder: t('password'),
+            id: 'password-box',
+            value: this.state.password,
+            onChange: event => this.setState({ password: event.target.value }),
+            className: classnames({ 'form-control--error': this.state.error }),
+          }),
+        ]),
+        this.state.error && h('.reveal-seed__error', this.state.error),
+      ])
+    )
+  }
+
+  renderRevealSeedContent () {
+    const { t } = this.context
+
+    return (
+      h('div', [
+        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
+        h(ExportTextContainer, {
+          text: this.state.seedWords,
+          filename: t('metamaskSeedWords'),
+        }),
+      ])
+    )
+  }
+
+  renderFooter () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptFooter()
+      : this.renderRevealSeedFooter()
+  }
+
+  renderPasswordPromptFooter () {
+    return (
+      h('.page-container__footer', [
+        h('header', [
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, this.context.t('cancel')),
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: event => this.handleSubmit(event),
+            disabled: this.state.password === '',
+          }, this.context.t('next')),
+        ]),
+      ])
+    )
+  }
+
+  renderRevealSeedFooter () {
+    return (
+      h('.page-container__footer', [
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('close')),
+      ])
+    )
+  }
+
+  render () {
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
+          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
+        ]),
+        h('.page-container__content', [
+          this.renderWarning(),
+          h('.reveal-seed__content', [
+            this.renderContent(),
+          ]),
+        ]),
+        this.renderFooter(),
+      ])
+    )
+  }
+}
+
+RevealSeedPage.propTypes = {
+  requestRevealSeedWords: PropTypes.func,
+  history: PropTypes.object,
+}
+
+RevealSeedPage.contextTypes = {
+  t: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(RevealSeedPage)
diff --git a/ui/app/components/pages/lock/index.js b/ui/app/pages/lock/index.js
index 7bfe2a61f..7bfe2a61f 100644
--- a/ui/app/components/pages/lock/index.js
+++ b/ui/app/pages/lock/index.js
diff --git a/ui/app/pages/lock/lock.component.js b/ui/app/pages/lock/lock.component.js
new file mode 100644
index 000000000..1145158c5
--- /dev/null
+++ b/ui/app/pages/lock/lock.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Loading from '../../components/ui/loading-screen'
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
+
+export default class Lock extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    isUnlocked: PropTypes.bool,
+    lockMetamask: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { lockMetamask, isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      lockMetamask().then(() => history.push(DEFAULT_ROUTE))
+    } else {
+      history.replace(DEFAULT_ROUTE)
+    }
+  }
+
+  render () {
+    return <Loading />
+  }
+}
diff --git a/ui/app/pages/lock/lock.container.js b/ui/app/pages/lock/lock.container.js
new file mode 100644
index 000000000..6a20b6ed1
--- /dev/null
+++ b/ui/app/pages/lock/lock.container.js
@@ -0,0 +1,24 @@
+import Lock from './lock.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { lockMetamask } from '../../store/actions'
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked } } = state
+
+  return {
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    lockMetamask: () => dispatch(lockMetamask()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Lock)
diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js
new file mode 100644
index 000000000..0938ad103
--- /dev/null
+++ b/ui/app/pages/mobile-sync/index.js
@@ -0,0 +1,387 @@
+const { Component } = require('react')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const PubNub = require('pubnub')
+
+const { requestRevealSeedWords, fetchInfoToSync } = require('../../store/actions')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+const actions = require('../../store/actions')
+
+const qrCode = require('qrcode-generator')
+
+import Button from '../../components/ui/button'
+import LoadingScreen from '../../components/ui/loading-screen'
+
+const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
+const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
+
+class MobileSyncPage extends Component {
+  static propTypes = {
+    history: PropTypes.object,
+    selectedAddress: PropTypes.string,
+    displayWarning: PropTypes.func,
+    fetchInfoToSync: PropTypes.func,
+    requestRevealSeedWords: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      screen: PASSWORD_PROMPT_SCREEN,
+      password: '',
+      seedWords: null,
+      error: null,
+      syncing: false,
+      completed: false,
+    }
+
+    this.syncing = false
+  }
+
+  componentDidMount () {
+    const passwordBox = document.getElementById('password-box')
+    if (passwordBox) {
+      passwordBox.focus()
+    }
+  }
+
+  handleSubmit (event) {
+    event.preventDefault()
+    this.setState({ seedWords: null, error: null })
+    this.props.requestRevealSeedWords(this.state.password)
+      .then(seedWords => {
+        this.generateCipherKeyAndChannelName()
+        this.setState({ seedWords, screen: REVEAL_SEED_SCREEN })
+        this.initWebsockets()
+      })
+      .catch(error => this.setState({ error: error.message }))
+  }
+
+  generateCipherKeyAndChannelName () {
+    this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}`
+    this.channelName = `mm-${PubNub.generateUUID()}`
+  }
+
+  initWebsockets () {
+    this.pubnub = new PubNub({
+      subscribeKey: process.env.PUBNUB_SUB_KEY,
+      publishKey: process.env.PUBNUB_PUB_KEY,
+      cipherKey: this.cipherKey,
+      ssl: true,
+    })
+
+    this.pubnubListener = this.pubnub.addListener({
+      message: (data) => {
+        const {channel, message} = data
+        // handle message
+        if (channel !== this.channelName || !message) {
+          return false
+        }
+
+        if (message.event === 'start-sync') {
+            this.startSyncing()
+        } else if (message.event === 'end-sync') {
+            this.disconnectWebsockets()
+            this.setState({syncing: false, completed: true})
+        }
+      },
+    })
+
+    this.pubnub.subscribe({
+      channels: [this.channelName],
+      withPresence: false,
+    })
+
+  }
+
+  disconnectWebsockets () {
+    if (this.pubnub && this.pubnubListener) {
+      this.pubnub.disconnect(this.pubnubListener)
+    }
+  }
+
+    // Calculating a PubNub Message Payload Size.
+  calculatePayloadSize (channel, message) {
+    return encodeURIComponent(
+        channel + JSON.stringify(message)
+    ).length + 100
+  }
+
+  chunkString (str, size) {
+    const numChunks = Math.ceil(str.length / size)
+    const chunks = new Array(numChunks)
+    for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
+      chunks[i] = str.substr(o, size)
+    }
+    return chunks
+  }
+
+  notifyError (errorMsg) {
+    return new Promise((resolve, reject) => {
+      this.pubnub.publish(
+        {
+          message: {
+            event: 'error-sync',
+            data: errorMsg,
+          },
+          channel: this.channelName,
+          sendByPost: false, // true to send via post
+          storeInHistory: false,
+      },
+      (status, response) => {
+        if (!status.error) {
+          resolve()
+        } else {
+          reject(response)
+        }
+      })
+    })
+  }
+
+  async startSyncing () {
+    if (this.syncing) return false
+    this.syncing = true
+    this.setState({syncing: true})
+
+    const { accounts, network, preferences, transactions } = await this.props.fetchInfoToSync()
+
+    const allDataStr = JSON.stringify({
+      accounts,
+      network,
+      preferences,
+      transactions,
+      udata: {
+        pwd: this.state.password,
+        seed: this.state.seedWords,
+      },
+    })
+
+    const chunks = this.chunkString(allDataStr, 17000)
+    const totalChunks = chunks.length
+    try {
+      for (let i = 0; i < totalChunks; i++) {
+        await this.sendMessage(chunks[i], i + 1, totalChunks)
+      }
+    } catch (e) {
+      this.props.displayWarning('Sync failed :(')
+      this.setState({syncing: false})
+      this.syncing = false
+      this.notifyError(e.toString())
+    }
+  }
+
+  sendMessage (data, pkg, count) {
+    return new Promise((resolve, reject) => {
+      this.pubnub.publish(
+         {
+            message: {
+              event: 'syncing-data',
+              data,
+              totalPkg: count,
+              currentPkg: pkg,
+            },
+            channel: this.channelName,
+            sendByPost: false, // true to send via post
+            storeInHistory: false,
+        },
+        (status, response) => {
+          if (!status.error) {
+            resolve()
+          } else {
+            reject(response)
+          }
+        }
+      )
+    })
+  }
+
+
+  componentWillUnmount () {
+    this.disconnectWebsockets()
+  }
+
+  renderWarning (text) {
+    return (
+      h('.page-container__warning-container', [
+       h('.page-container__warning-message', [
+          h('div', [text]),
+        ]),
+      ])
+    )
+  }
+
+  renderContent () {
+    const { t } = this.context
+
+    if (this.state.syncing) {
+      return h(LoadingScreen, {loadingMessage: 'Sync in progress'})
+    }
+
+    if (this.state.completed) {
+      return h('div.reveal-seed__content', {},
+          h('label.reveal-seed__label', {
+            style: {
+             width: '100%',
+             textAlign: 'center',
+            },
+          }, t('syncWithMobileComplete')),
+      )
+    }
+
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? h('div', {}, [
+        this.renderWarning(this.context.t('mobileSyncText')),
+        h('.reveal-seed__content', [
+          this.renderPasswordPromptContent(),
+        ]),
+      ])
+      : h('div', {}, [
+        this.renderWarning(this.context.t('syncWithMobileBeCareful')),
+        h('.reveal-seed__content', [ this.renderRevealSeedContent() ]),
+      ])
+  }
+
+  renderPasswordPromptContent () {
+    const { t } = this.context
+
+    return (
+      h('form', {
+        onSubmit: event => this.handleSubmit(event),
+      }, [
+        h('label.input-label', {
+          htmlFor: 'password-box',
+        }, t('enterPasswordContinue')),
+        h('.input-group', [
+          h('input.form-control', {
+            type: 'password',
+            placeholder: t('password'),
+            id: 'password-box',
+            value: this.state.password,
+            onChange: event => this.setState({ password: event.target.value }),
+            className: classnames({ 'form-control--error': this.state.error }),
+          }),
+        ]),
+        this.state.error && h('.reveal-seed__error', this.state.error),
+      ])
+    )
+  }
+
+  renderRevealSeedContent () {
+
+    const qrImage = qrCode(0, 'M')
+    qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`)
+    qrImage.make()
+
+    const { t } = this.context
+    return (
+      h('div', [
+        h('label.reveal-seed__label', {
+          style: {
+           width: '100%',
+           textAlign: 'center',
+          },
+        }, t('syncWithMobileScanThisCode')),
+        h('.div.qr-wrapper', {
+          style: {
+            display: 'flex',
+            justifyContent: 'center',
+          },
+          dangerouslySetInnerHTML: {
+            __html: qrImage.createTableTag(4),
+          },
+        }),
+      ])
+    )
+  }
+
+  renderFooter () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptFooter()
+      : this.renderRevealSeedFooter()
+  }
+
+  renderPasswordPromptFooter () {
+    return (
+      h('div.new-account-import-form__buttons', {style: {padding: 30}}, [
+
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('cancel')),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: event => this.handleSubmit(event),
+          disabled: this.state.password === '',
+        }, this.context.t('next')),
+      ])
+    )
+  }
+
+  renderRevealSeedFooter () {
+    return (
+      h('.page-container__footer', {style: {padding: 30}}, [
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('close')),
+      ])
+    )
+  }
+
+  render () {
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__title', this.context.t('syncWithMobileTitle')),
+          this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDesc')) : null,
+          this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null,
+        ]),
+        h('.page-container__content', [
+            this.renderContent(),
+        ]),
+        this.renderFooter(),
+      ])
+    )
+  }
+}
+
+MobileSyncPage.propTypes = {
+  requestRevealSeedWords: PropTypes.func,
+  fetchInfoToSync: PropTypes.func,
+  history: PropTypes.object,
+}
+
+MobileSyncPage.contextTypes = {
+  t: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
+    fetchInfoToSync: () => dispatch(fetchInfoToSync()),
+    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
+  }
+
+}
+
+const mapStateToProps = state => {
+  const {
+    metamask: { selectedAddress },
+  } = state
+
+  return {
+    selectedAddress,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(MobileSyncPage)
diff --git a/ui/app/pages/notice/notice.js b/ui/app/pages/notice/notice.js
new file mode 100644
index 000000000..d8274dfcb
--- /dev/null
+++ b/ui/app/pages/notice/notice.js
@@ -0,0 +1,203 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const ReactMarkdown = require('react-markdown')
+const linker = require('extension-link-enabler')
+const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice')
+const findDOMNode = require('react-dom').findDOMNode
+const actions = require('../../store/actions')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+
+class Notice extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      disclaimerDisabled: true,
+    }
+  }
+
+  componentWillMount () {
+    if (!this.props.notice) {
+      this.props.history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  componentDidMount () {
+    // eslint-disable-next-line react/no-find-dom-node
+    var node = findDOMNode(this)
+    linker.setupListener(node)
+    if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
+      this.setState({ disclaimerDisabled: false })
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.notice) {
+      this.props.history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  componentWillUnmount () {
+    // eslint-disable-next-line react/no-find-dom-node
+    var node = findDOMNode(this)
+    linker.teardownListener(node)
+  }
+
+  handleAccept () {
+    this.setState({ disclaimerDisabled: true })
+    this.props.onConfirm()
+  }
+
+  render () {
+    const { notice = {} } = this.props
+    const { title, date, body } = notice
+    const { disclaimerDisabled } = this.state
+
+    return (
+      h('.flex-column.flex-center.flex-grow', {
+        style: {
+          width: '100%',
+        },
+      }, [
+        h('h3.flex-center.text-transform-uppercase.terms-header', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            width: '100%',
+            fontSize: '20px',
+            textAlign: 'center',
+            padding: 6,
+          },
+        }, [
+          title,
+        ]),
+
+        h('h5.flex-center.text-transform-uppercase.terms-header', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginBottom: 24,
+            width: '100%',
+            fontSize: '20px',
+            textAlign: 'center',
+            padding: 6,
+          },
+        }, [
+          date,
+        ]),
+
+        h('style', `
+
+          .markdown {
+            overflow-x: hidden;
+          }
+
+          .markdown h1, .markdown h2, .markdown h3 {
+            margin: 10px 0;
+            font-weight: bold;
+          }
+
+          .markdown strong {
+            font-weight: bold;
+          }
+          .markdown em {
+            font-style: italic;
+          }
+
+          .markdown p {
+            margin: 10px 0;
+          }
+
+          .markdown a {
+            color: #df6b0e;
+          }
+
+        `),
+
+        h('div.markdown', {
+          onScroll: (e) => {
+            var object = e.currentTarget
+            if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
+              this.setState({ disclaimerDisabled: false })
+            }
+          },
+          style: {
+            background: 'rgb(235, 235, 235)',
+            height: '310px',
+            padding: '6px',
+            width: '90%',
+            overflowY: 'scroll',
+            scroll: 'auto',
+          },
+        }, [
+          h(ReactMarkdown, {
+            className: 'notice-box',
+            source: body,
+            skipHtml: true,
+          }),
+        ]),
+
+        h('button.primary', {
+          disabled: disclaimerDisabled,
+          onClick: () => this.handleAccept(),
+          style: {
+            marginTop: '18px',
+          },
+        }, 'Accept'),
+      ])
+    )
+  }
+
+}
+
+const mapStateToProps = state => {
+  const { metamask } = state
+  const { noActiveNotices, nextUnreadNotice, lostAccounts } = metamask
+
+  return {
+    noActiveNotices,
+    nextUnreadNotice,
+    lostAccounts,
+  }
+}
+
+Notice.propTypes = {
+  notice: PropTypes.object,
+  onConfirm: PropTypes.func,
+  history: PropTypes.object,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    markNoticeRead: nextUnreadNotice => dispatch(actions.markNoticeRead(nextUnreadNotice)),
+    markAccountsFound: () => dispatch(actions.markAccountsFound()),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { noActiveNotices, nextUnreadNotice, lostAccounts } = stateProps
+  const { markNoticeRead, markAccountsFound } = dispatchProps
+
+  let notice
+  let onConfirm
+
+  if (!noActiveNotices) {
+    notice = nextUnreadNotice
+    onConfirm = () => markNoticeRead(nextUnreadNotice)
+  } else if (lostAccounts && lostAccounts.length > 0) {
+    notice = generateLostAccountsNotice(lostAccounts)
+    onConfirm = () => markAccountsFound()
+  }
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    notice,
+    onConfirm,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice)
diff --git a/ui/app/components/pages/provider-approval/index.js b/ui/app/pages/provider-approval/index.js
index 4162f3155..4162f3155 100644
--- a/ui/app/components/pages/provider-approval/index.js
+++ b/ui/app/pages/provider-approval/index.js
diff --git a/ui/app/pages/provider-approval/provider-approval.component.js b/ui/app/pages/provider-approval/provider-approval.component.js
new file mode 100644
index 000000000..1f1d68da7
--- /dev/null
+++ b/ui/app/pages/provider-approval/provider-approval.component.js
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import ProviderPageContainer from '../../components/app/provider-page-container'
+
+export default class ProviderApproval extends Component {
+  static propTypes = {
+    approveProviderRequest: PropTypes.func.isRequired,
+    providerRequest: PropTypes.object.isRequired,
+    rejectProviderRequest: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { approveProviderRequest, providerRequest, rejectProviderRequest } = this.props
+    return (
+      <ProviderPageContainer
+        approveProviderRequest={approveProviderRequest}
+        origin={providerRequest.origin}
+        tabID={providerRequest.tabID}
+        rejectProviderRequest={rejectProviderRequest}
+        siteImage={providerRequest.siteImage}
+        siteTitle={providerRequest.siteTitle}
+      />
+    )
+  }
+}
diff --git a/ui/app/pages/provider-approval/provider-approval.container.js b/ui/app/pages/provider-approval/provider-approval.container.js
new file mode 100644
index 000000000..d53c0ae4d
--- /dev/null
+++ b/ui/app/pages/provider-approval/provider-approval.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import ProviderApproval from './provider-approval.component'
+import { approveProviderRequest, rejectProviderRequest } from '../../store/actions'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    approveProviderRequest: tabID => dispatch(approveProviderRequest(tabID)),
+    rejectProviderRequest: tabID => dispatch(rejectProviderRequest(tabID)),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(ProviderApproval)
diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js
new file mode 100644
index 000000000..460cec958
--- /dev/null
+++ b/ui/app/pages/routes/index.js
@@ -0,0 +1,441 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Route, Switch, withRouter, matchPath } from 'react-router-dom'
+import { compose } from 'recompose'
+import actions from '../../store/actions'
+import log from 'loglevel'
+import { getMetaMaskAccounts, getNetworkIdentifier } from '../../selectors/selectors'
+
+// init
+import FirstTimeFlow from '../first-time-flow'
+// accounts
+const SendTransactionScreen = require('../../components/app/send/send.container')
+const ConfirmTransaction = require('../confirm-transaction')
+
+// slideout menu
+const Sidebar = require('../../components/app/sidebars').default
+const { WALLET_VIEW_SIDEBAR } = require('../../components/app/sidebars/sidebar.constants')
+
+// other views
+import Home from '../home'
+import Settings from '../settings'
+import Authenticated from '../../helpers/higher-order-components/authenticated'
+import Initialized from '../../helpers/higher-order-components/initialized'
+import Lock from '../lock'
+import UiMigrationAnnouncement from '../../components/app/ui-migration-annoucement'
+const RestoreVaultPage = require('../keychains/restore-vault').default
+const RevealSeedConfirmation = require('../keychains/reveal-seed')
+const MobileSyncPage = require('../mobile-sync')
+const AddTokenPage = require('../add-token')
+const ConfirmAddTokenPage = require('../confirm-add-token')
+const ConfirmAddSuggestedTokenPage = require('../confirm-add-suggested-token')
+const CreateAccountPage = require('../create-account')
+const NoticeScreen = require('../notice/notice')
+
+const Loading = require('../../components/ui/loading-screen')
+const LoadingNetwork = require('../../components/app/loading-network-screen').default
+const NetworkDropdown = require('../../components/app/dropdowns/network-dropdown')
+import AccountMenu from '../../components/app/account-menu'
+
+// Global Modals
+const Modal = require('../../components/app/modals').Modal
+// Global Alert
+const Alert = require('../../components/ui/alert')
+
+import AppHeader from '../../components/app/app-header'
+import UnlockPage from '../unlock-page'
+
+import {
+  submittedPendingTransactionsSelector,
+} from '../../selectors/transactions'
+
+// Routes
+import {
+  DEFAULT_ROUTE,
+  LOCK_ROUTE,
+  UNLOCK_ROUTE,
+  SETTINGS_ROUTE,
+  REVEAL_SEED_ROUTE,
+  MOBILE_SYNC_ROUTE,
+  RESTORE_VAULT_ROUTE,
+  ADD_TOKEN_ROUTE,
+  CONFIRM_ADD_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+  NEW_ACCOUNT_ROUTE,
+  SEND_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  INITIALIZE_ROUTE,
+  INITIALIZE_UNLOCK_ROUTE,
+  NOTICE_ROUTE,
+} from '../../helpers/constants/routes'
+
+// enums
+import {
+  ENVIRONMENT_TYPE_NOTIFICATION,
+  ENVIRONMENT_TYPE_POPUP,
+} from '../../../../app/scripts/lib/enums'
+
+class Routes extends Component {
+  componentWillMount () {
+    const { currentCurrency, setCurrentCurrencyToUSD } = this.props
+
+    if (!currentCurrency) {
+      setCurrentCurrencyToUSD()
+    }
+
+    this.props.history.listen((locationObj, action) => {
+      if (action === 'PUSH') {
+        const url = `&url=${encodeURIComponent('http://www.metamask.io/metametrics' + locationObj.pathname)}`
+        this.context.metricsEvent({}, {
+          currentPath: '',
+          pathname: locationObj.pathname,
+          url,
+          pageOpts: {
+            hideDimensions: true,
+          },
+        })
+      }
+    })
+  }
+
+  renderRoutes () {
+    return (
+      <Switch>
+        <Route path={LOCK_ROUTE} component={Lock} exact />
+        <Route path={INITIALIZE_ROUTE} component={FirstTimeFlow} />
+        <Initialized path={UNLOCK_ROUTE} component={UnlockPage} exact />
+        <Initialized path={RESTORE_VAULT_ROUTE} component={RestoreVaultPage} exact />
+        <Authenticated path={REVEAL_SEED_ROUTE} component={RevealSeedConfirmation} exact />
+        <Authenticated path={MOBILE_SYNC_ROUTE} component={MobileSyncPage} exact />
+        <Authenticated path={SETTINGS_ROUTE} component={Settings} />
+        <Authenticated path={NOTICE_ROUTE} component={NoticeScreen} exact />
+        <Authenticated path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransaction} />
+        <Authenticated path={SEND_ROUTE} component={SendTransactionScreen} exact />
+        <Authenticated path={ADD_TOKEN_ROUTE} component={AddTokenPage} exact />
+        <Authenticated path={CONFIRM_ADD_TOKEN_ROUTE} component={ConfirmAddTokenPage} exact />
+        <Authenticated path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE} component={ConfirmAddSuggestedTokenPage} exact />
+        <Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
+        <Authenticated path={DEFAULT_ROUTE} component={Home} exact />
+      </Switch>
+    )
+  }
+
+  onInitializationUnlockPage () {
+    const { location } = this.props
+    return Boolean(matchPath(location.pathname, { path: INITIALIZE_UNLOCK_ROUTE, exact: true }))
+  }
+
+  onConfirmPage () {
+    const { location } = this.props
+    return Boolean(matchPath(location.pathname, { path: CONFIRM_TRANSACTION_ROUTE, exact: false }))
+  }
+
+  hasProviderRequests () {
+    const { providerRequests } = this.props
+    return Array.isArray(providerRequests) && providerRequests.length > 0
+  }
+
+  hideAppHeader () {
+    const { location } = this.props
+
+    const isInitializing = Boolean(matchPath(location.pathname, {
+      path: INITIALIZE_ROUTE, exact: false,
+    }))
+
+    if (isInitializing && !this.onInitializationUnlockPage()) {
+      return true
+    }
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+      return true
+    }
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP) {
+      return this.onConfirmPage() || this.hasProviderRequests()
+    }
+  }
+
+  render () {
+    const {
+      isLoading,
+      alertMessage,
+      loadingMessage,
+      network,
+      provider,
+      frequentRpcListDetail,
+      currentView,
+      setMouseUserState,
+      sidebar,
+      submittedPendingTransactions,
+    } = this.props
+    const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
+    const loadMessage = loadingMessage || isLoadingNetwork ?
+      this.getConnectingLabel(loadingMessage) : null
+    log.debug('Main ui render function')
+
+    const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR
+      ? () => {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Wallet Sidebar',
+            name: 'Closed Sidebare Via Overlay',
+          },
+        })
+      }
+      : null
+
+    const {
+      isOpen: sidebarIsOpen,
+      transitionName: sidebarTransitionName,
+      type: sidebarType,
+      props,
+    } = sidebar
+    const { transaction: sidebarTransaction } = props || {}
+
+    return (
+      <div
+        className="app"
+        onClick={() => setMouseUserState(true)}
+        onKeyDown={e => {
+          if (e.keyCode === 9) {
+            setMouseUserState(false)
+          }
+        }}
+      >
+        <UiMigrationAnnouncement />
+        <Modal />
+        <Alert
+          visible={this.props.alertOpen}
+          msg={alertMessage}
+        />
+        {
+          !this.hideAppHeader() && (
+            <AppHeader
+              hideNetworkIndicator={this.onInitializationUnlockPage()}
+              disabled={this.onConfirmPage()}
+            />
+          )
+        }
+        <Sidebar
+          sidebarOpen={sidebarIsOpen}
+          sidebarShouldClose={sidebarTransaction && !submittedPendingTransactions.find(({ id }) => id === sidebarTransaction.id)}
+          hideSidebar={this.props.hideSidebar}
+          transitionName={sidebarTransitionName}
+          type={sidebarType}
+          sidebarProps={sidebar.props}
+          onOverlayClose={sidebarOnOverlayClose}
+        />
+        <NetworkDropdown
+          provider={provider}
+          frequentRpcListDetail={frequentRpcListDetail}
+        />
+        <AccountMenu />
+        <div className="main-container-wrapper">
+          { isLoading && <Loading loadingMessage={loadMessage} /> }
+          { !isLoading && isLoadingNetwork && <LoadingNetwork /> }
+          { this.renderRoutes() }
+        </div>
+      </div>
+    )
+  }
+
+  toggleMetamaskActive () {
+    if (!this.props.isUnlocked) {
+      // currently inactive: redirect to password box
+      var passwordBox = document.querySelector('input[type=password]')
+      if (!passwordBox) return
+      passwordBox.focus()
+    } else {
+      // currently active: deactivate
+      this.props.dispatch(actions.lockMetamask(false))
+    }
+  }
+
+  getConnectingLabel = function (loadingMessage) {
+    if (loadingMessage) {
+      return loadingMessage
+    }
+    const { provider, providerId } = this.props
+    const providerName = provider.type
+
+    let name
+
+    if (providerName === 'mainnet') {
+      name = this.context.t('connectingToMainnet')
+    } else if (providerName === 'ropsten') {
+      name = this.context.t('connectingToRopsten')
+    } else if (providerName === 'kovan') {
+      name = this.context.t('connectingToKovan')
+    } else if (providerName === 'rinkeby') {
+      name = this.context.t('connectingToRinkeby')
+    } else {
+      name = this.context.t('connectingTo', [providerId])
+    }
+
+    return name
+  }
+
+  getNetworkName () {
+    const { provider } = this.props
+    const providerName = provider.type
+
+    let name
+
+    if (providerName === 'mainnet') {
+      name = this.context.t('mainnet')
+    } else if (providerName === 'ropsten') {
+      name = this.context.t('ropsten')
+    } else if (providerName === 'kovan') {
+      name = this.context.t('kovan')
+    } else if (providerName === 'rinkeby') {
+      name = this.context.t('rinkeby')
+    } else {
+      name = this.context.t('unknownNetwork')
+    }
+
+    return name
+  }
+}
+
+Routes.propTypes = {
+  currentCurrency: PropTypes.string,
+  setCurrentCurrencyToUSD: PropTypes.func,
+  isLoading: PropTypes.bool,
+  loadingMessage: PropTypes.string,
+  alertMessage: PropTypes.string,
+  network: PropTypes.string,
+  provider: PropTypes.object,
+  frequentRpcListDetail: PropTypes.array,
+  currentView: PropTypes.object,
+  sidebar: PropTypes.object,
+  alertOpen: PropTypes.bool,
+  hideSidebar: PropTypes.func,
+  isOnboarding: PropTypes.bool,
+  isUnlocked: PropTypes.bool,
+  networkDropdownOpen: PropTypes.bool,
+  showNetworkDropdown: PropTypes.func,
+  hideNetworkDropdown: PropTypes.func,
+  history: PropTypes.object,
+  location: PropTypes.object,
+  dispatch: PropTypes.func,
+  toggleAccountMenu: PropTypes.func,
+  selectedAddress: PropTypes.string,
+  noActiveNotices: PropTypes.bool,
+  lostAccounts: PropTypes.array,
+  isInitialized: PropTypes.bool,
+  forgottenPassword: PropTypes.bool,
+  activeAddress: PropTypes.string,
+  unapprovedTxs: PropTypes.object,
+  seedWords: PropTypes.string,
+  submittedPendingTransactions: PropTypes.array,
+  unapprovedMsgCount: PropTypes.number,
+  unapprovedPersonalMsgCount: PropTypes.number,
+  unapprovedTypedMessagesCount: PropTypes.number,
+  welcomeScreenSeen: PropTypes.bool,
+  isPopup: PropTypes.bool,
+  isMouseUser: PropTypes.bool,
+  setMouseUserState: PropTypes.func,
+  t: PropTypes.func,
+  providerId: PropTypes.string,
+  providerRequests: PropTypes.array,
+}
+
+function mapStateToProps (state) {
+  const { appState, metamask } = state
+  const {
+    networkDropdownOpen,
+    sidebar,
+    alertOpen,
+    alertMessage,
+    isLoading,
+    loadingMessage,
+  } = appState
+
+  const accounts = getMetaMaskAccounts(state)
+
+  const {
+    identities,
+    address,
+    keyrings,
+    isInitialized,
+    noActiveNotices,
+    seedWords,
+    unapprovedTxs,
+    nextUnreadNotice,
+    lostAccounts,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+    providerRequests,
+  } = metamask
+  const selected = address || Object.keys(accounts)[0]
+
+  return {
+    // state from plugin
+    networkDropdownOpen,
+    sidebar,
+    alertOpen,
+    alertMessage,
+    isLoading,
+    loadingMessage,
+    noActiveNotices,
+    isInitialized,
+    isUnlocked: state.metamask.isUnlocked,
+    selectedAddress: state.metamask.selectedAddress,
+    currentView: state.appState.currentView,
+    activeAddress: state.appState.activeAddress,
+    transForward: state.appState.transForward,
+    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
+    isPopup: state.metamask.isPopup,
+    seedWords: state.metamask.seedWords,
+    submittedPendingTransactions: submittedPendingTransactionsSelector(state),
+    unapprovedTxs,
+    unapprovedMsgs: state.metamask.unapprovedMsgs,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+    menuOpen: state.appState.menuOpen,
+    network: state.metamask.network,
+    provider: state.metamask.provider,
+    forgottenPassword: state.appState.forgottenPassword,
+    nextUnreadNotice,
+    lostAccounts,
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
+    currentCurrency: state.metamask.currentCurrency,
+    isMouseUser: state.appState.isMouseUser,
+    isRevealingSeedWords: state.metamask.isRevealingSeedWords,
+    Qr: state.appState.Qr,
+    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
+    providerId: getNetworkIdentifier(state),
+
+    // state needed to get account dropdown temporarily rendering from app bar
+    identities,
+    selected,
+    keyrings,
+    providerRequests,
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    dispatch,
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+    setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+    setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
+  }
+}
+
+Routes.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Routes)
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/pages/settings/index.js
index 44a9ffa63..44a9ffa63 100644
--- a/ui/app/components/pages/settings/index.js
+++ b/ui/app/pages/settings/index.js
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
new file mode 100644
index 000000000..0e8482c63
--- /dev/null
+++ b/ui/app/pages/settings/index.scss
@@ -0,0 +1,80 @@
+@import 'info-tab/index';
+
+@import 'settings-tab/index';
+
+.settings-page {
+  position: relative;
+  background: $white;
+  display: flex;
+  flex-flow: column nowrap;
+
+  &__header {
+    padding: 25px 25px 0;
+  }
+
+  &__close-button::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $dusty-gray;
+    position: absolute;
+    top: 25px;
+    right: 30px;
+    cursor: pointer;
+  }
+
+  &__content {
+    padding: 25px;
+    height: auto;
+    overflow: auto;
+  }
+
+  &__content-row {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0 20px;
+
+    @media screen and (max-width: 575px) {
+      flex-direction: column;
+      padding: 10px 0;
+    }
+  }
+
+  &__content-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 0 5px;
+    min-height: 71px;
+
+    @media screen and (max-width: 575px) {
+      height: initial;
+      padding: 5px 0;
+    }
+
+    &--without-height {
+      height: initial;
+    }
+  }
+
+  &__content-label {
+    text-transform: capitalize;
+  }
+
+  &__content-description {
+    font-size: 14px;
+    color: $dusty-gray;
+    padding-top: 5px;
+  }
+
+  &__content-item-col {
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: 575px) {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/ui/app/components/pages/settings/info-tab/index.js b/ui/app/pages/settings/info-tab/index.js
index 7556a258d..7556a258d 100644
--- a/ui/app/components/pages/settings/info-tab/index.js
+++ b/ui/app/pages/settings/info-tab/index.js
diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/pages/settings/info-tab/index.scss
index 43ad6f652..43ad6f652 100644
--- a/ui/app/components/pages/settings/info-tab/index.scss
+++ b/ui/app/pages/settings/info-tab/index.scss
diff --git a/ui/app/components/pages/settings/info-tab/info-tab.component.js b/ui/app/pages/settings/info-tab/info-tab.component.js
index 72f7d835e..72f7d835e 100644
--- a/ui/app/components/pages/settings/info-tab/info-tab.component.js
+++ b/ui/app/pages/settings/info-tab/info-tab.component.js
diff --git a/ui/app/components/pages/settings/settings-tab/index.js b/ui/app/pages/settings/settings-tab/index.js
index 9fdaafd3f..9fdaafd3f 100644
--- a/ui/app/components/pages/settings/settings-tab/index.js
+++ b/ui/app/pages/settings/settings-tab/index.js
diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/pages/settings/settings-tab/index.scss
index ef32b0e4c..ef32b0e4c 100644
--- a/ui/app/components/pages/settings/settings-tab/index.scss
+++ b/ui/app/pages/settings/settings-tab/index.scss
diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js
new file mode 100644
index 000000000..f69c21e82
--- /dev/null
+++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js
@@ -0,0 +1,674 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import infuraCurrencies from '../../../helpers/constants/infura-conversion.json'
+import validUrl from 'valid-url'
+import { exportAsFile } from '../../../helpers/utils/util'
+import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown'
+import ToggleButton from 'react-toggle-button'
+import { REVEAL_SEED_ROUTE, MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes'
+import locales from '../../../../../app/_locales/index.json'
+import TextField from '../../../components/ui/text-field'
+import Button from '../../../components/ui/button'
+
+const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+  return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+})
+
+const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
+  return {
+    displayValue: `${code.toUpperCase()} - ${name}`,
+    key: code,
+    value: code,
+  }
+})
+
+const localeOptions = locales.map(locale => {
+  return {
+    displayValue: `${locale.name}`,
+    key: locale.code,
+    value: locale.code,
+  }
+})
+
+export default class SettingsTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    metamask: PropTypes.object,
+    setUseBlockie: PropTypes.func,
+    setHexDataFeatureFlag: PropTypes.func,
+    setPrivacyMode: PropTypes.func,
+    privacyMode: PropTypes.bool,
+    setCurrentCurrency: PropTypes.func,
+    setRpcTarget: PropTypes.func,
+    delRpcTarget: PropTypes.func,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    setFeatureFlagToBeta: PropTypes.func,
+    showClearApprovalModal: PropTypes.func,
+    showResetAccountConfirmationModal: PropTypes.func,
+    warning: PropTypes.string,
+    history: PropTypes.object,
+    updateCurrentLocale: PropTypes.func,
+    currentLocale: PropTypes.string,
+    useBlockie: PropTypes.bool,
+    sendHexData: PropTypes.bool,
+    currentCurrency: PropTypes.string,
+    conversionDate: PropTypes.number,
+    nativeCurrency: PropTypes.string,
+    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
+    setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func,
+    setAdvancedInlineGasFeatureFlag: PropTypes.func,
+    advancedInlineGas: PropTypes.bool,
+    showFiatInTestnets: PropTypes.bool,
+    setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
+    participateInMetaMetrics: PropTypes.bool,
+    setParticipateInMetaMetrics: PropTypes.func,
+  }
+
+  state = {
+    newRpc: '',
+    chainId: '',
+    showOptions: false,
+    ticker: '',
+    nickname: '',
+  }
+
+  renderCurrentConversion () {
+    const { t } = this.context
+    const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('currencyConversion') }</span>
+          <span className="settings-page__content-description">
+            { t('updatedWithDate', [Date(conversionDate)]) }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectCurrency')}
+              options={infuraCurrencyOptions}
+              selectedOption={currentCurrency}
+              onSelect={newCurrency => setCurrentCurrency(newCurrency)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderCurrentLocale () {
+    const { t } = this.context
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span className="settings-page__content-label">
+            { t('currentLanguage') }
+          </span>
+          <span className="settings-page__content-description">
+            { currentLocaleName }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectLocale')}
+              options={localeOptions}
+              selectedOption={currentLocale}
+              onSelect={async newLocale => updateCurrentLocale(newLocale)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderNewRpcUrl () {
+    const { t } = this.context
+    const { newRpc, chainId, ticker, nickname } = this.state
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('newNetwork') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <TextField
+              type="text"
+              id="new-rpc"
+              placeholder={t('rpcURL')}
+              value={newRpc}
+              onChange={e => this.setState({ newRpc: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
+                }
+              }}
+              fullWidth
+              margin="dense"
+            />
+            <TextField
+              type="text"
+              id="chainid"
+              placeholder={t('optionalChainId')}
+              value={chainId}
+              onChange={e => this.setState({ chainId: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
+                }
+              }}
+              style={{
+                display: this.state.showOptions ? null : 'none',
+              }}
+              fullWidth
+              margin="dense"
+            />
+            <TextField
+              type="text"
+              id="ticker"
+              placeholder={t('optionalSymbol')}
+              value={ticker}
+              onChange={e => this.setState({ ticker: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
+                }
+              }}
+              style={{
+                display: this.state.showOptions ? null : 'none',
+              }}
+              fullWidth
+              margin="dense"
+            />
+            <TextField
+              type="text"
+              id="nickname"
+              placeholder={t('optionalNickname')}
+              value={nickname}
+              onChange={e => this.setState({ nickname: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
+                }
+              }}
+              style={{
+                display: this.state.showOptions ? null : 'none',
+              }}
+              fullWidth
+              margin="dense"
+            />
+            <div className="flex-row flex-align-center space-between">
+              <span className="settings-tab__advanced-link"
+                onClick={e => {
+                  e.preventDefault()
+                  this.setState({ showOptions: !this.state.showOptions })
+                }}
+              >
+                { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
+              </span>
+              <button
+                className="button btn-primary settings-tab__rpc-save-button"
+                onClick={e => {
+                  e.preventDefault()
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
+                }}
+              >
+                { t('save') }
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  validateRpc (newRpc, chainId, ticker = 'ETH', nickname) {
+    const { setRpcTarget, displayWarning } = this.props
+    if (validUrl.isWebUri(newRpc)) {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Settings',
+          action: 'Custom RPC',
+          name: 'Success',
+        },
+        customVariables: {
+          networkId: newRpc,
+          chainId,
+        },
+      })
+      if (!!chainId && Number.isNaN(parseInt(chainId))) {
+        return displayWarning(`${this.context.t('invalidInput')} chainId`)
+      }
+
+      setRpcTarget(newRpc, chainId, ticker, nickname)
+    } else {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Settings',
+          action: 'Custom RPC',
+          name: 'Error',
+        },
+        customVariables: {
+          networkId: newRpc,
+          chainId,
+        },
+      })
+      const appendedRpc = `http://${newRpc}`
+
+      if (validUrl.isWebUri(appendedRpc)) {
+        displayWarning(this.context.t('uriErrorMsg'))
+      } else {
+        displayWarning(this.context.t('invalidRPC'))
+      }
+    }
+  }
+
+  renderStateLogs () {
+    const { t } = this.context
+    const { displayWarning } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('stateLogs') }</span>
+          <span className="settings-page__content-description">
+            { t('stateLogsDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="primary"
+              large
+              onClick={() => {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    displayWarning(t('stateLogError'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              }}
+            >
+              { t('downloadStateLogs') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderClearApproval () {
+    const { t } = this.context
+    const { showClearApprovalModal } = this.props
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('approvalData') }</span>
+          <span className="settings-page__content-description">
+            { t('approvalDataDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                showClearApprovalModal()
+              }}
+            >
+              { t('clearApprovalData') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderSeedWords () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('revealSeedWords') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              onClick={event => {
+                event.preventDefault()
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Reveal Seed Phrase',
+                    name: 'Reveal Seed Phrase',
+                  },
+                })
+                history.push(REVEAL_SEED_ROUTE)
+              }}
+            >
+              { t('revealSeedWords') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+
+  renderMobileSync () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('syncWithMobile') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="primary"
+              large
+              onClick={event => {
+                event.preventDefault()
+                history.push(MOBILE_SYNC_ROUTE)
+              }}
+            >
+              { t('syncWithMobile') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+
+  renderResetAccount () {
+    const { t } = this.context
+    const { showResetAccountConfirmationModal } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('resetAccount') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Reset Account',
+                    name: 'Reset Account',
+                  },
+                })
+                showResetAccountConfirmationModal()
+              }}
+            >
+              { t('resetAccount') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderBlockieOptIn () {
+    const { useBlockie, setUseBlockie } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ this.context.t('blockiesIdenticon') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={useBlockie}
+              onToggle={value => setUseBlockie(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderHexDataOptIn () {
+    const { t } = this.context
+    const { sendHexData, setHexDataFeatureFlag } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showHexData') }</span>
+          <div className="settings-page__content-description">
+            { t('showHexDataDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={sendHexData}
+              onToggle={value => setHexDataFeatureFlag(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderAdvancedGasInputInline () {
+    const { t } = this.context
+    const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showAdvancedGasInline') }</span>
+          <div className="settings-page__content-description">
+            { t('showAdvancedGasInlineDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={advancedInlineGas}
+              onToggle={value => setAdvancedInlineGasFeatureFlag(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderUsePrimaryCurrencyOptions () {
+    const { t } = this.context
+    const {
+      nativeCurrency,
+      setUseNativeCurrencyAsPrimaryCurrencyPreference,
+      useNativeCurrencyAsPrimaryCurrency,
+    } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('primaryCurrencySetting') }</span>
+          <div className="settings-page__content-description">
+            { t('primaryCurrencySettingDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <div className="settings-tab__radio-buttons">
+              <div className="settings-tab__radio-button">
+                <input
+                  type="radio"
+                  id="native-primary-currency"
+                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(true)}
+                  checked={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                />
+                <label
+                  htmlFor="native-primary-currency"
+                  className="settings-tab__radio-label"
+                >
+                  { nativeCurrency }
+                </label>
+              </div>
+              <div className="settings-tab__radio-button">
+                <input
+                  type="radio"
+                  id="fiat-primary-currency"
+                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(false)}
+                  checked={!useNativeCurrencyAsPrimaryCurrency}
+                />
+                <label
+                  htmlFor="fiat-primary-currency"
+                  className="settings-tab__radio-label"
+                >
+                  { t('fiat') }
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderShowConversionInTestnets () {
+    const { t } = this.context
+    const {
+      showFiatInTestnets,
+      setShowFiatConversionOnTestnetsPreference,
+    } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showFiatConversionInTestnets') }</span>
+          <div className="settings-page__content-description">
+            { t('showFiatConversionInTestnetsDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={showFiatInTestnets}
+              onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderPrivacyOptIn () {
+    const { t } = this.context
+    const { privacyMode, setPrivacyMode } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('privacyMode') }</span>
+          <div className="settings-page__content-description">
+            { t('privacyModeDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={privacyMode}
+              onToggle={value => setPrivacyMode(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderMetaMetricsOptIn () {
+    const { t } = this.context
+    const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('participateInMetaMetrics') }</span>
+          <div className="settings-page__content-description">
+            <span>{ t('participateInMetaMetricsDescription') }</span>
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={participateInMetaMetrics}
+              onToggle={value => setParticipateInMetaMetrics(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { warning } = this.props
+
+    return (
+      <div className="settings-page__content">
+        { warning && <div className="settings-tab__error">{ warning }</div> }
+        { this.renderCurrentConversion() }
+        { this.renderUsePrimaryCurrencyOptions() }
+        { this.renderShowConversionInTestnets() }
+        { this.renderCurrentLocale() }
+        { this.renderNewRpcUrl() }
+        { this.renderStateLogs() }
+        { this.renderSeedWords() }
+        { this.renderResetAccount() }
+        { this.renderClearApproval() }
+        { this.renderPrivacyOptIn() }
+        { this.renderHexDataOptIn() }
+        { this.renderAdvancedGasInputInline() }
+        { this.renderBlockieOptIn() }
+        { this.renderMobileSync() }
+        { this.renderMetaMetricsOptIn() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/settings-tab/settings-tab.container.js b/ui/app/pages/settings/settings-tab/settings-tab.container.js
new file mode 100644
index 000000000..3ae4985d7
--- /dev/null
+++ b/ui/app/pages/settings/settings-tab/settings-tab.container.js
@@ -0,0 +1,81 @@
+import SettingsTab from './settings-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {
+  setCurrentCurrency,
+  updateAndSetCustomRpc,
+  displayWarning,
+  revealSeedConfirmation,
+  setUseBlockie,
+  updateCurrentLocale,
+  setFeatureFlag,
+  showModal,
+  setUseNativeCurrencyAsPrimaryCurrencyPreference,
+  setShowFiatConversionOnTestnetsPreference,
+  setParticipateInMetaMetrics,
+} from '../../../store/actions'
+import { preferencesSelector } from '../../../selectors/selectors'
+
+const mapStateToProps = state => {
+  const { appState: { warning }, metamask } = state
+  const {
+    currentCurrency,
+    conversionDate,
+    nativeCurrency,
+    useBlockie,
+    featureFlags: {
+      sendHexData,
+      privacyMode,
+      advancedInlineGas,
+    } = {},
+    provider = {},
+    currentLocale,
+    participateInMetaMetrics,
+  } = metamask
+  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state)
+
+  return {
+    warning,
+    currentLocale,
+    currentCurrency,
+    conversionDate,
+    nativeCurrency,
+    useBlockie,
+    sendHexData,
+    advancedInlineGas,
+    privacyMode,
+    provider,
+    useNativeCurrencyAsPrimaryCurrency,
+    showFiatInTestnets,
+    participateInMetaMetrics,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
+    setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname)),
+    displayWarning: warning => dispatch(displayWarning(warning)),
+    revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
+    setUseBlockie: value => dispatch(setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
+    setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
+    setAdvancedInlineGasFeatureFlag: shouldShow => dispatch(setFeatureFlag('advancedInlineGas', shouldShow)),
+    setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)),
+    showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
+    setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
+      return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
+    },
+    setShowFiatConversionOnTestnetsPreference: value => {
+      return dispatch(setShowFiatConversionOnTestnetsPreference(value))
+    },
+    showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
+    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SettingsTab)
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
new file mode 100644
index 000000000..d67d3fcfe
--- /dev/null
+++ b/ui/app/pages/settings/settings.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route, matchPath } from 'react-router-dom'
+import TabBar from '../../components/app/tab-bar'
+import SettingsTab from './settings-tab'
+import InfoTab from './info-tab'
+import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../helpers/constants/routes'
+
+export default class SettingsPage extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object,
+    history: PropTypes.object,
+    t: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { history, location } = this.props
+
+    return (
+      <div className="main-container settings-page">
+        <div className="settings-page__header">
+          <div
+            className="settings-page__close-button"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          />
+          <TabBar
+            tabs={[
+              { content: this.context.t('settings'), key: SETTINGS_ROUTE },
+              { content: this.context.t('info'), key: INFO_ROUTE },
+            ]}
+            isActive={key => matchPath(location.pathname, { path: key, exact: true })}
+            onSelect={key => history.push(key)}
+          />
+        </div>
+        <Switch>
+          <Route
+            exact
+            path={INFO_ROUTE}
+            component={InfoTab}
+          />
+          <Route
+            exact
+            path={SETTINGS_ROUTE}
+            component={SettingsTab}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/unlock-page/index.js b/ui/app/pages/unlock-page/index.js
index be80cde4f..be80cde4f 100644
--- a/ui/app/components/pages/unlock-page/index.js
+++ b/ui/app/pages/unlock-page/index.js
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/pages/unlock-page/index.scss
index 3d44bd037..3d44bd037 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/pages/unlock-page/index.scss
diff --git a/ui/app/pages/unlock-page/unlock-page.component.js b/ui/app/pages/unlock-page/unlock-page.component.js
new file mode 100644
index 000000000..3aeb2a59b
--- /dev/null
+++ b/ui/app/pages/unlock-page/unlock-page.component.js
@@ -0,0 +1,191 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '@material-ui/core/Button'
+import TextField from '../../components/ui/text-field'
+import getCaretCoordinates from 'textarea-caret'
+import { EventEmitter } from 'events'
+import Mascot from '../../components/ui/mascot'
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
+
+export default class UnlockPage extends Component {
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    isUnlocked: PropTypes.bool,
+    onImport: PropTypes.func,
+    onRestore: PropTypes.func,
+    onSubmit: PropTypes.func,
+    forceUpdateMetamaskState: PropTypes.func,
+    showOptInModal: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      password: '',
+      error: null,
+    }
+
+    this.submitting = false
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  componentWillMount () {
+    const { isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  handleSubmit = async event => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { password } = this.state
+    const { onSubmit, forceUpdateMetamaskState, showOptInModal } = this.props
+
+    if (password === '' || this.submitting) {
+      return
+    }
+
+    this.setState({ error: null })
+    this.submitting = true
+
+    try {
+      await onSubmit(password)
+      const newState = await forceUpdateMetamaskState()
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Navigation',
+          action: 'Unlock',
+          name: 'Success',
+        },
+        isNewVisit: true,
+      })
+
+      if (newState.participateInMetaMetrics === null || newState.participateInMetaMetrics === undefined) {
+        showOptInModal()
+      }
+    } catch ({ message }) {
+      if (message === 'Incorrect password') {
+        const newState = await forceUpdateMetamaskState()
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Navigation',
+            action: 'Unlock',
+            name: 'Incorrect Passowrd',
+          },
+          customVariables: {
+            numberOfTokens: newState.tokens.length,
+            numberOfAccounts: Object.keys(newState.accounts).length,
+          },
+        })
+      }
+
+      this.setState({ error: message })
+      this.submitting = false
+    }
+  }
+
+  handleInputChange ({ target }) {
+    this.setState({ password: target.value, error: null })
+
+    // tell mascot to look at page action
+    const element = target
+    const boundingRect = element.getBoundingClientRect()
+    const coordinates = getCaretCoordinates(element, element.selectionEnd)
+    this.animationEventEmitter.emit('point', {
+      x: boundingRect.left + coordinates.left - element.scrollLeft,
+      y: boundingRect.top + coordinates.top - element.scrollTop,
+    })
+  }
+
+  renderSubmitButton () {
+    const style = {
+      backgroundColor: '#f7861c',
+      color: 'white',
+      marginTop: '20px',
+      height: '60px',
+      fontWeight: '400',
+      boxShadow: 'none',
+      borderRadius: '4px',
+    }
+
+    return (
+      <Button
+        type="submit"
+        style={style}
+        disabled={!this.state.password}
+        fullWidth
+        variant="raised"
+        size="large"
+        onClick={this.handleSubmit}
+        disableRipple
+      >
+        { this.context.t('login') }
+      </Button>
+    )
+  }
+
+  render () {
+    const { password, error } = this.state
+    const { t } = this.context
+    const { onImport, onRestore } = this.props
+
+    return (
+      <div className="unlock-page__container">
+        <div className="unlock-page">
+          <div className="unlock-page__mascot-container">
+            <Mascot
+              animationEventEmitter={this.animationEventEmitter}
+              width="120"
+              height="120"
+            />
+          </div>
+          <h1 className="unlock-page__title">
+            { t('welcomeBack') }
+          </h1>
+          <div>{ t('unlockMessage') }</div>
+          <form
+            className="unlock-page__form"
+            onSubmit={this.handleSubmit}
+          >
+            <TextField
+              id="password"
+              label={t('password')}
+              type="password"
+              value={password}
+              onChange={event => this.handleInputChange(event)}
+              error={error}
+              autoFocus
+              autoComplete="current-password"
+              material
+              fullWidth
+            />
+          </form>
+          { this.renderSubmitButton() }
+          <div className="unlock-page__links">
+            <div
+              className="unlock-page__link"
+              onClick={() => onRestore()}
+            >
+              { t('restoreFromSeed') }
+            </div>
+            <div
+              className="unlock-page__link unlock-page__link--import"
+              onClick={() => onImport()}
+            >
+              { t('importUsingSeed') }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/unlock-page/unlock-page.container.js b/ui/app/pages/unlock-page/unlock-page.container.js
new file mode 100644
index 000000000..bd43666fc
--- /dev/null
+++ b/ui/app/pages/unlock-page/unlock-page.container.js
@@ -0,0 +1,64 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../helpers/constants/routes'
+import {
+  tryUnlockMetamask,
+  forgotPassword,
+  markPasswordForgotten,
+  forceUpdateMetamaskState,
+  showModal,
+} from '../../store/actions'
+import UnlockPage from './unlock-page.component'
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked } } = state
+  return {
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    forgotPassword: () => dispatch(forgotPassword()),
+    tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
+    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
+    forceUpdateMetamaskState: () => forceUpdateMetamaskState(dispatch),
+    showOptInModal: () => dispatch(showModal({ name: 'METAMETRICS_OPT_IN_MODAL' })),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { markPasswordForgotten, tryUnlockMetamask, ...restDispatchProps } = dispatchProps
+  const { history, onSubmit: ownPropsSubmit, ...restOwnProps } = ownProps
+
+  const onImport = () => {
+    markPasswordForgotten()
+    history.push(RESTORE_VAULT_ROUTE)
+
+    if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+      global.platform.openExtensionInBrowser()
+    }
+  }
+
+  const onSubmit = async password => {
+    await tryUnlockMetamask(password)
+    history.push(DEFAULT_ROUTE)
+  }
+
+  return {
+    ...stateProps,
+    ...restDispatchProps,
+    ...restOwnProps,
+    onImport,
+    onRestore: onImport,
+    onSubmit: ownPropsSubmit || onSubmit,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(UnlockPage)
diff --git a/ui/app/reducers.js b/ui/app/reducers.js
deleted file mode 100644
index 786af853d..000000000
--- a/ui/app/reducers.js
+++ /dev/null
@@ -1,95 +0,0 @@
-const clone = require('clone')
-const extend = require('xtend')
-const copyToClipboard = require('copy-to-clipboard')
-
-//
-// Sub-Reducers take in the complete state and return their sub-state
-//
-const reduceMetamask = require('./reducers/metamask')
-const reduceApp = require('./reducers/app')
-const reduceLocale = require('./reducers/locale')
-const reduceSend = require('./ducks/send.duck').default
-import reduceConfirmTransaction from './ducks/confirm-transaction.duck'
-import reduceGas from './ducks/gas.duck'
-
-window.METAMASK_CACHED_LOG_STATE = null
-
-module.exports = rootReducer
-
-function rootReducer (state, action) {
-  // clone
-  state = extend(state)
-
-  if (action.type === 'GLOBAL_FORCE_UPDATE') {
-    return action.value
-  }
-
-  //
-  // MetaMask
-  //
-
-  state.metamask = reduceMetamask(state, action)
-
-  //
-  // AppState
-  //
-
-  state.appState = reduceApp(state, action)
-
-  //
-  // LocaleMessages
-  //
-
-  state.localeMessages = reduceLocale(state, action)
-
-  //
-  // Send
-  //
-
-  state.send = reduceSend(state, action)
-
-  state.confirmTransaction = reduceConfirmTransaction(state, action)
-
-  state.gas = reduceGas(state, action)
-
-  window.METAMASK_CACHED_LOG_STATE = state
-  return state
-}
-
-window.getCleanAppState = function () {
-  const state = clone(window.METAMASK_CACHED_LOG_STATE)
-  // append additional information
-  state.version = global.platform.getVersion()
-  state.browser = window.navigator.userAgent
-  // ensure seedWords are not included
-  if (state.metamask) delete state.metamask.seedWords
-  if (state.appState.currentView) delete state.appState.currentView.seedWords
-  return state
-}
-
-window.logStateString = function (cb) {
-  const state = window.getCleanAppState()
-  global.platform.getPlatformInfo((err, platform) => {
-    if (err) return cb(err)
-    state.platform = platform
-    const stateString = JSON.stringify(state, removeSeedWords, 2)
-    cb(null, stateString)
-  })
-}
-
-window.logState = function (toClipboard) {
-  return window.logStateString((err, result) => {
-    if (err) {
-      console.error(err.message)
-    } else if (toClipboard) {
-      copyToClipboard(result)
-      console.log('State log copied')
-    } else {
-      console.log(result)
-    }
-  })
-}
-
-function removeSeedWords (key, value) {
-  return key === 'seedWords' ? undefined : value
-}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
deleted file mode 100644
index 22cfe7f8d..000000000
--- a/ui/app/reducers/app.js
+++ /dev/null
@@ -1,788 +0,0 @@
-const extend = require('xtend')
-const actions = require('../actions')
-const txHelper = require('../../lib/tx-helper')
-const log = require('loglevel')
-
-module.exports = reduceApp
-
-
-function reduceApp (state, action) {
-  log.debug('App Reducer got ' + action.type)
-  // clone and defaults
-  const selectedAddress = state.metamask.selectedAddress
-  const hasUnconfActions = checkUnconfActions(state)
-  let name = 'accounts'
-  if (selectedAddress) {
-    name = 'accountDetail'
-  }
-
-  if (hasUnconfActions) {
-    log.debug('pending txs detected, defaulting to conf-tx view.')
-    name = 'confTx'
-  }
-
-  var defaultView = {
-    name,
-    detailView: null,
-    context: selectedAddress,
-  }
-
-  // confirm seed words
-  var seedWords = state.metamask.seedWords
-  var seedConfView = {
-    name: 'createVaultComplete',
-    seedWords,
-  }
-
-  // default state
-  var appState = extend({
-    shouldClose: false,
-    menuOpen: false,
-    modal: {
-      open: false,
-      modalState: {
-        name: null,
-        props: {},
-      },
-      previousModalState: {
-        name: null,
-      },
-    },
-    sidebar: {
-      isOpen: false,
-      transitionName: '',
-      type: '',
-      props: {},
-    },
-    alertOpen: false,
-    alertMessage: null,
-    qrCodeData: null,
-    networkDropdownOpen: false,
-    currentView: seedWords ? seedConfView : defaultView,
-    accountDetail: {
-      subview: 'transactions',
-    },
-    // Used to render transition direction
-    transForward: true,
-    // Used to display loading indicator
-    isLoading: false,
-    // Used to display error text
-    warning: null,
-    buyView: {},
-    isMouseUser: false,
-    gasIsLoading: false,
-    networkNonce: null,
-    defaultHdPaths: {
-      trezor: `m/44'/60'/0'/0`,
-      ledger: `m/44'/60'/0'/0/0`,
-    },
-    lastSelectedProvider: null,
-  }, state.appState)
-
-  switch (action.type) {
-    // dropdown methods
-    case actions.NETWORK_DROPDOWN_OPEN:
-      return extend(appState, {
-        networkDropdownOpen: true,
-      })
-
-    case actions.NETWORK_DROPDOWN_CLOSE:
-      return extend(appState, {
-        networkDropdownOpen: false,
-      })
-
-    // sidebar methods
-    case actions.SIDEBAR_OPEN:
-      return extend(appState, {
-        sidebar: {
-          ...action.value,
-          isOpen: true,
-        },
-      })
-
-    case actions.SIDEBAR_CLOSE:
-      return extend(appState, {
-        sidebar: {
-          ...appState.sidebar,
-          isOpen: false,
-        },
-      })
-
-    // alert methods
-    case actions.ALERT_OPEN:
-      return extend(appState, {
-        alertOpen: true,
-        alertMessage: action.value,
-      })
-
-    case actions.ALERT_CLOSE:
-      return extend(appState, {
-        alertOpen: false,
-        alertMessage: null,
-      })
-
-    // qr scanner methods
-    case actions.QR_CODE_DETECTED:
-      return extend(appState, {
-        qrCodeData: action.value,
-      })
-
-
-    // modal methods:
-    case actions.MODAL_OPEN:
-      const { name, ...modalProps } = action.payload
-
-      return extend(appState, {
-        modal: {
-          open: true,
-          modalState: {
-            name: name,
-            props: { ...modalProps },
-          },
-          previousModalState: { ...appState.modal.modalState },
-        },
-      })
-
-    case actions.MODAL_CLOSE:
-      return extend(appState, {
-        modal: Object.assign(
-          state.appState.modal,
-          { open: false },
-          { modalState: { name: null, props: {} } },
-          { previousModalState: appState.modal.modalState},
-        ),
-      })
-
-    // transition methods
-    case actions.TRANSITION_FORWARD:
-      return extend(appState, {
-        transForward: true,
-      })
-
-    case actions.TRANSITION_BACKWARD:
-      return extend(appState, {
-        transForward: false,
-      })
-
-    // intialize
-
-    case actions.SHOW_CREATE_VAULT:
-      return extend(appState, {
-        currentView: {
-          name: 'createVault',
-        },
-        transForward: true,
-        warning: null,
-      })
-
-    case actions.SHOW_RESTORE_VAULT:
-      return extend(appState, {
-        currentView: {
-          name: 'restoreVault',
-        },
-        transForward: true,
-        forgottenPassword: true,
-      })
-
-    case actions.FORGOT_PASSWORD:
-      const newState = extend(appState, {
-        forgottenPassword: action.value,
-      })
-
-      if (action.value) {
-        newState.currentView = {
-          name: 'restoreVault',
-        }
-      }
-
-      return newState
-
-    case actions.SHOW_INIT_MENU:
-      return extend(appState, {
-        currentView: defaultView,
-        transForward: false,
-      })
-
-    case actions.SHOW_CONFIG_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'config',
-          context: appState.currentView.context,
-        },
-        transForward: action.value,
-      })
-
-    case actions.SHOW_ADD_TOKEN_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'add-token',
-          context: appState.currentView.context,
-        },
-        transForward: action.value,
-      })
-
-    case actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'add-suggested-token',
-          context: appState.currentView.context,
-        },
-        transForward: action.value,
-      })
-
-    case actions.SHOW_IMPORT_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'import-menu',
-        },
-        transForward: true,
-        warning: null,
-      })
-
-    case actions.SHOW_NEW_ACCOUNT_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'new-account-page',
-          context: action.formToSelect,
-        },
-        transForward: true,
-        warning: null,
-      })
-
-    case actions.SET_NEW_ACCOUNT_FORM:
-      return extend(appState, {
-        currentView: {
-          name: appState.currentView.name,
-          context: action.formToSelect,
-        },
-      })
-
-    case actions.SHOW_INFO_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'info',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-      })
-
-  case actions.CREATE_NEW_VAULT_IN_PROGRESS:
-      return extend(appState, {
-        currentView: {
-          name: 'createVault',
-          inProgress: true,
-        },
-        transForward: true,
-        isLoading: true,
-      })
-
-    case actions.SHOW_NEW_VAULT_SEED:
-      return extend(appState, {
-        currentView: {
-          name: 'createVaultComplete',
-          seedWords: action.value,
-        },
-        transForward: true,
-        isLoading: false,
-      })
-
-    case actions.NEW_ACCOUNT_SCREEN:
-      return extend(appState, {
-        currentView: {
-          name: 'new-account',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-      })
-
-    case actions.SHOW_SEND_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'sendTransaction',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-        warning: null,
-      })
-
-    case actions.SHOW_SEND_TOKEN_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'sendToken',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-        warning: null,
-      })
-
-    case actions.SHOW_NEW_KEYCHAIN:
-      return extend(appState, {
-        currentView: {
-          name: 'newKeychain',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-      })
-
-  // unlock
-
-    case actions.UNLOCK_METAMASK:
-      return extend(appState, {
-        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
-        detailView: {},
-        transForward: true,
-        isLoading: false,
-        warning: null,
-      })
-
-    case actions.LOCK_METAMASK:
-      return extend(appState, {
-        currentView: defaultView,
-        transForward: false,
-        warning: null,
-      })
-
-    case actions.BACK_TO_INIT_MENU:
-      return extend(appState, {
-        warning: null,
-        transForward: false,
-        forgottenPassword: true,
-        currentView: {
-          name: 'InitMenu',
-        },
-      })
-
-    case actions.BACK_TO_UNLOCK_VIEW:
-      return extend(appState, {
-        warning: null,
-        transForward: true,
-        forgottenPassword: false,
-        currentView: {
-          name: 'UnlockScreen',
-        },
-      })
-  // reveal seed words
-
-    case actions.REVEAL_SEED_CONFIRMATION:
-      return extend(appState, {
-        currentView: {
-          name: 'reveal-seed-conf',
-        },
-        transForward: true,
-        warning: null,
-      })
-
-  // accounts
-
-    case actions.SET_SELECTED_ACCOUNT:
-      return extend(appState, {
-        activeAddress: action.value,
-      })
-
-    case actions.GO_HOME:
-      return extend(appState, {
-        currentView: extend(appState.currentView, {
-          name: 'accountDetail',
-        }),
-        accountDetail: {
-          subview: 'transactions',
-          accountExport: 'none',
-          privateKey: '',
-        },
-        transForward: false,
-        warning: null,
-      })
-
-    case actions.SHOW_ACCOUNT_DETAIL:
-      return extend(appState, {
-        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
-        currentView: {
-          name: 'accountDetail',
-          context: action.value,
-        },
-        accountDetail: {
-          subview: 'transactions',
-          accountExport: 'none',
-          privateKey: '',
-        },
-        transForward: false,
-      })
-
-    case actions.BACK_TO_ACCOUNT_DETAIL:
-      return extend(appState, {
-        currentView: {
-          name: 'accountDetail',
-          context: action.value,
-        },
-        accountDetail: {
-          subview: 'transactions',
-          accountExport: 'none',
-          privateKey: '',
-        },
-        transForward: false,
-      })
-
-    case actions.SHOW_ACCOUNTS_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: seedWords ? 'createVaultComplete' : 'accounts',
-          seedWords,
-        },
-        transForward: true,
-        isLoading: false,
-        warning: null,
-        scrollToBottom: false,
-        forgottenPassword: false,
-      })
-
-    case actions.SHOW_NOTICE:
-      return extend(appState, {
-        transForward: true,
-        isLoading: false,
-      })
-
-    case actions.REVEAL_ACCOUNT:
-      return extend(appState, {
-        scrollToBottom: true,
-      })
-
-    case actions.SHOW_CONF_TX_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: 'confTx',
-          context: action.id ? indexForPending(state, action.id) : 0,
-        },
-        transForward: action.transForward,
-        warning: null,
-        isLoading: false,
-      })
-
-    case actions.SHOW_CONF_MSG_PAGE:
-      return extend(appState, {
-        currentView: {
-          name: hasUnconfActions ? 'confTx' : 'account-detail',
-          context: 0,
-        },
-        transForward: true,
-        warning: null,
-        isLoading: false,
-      })
-
-    case actions.COMPLETED_TX:
-      log.debug('reducing COMPLETED_TX for tx ' + action.value)
-      const otherUnconfActions = getUnconfActionList(state)
-        .filter(tx => tx.id !== action.value)
-      const hasOtherUnconfActions = otherUnconfActions.length > 0
-
-      if (hasOtherUnconfActions) {
-        log.debug('reducer detected txs - rendering confTx view')
-        return extend(appState, {
-          transForward: false,
-          currentView: {
-            name: 'confTx',
-            context: 0,
-          },
-          warning: null,
-        })
-      } else {
-        log.debug('attempting to close popup')
-        return extend(appState, {
-          // indicate notification should close
-          shouldClose: true,
-          transForward: false,
-          warning: null,
-          currentView: {
-            name: 'accountDetail',
-            context: state.metamask.selectedAddress,
-          },
-          accountDetail: {
-            subview: 'transactions',
-          },
-        })
-      }
-
-    case actions.NEXT_TX:
-      return extend(appState, {
-        transForward: true,
-        currentView: {
-          name: 'confTx',
-          context: ++appState.currentView.context,
-          warning: null,
-        },
-      })
-
-    case actions.VIEW_PENDING_TX:
-      const context = indexForPending(state, action.value)
-      return extend(appState, {
-        transForward: true,
-        currentView: {
-          name: 'confTx',
-          context,
-          warning: null,
-        },
-      })
-
-    case actions.PREVIOUS_TX:
-      return extend(appState, {
-        transForward: false,
-        currentView: {
-          name: 'confTx',
-          context: --appState.currentView.context,
-          warning: null,
-        },
-      })
-
-    case actions.TRANSACTION_ERROR:
-      return extend(appState, {
-        currentView: {
-          name: 'confTx',
-          errorMessage: 'There was a problem submitting this transaction.',
-        },
-      })
-
-    case actions.UNLOCK_FAILED:
-      return extend(appState, {
-        warning: action.value || 'Incorrect password. Try again.',
-      })
-
-    case actions.UNLOCK_SUCCEEDED:
-      return extend(appState, {
-        warning: '',
-      })
-
-    case actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH:
-      const { device, path } = action.value
-      const newDefaults = {...appState.defaultHdPaths}
-      newDefaults[device] = path
-
-      return extend(appState, {
-        defaultHdPaths: newDefaults,
-      })
-
-    case actions.SHOW_LOADING:
-      return extend(appState, {
-        isLoading: true,
-        loadingMessage: action.value,
-      })
-
-    case actions.HIDE_LOADING:
-      return extend(appState, {
-        isLoading: false,
-      })
-
-    case actions.SHOW_SUB_LOADING_INDICATION:
-      return extend(appState, {
-        isSubLoading: true,
-      })
-
-    case actions.HIDE_SUB_LOADING_INDICATION:
-      return extend(appState, {
-        isSubLoading: false,
-      })
-    case actions.CLEAR_SEED_WORD_CACHE:
-      return extend(appState, {
-        transForward: true,
-        currentView: {},
-        isLoading: false,
-        accountDetail: {
-          subview: 'transactions',
-          accountExport: 'none',
-          privateKey: '',
-        },
-      })
-
-    case actions.DISPLAY_WARNING:
-      return extend(appState, {
-        warning: action.value,
-        isLoading: false,
-      })
-
-    case actions.HIDE_WARNING:
-      return extend(appState, {
-        warning: undefined,
-      })
-
-    case actions.REQUEST_ACCOUNT_EXPORT:
-      return extend(appState, {
-        transForward: true,
-        currentView: {
-          name: 'accountDetail',
-          context: appState.currentView.context,
-        },
-        accountDetail: {
-          subview: 'export',
-          accountExport: 'requested',
-        },
-      })
-
-    case actions.EXPORT_ACCOUNT:
-      return extend(appState, {
-        accountDetail: {
-          subview: 'export',
-          accountExport: 'completed',
-        },
-      })
-
-    case actions.SHOW_PRIVATE_KEY:
-      return extend(appState, {
-        accountDetail: {
-          subview: 'export',
-          accountExport: 'completed',
-          privateKey: action.value,
-        },
-      })
-
-    case actions.BUY_ETH_VIEW:
-      return extend(appState, {
-        transForward: true,
-        currentView: {
-          name: 'buyEth',
-          context: appState.currentView.name,
-        },
-        identity: state.metamask.identities[action.value],
-        buyView: {
-          subview: 'Coinbase',
-          amount: '15.00',
-          buyAddress: action.value,
-          formView: {
-            coinbase: true,
-            shapeshift: false,
-          },
-        },
-      })
-
-    case actions.ONBOARDING_BUY_ETH_VIEW:
-      return extend(appState, {
-        transForward: true,
-        currentView: {
-          name: 'onboardingBuyEth',
-          context: appState.currentView.name,
-        },
-        identity: state.metamask.identities[action.value],
-      })
-
-    case actions.COINBASE_SUBVIEW:
-      return extend(appState, {
-        buyView: {
-          subview: 'Coinbase',
-          formView: {
-            coinbase: true,
-            shapeshift: false,
-          },
-          buyAddress: appState.buyView.buyAddress,
-          amount: appState.buyView.amount,
-        },
-      })
-
-    case actions.SHAPESHIFT_SUBVIEW:
-      return extend(appState, {
-        buyView: {
-          subview: 'ShapeShift',
-          formView: {
-            coinbase: false,
-            shapeshift: true,
-            marketinfo: action.value.marketinfo,
-            coinOptions: action.value.coinOptions,
-          },
-          buyAddress: action.value.buyAddress || appState.buyView.buyAddress,
-          amount: appState.buyView.amount || 0,
-        },
-      })
-
-    case actions.PAIR_UPDATE:
-      return extend(appState, {
-        buyView: {
-          subview: 'ShapeShift',
-          formView: {
-            coinbase: false,
-            shapeshift: true,
-            marketinfo: action.value.marketinfo,
-            coinOptions: appState.buyView.formView.coinOptions,
-          },
-          buyAddress: appState.buyView.buyAddress,
-          amount: appState.buyView.amount,
-          warning: null,
-        },
-      })
-
-    case actions.SHOW_QR:
-      return extend(appState, {
-        qrRequested: true,
-        transForward: true,
-
-        Qr: {
-          message: action.value.message,
-          data: action.value.data,
-        },
-      })
-
-    case actions.SHOW_QR_VIEW:
-      return extend(appState, {
-        currentView: {
-          name: 'qr',
-          context: appState.currentView.context,
-        },
-        transForward: true,
-        Qr: {
-          message: action.value.message,
-          data: action.value.data,
-        },
-      })
-
-    case actions.SET_MOUSE_USER_STATE:
-      return extend(appState, {
-        isMouseUser: action.value,
-      })
-
-    case actions.GAS_LOADING_STARTED:
-      return extend(appState, {
-        gasIsLoading: true,
-      })
-
-    case actions.GAS_LOADING_FINISHED:
-      return extend(appState, {
-        gasIsLoading: false,
-      })
-
-    case actions.SET_NETWORK_NONCE:
-      return extend(appState, {
-        networkNonce: action.value,
-      })
-
-    case actions.SET_PREVIOUS_PROVIDER:
-      if (action.value === 'loading') {
-        return appState
-      }
-      return extend(appState, {
-        lastSelectedProvider: action.value,
-      })
-
-    default:
-      return appState
-  }
-}
-
-function checkUnconfActions (state) {
-  const unconfActionList = getUnconfActionList(state)
-  const hasUnconfActions = unconfActionList.length > 0
-  return hasUnconfActions
-}
-
-function getUnconfActionList (state) {
-  const { unapprovedTxs, unapprovedMsgs,
-    unapprovedPersonalMsgs, unapprovedTypedMessages, network } = state.metamask
-
-  const unconfActionList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network)
-  return unconfActionList
-}
-
-function indexForPending (state, txId) {
-  const unconfTxList = getUnconfActionList(state)
-  const match = unconfTxList.find((tx) => tx.id === txId)
-  const index = unconfTxList.indexOf(match)
-  return index
-}
-
-// function indexForLastPending (state) {
-//   return getUnconfActionList(state).length
-// }
diff --git a/ui/app/reducers/locale.js b/ui/app/reducers/locale.js
deleted file mode 100644
index bdd97acb4..000000000
--- a/ui/app/reducers/locale.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const extend = require('xtend')
-const actions = require('../actions')
-
-module.exports = reduceMetamask
-
-function reduceMetamask (state, action) {
-  const localeMessagesState = extend({}, state.localeMessages)
-
-  switch (action.type) {
-    case actions.SET_LOCALE_MESSAGES:
-      return extend(localeMessagesState, {
-        current: action.value,
-      })
-    default:
-      return localeMessagesState
-  }
-}
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
deleted file mode 100644
index d4b920748..000000000
--- a/ui/app/reducers/metamask.js
+++ /dev/null
@@ -1,419 +0,0 @@
-const extend = require('xtend')
-const actions = require('../actions')
-const { getEnvironmentType } = require('../../../app/scripts/lib/util')
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums')
-const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/enums')
-
-module.exports = reduceMetamask
-
-function reduceMetamask (state, action) {
-  let newState
-
-  // clone + defaults
-  var metamaskState = extend({
-    isInitialized: false,
-    isUnlocked: false,
-    isAccountMenuOpen: false,
-    isPopup: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP,
-    rpcTarget: 'https://rawtestrpc.metamask.io/',
-    identities: {},
-    unapprovedTxs: {},
-    noActiveNotices: true,
-    nextUnreadNotice: undefined,
-    frequentRpcList: [],
-    addressBook: [],
-    selectedTokenAddress: null,
-    contractExchangeRates: {},
-    tokenExchangeRates: {},
-    tokens: [],
-    pendingTokens: {},
-    send: {
-      gasLimit: null,
-      gasPrice: null,
-      gasTotal: null,
-      tokenBalance: '0x0',
-      from: '',
-      to: '',
-      amount: '0',
-      memo: '',
-      errors: {},
-      maxModeOn: false,
-      editingTransactionId: null,
-      forceGasMin: null,
-      toNickname: '',
-    },
-    coinOptions: {},
-    useBlockie: false,
-    featureFlags: {},
-    networkEndpointType: OLD_UI_NETWORK_TYPE,
-    isRevealingSeedWords: false,
-    welcomeScreenSeen: false,
-    currentLocale: '',
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
-      showFiatInTestnets: false,
-    },
-    firstTimeFlowType: null,
-    completedOnboarding: false,
-    knownMethodData: {},
-    participateInMetaMetrics: null,
-    metaMetricsSendCount: 0,
-  }, state.metamask)
-
-  switch (action.type) {
-
-    case actions.SHOW_ACCOUNTS_PAGE:
-      newState = extend(metamaskState, {
-        isRevealingSeedWords: false,
-      })
-      delete newState.seedWords
-      return newState
-
-    case actions.SHOW_NOTICE:
-      return extend(metamaskState, {
-        noActiveNotices: false,
-        nextUnreadNotice: action.value,
-      })
-
-    case actions.CLEAR_NOTICES:
-      return extend(metamaskState, {
-        noActiveNotices: true,
-        nextUnreadNotice: undefined,
-      })
-
-    case actions.UPDATE_METAMASK_STATE:
-      return extend(metamaskState, action.value)
-
-    case actions.UNLOCK_METAMASK:
-      return extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: true,
-        selectedAddress: action.value,
-      })
-
-    case actions.LOCK_METAMASK:
-      return extend(metamaskState, {
-        isUnlocked: false,
-      })
-
-    case actions.SET_RPC_LIST:
-      return extend(metamaskState, {
-        frequentRpcList: action.value,
-      })
-
-    case actions.SET_RPC_TARGET:
-      return extend(metamaskState, {
-        provider: {
-          type: 'rpc',
-          rpcTarget: action.value,
-        },
-      })
-
-    case actions.SET_PROVIDER_TYPE:
-      return extend(metamaskState, {
-        provider: {
-          type: action.value,
-        },
-      })
-
-    case actions.COMPLETED_TX:
-      var stringId = String(action.id)
-      newState = extend(metamaskState, {
-        unapprovedTxs: {},
-        unapprovedMsgs: {},
-      })
-      for (const id in metamaskState.unapprovedTxs) {
-        if (id !== stringId) {
-          newState.unapprovedTxs[id] = metamaskState.unapprovedTxs[id]
-        }
-      }
-      for (const id in metamaskState.unapprovedMsgs) {
-        if (id !== stringId) {
-          newState.unapprovedMsgs[id] = metamaskState.unapprovedMsgs[id]
-        }
-      }
-      return newState
-
-    case actions.EDIT_TX:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          editingTransactionId: action.value,
-        },
-      })
-
-
-    case actions.SHOW_NEW_VAULT_SEED:
-      return extend(metamaskState, {
-        isRevealingSeedWords: true,
-        seedWords: action.value,
-      })
-
-    case actions.CLEAR_SEED_WORD_CACHE:
-      newState = extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: true,
-        selectedAddress: action.value,
-      })
-      delete newState.seedWords
-      return newState
-
-    case actions.SHOW_ACCOUNT_DETAIL:
-      newState = extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: true,
-        selectedAddress: action.value,
-      })
-      delete newState.seedWords
-      return newState
-
-    case actions.SET_SELECTED_TOKEN:
-      return extend(metamaskState, {
-        selectedTokenAddress: action.value,
-      })
-
-    case actions.SET_ACCOUNT_LABEL:
-      const account = action.value.account
-      const name = action.value.label
-      const id = {}
-      id[account] = extend(metamaskState.identities[account], { name })
-      const identities = extend(metamaskState.identities, id)
-      return extend(metamaskState, { identities })
-
-    case actions.SET_CURRENT_FIAT:
-      return extend(metamaskState, {
-        currentCurrency: action.value.currentCurrency,
-        conversionRate: action.value.conversionRate,
-        conversionDate: action.value.conversionDate,
-      })
-
-    case actions.UPDATE_TOKENS:
-      return extend(metamaskState, {
-        tokens: action.newTokens,
-      })
-
-    // metamask.send
-    case actions.UPDATE_GAS_LIMIT:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          gasLimit: action.value,
-        },
-      })
-
-    case actions.UPDATE_GAS_PRICE:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          gasPrice: action.value,
-        },
-      })
-
-    case actions.TOGGLE_ACCOUNT_MENU:
-      return extend(metamaskState, {
-        isAccountMenuOpen: !metamaskState.isAccountMenuOpen,
-      })
-
-    case actions.UPDATE_GAS_TOTAL:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          gasTotal: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND_TOKEN_BALANCE:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          tokenBalance: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND_HEX_DATA:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          data: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND_FROM:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          from: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND_TO:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          to: action.value.to,
-          toNickname: action.value.nickname,
-        },
-      })
-
-    case actions.UPDATE_SEND_AMOUNT:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          amount: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND_MEMO:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          memo: action.value,
-        },
-      })
-
-    case actions.UPDATE_MAX_MODE:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          maxModeOn: action.value,
-        },
-      })
-
-    case actions.UPDATE_SEND:
-      return extend(metamaskState, {
-        send: {
-          ...metamaskState.send,
-          ...action.value,
-        },
-      })
-
-    case actions.CLEAR_SEND:
-      return extend(metamaskState, {
-        send: {
-          gasLimit: null,
-          gasPrice: null,
-          gasTotal: null,
-          tokenBalance: null,
-          from: '',
-          to: '',
-          amount: '0x0',
-          memo: '',
-          errors: {},
-          maxModeOn: false,
-          editingTransactionId: null,
-          forceGasMin: null,
-          toNickname: '',
-        },
-      })
-
-    case actions.UPDATE_TRANSACTION_PARAMS:
-      const { id: txId, value } = action
-      let { selectedAddressTxList } = metamaskState
-      selectedAddressTxList = selectedAddressTxList.map(tx => {
-        if (tx.id === txId) {
-          tx.txParams = value
-        }
-        return tx
-      })
-
-      return extend(metamaskState, {
-        selectedAddressTxList,
-      })
-
-    case actions.PAIR_UPDATE:
-      const { value: { marketinfo: pairMarketInfo } } = action
-      return extend(metamaskState, {
-        tokenExchangeRates: {
-          ...metamaskState.tokenExchangeRates,
-          [pairMarketInfo.pair]: pairMarketInfo,
-        },
-      })
-
-    case actions.SHAPESHIFT_SUBVIEW:
-      const { value: { marketinfo: ssMarketInfo, coinOptions } } = action
-      return extend(metamaskState, {
-        tokenExchangeRates: {
-          ...metamaskState.tokenExchangeRates,
-          [ssMarketInfo.pair]: ssMarketInfo,
-        },
-        coinOptions,
-      })
-
-    case actions.SET_PARTICIPATE_IN_METAMETRICS:
-      return extend(metamaskState, {
-        participateInMetaMetrics: action.value,
-      })
-
-    case actions.SET_METAMETRICS_SEND_COUNT:
-      return extend(metamaskState, {
-        metaMetricsSendCount: action.value,
-      })
-
-    case actions.SET_USE_BLOCKIE:
-      return extend(metamaskState, {
-        useBlockie: action.value,
-      })
-
-    case actions.UPDATE_FEATURE_FLAGS:
-      return extend(metamaskState, {
-        featureFlags: action.value,
-      })
-
-    case actions.UPDATE_NETWORK_ENDPOINT_TYPE:
-      return extend(metamaskState, {
-        networkEndpointType: action.value,
-      })
-
-    case actions.CLOSE_WELCOME_SCREEN:
-      return extend(metamaskState, {
-        welcomeScreenSeen: true,
-      })
-
-    case actions.SET_CURRENT_LOCALE:
-      return extend(metamaskState, {
-        currentLocale: action.value,
-      })
-
-    case actions.SET_PENDING_TOKENS:
-      return extend(metamaskState, {
-        pendingTokens: { ...action.payload },
-      })
-
-    case actions.CLEAR_PENDING_TOKENS: {
-      return extend(metamaskState, {
-        pendingTokens: {},
-      })
-    }
-
-    case actions.UPDATE_PREFERENCES: {
-      return extend(metamaskState, {
-        preferences: {
-          ...metamaskState.preferences,
-          ...action.payload,
-        },
-      })
-    }
-
-    case actions.COMPLETE_ONBOARDING: {
-      return extend(metamaskState, {
-        completedOnboarding: true,
-      })
-    }
-
-    case actions.COMPLETE_UI_MIGRATION: {
-      return extend(metamaskState, {
-        completedUiMigration: true,
-      })
-    }
-
-    case actions.SET_FIRST_TIME_FLOW_TYPE: {
-      return extend(metamaskState, {
-        firstTimeFlowType: action.value,
-      })
-    }
-
-    default:
-      return metamaskState
-
-  }
-}
diff --git a/ui/app/root.js b/ui/app/root.js
deleted file mode 100644
index c95c56581..000000000
--- a/ui/app/root.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const { Provider } = require('react-redux')
-const h = require('react-hyperscript')
-const { HashRouter } = require('react-router-dom')
-const App = require('./app')
-const I18nProvider = require('./i18n-provider')
-const MetaMetricsProvider = require('./metametrics/metametrics.provider')
-
-class Root extends Component {
-  render () {
-    const { store } = this.props
-
-    return (
-      h(Provider, { store }, [
-        h(HashRouter, {
-          hashType: 'noslash',
-        }, [
-           h(MetaMetricsProvider, [
-            h(I18nProvider, [
-              h(App),
-            ]),
-          ]),
-        ]),
-      ])
-    )
-  }
-}
-
-Root.propTypes = {
-  store: PropTypes.object,
-}
-
-module.exports = Root
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
deleted file mode 100644
index 663c3f12b..000000000
--- a/ui/app/selectors.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import {NETWORK_TYPES} from './constants/common'
-import { stripHexPrefix } from 'ethereumjs-util'
-
-const abi = require('human-standard-token-abi')
-import {
-  transactionsSelector,
-} from './selectors/transactions'
-const {
-  multiplyCurrencies,
-} = require('./conversion-util')
-
-const selectors = {
-  getSelectedAddress,
-  getSelectedIdentity,
-  getSelectedAccount,
-  getSelectedToken,
-  getSelectedTokenExchangeRate,
-  getSelectedTokenAssetImage,
-  getAssetImages,
-  getTokenExchangeRate,
-  conversionRateSelector,
-  transactionsSelector,
-  accountsWithSendEtherInfoSelector,
-  getCurrentAccountWithSendEtherInfo,
-  getGasIsLoading,
-  getForceGasMin,
-  getAddressBook,
-  getSendFrom,
-  getCurrentCurrency,
-  getNativeCurrency,
-  getSendAmount,
-  getSelectedTokenToFiatRate,
-  getSelectedTokenContract,
-  getSendMaxModeState,
-  getCurrentViewContext,
-  getTotalUnapprovedCount,
-  preferencesSelector,
-  getMetaMaskAccounts,
-  getCurrentEthBalance,
-  getNetworkIdentifier,
-  isBalanceCached,
-  getAdvancedInlineGasShown,
-  getIsMainnet,
-  getCurrentNetworkId,
-  getSelectedAsset,
-  getCurrentKeyring,
-  getAccountType,
-  getNumberOfAccounts,
-  getNumberOfTokens,
-}
-
-module.exports = selectors
-
-function getNetworkIdentifier (state) {
-  const { metamask: { provider: { type, nickname, rpcTarget } } } = state
-
-  return nickname || rpcTarget || type
-}
-
-function getCurrentKeyring (state) {
-  const identity = getSelectedIdentity(state)
-
-  if (!identity) {
-    return null
-  }
-
-  const simpleAddress = stripHexPrefix(identity.address).toLowerCase()
-
-  const keyring = state.metamask.keyrings.find((kr) => {
-    return kr.accounts.includes(simpleAddress) ||
-      kr.accounts.includes(identity.address)
-  })
-
-  return keyring
-}
-
-function getAccountType (state) {
-  const currentKeyring = getCurrentKeyring(state)
-  const type = currentKeyring && currentKeyring.type
-
-  switch (type) {
-    case 'Trezor Hardware':
-    case 'Ledger Hardware':
-      return 'hardware'
-    case 'Simple Key Pair':
-      return 'imported'
-    default:
-      return 'default'
-  }
-}
-
-function getSelectedAsset (state) {
-  return getSelectedToken(state) || 'ETH'
-}
-
-function getCurrentNetworkId (state) {
-  return state.metamask.network
-}
-
-function getSelectedAddress (state) {
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
-
-  return selectedAddress
-}
-
-function getSelectedIdentity (state) {
-  const selectedAddress = getSelectedAddress(state)
-  const identities = state.metamask.identities
-
-  return identities[selectedAddress]
-}
-
-function getNumberOfAccounts (state) {
-  return Object.keys(state.metamask.accounts).length
-}
-
-function getNumberOfTokens (state) {
-  const tokens = state.metamask.tokens
-  return tokens ? tokens.length : 0
-}
-
-function getMetaMaskAccounts (state) {
-  const currentAccounts = state.metamask.accounts
-  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
-  const selectedAccounts = {}
-
-  Object.keys(currentAccounts).forEach(accountID => {
-    const account = currentAccounts[accountID]
-    if (account && account.balance === null || account.balance === undefined) {
-      selectedAccounts[accountID] = {
-        ...account,
-        balance: cachedBalances && cachedBalances[accountID],
-      }
-    } else {
-      selectedAccounts[accountID] = account
-    }
-  })
-  return selectedAccounts
-}
-
-function isBalanceCached (state) {
-  const selectedAccountBalance = state.metamask.accounts[getSelectedAddress(state)].balance
-  const cachedBalance = getSelectedAccountCachedBalance(state)
-
-  return Boolean(!selectedAccountBalance && cachedBalance)
-}
-
-function getSelectedAccountCachedBalance (state) {
-  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
-  const selectedAddress = getSelectedAddress(state)
-
-  return cachedBalances && cachedBalances[selectedAddress]
-}
-
-function getSelectedAccount (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const selectedAddress = getSelectedAddress(state)
-
-  return accounts[selectedAddress]
-}
-
-function getSelectedToken (state) {
-  const tokens = state.metamask.tokens || []
-  const selectedTokenAddress = state.metamask.selectedTokenAddress
-  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
-  const sendToken = state.metamask.send.token
-
-  return selectedToken || sendToken || null
-}
-
-function getSelectedTokenExchangeRate (state) {
-  const contractExchangeRates = state.metamask.contractExchangeRates
-  const selectedToken = getSelectedToken(state) || {}
-  const { address } = selectedToken
-  return contractExchangeRates[address] || 0
-}
-
-function getSelectedTokenAssetImage (state) {
-  const assetImages = state.metamask.assetImages || {}
-  const selectedToken = getSelectedToken(state) || {}
-  const { address } = selectedToken
-  return assetImages[address]
-}
-
-function getAssetImages (state) {
-  const assetImages = state.metamask.assetImages || {}
-  return assetImages
-}
-
-function getTokenExchangeRate (state, address) {
-  const contractExchangeRates = state.metamask.contractExchangeRates
-  return contractExchangeRates[address] || 0
-}
-
-function conversionRateSelector (state) {
-  return state.metamask.conversionRate
-}
-
-function getAddressBook (state) {
-  return state.metamask.addressBook
-}
-
-function accountsWithSendEtherInfoSelector (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const { identities } = state.metamask
-
-  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
-    return Object.assign({}, account, identities[key])
-  })
-
-  return accountsWithSendEtherInfo
-}
-
-function getCurrentAccountWithSendEtherInfo (state) {
-  const currentAddress = getSelectedAddress(state)
-  const accounts = accountsWithSendEtherInfoSelector(state)
-
-  return accounts.find(({ address }) => address === currentAddress)
-}
-
-function getCurrentEthBalance (state) {
-  return getCurrentAccountWithSendEtherInfo(state).balance
-}
-
-function getGasIsLoading (state) {
-  return state.appState.gasIsLoading
-}
-
-function getForceGasMin (state) {
-  return state.metamask.send.forceGasMin
-}
-
-function getSendFrom (state) {
-  return state.metamask.send.from
-}
-
-function getSendAmount (state) {
-  return state.metamask.send.amount
-}
-
-function getSendMaxModeState (state) {
-  return state.metamask.send.maxModeOn
-}
-
-function getCurrentCurrency (state) {
-  return state.metamask.currentCurrency
-}
-
-function getNativeCurrency (state) {
-  return state.metamask.nativeCurrency
-}
-
-function getSelectedTokenToFiatRate (state) {
-  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
-  const conversionRate = conversionRateSelector(state)
-
-  const tokenToFiatRate = multiplyCurrencies(
-    conversionRate,
-    selectedTokenExchangeRate,
-    { toNumericBase: 'dec' }
-  )
-
-  return tokenToFiatRate
-}
-
-function getSelectedTokenContract (state) {
-  const selectedToken = getSelectedToken(state)
-  return selectedToken
-    ? global.eth.contract(abi).at(selectedToken.address)
-    : null
-}
-
-function getCurrentViewContext (state) {
-  const { currentView = {} } = state.appState
-  return currentView.context
-}
-
-function getTotalUnapprovedCount ({ metamask }) {
-  const {
-    unapprovedTxs = {},
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-  } = metamask
-
-  return Object.keys(unapprovedTxs).length + unapprovedMsgCount + unapprovedPersonalMsgCount +
-    unapprovedTypedMessagesCount
-}
-
-function getIsMainnet (state) {
-  const networkType = getNetworkIdentifier(state)
-  return networkType === NETWORK_TYPES.MAINNET
-}
-
-function preferencesSelector ({ metamask }) {
-  return metamask.preferences
-}
-
-function getAdvancedInlineGasShown (state) {
-  return Boolean(state.metamask.featureFlags.advancedInlineGas)
-}
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index ccd16fadd..9b5eda82f 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect'
 import txHelper from '../../lib/tx-helper'
-import { calcTokenAmount } from '../token-util'
-import { roundExponential } from '../helpers/confirm-transaction/util'
+import { calcTokenAmount } from '../helpers/utils/token-util'
+import { roundExponential } from '../helpers/utils/confirm-tx.util'
 
 const unapprovedTxsSelector = state => state.metamask.unapprovedTxs
 const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs
diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js
index 8039c0746..ecffb37ca 100644
--- a/ui/app/selectors/custom-gas.js
+++ b/ui/app/selectors/custom-gas.js
@@ -3,22 +3,22 @@ import {
   conversionUtil,
   multiplyCurrencies,
   conversionGreaterThan,
-} from '../conversion-util'
+} from '../helpers/utils/conversion-util'
 import {
   getCurrentCurrency, getIsMainnet, preferencesSelector,
-} from '../selectors'
+} from './selectors'
 import {
   formatCurrency,
-} from '../helpers/confirm-transaction/util'
+} from '../helpers/utils/confirm-tx.util'
 import {
   decEthToConvertedCurrency as ethTotalToConvertedCurrency,
-} from '../helpers/conversions.util'
+} from '../helpers/utils/conversions.util'
 import {
   formatETHFee,
-} from '../helpers/formatters'
+} from '../helpers/utils/formatters'
 import {
   calcGasTotal,
-} from '../components/send/send.utils'
+} from '../components/app/send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 
 const selectors = {
diff --git a/ui/app/selectors/custom-gas.test.js b/ui/app/selectors/custom-gas.test.js
new file mode 100644
index 000000000..6df4a60c7
--- /dev/null
+++ b/ui/app/selectors/custom-gas.test.js
@@ -0,0 +1,595 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+const {
+  getCustomGasErrors,
+  getCustomGasLimit,
+  getCustomGasPrice,
+  getCustomGasTotal,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getPriceAndTimeEstimates,
+  getRenderableBasicEstimateData,
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+} = proxyquire('./custom-gas', {})
+
+describe('custom-gas selectors', () => {
+
+  describe('getCustomGasPrice()', () => {
+    it('should return gas.customData.price', () => {
+      const mockState = { gas: { customData: { price: 'mockPrice' } } }
+      assert.equal(getCustomGasPrice(mockState), 'mockPrice')
+    })
+  })
+
+  describe('getCustomGasLimit()', () => {
+    it('should return gas.customData.limit', () => {
+      const mockState = { gas: { customData: { limit: 'mockLimit' } } }
+      assert.equal(getCustomGasLimit(mockState), 'mockLimit')
+    })
+  })
+
+  describe('getCustomGasTotal()', () => {
+    it('should return gas.customData.total', () => {
+      const mockState = { gas: { customData: { total: 'mockTotal' } } }
+      assert.equal(getCustomGasTotal(mockState), 'mockTotal')
+    })
+  })
+
+  describe('getCustomGasErrors()', () => {
+    it('should return gas.errors', () => {
+      const mockState = { gas: { errors: 'mockErrors' } }
+      assert.equal(getCustomGasErrors(mockState), 'mockErrors')
+    })
+  })
+
+  describe('getPriceAndTimeEstimates', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: 'mockPriceAndTimeEstimates' } }
+      assert.equal(getPriceAndTimeEstimates(mockState), 'mockPriceAndTimeEstimates')
+    })
+  })
+
+  describe('getEstimatedGasPrices', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: [
+        { gasprice: 12, somethingElse: 20 },
+        { gasprice: 22, expectedTime: 30 },
+        { gasprice: 32, somethingElse: 40 },
+      ] } }
+      assert.deepEqual(getEstimatedGasPrices(mockState), [12, 22, 32])
+    })
+  })
+
+  describe('getEstimatedGasTimes', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: [
+        { somethingElse: 12, expectedTime: 20 },
+        { gasPrice: 22, expectedTime: 30 },
+        { somethingElse: 32, expectedTime: 40 },
+      ] } }
+      assert.deepEqual(getEstimatedGasTimes(mockState), [20, 30, 40])
+    })
+  })
+
+  describe('getRenderableBasicEstimateData()', () => {
+    const tests = [
+      {
+        expectedResult: [
+          {
+            labelKey: 'slow',
+            feeInSecondaryCurrency: '$0.01',
+            feeInPrimaryCurrency: '0.0000525 ETH',
+            timeEstimate: '~6 min 36 sec',
+            priceInHexWei: '0x9502f900',
+          },
+          {
+            labelKey: 'average',
+            feeInSecondaryCurrency: '$0.03',
+            feeInPrimaryCurrency: '0.000105 ETH',
+            timeEstimate: '~3 min 18 sec',
+            priceInHexWei: '0x12a05f200',
+          },
+          {
+            labelKey: 'fast',
+            feeInSecondaryCurrency: '$0.05',
+            feeInPrimaryCurrency: '0.00021 ETH',
+            timeEstimate: '~30 sec',
+            priceInHexWei: '0x2540be400',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 255.71,
+            currentCurrency: 'usd',
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 2.5,
+              safeLowWait: 6.6,
+              fast: 5,
+              fastWait: 3.3,
+              fastest: 10,
+              fastestWait: 0.5,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            labelKey: 'slow',
+            feeInSecondaryCurrency: '$0.27',
+            feeInPrimaryCurrency: '0.000105 ETH',
+            timeEstimate: '~13 min 12 sec',
+            priceInHexWei: '0x12a05f200',
+          },
+          {
+            labelKey: 'average',
+            feeInSecondaryCurrency: '$0.54',
+            feeInPrimaryCurrency: '0.00021 ETH',
+            timeEstimate: '~6 min 36 sec',
+            priceInHexWei: '0x2540be400',
+          },
+          {
+            labelKey: 'fast',
+            feeInSecondaryCurrency: '$1.07',
+            feeInPrimaryCurrency: '0.00042 ETH',
+            timeEstimate: '~1 min',
+            priceInHexWei: '0x4a817c800',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 5,
+              safeLowWait: 13.2,
+              fast: 10,
+              fastWait: 6.6,
+              fastest: 20,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            labelKey: 'slow',
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.000105 ETH',
+            timeEstimate: '~13 min 12 sec',
+            priceInHexWei: '0x12a05f200',
+          },
+          {
+            labelKey: 'average',
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.00021 ETH',
+            timeEstimate: '~6 min 36 sec',
+            priceInHexWei: '0x2540be400',
+          },
+          {
+            labelKey: 'fast',
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.00042 ETH',
+            timeEstimate: '~1 min',
+            priceInHexWei: '0x4a817c800',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 5,
+              safeLowWait: 13.2,
+              fast: 10,
+              fastWait: 6.6,
+              fastest: 20,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            labelKey: 'slow',
+            feeInSecondaryCurrency: '$0.27',
+            feeInPrimaryCurrency: '0.000105 ETH',
+            timeEstimate: '~13 min 12 sec',
+            priceInHexWei: '0x12a05f200',
+          },
+          {
+            labelKey: 'average',
+            feeInSecondaryCurrency: '$0.54',
+            feeInPrimaryCurrency: '0.00021 ETH',
+            timeEstimate: '~6 min 36 sec',
+            priceInHexWei: '0x2540be400',
+          },
+          {
+            labelKey: 'fast',
+            feeInSecondaryCurrency: '$1.07',
+            feeInPrimaryCurrency: '0.00042 ETH',
+            timeEstimate: '~1 min',
+            priceInHexWei: '0x4a817c800',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 5,
+              safeLowWait: 13.2,
+              fast: 10,
+              fastWait: 6.6,
+              fastest: 20,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            labelKey: 'slow',
+            feeInSecondaryCurrency: '$0.27',
+            feeInPrimaryCurrency: '0.000105 ETH',
+            timeEstimate: '~13 min 12 sec',
+            priceInHexWei: '0x12a05f200',
+          },
+          {
+            labelKey: 'average',
+            feeInSecondaryCurrency: '$0.54',
+            feeInPrimaryCurrency: '0.00021 ETH',
+            timeEstimate: '~6 min 36 sec',
+            priceInHexWei: '0x2540be400',
+          },
+          {
+            labelKey: 'fast',
+            feeInSecondaryCurrency: '$1.07',
+            feeInPrimaryCurrency: '0.00042 ETH',
+            timeEstimate: '~1 min',
+            priceInHexWei: '0x4a817c800',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 5,
+              safeLowWait: 13.2,
+              fast: 10,
+              fastWait: 6.6,
+              fastest: 20,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+    ]
+    it('should return renderable data about basic estimates', () => {
+      tests.forEach(test => {
+        assert.deepEqual(
+          getRenderableBasicEstimateData(test.mockState, '0x5208'),
+          test.expectedResult
+        )
+      })
+    })
+
+  })
+
+  describe('getRenderableEstimateDataForSmallButtonsFromGWEI()', () => {
+    const tests = [
+      {
+        expectedResult: [
+          {
+            feeInSecondaryCurrency: '$0.13',
+            feeInPrimaryCurrency: '0.00052 ETH',
+            labelKey: 'slow',
+            priceInHexWei: '0x5d21dba00',
+          },
+          {
+            feeInSecondaryCurrency: '$0.27',
+            feeInPrimaryCurrency: '0.00105 ETH',
+            labelKey: 'average',
+            priceInHexWei: '0xba43b7400',
+          },
+          {
+            feeInSecondaryCurrency: '$0.54',
+            feeInPrimaryCurrency: '0.0021 ETH',
+            labelKey: 'fast',
+            priceInHexWei: '0x174876e800',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 255.71,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 25,
+              safeLowWait: 6.6,
+              fast: 50,
+              fastWait: 3.3,
+              fastest: 100,
+              fastestWait: 0.5,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            feeInSecondaryCurrency: '$2.68',
+            feeInPrimaryCurrency: '0.00105 ETH',
+            labelKey: 'slow',
+            priceInHexWei: '0xba43b7400',
+          },
+          {
+            feeInSecondaryCurrency: '$5.37',
+            feeInPrimaryCurrency: '0.0021 ETH',
+            labelKey: 'average',
+            priceInHexWei: '0x174876e800',
+          },
+          {
+            feeInSecondaryCurrency: '$10.74',
+            feeInPrimaryCurrency: '0.0042 ETH',
+            labelKey: 'fast',
+            priceInHexWei: '0x2e90edd000',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 50,
+              safeLowWait: 13.2,
+              fast: 100,
+              fastWait: 6.6,
+              fastest: 200,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.00105 ETH',
+            labelKey: 'slow',
+            priceInHexWei: '0xba43b7400',
+          },
+          {
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.0021 ETH',
+            labelKey: 'average',
+            priceInHexWei: '0x174876e800',
+          },
+          {
+            feeInSecondaryCurrency: '',
+            feeInPrimaryCurrency: '0.0042 ETH',
+            labelKey: 'fast',
+            priceInHexWei: '0x2e90edd000',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 50,
+              safeLowWait: 13.2,
+              fast: 100,
+              fastWait: 6.6,
+              fastest: 200,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            feeInSecondaryCurrency: '$2.68',
+            feeInPrimaryCurrency: '0.00105 ETH',
+            labelKey: 'slow',
+            priceInHexWei: '0xba43b7400',
+          },
+          {
+            feeInSecondaryCurrency: '$5.37',
+            feeInPrimaryCurrency: '0.0021 ETH',
+            labelKey: 'average',
+            priceInHexWei: '0x174876e800',
+          },
+          {
+            feeInSecondaryCurrency: '$10.74',
+            feeInPrimaryCurrency: '0.0042 ETH',
+            labelKey: 'fast',
+            priceInHexWei: '0x2e90edd000',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 50,
+              safeLowWait: 13.2,
+              fast: 100,
+              fastWait: 6.6,
+              fastest: 200,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+      {
+        expectedResult: [
+          {
+            feeInSecondaryCurrency: '$2.68',
+            feeInPrimaryCurrency: '0.00105 ETH',
+            labelKey: 'slow',
+            priceInHexWei: '0xba43b7400',
+          },
+          {
+            feeInSecondaryCurrency: '$5.37',
+            feeInPrimaryCurrency: '0.0021 ETH',
+            labelKey: 'average',
+            priceInHexWei: '0x174876e800',
+          },
+          {
+            feeInSecondaryCurrency: '$10.74',
+            feeInPrimaryCurrency: '0.0042 ETH',
+            labelKey: 'fast',
+            priceInHexWei: '0x2e90edd000',
+          },
+        ],
+        mockState: {
+          metamask: {
+            conversionRate: 2557.1,
+            currentCurrency: 'usd',
+            send: {
+              gasLimit: '0x5208',
+            },
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+          gas: {
+            basicEstimates: {
+              blockTime: 14.16326530612245,
+              safeLow: 50,
+              safeLowWait: 13.2,
+              fast: 100,
+              fastWait: 6.6,
+              fastest: 200,
+              fastestWait: 1.0,
+            },
+          },
+        },
+      },
+    ]
+    it('should return renderable data about basic estimates appropriate for buttons with less info', () => {
+      tests.forEach(test => {
+        assert.deepEqual(
+          getRenderableEstimateDataForSmallButtonsFromGWEI(test.mockState),
+          test.expectedResult
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js
new file mode 100644
index 000000000..ac226900f
--- /dev/null
+++ b/ui/app/selectors/selectors.js
@@ -0,0 +1,301 @@
+import {NETWORK_TYPES} from '../helpers/constants/common'
+import { stripHexPrefix } from 'ethereumjs-util'
+
+const abi = require('human-standard-token-abi')
+import {
+  transactionsSelector,
+} from './transactions'
+const {
+  multiplyCurrencies,
+} = require('../helpers/utils/conversion-util')
+
+const selectors = {
+  getSelectedAddress,
+  getSelectedIdentity,
+  getSelectedAccount,
+  getSelectedToken,
+  getSelectedTokenExchangeRate,
+  getSelectedTokenAssetImage,
+  getAssetImages,
+  getTokenExchangeRate,
+  conversionRateSelector,
+  transactionsSelector,
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  getGasIsLoading,
+  getForceGasMin,
+  getAddressBook,
+  getSendFrom,
+  getCurrentCurrency,
+  getNativeCurrency,
+  getSendAmount,
+  getSelectedTokenToFiatRate,
+  getSelectedTokenContract,
+  getSendMaxModeState,
+  getCurrentViewContext,
+  getTotalUnapprovedCount,
+  preferencesSelector,
+  getMetaMaskAccounts,
+  getCurrentEthBalance,
+  getNetworkIdentifier,
+  isBalanceCached,
+  getAdvancedInlineGasShown,
+  getIsMainnet,
+  getCurrentNetworkId,
+  getSelectedAsset,
+  getCurrentKeyring,
+  getAccountType,
+  getNumberOfAccounts,
+  getNumberOfTokens,
+}
+
+module.exports = selectors
+
+function getNetworkIdentifier (state) {
+  const { metamask: { provider: { type, nickname, rpcTarget } } } = state
+
+  return nickname || rpcTarget || type
+}
+
+function getCurrentKeyring (state) {
+  const identity = getSelectedIdentity(state)
+
+  if (!identity) {
+    return null
+  }
+
+  const simpleAddress = stripHexPrefix(identity.address).toLowerCase()
+
+  const keyring = state.metamask.keyrings.find((kr) => {
+    return kr.accounts.includes(simpleAddress) ||
+      kr.accounts.includes(identity.address)
+  })
+
+  return keyring
+}
+
+function getAccountType (state) {
+  const currentKeyring = getCurrentKeyring(state)
+  const type = currentKeyring && currentKeyring.type
+
+  switch (type) {
+    case 'Trezor Hardware':
+    case 'Ledger Hardware':
+      return 'hardware'
+    case 'Simple Key Pair':
+      return 'imported'
+    default:
+      return 'default'
+  }
+}
+
+function getSelectedAsset (state) {
+  return getSelectedToken(state) || 'ETH'
+}
+
+function getCurrentNetworkId (state) {
+  return state.metamask.network
+}
+
+function getSelectedAddress (state) {
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
+
+  return selectedAddress
+}
+
+function getSelectedIdentity (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const identities = state.metamask.identities
+
+  return identities[selectedAddress]
+}
+
+function getNumberOfAccounts (state) {
+  return Object.keys(state.metamask.accounts).length
+}
+
+function getNumberOfTokens (state) {
+  const tokens = state.metamask.tokens
+  return tokens ? tokens.length : 0
+}
+
+function getMetaMaskAccounts (state) {
+  const currentAccounts = state.metamask.accounts
+  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
+  const selectedAccounts = {}
+
+  Object.keys(currentAccounts).forEach(accountID => {
+    const account = currentAccounts[accountID]
+    if (account && account.balance === null || account.balance === undefined) {
+      selectedAccounts[accountID] = {
+        ...account,
+        balance: cachedBalances && cachedBalances[accountID],
+      }
+    } else {
+      selectedAccounts[accountID] = account
+    }
+  })
+  return selectedAccounts
+}
+
+function isBalanceCached (state) {
+  const selectedAccountBalance = state.metamask.accounts[getSelectedAddress(state)].balance
+  const cachedBalance = getSelectedAccountCachedBalance(state)
+
+  return Boolean(!selectedAccountBalance && cachedBalance)
+}
+
+function getSelectedAccountCachedBalance (state) {
+  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
+  const selectedAddress = getSelectedAddress(state)
+
+  return cachedBalances && cachedBalances[selectedAddress]
+}
+
+function getSelectedAccount (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const selectedAddress = getSelectedAddress(state)
+
+  return accounts[selectedAddress]
+}
+
+function getSelectedToken (state) {
+  const tokens = state.metamask.tokens || []
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+  const sendToken = state.metamask.send.token
+
+  return selectedToken || sendToken || null
+}
+
+function getSelectedTokenExchangeRate (state) {
+  const contractExchangeRates = state.metamask.contractExchangeRates
+  const selectedToken = getSelectedToken(state) || {}
+  const { address } = selectedToken
+  return contractExchangeRates[address] || 0
+}
+
+function getSelectedTokenAssetImage (state) {
+  const assetImages = state.metamask.assetImages || {}
+  const selectedToken = getSelectedToken(state) || {}
+  const { address } = selectedToken
+  return assetImages[address]
+}
+
+function getAssetImages (state) {
+  const assetImages = state.metamask.assetImages || {}
+  return assetImages
+}
+
+function getTokenExchangeRate (state, address) {
+  const contractExchangeRates = state.metamask.contractExchangeRates
+  return contractExchangeRates[address] || 0
+}
+
+function conversionRateSelector (state) {
+  return state.metamask.conversionRate
+}
+
+function getAddressBook (state) {
+  return state.metamask.addressBook
+}
+
+function accountsWithSendEtherInfoSelector (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const { identities } = state.metamask
+
+  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
+    return Object.assign({}, account, identities[key])
+  })
+
+  return accountsWithSendEtherInfo
+}
+
+function getCurrentAccountWithSendEtherInfo (state) {
+  const currentAddress = getSelectedAddress(state)
+  const accounts = accountsWithSendEtherInfoSelector(state)
+
+  return accounts.find(({ address }) => address === currentAddress)
+}
+
+function getCurrentEthBalance (state) {
+  return getCurrentAccountWithSendEtherInfo(state).balance
+}
+
+function getGasIsLoading (state) {
+  return state.appState.gasIsLoading
+}
+
+function getForceGasMin (state) {
+  return state.metamask.send.forceGasMin
+}
+
+function getSendFrom (state) {
+  return state.metamask.send.from
+}
+
+function getSendAmount (state) {
+  return state.metamask.send.amount
+}
+
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
+}
+
+function getCurrentCurrency (state) {
+  return state.metamask.currentCurrency
+}
+
+function getNativeCurrency (state) {
+  return state.metamask.nativeCurrency
+}
+
+function getSelectedTokenToFiatRate (state) {
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = conversionRateSelector(state)
+
+  const tokenToFiatRate = multiplyCurrencies(
+    conversionRate,
+    selectedTokenExchangeRate,
+    { toNumericBase: 'dec' }
+  )
+
+  return tokenToFiatRate
+}
+
+function getSelectedTokenContract (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken
+    ? global.eth.contract(abi).at(selectedToken.address)
+    : null
+}
+
+function getCurrentViewContext (state) {
+  const { currentView = {} } = state.appState
+  return currentView.context
+}
+
+function getTotalUnapprovedCount ({ metamask }) {
+  const {
+    unapprovedTxs = {},
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+  } = metamask
+
+  return Object.keys(unapprovedTxs).length + unapprovedMsgCount + unapprovedPersonalMsgCount +
+    unapprovedTypedMessagesCount
+}
+
+function getIsMainnet (state) {
+  const networkType = getNetworkIdentifier(state)
+  return networkType === NETWORK_TYPES.MAINNET
+}
+
+function preferencesSelector ({ metamask }) {
+  return metamask.preferences
+}
+
+function getAdvancedInlineGasShown (state) {
+  return Boolean(state.metamask.featureFlags.advancedInlineGas)
+}
diff --git a/ui/app/selectors/tests/custom-gas.test.js b/ui/app/selectors/tests/custom-gas.test.js
deleted file mode 100644
index 73240d997..000000000
--- a/ui/app/selectors/tests/custom-gas.test.js
+++ /dev/null
@@ -1,595 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-const {
-  getCustomGasErrors,
-  getCustomGasLimit,
-  getCustomGasPrice,
-  getCustomGasTotal,
-  getEstimatedGasPrices,
-  getEstimatedGasTimes,
-  getPriceAndTimeEstimates,
-  getRenderableBasicEstimateData,
-  getRenderableEstimateDataForSmallButtonsFromGWEI,
-} = proxyquire('../custom-gas', {})
-
-describe('custom-gas selectors', () => {
-
-  describe('getCustomGasPrice()', () => {
-    it('should return gas.customData.price', () => {
-      const mockState = { gas: { customData: { price: 'mockPrice' } } }
-      assert.equal(getCustomGasPrice(mockState), 'mockPrice')
-    })
-  })
-
-  describe('getCustomGasLimit()', () => {
-    it('should return gas.customData.limit', () => {
-      const mockState = { gas: { customData: { limit: 'mockLimit' } } }
-      assert.equal(getCustomGasLimit(mockState), 'mockLimit')
-    })
-  })
-
-  describe('getCustomGasTotal()', () => {
-    it('should return gas.customData.total', () => {
-      const mockState = { gas: { customData: { total: 'mockTotal' } } }
-      assert.equal(getCustomGasTotal(mockState), 'mockTotal')
-    })
-  })
-
-  describe('getCustomGasErrors()', () => {
-    it('should return gas.errors', () => {
-      const mockState = { gas: { errors: 'mockErrors' } }
-      assert.equal(getCustomGasErrors(mockState), 'mockErrors')
-    })
-  })
-
-  describe('getPriceAndTimeEstimates', () => {
-    it('should return price and time estimates', () => {
-      const mockState = { gas: { priceAndTimeEstimates: 'mockPriceAndTimeEstimates' } }
-      assert.equal(getPriceAndTimeEstimates(mockState), 'mockPriceAndTimeEstimates')
-    })
-  })
-
-  describe('getEstimatedGasPrices', () => {
-    it('should return price and time estimates', () => {
-      const mockState = { gas: { priceAndTimeEstimates: [
-        { gasprice: 12, somethingElse: 20 },
-        { gasprice: 22, expectedTime: 30 },
-        { gasprice: 32, somethingElse: 40 },
-      ] } }
-      assert.deepEqual(getEstimatedGasPrices(mockState), [12, 22, 32])
-    })
-  })
-
-  describe('getEstimatedGasTimes', () => {
-    it('should return price and time estimates', () => {
-      const mockState = { gas: { priceAndTimeEstimates: [
-        { somethingElse: 12, expectedTime: 20 },
-        { gasPrice: 22, expectedTime: 30 },
-        { somethingElse: 32, expectedTime: 40 },
-      ] } }
-      assert.deepEqual(getEstimatedGasTimes(mockState), [20, 30, 40])
-    })
-  })
-
-  describe('getRenderableBasicEstimateData()', () => {
-    const tests = [
-      {
-        expectedResult: [
-          {
-            labelKey: 'slow',
-            feeInSecondaryCurrency: '$0.01',
-            feeInPrimaryCurrency: '0.0000525 ETH',
-            timeEstimate: '~6 min 36 sec',
-            priceInHexWei: '0x9502f900',
-          },
-          {
-            labelKey: 'average',
-            feeInSecondaryCurrency: '$0.03',
-            feeInPrimaryCurrency: '0.000105 ETH',
-            timeEstimate: '~3 min 18 sec',
-            priceInHexWei: '0x12a05f200',
-          },
-          {
-            labelKey: 'fast',
-            feeInSecondaryCurrency: '$0.05',
-            feeInPrimaryCurrency: '0.00021 ETH',
-            timeEstimate: '~30 sec',
-            priceInHexWei: '0x2540be400',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 255.71,
-            currentCurrency: 'usd',
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 2.5,
-              safeLowWait: 6.6,
-              fast: 5,
-              fastWait: 3.3,
-              fastest: 10,
-              fastestWait: 0.5,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            labelKey: 'slow',
-            feeInSecondaryCurrency: '$0.27',
-            feeInPrimaryCurrency: '0.000105 ETH',
-            timeEstimate: '~13 min 12 sec',
-            priceInHexWei: '0x12a05f200',
-          },
-          {
-            labelKey: 'average',
-            feeInSecondaryCurrency: '$0.54',
-            feeInPrimaryCurrency: '0.00021 ETH',
-            timeEstimate: '~6 min 36 sec',
-            priceInHexWei: '0x2540be400',
-          },
-          {
-            labelKey: 'fast',
-            feeInSecondaryCurrency: '$1.07',
-            feeInPrimaryCurrency: '0.00042 ETH',
-            timeEstimate: '~1 min',
-            priceInHexWei: '0x4a817c800',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            labelKey: 'slow',
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.000105 ETH',
-            timeEstimate: '~13 min 12 sec',
-            priceInHexWei: '0x12a05f200',
-          },
-          {
-            labelKey: 'average',
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.00021 ETH',
-            timeEstimate: '~6 min 36 sec',
-            priceInHexWei: '0x2540be400',
-          },
-          {
-            labelKey: 'fast',
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.00042 ETH',
-            timeEstimate: '~1 min',
-            priceInHexWei: '0x4a817c800',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'rinkeby',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            labelKey: 'slow',
-            feeInSecondaryCurrency: '$0.27',
-            feeInPrimaryCurrency: '0.000105 ETH',
-            timeEstimate: '~13 min 12 sec',
-            priceInHexWei: '0x12a05f200',
-          },
-          {
-            labelKey: 'average',
-            feeInSecondaryCurrency: '$0.54',
-            feeInPrimaryCurrency: '0.00021 ETH',
-            timeEstimate: '~6 min 36 sec',
-            priceInHexWei: '0x2540be400',
-          },
-          {
-            labelKey: 'fast',
-            feeInSecondaryCurrency: '$1.07',
-            feeInPrimaryCurrency: '0.00042 ETH',
-            timeEstimate: '~1 min',
-            priceInHexWei: '0x4a817c800',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: true,
-            },
-            provider: {
-              type: 'rinkeby',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            labelKey: 'slow',
-            feeInSecondaryCurrency: '$0.27',
-            feeInPrimaryCurrency: '0.000105 ETH',
-            timeEstimate: '~13 min 12 sec',
-            priceInHexWei: '0x12a05f200',
-          },
-          {
-            labelKey: 'average',
-            feeInSecondaryCurrency: '$0.54',
-            feeInPrimaryCurrency: '0.00021 ETH',
-            timeEstimate: '~6 min 36 sec',
-            priceInHexWei: '0x2540be400',
-          },
-          {
-            labelKey: 'fast',
-            feeInSecondaryCurrency: '$1.07',
-            feeInPrimaryCurrency: '0.00042 ETH',
-            timeEstimate: '~1 min',
-            priceInHexWei: '0x4a817c800',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: true,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-    ]
-    it('should return renderable data about basic estimates', () => {
-      tests.forEach(test => {
-        assert.deepEqual(
-          getRenderableBasicEstimateData(test.mockState, '0x5208'),
-          test.expectedResult
-        )
-      })
-    })
-
-  })
-
-  describe('getRenderableEstimateDataForSmallButtonsFromGWEI()', () => {
-    const tests = [
-      {
-        expectedResult: [
-          {
-            feeInSecondaryCurrency: '$0.13',
-            feeInPrimaryCurrency: '0.00052 ETH',
-            labelKey: 'slow',
-            priceInHexWei: '0x5d21dba00',
-          },
-          {
-            feeInSecondaryCurrency: '$0.27',
-            feeInPrimaryCurrency: '0.00105 ETH',
-            labelKey: 'average',
-            priceInHexWei: '0xba43b7400',
-          },
-          {
-            feeInSecondaryCurrency: '$0.54',
-            feeInPrimaryCurrency: '0.0021 ETH',
-            labelKey: 'fast',
-            priceInHexWei: '0x174876e800',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 255.71,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 25,
-              safeLowWait: 6.6,
-              fast: 50,
-              fastWait: 3.3,
-              fastest: 100,
-              fastestWait: 0.5,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            feeInSecondaryCurrency: '$2.68',
-            feeInPrimaryCurrency: '0.00105 ETH',
-            labelKey: 'slow',
-            priceInHexWei: '0xba43b7400',
-          },
-          {
-            feeInSecondaryCurrency: '$5.37',
-            feeInPrimaryCurrency: '0.0021 ETH',
-            labelKey: 'average',
-            priceInHexWei: '0x174876e800',
-          },
-          {
-            feeInSecondaryCurrency: '$10.74',
-            feeInPrimaryCurrency: '0.0042 ETH',
-            labelKey: 'fast',
-            priceInHexWei: '0x2e90edd000',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.00105 ETH',
-            labelKey: 'slow',
-            priceInHexWei: '0xba43b7400',
-          },
-          {
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.0021 ETH',
-            labelKey: 'average',
-            priceInHexWei: '0x174876e800',
-          },
-          {
-            feeInSecondaryCurrency: '',
-            feeInPrimaryCurrency: '0.0042 ETH',
-            labelKey: 'fast',
-            priceInHexWei: '0x2e90edd000',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: false,
-            },
-            provider: {
-              type: 'rinkeby',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            feeInSecondaryCurrency: '$2.68',
-            feeInPrimaryCurrency: '0.00105 ETH',
-            labelKey: 'slow',
-            priceInHexWei: '0xba43b7400',
-          },
-          {
-            feeInSecondaryCurrency: '$5.37',
-            feeInPrimaryCurrency: '0.0021 ETH',
-            labelKey: 'average',
-            priceInHexWei: '0x174876e800',
-          },
-          {
-            feeInSecondaryCurrency: '$10.74',
-            feeInPrimaryCurrency: '0.0042 ETH',
-            labelKey: 'fast',
-            priceInHexWei: '0x2e90edd000',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: true,
-            },
-            provider: {
-              type: 'rinkeby',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-      {
-        expectedResult: [
-          {
-            feeInSecondaryCurrency: '$2.68',
-            feeInPrimaryCurrency: '0.00105 ETH',
-            labelKey: 'slow',
-            priceInHexWei: '0xba43b7400',
-          },
-          {
-            feeInSecondaryCurrency: '$5.37',
-            feeInPrimaryCurrency: '0.0021 ETH',
-            labelKey: 'average',
-            priceInHexWei: '0x174876e800',
-          },
-          {
-            feeInSecondaryCurrency: '$10.74',
-            feeInPrimaryCurrency: '0.0042 ETH',
-            labelKey: 'fast',
-            priceInHexWei: '0x2e90edd000',
-          },
-        ],
-        mockState: {
-          metamask: {
-            conversionRate: 2557.1,
-            currentCurrency: 'usd',
-            send: {
-              gasLimit: '0x5208',
-            },
-            preferences: {
-              showFiatInTestnets: true,
-            },
-            provider: {
-              type: 'mainnet',
-            },
-          },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
-        },
-      },
-    ]
-    it('should return renderable data about basic estimates appropriate for buttons with less info', () => {
-      tests.forEach(test => {
-        assert.deepEqual(
-          getRenderableEstimateDataForSmallButtonsFromGWEI(test.mockState),
-          test.expectedResult
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
index fc1271c59..b1d27b333 100644
--- a/ui/app/selectors/transactions.js
+++ b/ui/app/selectors/transactions.js
@@ -4,12 +4,12 @@ import {
   APPROVED_STATUS,
   SUBMITTED_STATUS,
   CONFIRMED_STATUS,
-} from '../constants/transactions'
+} from '../helpers/constants/transactions'
 import {
   TRANSACTION_TYPE_CANCEL,
   TRANSACTION_TYPE_RETRY,
 } from '../../../app/scripts/controllers/transactions/enums'
-import { hexToDecimal } from '../helpers/conversions.util'
+import { hexToDecimal } from '../helpers/utils/conversions.util'
 
 import { selectedTokenAddressSelector } from './tokens'
 import txHelper from '../../lib/tx-helper'
diff --git a/ui/app/store.js b/ui/app/store.js
deleted file mode 100644
index feebbabc0..000000000
--- a/ui/app/store.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const createStore = require('redux').createStore
-const applyMiddleware = require('redux').applyMiddleware
-const thunkMiddleware = require('redux-thunk').default
-const rootReducer = require('./reducers')
-const createLogger = require('redux-logger').createLogger
-
-global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
-
-module.exports = configureStore
-
-const loggerMiddleware = createLogger({
-  predicate: () => global.METAMASK_DEBUG,
-})
-
-const middlewares = [thunkMiddleware, loggerMiddleware]
-
-const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
-
-function configureStore (initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState)
-}
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
new file mode 100644
index 000000000..b99b051cb
--- /dev/null
+++ b/ui/app/store/actions.js
@@ -0,0 +1,2761 @@
+const abi = require('human-standard-token-abi')
+const pify = require('pify')
+const getBuyEthUrl = require('../../../app/scripts/lib/buy-eth-url')
+const { getTokenAddressFromTokenObject } = require('../helpers/utils/util')
+const {
+  calcTokenBalance,
+  estimateGas,
+} = require('../components/app/send/send.utils')
+const ethUtil = require('ethereumjs-util')
+const { fetchLocale } = require('../helpers/utils/i18n-helper')
+const log = require('loglevel')
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../app/scripts/lib/enums')
+const { hasUnconfirmedTransactions } = require('../helpers/utils/confirm-tx.util')
+const gasDuck = require('../ducks/gas/gas.duck')
+const WebcamUtils = require('../../lib/webcam-utils')
+
+var actions = {
+  _setBackgroundConnection: _setBackgroundConnection,
+
+  GO_HOME: 'GO_HOME',
+  goHome: goHome,
+  // modal state
+  MODAL_OPEN: 'UI_MODAL_OPEN',
+  MODAL_CLOSE: 'UI_MODAL_CLOSE',
+  showModal: showModal,
+  hideModal: hideModal,
+  // sidebar state
+  SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
+  SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
+  showSidebar: showSidebar,
+  hideSidebar: hideSidebar,
+  // sidebar state
+  ALERT_OPEN: 'UI_ALERT_OPEN',
+  ALERT_CLOSE: 'UI_ALERT_CLOSE',
+  showAlert: showAlert,
+  hideAlert: hideAlert,
+  QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED',
+  qrCodeDetected,
+  // network dropdown open
+  NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
+  NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
+  showNetworkDropdown: showNetworkDropdown,
+  hideNetworkDropdown: hideNetworkDropdown,
+  // menu state/
+  getNetworkStatus: 'getNetworkStatus',
+  // transition state
+  TRANSITION_FORWARD: 'TRANSITION_FORWARD',
+  TRANSITION_BACKWARD: 'TRANSITION_BACKWARD',
+  transitionForward,
+  transitionBackward,
+  // remote state
+  UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
+  updateMetamaskState: updateMetamaskState,
+  // notices
+  MARK_NOTICE_READ: 'MARK_NOTICE_READ',
+  markNoticeRead: markNoticeRead,
+  SHOW_NOTICE: 'SHOW_NOTICE',
+  showNotice: showNotice,
+  CLEAR_NOTICES: 'CLEAR_NOTICES',
+  clearNotices: clearNotices,
+  markAccountsFound,
+  // intialize screen
+  CREATE_NEW_VAULT_IN_PROGRESS: 'CREATE_NEW_VAULT_IN_PROGRESS',
+  SHOW_CREATE_VAULT: 'SHOW_CREATE_VAULT',
+  SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
+  fetchInfoToSync,
+  FORGOT_PASSWORD: 'FORGOT_PASSWORD',
+  forgotPassword: forgotPassword,
+  markPasswordForgotten,
+  unMarkPasswordForgotten,
+  SHOW_INIT_MENU: 'SHOW_INIT_MENU',
+  SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED',
+  SHOW_INFO_PAGE: 'SHOW_INFO_PAGE',
+  SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE',
+  SHOW_NEW_ACCOUNT_PAGE: 'SHOW_NEW_ACCOUNT_PAGE',
+  SET_NEW_ACCOUNT_FORM: 'SET_NEW_ACCOUNT_FORM',
+  unlockMetamask: unlockMetamask,
+  unlockFailed: unlockFailed,
+  unlockSucceeded,
+  showCreateVault: showCreateVault,
+  showRestoreVault: showRestoreVault,
+  showInitializeMenu: showInitializeMenu,
+  showImportPage,
+  showNewAccountPage,
+  setNewAccountForm,
+  createNewVaultAndKeychain: createNewVaultAndKeychain,
+  createNewVaultAndRestore: createNewVaultAndRestore,
+  createNewVaultInProgress: createNewVaultInProgress,
+  createNewVaultAndGetSeedPhrase,
+  unlockAndGetSeedPhrase,
+  addNewKeyring,
+  importNewAccount,
+  addNewAccount,
+  connectHardware,
+  checkHardwareStatus,
+  forgetDevice,
+  unlockHardwareWalletAccount,
+  NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
+  navigateToNewAccountScreen,
+  resetAccount,
+  removeAccount,
+  showNewVaultSeed: showNewVaultSeed,
+  showInfoPage: showInfoPage,
+  CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
+  closeWelcomeScreen,
+  // seed recovery actions
+  REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
+  revealSeedConfirmation: revealSeedConfirmation,
+  requestRevealSeed: requestRevealSeed,
+  requestRevealSeedWords,
+  // unlock screen
+  UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
+  UNLOCK_FAILED: 'UNLOCK_FAILED',
+  UNLOCK_SUCCEEDED: 'UNLOCK_SUCCEEDED',
+  UNLOCK_METAMASK: 'UNLOCK_METAMASK',
+  LOCK_METAMASK: 'LOCK_METAMASK',
+  tryUnlockMetamask: tryUnlockMetamask,
+  lockMetamask: lockMetamask,
+  unlockInProgress: unlockInProgress,
+  // error handling
+  displayWarning: displayWarning,
+  DISPLAY_WARNING: 'DISPLAY_WARNING',
+  HIDE_WARNING: 'HIDE_WARNING',
+  hideWarning: hideWarning,
+  // accounts screen
+  SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
+  SET_SELECTED_TOKEN: 'SET_SELECTED_TOKEN',
+  setSelectedToken,
+  SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
+  SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
+  SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
+  SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
+  SET_CURRENT_FIAT: 'SET_CURRENT_FIAT',
+  showQrScanner,
+  setCurrentCurrency,
+  setCurrentAccountTab,
+  // account detail screen
+  SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
+  showSendPage: showSendPage,
+  SHOW_SEND_TOKEN_PAGE: 'SHOW_SEND_TOKEN_PAGE',
+  showSendTokenPage,
+  ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK',
+  addToAddressBook: addToAddressBook,
+  REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
+  requestExportAccount: requestExportAccount,
+  EXPORT_ACCOUNT: 'EXPORT_ACCOUNT',
+  exportAccount: exportAccount,
+  SHOW_PRIVATE_KEY: 'SHOW_PRIVATE_KEY',
+  showPrivateKey: showPrivateKey,
+  exportAccountComplete,
+  SET_ACCOUNT_LABEL: 'SET_ACCOUNT_LABEL',
+  setAccountLabel,
+  updateNetworkNonce,
+  SET_NETWORK_NONCE: 'SET_NETWORK_NONCE',
+  // tx conf screen
+  COMPLETED_TX: 'COMPLETED_TX',
+  TRANSACTION_ERROR: 'TRANSACTION_ERROR',
+  NEXT_TX: 'NEXT_TX',
+  PREVIOUS_TX: 'PREV_TX',
+  EDIT_TX: 'EDIT_TX',
+  signMsg: signMsg,
+  cancelMsg: cancelMsg,
+  signPersonalMsg,
+  cancelPersonalMsg,
+  signTypedMsg,
+  cancelTypedMsg,
+  sendTx: sendTx,
+  signTx: signTx,
+  signTokenTx: signTokenTx,
+  updateTransaction,
+  updateAndApproveTx,
+  cancelTx: cancelTx,
+  cancelTxs,
+  completedTx: completedTx,
+  txError: txError,
+  nextTx: nextTx,
+  editTx,
+  previousTx: previousTx,
+  cancelAllTx: cancelAllTx,
+  viewPendingTx: viewPendingTx,
+  VIEW_PENDING_TX: 'VIEW_PENDING_TX',
+  updateTransactionParams,
+  UPDATE_TRANSACTION_PARAMS: 'UPDATE_TRANSACTION_PARAMS',
+  // send screen
+  UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
+  UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
+  UPDATE_GAS_TOTAL: 'UPDATE_GAS_TOTAL',
+  UPDATE_SEND_FROM: 'UPDATE_SEND_FROM',
+  UPDATE_SEND_HEX_DATA: 'UPDATE_SEND_HEX_DATA',
+  UPDATE_SEND_TOKEN_BALANCE: 'UPDATE_SEND_TOKEN_BALANCE',
+  UPDATE_SEND_TO: 'UPDATE_SEND_TO',
+  UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT',
+  UPDATE_SEND_MEMO: 'UPDATE_SEND_MEMO',
+  UPDATE_SEND_ERRORS: 'UPDATE_SEND_ERRORS',
+  UPDATE_SEND_WARNINGS: 'UPDATE_SEND_WARNINGS',
+  UPDATE_MAX_MODE: 'UPDATE_MAX_MODE',
+  UPDATE_SEND: 'UPDATE_SEND',
+  CLEAR_SEND: 'CLEAR_SEND',
+  OPEN_FROM_DROPDOWN: 'OPEN_FROM_DROPDOWN',
+  CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN',
+  GAS_LOADING_STARTED: 'GAS_LOADING_STARTED',
+  GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED',
+  setGasLimit,
+  setGasPrice,
+  updateGasData,
+  setGasTotal,
+  setSendTokenBalance,
+  updateSendTokenBalance,
+  updateSendHexData,
+  updateSendTo,
+  updateSendAmount,
+  updateSendMemo,
+  setMaxModeTo,
+  updateSend,
+  updateSendErrors,
+  updateSendWarnings,
+  clearSend,
+  setSelectedAddress,
+  gasLoadingStarted,
+  gasLoadingFinished,
+  // app messages
+  confirmSeedWords: confirmSeedWords,
+  showAccountDetail: showAccountDetail,
+  BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL',
+  backToAccountDetail: backToAccountDetail,
+  showAccountsPage: showAccountsPage,
+  showConfTxPage: showConfTxPage,
+  // config screen
+  SHOW_CONFIG_PAGE: 'SHOW_CONFIG_PAGE',
+  SET_RPC_TARGET: 'SET_RPC_TARGET',
+  SET_DEFAULT_RPC_TARGET: 'SET_DEFAULT_RPC_TARGET',
+  SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
+  SET_PREVIOUS_PROVIDER: 'SET_PREVIOUS_PROVIDER',
+  showConfigPage,
+  SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+  SHOW_ADD_SUGGESTED_TOKEN_PAGE: 'SHOW_ADD_SUGGESTED_TOKEN_PAGE',
+  showAddTokenPage,
+  showAddSuggestedTokenPage,
+  addToken,
+  addTokens,
+  removeToken,
+  updateTokens,
+  removeSuggestedTokens,
+  addKnownMethodData,
+  UPDATE_TOKENS: 'UPDATE_TOKENS',
+  updateAndSetCustomRpc: updateAndSetCustomRpc,
+  setRpcTarget: setRpcTarget,
+  delRpcTarget: delRpcTarget,
+  setProviderType: setProviderType,
+  SET_HARDWARE_WALLET_DEFAULT_HD_PATH: 'SET_HARDWARE_WALLET_DEFAULT_HD_PATH',
+  setHardwareWalletDefaultHdPath,
+  updateProviderType,
+  // loading overlay
+  SHOW_LOADING: 'SHOW_LOADING_INDICATION',
+  HIDE_LOADING: 'HIDE_LOADING_INDICATION',
+  showLoadingIndication: showLoadingIndication,
+  hideLoadingIndication: hideLoadingIndication,
+  // buy Eth with coinbase
+  onboardingBuyEthView,
+  ONBOARDING_BUY_ETH_VIEW: 'ONBOARDING_BUY_ETH_VIEW',
+  BUY_ETH: 'BUY_ETH',
+  buyEth: buyEth,
+  buyEthView: buyEthView,
+  buyWithShapeShift,
+  BUY_ETH_VIEW: 'BUY_ETH_VIEW',
+  COINBASE_SUBVIEW: 'COINBASE_SUBVIEW',
+  coinBaseSubview: coinBaseSubview,
+  SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW',
+  shapeShiftSubview: shapeShiftSubview,
+  PAIR_UPDATE: 'PAIR_UPDATE',
+  pairUpdate: pairUpdate,
+  coinShiftRquest: coinShiftRquest,
+  SHOW_SUB_LOADING_INDICATION: 'SHOW_SUB_LOADING_INDICATION',
+  showSubLoadingIndication: showSubLoadingIndication,
+  HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
+  hideSubLoadingIndication: hideSubLoadingIndication,
+// QR STUFF:
+  SHOW_QR: 'SHOW_QR',
+  showQrView: showQrView,
+  reshowQrCode: reshowQrCode,
+  SHOW_QR_VIEW: 'SHOW_QR_VIEW',
+// FORGOT PASSWORD:
+  BACK_TO_INIT_MENU: 'BACK_TO_INIT_MENU',
+  goBackToInitView: goBackToInitView,
+  RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS',
+  BACK_TO_UNLOCK_VIEW: 'BACK_TO_UNLOCK_VIEW',
+  backToUnlockView: backToUnlockView,
+  // SHOWING KEYCHAIN
+  SHOW_NEW_KEYCHAIN: 'SHOW_NEW_KEYCHAIN',
+  showNewKeychain: showNewKeychain,
+
+  callBackgroundThenUpdate,
+  forceUpdateMetamaskState,
+
+  TOGGLE_ACCOUNT_MENU: 'TOGGLE_ACCOUNT_MENU',
+  toggleAccountMenu,
+
+  useEtherscanProvider,
+
+  SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
+  setUseBlockie,
+
+  SET_PARTICIPATE_IN_METAMETRICS: 'SET_PARTICIPATE_IN_METAMETRICS',
+  SET_METAMETRICS_SEND_COUNT: 'SET_METAMETRICS_SEND_COUNT',
+  setParticipateInMetaMetrics,
+  setMetaMetricsSendCount,
+
+  // locale
+  SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE',
+  SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES',
+  setCurrentLocale,
+  updateCurrentLocale,
+  setLocaleMessages,
+  //
+  // Feature Flags
+  setFeatureFlag,
+  updateFeatureFlags,
+  UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
+
+  // Preferences
+  setPreference,
+  updatePreferences,
+  UPDATE_PREFERENCES: 'UPDATE_PREFERENCES',
+  setUseNativeCurrencyAsPrimaryCurrencyPreference,
+  setShowFiatConversionOnTestnetsPreference,
+
+  // Migration of users to new UI
+  setCompletedUiMigration,
+  completeUiMigration,
+  COMPLETE_UI_MIGRATION: 'COMPLETE_UI_MIGRATION',
+
+  // Onboarding
+  setCompletedOnboarding,
+  completeOnboarding,
+  COMPLETE_ONBOARDING: 'COMPLETE_ONBOARDING',
+
+  setMouseUserState,
+  SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE',
+
+  // Network
+  updateNetworkEndpointType,
+  UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE',
+
+  retryTransaction,
+  SET_PENDING_TOKENS: 'SET_PENDING_TOKENS',
+  CLEAR_PENDING_TOKENS: 'CLEAR_PENDING_TOKENS',
+  setPendingTokens,
+  clearPendingTokens,
+
+  createCancelTransaction,
+  createSpeedUpTransaction,
+
+  approveProviderRequest,
+  rejectProviderRequest,
+  clearApprovedOrigins,
+
+  setFirstTimeFlowType,
+  SET_FIRST_TIME_FLOW_TYPE: 'SET_FIRST_TIME_FLOW_TYPE',
+}
+
+module.exports = actions
+
+var background = null
+function _setBackgroundConnection (backgroundConnection) {
+  background = backgroundConnection
+}
+
+function goHome () {
+  return {
+    type: actions.GO_HOME,
+  }
+}
+
+// async actions
+
+function tryUnlockMetamask (password) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    dispatch(actions.unlockInProgress())
+    log.debug(`background.submitPassword`)
+
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, error => {
+        if (error) {
+          return reject(error)
+        }
+
+        resolve()
+      })
+    })
+      .then(() => {
+        dispatch(actions.unlockSucceeded())
+        return forceUpdateMetamaskState(dispatch)
+      })
+      .then(() => {
+        return new Promise((resolve, reject) => {
+          background.verifySeedPhrase(err => {
+            if (err) {
+              dispatch(actions.displayWarning(err.message))
+              return reject(err)
+            }
+
+            resolve()
+          })
+        })
+      })
+      .then(() => {
+        dispatch(actions.transitionForward())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.unlockFailed(err.message))
+        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
+      })
+  }
+}
+
+function transitionForward () {
+  return {
+    type: this.TRANSITION_FORWARD,
+  }
+}
+
+function transitionBackward () {
+  return {
+    type: this.TRANSITION_BACKWARD,
+  }
+}
+
+function confirmSeedWords () {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.clearSeedWordCache`)
+    return new Promise((resolve, reject) => {
+      background.clearSeedWordCache((err, account) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.info('Seed word cache cleared. ' + account)
+        dispatch(actions.showAccountsPage())
+        resolve(account)
+      })
+    })
+  }
+}
+
+function createNewVaultAndRestore (password, seed) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.createNewVaultAndRestore`)
+
+    return new Promise((resolve, reject) => {
+      background.clearSeedWordCache((err) => {
+        if (err) {
+          return reject(err)
+        }
+
+        background.createNewVaultAndRestore(password, seed, (err) => {
+          if (err) {
+            return reject(err)
+          }
+
+          resolve()
+        })
+      })
+    })
+      .then(() => dispatch(actions.unMarkPasswordForgotten()))
+      .then(() => {
+        dispatch(actions.showAccountsPage())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
+      })
+  }
+}
+
+function createNewVaultAndKeychain (password) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.createNewVaultAndKeychain`)
+
+    return new Promise((resolve, reject) => {
+      background.createNewVaultAndKeychain(password, err => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.debug(`background.placeSeedWords`)
+
+        background.placeSeedWords((err) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+
+          resolve()
+        })
+      })
+    })
+      .then(() => forceUpdateMetamaskState(dispatch))
+      .then(() => dispatch(actions.hideLoadingIndication()))
+      .catch(() => dispatch(actions.hideLoadingIndication()))
+  }
+}
+
+function createNewVaultAndGetSeedPhrase (password) {
+  return async dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    try {
+      await createNewVault(password)
+      const seedWords = await verifySeedPhrase()
+      dispatch(actions.hideLoadingIndication())
+      return seedWords
+    } catch (error) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(error.message))
+      throw new Error(error.message)
+    }
+  }
+}
+
+function unlockAndGetSeedPhrase (password) {
+  return async dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    try {
+      await submitPassword(password)
+      const seedWords = await verifySeedPhrase()
+      await forceUpdateMetamaskState(dispatch)
+      dispatch(actions.hideLoadingIndication())
+      return seedWords
+    } catch (error) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(error.message))
+      throw new Error(error.message)
+    }
+  }
+}
+
+function revealSeedConfirmation () {
+  return {
+    type: this.REVEAL_SEED_CONFIRMATION,
+  }
+}
+
+function submitPassword (password) {
+  return new Promise((resolve, reject) => {
+    background.submitPassword(password, error => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve()
+    })
+  })
+}
+
+function createNewVault (password) {
+  return new Promise((resolve, reject) => {
+    background.createNewVaultAndKeychain(password, error => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function verifyPassword (password) {
+  return new Promise((resolve, reject) => {
+    background.submitPassword(password, error => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function verifySeedPhrase () {
+  return new Promise((resolve, reject) => {
+    background.verifySeedPhrase((error, seedWords) => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(seedWords)
+    })
+  })
+}
+
+function requestRevealSeed (password) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.submitPassword`)
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, err => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.debug(`background.placeSeedWords`)
+        background.placeSeedWords((err, result) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+
+          dispatch(actions.showNewVaultSeed(result))
+          dispatch(actions.hideLoadingIndication())
+          resolve()
+        })
+      })
+    })
+  }
+}
+
+function requestRevealSeedWords (password) {
+  return async dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.submitPassword`)
+
+    try {
+      await verifyPassword(password)
+      const seedWords = await verifySeedPhrase()
+      dispatch(actions.hideLoadingIndication())
+      return seedWords
+    } catch (error) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(error.message))
+      throw new Error(error.message)
+    }
+  }
+}
+
+function fetchInfoToSync () {
+  return dispatch => {
+    log.debug(`background.fetchInfoToSync`)
+    return new Promise((resolve, reject) => {
+      background.fetchInfoToSync((err, result) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        resolve(result)
+      })
+    })
+  }
+}
+
+function resetAccount () {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      background.resetAccount((err, account) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.info('Transaction history reset for ' + account)
+        dispatch(actions.showAccountsPage())
+        resolve(account)
+      })
+    })
+  }
+}
+
+function removeAccount (address) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      background.removeAccount(address, (err, account) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.info('Account removed: ' + account)
+        dispatch(actions.showAccountsPage())
+        resolve()
+      })
+    })
+  }
+}
+
+function addNewKeyring (type, opts) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.addNewKeyring`)
+    background.addNewKeyring(type, opts, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) return dispatch(actions.displayWarning(err.message))
+      dispatch(actions.showAccountsPage())
+    })
+  }
+}
+
+function importNewAccount (strategy, args) {
+  return async (dispatch) => {
+    let newState
+    dispatch(actions.showLoadingIndication('This may take a while, please be patient.'))
+    try {
+      log.debug(`background.importAccountWithStrategy`)
+      await pify(background.importAccountWithStrategy).call(background, strategy, args)
+      log.debug(`background.getState`)
+      newState = await pify(background.getState).call(background)
+    } catch (err) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(err.message))
+      throw err
+    }
+    dispatch(actions.hideLoadingIndication())
+    dispatch(actions.updateMetamaskState(newState))
+    if (newState.selectedAddress) {
+      dispatch({
+        type: actions.SHOW_ACCOUNT_DETAIL,
+        value: newState.selectedAddress,
+      })
+    }
+    return newState
+  }
+}
+
+function navigateToNewAccountScreen () {
+  return {
+    type: this.NEW_ACCOUNT_SCREEN,
+  }
+}
+
+function addNewAccount () {
+  log.debug(`background.addNewAccount`)
+  return (dispatch, getState) => {
+    const oldIdentities = getState().metamask.identities
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.addNewAccount((err, { identities: newIdentities}) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        const newAccountAddress = Object.keys(newIdentities).find(address => !oldIdentities[address])
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve(newAccountAddress)
+      })
+    })
+  }
+}
+
+function checkHardwareStatus (deviceName, hdPath) {
+  log.debug(`background.checkHardwareStatus`, deviceName, hdPath)
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.checkHardwareStatus(deviceName, hdPath, (err, unlocked) => {
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve(unlocked)
+      })
+    })
+  }
+}
+
+function forgetDevice (deviceName) {
+  log.debug(`background.forgetDevice`, deviceName)
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.forgetDevice(deviceName, (err, response) => {
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve()
+      })
+    })
+  }
+}
+
+function connectHardware (deviceName, page, hdPath) {
+  log.debug(`background.connectHardware`, deviceName, page, hdPath)
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.connectHardware(deviceName, page, hdPath, (err, accounts) => {
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve(accounts)
+      })
+    })
+  }
+}
+
+function unlockHardwareWalletAccount (index, deviceName, hdPath) {
+  log.debug(`background.unlockHardwareWalletAccount`, index, deviceName, hdPath)
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.unlockHardwareWalletAccount(index, deviceName, hdPath, (err, accounts) => {
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.hideLoadingIndication())
+        return resolve()
+      })
+    })
+  }
+}
+
+function showInfoPage () {
+  return {
+    type: actions.SHOW_INFO_PAGE,
+  }
+}
+
+function showQrScanner (ROUTE) {
+  return (dispatch, getState) => {
+    return WebcamUtils.checkStatus()
+    .then(status => {
+      if (!status.environmentReady) {
+         // We need to switch to fullscreen mode to ask for permission
+         global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
+      } else {
+        dispatch(actions.showModal({
+          name: 'QR_SCANNER',
+        }))
+      }
+    }).catch(e => {
+      dispatch(actions.showModal({
+        name: 'QR_SCANNER',
+        error: true,
+        errorType: e.type,
+      }))
+    })
+  }
+}
+
+function setCurrentCurrency (currencyCode) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setCurrentCurrency`)
+    background.setCurrentCurrency(currencyCode, (err, data) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        log.error(err.stack)
+        return dispatch(actions.displayWarning(err.message))
+      }
+      dispatch({
+        type: actions.SET_CURRENT_FIAT,
+        value: {
+          currentCurrency: data.currentCurrency,
+          conversionRate: data.conversionRate,
+          conversionDate: data.conversionDate,
+        },
+      })
+    })
+  }
+}
+
+function signMsg (msgData) {
+  log.debug('action - signMsg')
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      log.debug(`actions calling background.signMessage`)
+      background.signMessage(msgData, (err, newState) => {
+        log.debug('signMessage called back')
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function signPersonalMsg (msgData) {
+  log.debug('action - signPersonalMsg')
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      log.debug(`actions calling background.signPersonalMessage`)
+      background.signPersonalMessage(msgData, (err, newState) => {
+        log.debug('signPersonalMessage called back')
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function signTypedMsg (msgData) {
+  log.debug('action - signTypedMsg')
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      log.debug(`actions calling background.signTypedMessage`)
+      background.signTypedMessage(msgData, (err, newState) => {
+        log.debug('signTypedMessage called back')
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          log.error(err)
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function signTx (txData) {
+  return (dispatch) => {
+    global.ethQuery.sendTransaction(txData, (err, data) => {
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch(actions.showConfTxPage({}))
+  }
+}
+
+function setGasLimit (gasLimit) {
+  return {
+    type: actions.UPDATE_GAS_LIMIT,
+    value: gasLimit,
+  }
+}
+
+function setGasPrice (gasPrice) {
+  return {
+    type: actions.UPDATE_GAS_PRICE,
+    value: gasPrice,
+  }
+}
+
+function setGasTotal (gasTotal) {
+  return {
+    type: actions.UPDATE_GAS_TOTAL,
+    value: gasTotal,
+  }
+}
+
+function updateGasData ({
+  gasPrice,
+  blockGasLimit,
+  recentBlocks,
+  selectedAddress,
+  selectedToken,
+  to,
+  value,
+  data,
+}) {
+  return (dispatch) => {
+    dispatch(actions.gasLoadingStarted())
+    return estimateGas({
+      estimateGasMethod: background.estimateGas,
+      blockGasLimit,
+      selectedAddress,
+      selectedToken,
+      to,
+      value,
+      estimateGasPrice: gasPrice,
+      data,
+    })
+    .then(gas => {
+      dispatch(actions.setGasLimit(gas))
+      dispatch(gasDuck.setCustomGasLimit(gas))
+      dispatch(updateSendErrors({ gasLoadingError: null }))
+      dispatch(actions.gasLoadingFinished())
+    })
+    .catch(err => {
+      log.error(err)
+      dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
+      dispatch(actions.gasLoadingFinished())
+    })
+  }
+}
+
+function gasLoadingStarted () {
+  return {
+    type: actions.GAS_LOADING_STARTED,
+  }
+}
+
+function gasLoadingFinished () {
+  return {
+    type: actions.GAS_LOADING_FINISHED,
+  }
+}
+
+function updateSendTokenBalance ({
+  selectedToken,
+  tokenContract,
+  address,
+}) {
+  return (dispatch) => {
+    const tokenBalancePromise = tokenContract
+      ? tokenContract.balanceOf(address)
+      : Promise.resolve()
+    return tokenBalancePromise
+      .then(usersToken => {
+        if (usersToken) {
+          const newTokenBalance = calcTokenBalance({ selectedToken, usersToken })
+          dispatch(setSendTokenBalance(newTokenBalance))
+        }
+      })
+      .catch(err => {
+        log.error(err)
+        updateSendErrors({ tokenBalance: 'tokenBalanceError' })
+      })
+  }
+}
+
+function updateSendErrors (errorObject) {
+  return {
+    type: actions.UPDATE_SEND_ERRORS,
+    value: errorObject,
+  }
+}
+
+function updateSendWarnings (warningObject) {
+  return {
+    type: actions.UPDATE_SEND_WARNINGS,
+    value: warningObject,
+  }
+}
+
+function setSendTokenBalance (tokenBalance) {
+  return {
+    type: actions.UPDATE_SEND_TOKEN_BALANCE,
+    value: tokenBalance,
+  }
+}
+
+function updateSendHexData (value) {
+  return {
+    type: actions.UPDATE_SEND_HEX_DATA,
+    value,
+  }
+}
+
+function updateSendTo (to, nickname = '') {
+  return {
+    type: actions.UPDATE_SEND_TO,
+    value: { to, nickname },
+  }
+}
+
+function updateSendAmount (amount) {
+  return {
+    type: actions.UPDATE_SEND_AMOUNT,
+    value: amount,
+  }
+}
+
+function updateSendMemo (memo) {
+  return {
+    type: actions.UPDATE_SEND_MEMO,
+    value: memo,
+  }
+}
+
+function setMaxModeTo (bool) {
+  return {
+    type: actions.UPDATE_MAX_MODE,
+    value: bool,
+  }
+}
+
+function updateSend (newSend) {
+  return {
+    type: actions.UPDATE_SEND,
+    value: newSend,
+  }
+}
+
+function clearSend () {
+  return {
+    type: actions.CLEAR_SEND,
+  }
+}
+
+
+function sendTx (txData) {
+  log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
+  return (dispatch, getState) => {
+    log.debug(`actions calling background.approveTransaction`)
+    background.approveTransaction(txData.id, (err) => {
+      if (err) {
+        dispatch(actions.txError(err))
+        return log.error(err.message)
+      }
+      dispatch(actions.completedTx(txData.id))
+
+      if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+        !hasUnconfirmedTransactions(getState())) {
+        return global.platform.closeCurrentWindow()
+      }
+    })
+  }
+}
+
+function signTokenTx (tokenAddress, toAddress, amount, txData) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    const token = global.eth.contract(abi).at(tokenAddress)
+    token.transfer(toAddress, ethUtil.addHexPrefix(amount), txData)
+      .catch(err => {
+        dispatch(actions.hideLoadingIndication())
+        dispatch(actions.displayWarning(err.message))
+      })
+    dispatch(actions.showConfTxPage({}))
+  }
+}
+
+function updateTransaction (txData) {
+  log.info('actions: updateTx: ' + JSON.stringify(txData))
+  return dispatch => {
+    log.debug(`actions calling background.updateTx`)
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      background.updateTransaction(txData, (err) => {
+        dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
+        if (err) {
+          dispatch(actions.txError(err))
+          dispatch(actions.goHome())
+          log.error(err.message)
+          return reject(err)
+        }
+
+        resolve(txData)
+      })
+    })
+    .then(() => updateMetamaskStateFromBackground())
+    .then(newState => dispatch(actions.updateMetamaskState(newState)))
+    .then(() => {
+        dispatch(actions.showConfTxPage({ id: txData.id }))
+        dispatch(actions.hideLoadingIndication())
+        return txData
+      })
+  }
+}
+
+function updateAndApproveTx (txData) {
+  log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
+  return (dispatch, getState) => {
+    log.debug(`actions calling background.updateAndApproveTx`)
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      background.updateAndApproveTransaction(txData, err => {
+        dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
+        dispatch(actions.clearSend())
+
+        if (err) {
+          dispatch(actions.txError(err))
+          dispatch(actions.goHome())
+          log.error(err.message)
+          reject(err)
+        }
+
+        resolve(txData)
+      })
+    })
+      .then(() => updateMetamaskStateFromBackground())
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => {
+        dispatch(actions.clearSend())
+        dispatch(actions.completedTx(txData.id))
+        dispatch(actions.hideLoadingIndication())
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return txData
+      })
+      .catch((err) => {
+        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
+      })
+  }
+}
+
+function completedTx (id) {
+  return {
+    type: actions.COMPLETED_TX,
+    value: id,
+  }
+}
+
+function updateTransactionParams (id, txParams) {
+  return {
+    type: actions.UPDATE_TRANSACTION_PARAMS,
+    id,
+    value: txParams,
+  }
+}
+
+function txError (err) {
+  return {
+    type: actions.TRANSACTION_ERROR,
+    message: err.message,
+  }
+}
+
+function cancelMsg (msgData) {
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      log.debug(`background.cancelMessage`)
+      background.cancelMessage(msgData.id, (err, newState) => {
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(msgData.id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function cancelPersonalMsg (msgData) {
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      const id = msgData.id
+      background.cancelPersonalMessage(id, (err, newState) => {
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function cancelTypedMsg (msgData) {
+  return (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      const id = msgData.id
+      background.cancelTypedMessage(id, (err, newState) => {
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          return reject(err)
+        }
+
+        dispatch(actions.completedTx(id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return resolve(msgData)
+      })
+    })
+  }
+}
+
+function cancelTx (txData) {
+  return (dispatch, getState) => {
+    log.debug(`background.cancelTransaction`)
+    dispatch(actions.showLoadingIndication())
+
+    return new Promise((resolve, reject) => {
+      background.cancelTransaction(txData.id, err => {
+        if (err) {
+          return reject(err)
+        }
+
+        resolve()
+      })
+    })
+      .then(() => updateMetamaskStateFromBackground())
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => {
+        dispatch(actions.clearSend())
+        dispatch(actions.completedTx(txData.id))
+        dispatch(actions.hideLoadingIndication())
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
+        return txData
+      })
+  }
+}
+
+/**
+ * Cancels all of the given transactions
+ * @param {Array<object>} txDataList a list of tx data objects
+ * @return {function(*): Promise<void>}
+ */
+function cancelTxs (txDataList) {
+  return async (dispatch, getState) => {
+    dispatch(actions.showLoadingIndication())
+    const txIds = txDataList.map(({id}) => id)
+    const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
+      background.cancelTransaction(id, (err) => {
+        if (err) {
+          return reject(err)
+        }
+
+        resolve()
+      })
+    }))
+
+    await Promise.all(cancellations)
+    const newState = await updateMetamaskStateFromBackground()
+    dispatch(actions.updateMetamaskState(newState))
+    dispatch(actions.clearSend())
+
+    txIds.forEach((id) => {
+      dispatch(actions.completedTx(id))
+    })
+
+    dispatch(actions.hideLoadingIndication())
+
+    if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+      return global.platform.closeCurrentWindow()
+    }
+  }
+}
+
+/**
+ * @deprecated
+ * @param {Array<object>} txsData
+ * @return {Function}
+ */
+function cancelAllTx (txsData) {
+  return (dispatch) => {
+    txsData.forEach((txData, i) => {
+      background.cancelTransaction(txData.id, () => {
+        dispatch(actions.completedTx(txData.id))
+        i === txsData.length - 1 ? dispatch(actions.goHome()) : null
+      })
+    })
+  }
+}
+//
+// initialize screen
+//
+
+function showCreateVault () {
+  return {
+    type: actions.SHOW_CREATE_VAULT,
+  }
+}
+
+function showRestoreVault () {
+  return {
+    type: actions.SHOW_RESTORE_VAULT,
+  }
+}
+
+function markPasswordForgotten () {
+  return (dispatch) => {
+    return background.markPasswordForgotten(() => {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.forgotPassword())
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
+function unMarkPasswordForgotten () {
+  return dispatch => {
+    return new Promise(resolve => {
+      background.unMarkPasswordForgotten(() => {
+        dispatch(actions.forgotPassword(false))
+        resolve()
+      })
+    })
+      .then(() => forceUpdateMetamaskState(dispatch))
+  }
+}
+
+function forgotPassword (forgotPasswordState = true) {
+  return {
+    type: actions.FORGOT_PASSWORD,
+    value: forgotPasswordState,
+  }
+}
+
+function showInitializeMenu () {
+  return {
+    type: actions.SHOW_INIT_MENU,
+  }
+}
+
+function showImportPage () {
+  return {
+    type: actions.SHOW_IMPORT_PAGE,
+  }
+}
+
+function showNewAccountPage (formToSelect) {
+  return {
+    type: actions.SHOW_NEW_ACCOUNT_PAGE,
+    formToSelect,
+  }
+}
+
+function setNewAccountForm (formToSelect) {
+  return {
+    type: actions.SET_NEW_ACCOUNT_FORM,
+    formToSelect,
+  }
+}
+
+function createNewVaultInProgress () {
+  return {
+    type: actions.CREATE_NEW_VAULT_IN_PROGRESS,
+  }
+}
+
+function showNewVaultSeed (seed) {
+  return {
+    type: actions.SHOW_NEW_VAULT_SEED,
+    value: seed,
+  }
+}
+
+function closeWelcomeScreen () {
+  return {
+    type: actions.CLOSE_WELCOME_SCREEN,
+  }
+}
+
+function backToUnlockView () {
+  return {
+    type: actions.BACK_TO_UNLOCK_VIEW,
+  }
+}
+
+function showNewKeychain () {
+  return {
+    type: actions.SHOW_NEW_KEYCHAIN,
+  }
+}
+
+//
+// unlock screen
+//
+
+function unlockInProgress () {
+  return {
+    type: actions.UNLOCK_IN_PROGRESS,
+  }
+}
+
+function unlockFailed (message) {
+  return {
+    type: actions.UNLOCK_FAILED,
+    value: message,
+  }
+}
+
+function unlockSucceeded (message) {
+  return {
+    type: actions.UNLOCK_SUCCEEDED,
+    value: message,
+  }
+}
+
+function unlockMetamask (account) {
+  return {
+    type: actions.UNLOCK_METAMASK,
+    value: account,
+  }
+}
+
+function updateMetamaskState (newState) {
+  return {
+    type: actions.UPDATE_METAMASK_STATE,
+    value: newState,
+  }
+}
+
+const backgroundSetLocked = () => {
+  return new Promise((resolve, reject) => {
+    background.setLocked(error => {
+      if (error) {
+        return reject(error)
+      }
+      resolve()
+    })
+  })
+}
+
+const updateMetamaskStateFromBackground = () => {
+  log.debug(`background.getState`)
+
+  return new Promise((resolve, reject) => {
+    background.getState((error, newState) => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(newState)
+    })
+  })
+}
+
+function lockMetamask () {
+  log.debug(`background.setLocked`)
+
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    return backgroundSetLocked()
+      .then(() => updateMetamaskStateFromBackground())
+      .catch(error => {
+        dispatch(actions.displayWarning(error.message))
+        return Promise.reject(error)
+      })
+      .then(newState => {
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+        dispatch({ type: actions.LOCK_METAMASK })
+      })
+      .catch(() => {
+        dispatch(actions.hideLoadingIndication())
+        dispatch({ type: actions.LOCK_METAMASK })
+      })
+  }
+}
+
+function setCurrentAccountTab (newTabName) {
+  log.debug(`background.setCurrentAccountTab: ${newTabName}`)
+  return callBackgroundThenUpdateNoSpinner(background.setCurrentAccountTab, newTabName)
+}
+
+function setSelectedToken (tokenAddress) {
+  return {
+    type: actions.SET_SELECTED_TOKEN,
+    value: tokenAddress || null,
+  }
+}
+
+function setSelectedAddress (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setSelectedAddress`)
+    background.setSelectedAddress(address, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+  }
+}
+
+function showAccountDetail (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setSelectedAddress`)
+    background.setSelectedAddress(address, (err, tokens) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+      dispatch(updateTokens(tokens))
+      dispatch({
+        type: actions.SHOW_ACCOUNT_DETAIL,
+        value: address,
+      })
+      dispatch(actions.setSelectedToken())
+    })
+  }
+}
+
+function backToAccountDetail (address) {
+  return {
+    type: actions.BACK_TO_ACCOUNT_DETAIL,
+    value: address,
+  }
+}
+
+function showAccountsPage () {
+  return {
+    type: actions.SHOW_ACCOUNTS_PAGE,
+  }
+}
+
+function showConfTxPage ({transForward = true, id}) {
+  return {
+    type: actions.SHOW_CONF_TX_PAGE,
+    transForward,
+    id,
+  }
+}
+
+function nextTx () {
+  return {
+    type: actions.NEXT_TX,
+  }
+}
+
+function viewPendingTx (txId) {
+  return {
+    type: actions.VIEW_PENDING_TX,
+    value: txId,
+  }
+}
+
+function previousTx () {
+  return {
+    type: actions.PREVIOUS_TX,
+  }
+}
+
+function editTx (txId) {
+  return {
+    type: actions.EDIT_TX,
+    value: txId,
+  }
+}
+
+function showConfigPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_CONFIG_PAGE,
+    value: transitionForward,
+  }
+}
+
+function showAddTokenPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_ADD_TOKEN_PAGE,
+    value: transitionForward,
+  }
+}
+
+function showAddSuggestedTokenPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE,
+    value: transitionForward,
+  }
+}
+
+function addToken (address, symbol, decimals, image) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.addToken(address, symbol, decimals, image, (err, tokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateTokens(tokens))
+        resolve(tokens)
+      })
+    })
+  }
+}
+
+function removeToken (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.removeToken(address, (err, tokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateTokens(tokens))
+        resolve(tokens)
+      })
+    })
+  }
+}
+
+function addTokens (tokens) {
+  return dispatch => {
+    if (Array.isArray(tokens)) {
+      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens[0])))
+      return Promise.all(tokens.map(({ address, symbol, decimals }) => (
+        dispatch(addToken(address, symbol, decimals))
+      )))
+    } else {
+      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens)))
+      return Promise.all(
+        Object
+        .entries(tokens)
+        .map(([_, { address, symbol, decimals }]) => (
+          dispatch(addToken(address, symbol, decimals))
+        ))
+      )
+    }
+  }
+}
+
+function removeSuggestedTokens () {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.removeSuggestedTokens((err, suggestedTokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+        }
+        dispatch(actions.clearPendingTokens())
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+          return global.platform.closeCurrentWindow()
+        }
+        resolve(suggestedTokens)
+      })
+    })
+    .then(() => updateMetamaskStateFromBackground())
+    .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
+  }
+}
+
+function addKnownMethodData (fourBytePrefix, methodData) {
+  return (dispatch) => {
+    background.addKnownMethodData(fourBytePrefix, methodData)
+  }
+}
+
+function updateTokens (newTokens) {
+  return {
+    type: actions.UPDATE_TOKENS,
+    newTokens,
+  }
+}
+
+function clearPendingTokens () {
+  return {
+    type: actions.CLEAR_PENDING_TOKENS,
+  }
+}
+
+function goBackToInitView () {
+  return {
+    type: actions.BACK_TO_INIT_MENU,
+  }
+}
+
+//
+// notice
+//
+
+function markNoticeRead (notice) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.markNoticeRead`)
+    return new Promise((resolve, reject) => {
+      background.markNoticeRead(notice, (err, notice) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        if (notice) {
+          dispatch(actions.showNotice(notice))
+          resolve(true)
+        } else {
+          dispatch(actions.clearNotices())
+          resolve(false)
+        }
+      })
+    })
+  }
+}
+
+function showNotice (notice) {
+  return {
+    type: actions.SHOW_NOTICE,
+    value: notice,
+  }
+}
+
+function clearNotices () {
+  return {
+    type: actions.CLEAR_NOTICES,
+  }
+}
+
+function markAccountsFound () {
+  log.debug(`background.markAccountsFound`)
+  return callBackgroundThenUpdate(background.markAccountsFound)
+}
+
+function retryTransaction (txId, gasPrice) {
+  log.debug(`background.retryTransaction`)
+  let newTxId
+
+  return dispatch => {
+    return new Promise((resolve, reject) => {
+      background.retryTransaction(txId, gasPrice, (err, newState) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+
+        const { selectedAddressTxList } = newState
+        const { id } = selectedAddressTxList[selectedAddressTxList.length - 1]
+        newTxId = id
+        resolve(newState)
+      })
+    })
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => newTxId)
+  }
+}
+
+function createCancelTransaction (txId, customGasPrice) {
+  log.debug('background.cancelTransaction')
+  let newTxId
+
+  return dispatch => {
+    return new Promise((resolve, reject) => {
+      background.createCancelTransaction(txId, customGasPrice, (err, newState) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+
+        const { selectedAddressTxList } = newState
+        const { id } = selectedAddressTxList[selectedAddressTxList.length - 1]
+        newTxId = id
+        resolve(newState)
+      })
+    })
+    .then(newState => dispatch(actions.updateMetamaskState(newState)))
+    .then(() => newTxId)
+  }
+}
+
+function createSpeedUpTransaction (txId, customGasPrice) {
+  log.debug('background.createSpeedUpTransaction')
+  let newTx
+
+  return dispatch => {
+    return new Promise((resolve, reject) => {
+      background.createSpeedUpTransaction(txId, customGasPrice, (err, newState) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+
+        const { selectedAddressTxList } = newState
+        newTx = selectedAddressTxList[selectedAddressTxList.length - 1]
+        resolve(newState)
+      })
+    })
+    .then(newState => dispatch(actions.updateMetamaskState(newState)))
+    .then(() => newTx)
+  }
+}
+
+//
+// config
+//
+
+function setProviderType (type) {
+  return (dispatch, getState) => {
+    const { type: currentProviderType } = getState().metamask.provider
+    log.debug(`background.setProviderType`, type)
+    background.setProviderType(type, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(actions.displayWarning('Had a problem changing networks!'))
+      }
+      dispatch(setPreviousProvider(currentProviderType))
+      dispatch(actions.updateProviderType(type))
+      dispatch(actions.setSelectedToken())
+    })
+
+  }
+}
+
+function updateProviderType (type) {
+  return {
+    type: actions.SET_PROVIDER_TYPE,
+    value: type,
+  }
+}
+
+function setPreviousProvider (type) {
+  return {
+    type: actions.SET_PREVIOUS_PROVIDER,
+    value: type,
+  }
+}
+
+function updateAndSetCustomRpc (newRpc, chainId, ticker = 'ETH', nickname) {
+  return (dispatch) => {
+    log.debug(`background.updateAndSetCustomRpc: ${newRpc} ${chainId} ${ticker} ${nickname}`)
+    background.updateAndSetCustomRpc(newRpc, chainId, ticker, nickname || newRpc, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(actions.displayWarning('Had a problem changing networks!'))
+      }
+      dispatch({
+        type: actions.SET_RPC_TARGET,
+        value: newRpc,
+      })
+    })
+  }
+}
+
+function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname) {
+  return (dispatch) => {
+    log.debug(`background.setRpcTarget: ${newRpc} ${chainId} ${ticker} ${nickname}`)
+    background.setCustomRpc(newRpc, chainId, ticker, nickname || newRpc, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(actions.displayWarning('Had a problem changing networks!'))
+      }
+      dispatch(actions.setSelectedToken())
+    })
+  }
+}
+
+function delRpcTarget (oldRpc) {
+  return (dispatch) => {
+    log.debug(`background.delRpcTarget: ${oldRpc}`)
+    background.delCustomRpc(oldRpc, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(self.displayWarning('Had a problem removing network!'))
+      }
+      dispatch(actions.setSelectedToken())
+    })
+  }
+}
+
+// Calls the addressBookController to add a new address.
+function addToAddressBook (recipient, nickname = '') {
+  log.debug(`background.addToAddressBook`)
+  return (dispatch) => {
+    background.setAddressBook(recipient, nickname, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(self.displayWarning('Address book failed to update'))
+      }
+    })
+  }
+}
+
+function useEtherscanProvider () {
+  log.debug(`background.useEtherscanProvider`)
+  background.useEtherscanProvider()
+  return {
+    type: actions.USE_ETHERSCAN_PROVIDER,
+  }
+}
+
+function showNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_OPEN,
+  }
+}
+
+function hideNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_CLOSE,
+  }
+}
+
+
+function showModal (payload) {
+  return {
+    type: actions.MODAL_OPEN,
+    payload,
+  }
+}
+
+function hideModal (payload) {
+  return {
+    type: actions.MODAL_CLOSE,
+    payload,
+  }
+}
+
+function showSidebar ({ transitionName, type, props }) {
+  return {
+    type: actions.SIDEBAR_OPEN,
+    value: {
+      transitionName,
+      type,
+      props,
+    },
+  }
+}
+
+function hideSidebar () {
+  return {
+    type: actions.SIDEBAR_CLOSE,
+  }
+}
+
+function showAlert (msg) {
+  return {
+    type: actions.ALERT_OPEN,
+    value: msg,
+  }
+}
+
+function hideAlert () {
+  return {
+    type: actions.ALERT_CLOSE,
+  }
+}
+
+/**
+ * This action will receive two types of values via qrCodeData
+ * an object with the following structure {type, values}
+ * or null (used to clear the previous value)
+ */
+function qrCodeDetected (qrCodeData) {
+  return {
+    type: actions.QR_CODE_DETECTED,
+    value: qrCodeData,
+  }
+}
+
+function showLoadingIndication (message) {
+  return {
+    type: actions.SHOW_LOADING,
+    value: message,
+  }
+}
+
+function setHardwareWalletDefaultHdPath ({ device, path }) {
+    return {
+      type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH,
+      value: {device, path},
+    }
+}
+
+function hideLoadingIndication () {
+  return {
+    type: actions.HIDE_LOADING,
+  }
+}
+
+function showSubLoadingIndication () {
+  return {
+    type: actions.SHOW_SUB_LOADING_INDICATION,
+  }
+}
+
+function hideSubLoadingIndication () {
+  return {
+    type: actions.HIDE_SUB_LOADING_INDICATION,
+  }
+}
+
+function displayWarning (text) {
+  return {
+    type: actions.DISPLAY_WARNING,
+    value: text,
+  }
+}
+
+function hideWarning () {
+  return {
+    type: actions.HIDE_WARNING,
+  }
+}
+
+function requestExportAccount () {
+  return {
+    type: actions.REQUEST_ACCOUNT_EXPORT,
+  }
+}
+
+function exportAccount (password, address) {
+  var self = this
+
+  return function (dispatch) {
+    dispatch(self.showLoadingIndication())
+
+    log.debug(`background.submitPassword`)
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, function (err) {
+        if (err) {
+          log.error('Error in submiting password.')
+          dispatch(self.hideLoadingIndication())
+          dispatch(self.displayWarning('Incorrect Password.'))
+          return reject(err)
+        }
+        log.debug(`background.exportAccount`)
+        return background.exportAccount(address, function (err, result) {
+          dispatch(self.hideLoadingIndication())
+
+          if (err) {
+            log.error(err)
+            dispatch(self.displayWarning('Had a problem exporting the account.'))
+            return reject(err)
+          }
+
+          // dispatch(self.exportAccountComplete())
+          dispatch(self.showPrivateKey(result))
+
+          return resolve(result)
+        })
+      })
+    })
+  }
+}
+
+function exportAccountComplete () {
+  return {
+    type: actions.EXPORT_ACCOUNT,
+  }
+}
+
+function showPrivateKey (key) {
+  return {
+    type: actions.SHOW_PRIVATE_KEY,
+    value: key,
+  }
+}
+
+function setAccountLabel (account, label) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setAccountLabel`)
+
+    return new Promise((resolve, reject) => {
+      background.setAccountLabel(account, label, (err) => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+
+        dispatch({
+          type: actions.SET_ACCOUNT_LABEL,
+          value: { account, label },
+        })
+
+        resolve(account)
+      })
+    })
+  }
+}
+
+function showSendPage () {
+  return {
+    type: actions.SHOW_SEND_PAGE,
+  }
+}
+
+function showSendTokenPage () {
+  return {
+    type: actions.SHOW_SEND_TOKEN_PAGE,
+  }
+}
+
+function buyEth (opts) {
+  return (dispatch) => {
+    const url = getBuyEthUrl(opts)
+    global.platform.openWindow({ url })
+    dispatch({
+      type: actions.BUY_ETH,
+    })
+  }
+}
+
+function onboardingBuyEthView (address) {
+  return {
+    type: actions.ONBOARDING_BUY_ETH_VIEW,
+    value: address,
+  }
+}
+
+function buyEthView (address) {
+  return {
+    type: actions.BUY_ETH_VIEW,
+    value: address,
+  }
+}
+
+function coinBaseSubview () {
+  return {
+    type: actions.COINBASE_SUBVIEW,
+  }
+}
+
+function pairUpdate (coin) {
+  return (dispatch) => {
+    dispatch(actions.showSubLoadingIndication())
+    dispatch(actions.hideWarning())
+    shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
+      dispatch(actions.hideSubLoadingIndication())
+      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
+      dispatch({
+        type: actions.PAIR_UPDATE,
+        value: {
+          marketinfo: mktResponse,
+        },
+      })
+    })
+  }
+}
+
+function shapeShiftSubview (network) {
+  var pair = 'btc_eth'
+  return (dispatch) => {
+    dispatch(actions.showSubLoadingIndication())
+    shapeShiftRequest('marketinfo', {pair}, (mktResponse) => {
+      shapeShiftRequest('getcoins', {}, (response) => {
+        dispatch(actions.hideSubLoadingIndication())
+        if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
+        dispatch({
+          type: actions.SHAPESHIFT_SUBVIEW,
+          value: {
+            marketinfo: mktResponse,
+            coinOptions: response,
+          },
+        })
+      })
+    })
+  }
+}
+
+function coinShiftRquest (data, marketData) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
+      dispatch(actions.hideLoadingIndication())
+      if (response.error) return dispatch(actions.displayWarning(response.error))
+      var message = `
+        Deposit your ${response.depositType} to the address below:`
+      log.debug(`background.createShapeShiftTx`)
+      background.createShapeShiftTx(response.deposit, response.depositType)
+      dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
+    })
+  }
+}
+
+function buyWithShapeShift (data) {
+  return dispatch => new Promise((resolve, reject) => {
+    shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
+      if (response.error) {
+        return reject(response.error)
+      }
+      background.createShapeShiftTx(response.deposit, response.depositType)
+      return resolve(response)
+    })
+  })
+}
+
+function showQrView (data, message) {
+  return {
+    type: actions.SHOW_QR_VIEW,
+    value: {
+      message: message,
+      data: data,
+    },
+  }
+}
+function reshowQrCode (data, coin) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
+      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
+
+      var message = [
+        `Deposit your ${coin} to the address below:`,
+        `Deposit Limit: ${mktResponse.limit}`,
+        `Deposit Minimum:${mktResponse.minimum}`,
+      ]
+
+      dispatch(actions.hideLoadingIndication())
+      return dispatch(actions.showQrView(data, message))
+      // return dispatch(actions.showModal({
+      //   name: 'SHAPESHIFT_DEPOSIT_TX',
+      //   Qr: { data, message },
+      // }))
+    })
+  }
+}
+
+function shapeShiftRequest (query, options, cb) {
+  var queryResponse, method
+  !options ? options = {} : null
+  options.method ? method = options.method : method = 'GET'
+
+  var requestListner = function (request) {
+    try {
+      queryResponse = JSON.parse(this.responseText)
+      cb ? cb(queryResponse) : null
+      return queryResponse
+    } catch (e) {
+      cb ? cb({error: e}) : null
+      return e
+    }
+  }
+
+  var shapShiftReq = new XMLHttpRequest()
+  shapShiftReq.addEventListener('load', requestListner)
+  shapShiftReq.open(method, `https://shapeshift.io/${query}/${options.pair ? options.pair : ''}`, true)
+
+  if (options.method === 'POST') {
+    var jsonObj = JSON.stringify(options.data)
+    shapShiftReq.setRequestHeader('Content-Type', 'application/json')
+    return shapShiftReq.send(jsonObj)
+  } else {
+    return shapShiftReq.send()
+  }
+}
+
+function setFeatureFlag (feature, activated, notificationType) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
+        notificationType && dispatch(actions.showModal({ name: notificationType }))
+        resolve(updatedFeatureFlags)
+      })
+    })
+  }
+}
+
+function updateFeatureFlags (updatedFeatureFlags) {
+  return {
+    type: actions.UPDATE_FEATURE_FLAGS,
+    value: updatedFeatureFlags,
+  }
+}
+
+function setPreference (preference, value) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.setPreference(preference, value, (err, updatedPreferences) => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.updatePreferences(updatedPreferences))
+        resolve(updatedPreferences)
+      })
+    })
+  }
+}
+
+function updatePreferences (value) {
+  return {
+    type: actions.UPDATE_PREFERENCES,
+    value,
+  }
+}
+
+function setUseNativeCurrencyAsPrimaryCurrencyPreference (value) {
+  return setPreference('useNativeCurrencyAsPrimaryCurrency', value)
+}
+
+function setShowFiatConversionOnTestnetsPreference (value) {
+  return setPreference('showFiatInTestnets', value)
+}
+
+function setCompletedOnboarding () {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.completeOnboarding(err => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completeOnboarding())
+        resolve()
+      })
+    })
+  }
+}
+
+function completeOnboarding () {
+  return {
+    type: actions.COMPLETE_ONBOARDING,
+  }
+}
+
+function setCompletedUiMigration () {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.completeUiMigration(err => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completeUiMigration())
+        resolve()
+      })
+    })
+  }
+}
+
+function completeUiMigration () {
+  return {
+    type: actions.COMPLETE_UI_MIGRATION,
+  }
+}
+
+function setNetworkNonce (networkNonce) {
+  return {
+    type: actions.SET_NETWORK_NONCE,
+    value: networkNonce,
+  }
+}
+
+function updateNetworkNonce (address) {
+  return (dispatch) => {
+    return new Promise((resolve, reject) => {
+      global.ethQuery.getTransactionCount(address, (err, data) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(setNetworkNonce(data))
+        resolve(data)
+      })
+    })
+  }
+}
+
+function setMouseUserState (isMouseUser) {
+  return {
+    type: actions.SET_MOUSE_USER_STATE,
+    value: isMouseUser,
+  }
+}
+
+// Call Background Then Update
+//
+// A function generator for a common pattern wherein:
+// We show loading indication.
+// We call a background method.
+// We hide loading indication.
+// If it errored, we show a warning.
+// If it didn't, we update the state.
+function callBackgroundThenUpdateNoSpinner (method, ...args) {
+  return (dispatch) => {
+    method.call(background, ...args, (err) => {
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
+function callBackgroundThenUpdate (method, ...args) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    method.call(background, ...args, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
+function forceUpdateMetamaskState (dispatch) {
+  log.debug(`background.getState`)
+  return new Promise((resolve, reject) => {
+    background.getState((err, newState) => {
+      if (err) {
+        dispatch(actions.displayWarning(err.message))
+        return reject(err)
+      }
+
+      dispatch(actions.updateMetamaskState(newState))
+      resolve(newState)
+    })
+  })
+}
+
+function toggleAccountMenu () {
+  return {
+    type: actions.TOGGLE_ACCOUNT_MENU,
+  }
+}
+
+function setParticipateInMetaMetrics (val) {
+  return (dispatch) => {
+    log.debug(`background.setParticipateInMetaMetrics`)
+    return new Promise((resolve, reject) => {
+      background.setParticipateInMetaMetrics(val, (err, metaMetricsId) => {
+        log.debug(err)
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch({
+          type: actions.SET_PARTICIPATE_IN_METAMETRICS,
+          value: val,
+        })
+
+        resolve([val, metaMetricsId])
+      })
+    })
+  }
+}
+
+function setMetaMetricsSendCount (val) {
+  return (dispatch) => {
+    log.debug(`background.setMetaMetricsSendCount`)
+    return new Promise((resolve, reject) => {
+      background.setMetaMetricsSendCount(val, (err) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch({
+          type: actions.SET_METAMETRICS_SEND_COUNT,
+          value: val,
+        })
+
+        resolve(val)
+      })
+    })
+  }
+}
+
+function setUseBlockie (val) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setUseBlockie`)
+    background.setUseBlockie(val, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch({
+      type: actions.SET_USE_BLOCKIE,
+      value: val,
+    })
+  }
+}
+
+function updateCurrentLocale (key) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return fetchLocale(key)
+      .then((localeMessages) => {
+        log.debug(`background.setCurrentLocale`)
+        background.setCurrentLocale(key, (err) => {
+          dispatch(actions.hideLoadingIndication())
+          if (err) {
+            return dispatch(actions.displayWarning(err.message))
+          }
+          dispatch(actions.setCurrentLocale(key))
+          dispatch(actions.setLocaleMessages(localeMessages))
+        })
+      })
+  }
+}
+
+function setCurrentLocale (key) {
+  return {
+    type: actions.SET_CURRENT_LOCALE,
+    value: key,
+  }
+}
+
+function setLocaleMessages (localeMessages) {
+  return {
+    type: actions.SET_LOCALE_MESSAGES,
+    value: localeMessages,
+  }
+}
+
+function updateNetworkEndpointType (networkEndpointType) {
+  return {
+    type: actions.UPDATE_NETWORK_ENDPOINT_TYPE,
+    value: networkEndpointType,
+  }
+}
+
+function setPendingTokens (pendingTokens) {
+  const { customToken = {}, selectedTokens = {} } = pendingTokens
+  const { address, symbol, decimals } = customToken
+  const tokens = address && symbol && decimals
+    ? { ...selectedTokens, [address]: { ...customToken, isCustom: true } }
+    : selectedTokens
+
+  return {
+    type: actions.SET_PENDING_TOKENS,
+    payload: tokens,
+  }
+}
+
+function approveProviderRequest (tabID) {
+  return (dispatch) => {
+    background.approveProviderRequest(tabID)
+  }
+}
+
+function rejectProviderRequest (tabID) {
+  return (dispatch) => {
+    background.rejectProviderRequest(tabID)
+  }
+}
+
+function clearApprovedOrigins () {
+  return (dispatch) => {
+    background.clearApprovedOrigins()
+  }
+}
+
+function setFirstTimeFlowType (type) {
+  return (dispatch) => {
+    log.debug(`background.setFirstTimeFlowType`)
+    background.setFirstTimeFlowType(type, (err) => {
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch({
+      type: actions.SET_FIRST_TIME_FLOW_TYPE,
+      value: type,
+    })
+  }
+}
diff --git a/ui/app/store/store.js b/ui/app/store/store.js
new file mode 100644
index 000000000..9f12f469e
--- /dev/null
+++ b/ui/app/store/store.js
@@ -0,0 +1,21 @@
+const createStore = require('redux').createStore
+const applyMiddleware = require('redux').applyMiddleware
+const thunkMiddleware = require('redux-thunk').default
+const rootReducer = require('../ducks')
+const createLogger = require('redux-logger').createLogger
+
+global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
+
+module.exports = configureStore
+
+const loggerMiddleware = createLogger({
+  predicate: () => global.METAMASK_DEBUG,
+})
+
+const middlewares = [thunkMiddleware, loggerMiddleware]
+
+const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
+
+function configureStore (initialState) {
+  return createStoreWithMiddleware(rootReducer, initialState)
+}
diff --git a/ui/app/util.js b/ui/app/util.js
deleted file mode 100644
index 3237e5feb..000000000
--- a/ui/app/util.js
+++ /dev/null
@@ -1,326 +0,0 @@
-const abi = require('human-standard-token-abi')
-const ethUtil = require('ethereumjs-util')
-const hexToBn = require('../../app/scripts/lib/hex-to-bn')
-import { DateTime } from 'luxon'
-
-const MIN_GAS_PRICE_GWEI_BN = new ethUtil.BN(1)
-const GWEI_FACTOR = new ethUtil.BN(1e9)
-const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
-
-// formatData :: ( date: <Unix Timestamp> ) -> String
-function formatDate (date, format = 'M/d/y \'at\' T') {
-  return DateTime.fromMillis(date).toFormat(format)
-}
-
-var valueTable = {
-  wei: '1000000000000000000',
-  kwei: '1000000000000000',
-  mwei: '1000000000000',
-  gwei: '1000000000',
-  szabo: '1000000',
-  finney: '1000',
-  ether: '1',
-  kether: '0.001',
-  mether: '0.000001',
-  gether: '0.000000001',
-  tether: '0.000000000001',
-}
-var bnTable = {}
-for (var currency in valueTable) {
-  bnTable[currency] = new ethUtil.BN(valueTable[currency], 10)
-}
-
-module.exports = {
-  valuesFor: valuesFor,
-  addressSummary: addressSummary,
-  miniAddressSummary: miniAddressSummary,
-  isAllOneCase: isAllOneCase,
-  isValidAddress: isValidAddress,
-  isValidENSAddress,
-  numericBalance: numericBalance,
-  parseBalance: parseBalance,
-  formatBalance: formatBalance,
-  generateBalanceObject: generateBalanceObject,
-  dataSize: dataSize,
-  readableDate: readableDate,
-  normalizeToWei: normalizeToWei,
-  normalizeEthStringToWei: normalizeEthStringToWei,
-  normalizeNumberToWei: normalizeNumberToWei,
-  valueTable: valueTable,
-  bnTable: bnTable,
-  isHex: isHex,
-  formatDate,
-  bnMultiplyByFraction,
-  getTxFeeBn,
-  shortenBalance,
-  getContractAtAddress,
-  exportAsFile: exportAsFile,
-  isInvalidChecksumAddress,
-  allNull,
-  getTokenAddressFromTokenObject,
-  checksumAddress,
-  addressSlicer,
-  isEthNetwork,
-}
-
-function isEthNetwork (netId) {
-  if (!netId || netId === '1' || netId === '3' || netId === '4' || netId === '42' || netId === '5777') {
-    return true
-  }
-
-  return false
-}
-
-function valuesFor (obj) {
-  if (!obj) return []
-  return Object.keys(obj)
-    .map(function (key) { return obj[key] })
-}
-
-function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includeHex = true) {
-  if (!address) return ''
-  let checked = checksumAddress(address)
-  if (!includeHex) {
-    checked = ethUtil.stripHexPrefix(checked)
-  }
-  return checked ? checked.slice(0, firstSegLength) + '...' + checked.slice(checked.length - lastSegLength) : '...'
-}
-
-function miniAddressSummary (address) {
-  if (!address) return ''
-  var checked = checksumAddress(address)
-  return checked ? checked.slice(0, 4) + '...' + checked.slice(-4) : '...'
-}
-
-function isValidAddress (address, network) {
-  var prefixed = ethUtil.addHexPrefix(address)
-  if (address === '0x0000000000000000000000000000000000000000') return false
-  return (isAllOneCase(prefixed) && ethUtil.isValidAddress(prefixed)) || ethUtil.isValidChecksumAddress(prefixed)
-}
-
-function isValidENSAddress (address) {
-  return address.match(/^.{7,}\.(eth|test)$/)
-}
-
-function isInvalidChecksumAddress (address) {
-  var prefixed = ethUtil.addHexPrefix(address)
-  if (address === '0x0000000000000000000000000000000000000000') return false
-  return !isAllOneCase(prefixed) && !ethUtil.isValidChecksumAddress(prefixed) && ethUtil.isValidAddress(prefixed)
-}
-
-function isAllOneCase (address) {
-  if (!address) return true
-  var lower = address.toLowerCase()
-  var upper = address.toUpperCase()
-  return address === lower || address === upper
-}
-
-// Takes wei Hex, returns wei BN, even if input is null
-function numericBalance (balance) {
-  if (!balance) return new ethUtil.BN(0, 16)
-  var stripped = ethUtil.stripHexPrefix(balance)
-  return new ethUtil.BN(stripped, 16)
-}
-
-// Takes  hex, returns [beforeDecimal, afterDecimal]
-function parseBalance (balance) {
-  var beforeDecimal, afterDecimal
-  const wei = numericBalance(balance)
-  var weiString = wei.toString()
-  const trailingZeros = /0+$/
-
-  beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0'
-  afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '')
-  if (afterDecimal === '') { afterDecimal = '0' }
-  return [beforeDecimal, afterDecimal]
-}
-
-// Takes wei hex, returns an object with three properties.
-// Its "formatted" property is what we generally use to render values.
-function formatBalance (balance, decimalsToKeep, needsParse = true, ticker = 'ETH') {
-  var parsed = needsParse ? parseBalance(balance) : balance.split('.')
-  var beforeDecimal = parsed[0]
-  var afterDecimal = parsed[1]
-  var formatted = 'None'
-  if (decimalsToKeep === undefined) {
-    if (beforeDecimal === '0') {
-      if (afterDecimal !== '0') {
-        var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
-        if (sigFigs) { afterDecimal = sigFigs[0] }
-        formatted = '0.' + afterDecimal + ` ${ticker}`
-      }
-    } else {
-      formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ` ${ticker}`
-    }
-  } else {
-    afterDecimal += Array(decimalsToKeep).join('0')
-    formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ` ${ticker}`
-  }
-  return formatted
-}
-
-
-function generateBalanceObject (formattedBalance, decimalsToKeep = 1) {
-  var balance = formattedBalance.split(' ')[0]
-  var label = formattedBalance.split(' ')[1]
-  var beforeDecimal = balance.split('.')[0]
-  var afterDecimal = balance.split('.')[1]
-  var shortBalance = shortenBalance(balance, decimalsToKeep)
-
-  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') {
-    // eslint-disable-next-line eqeqeq
-    if (afterDecimal == 0) {
-      balance = '0'
-    } else {
-      balance = '<1.0e-5'
-    }
-  } else if (beforeDecimal !== '0') {
-    balance = `${beforeDecimal}.${afterDecimal.slice(0, decimalsToKeep)}`
-  }
-
-  return { balance, label, shortBalance }
-}
-
-function shortenBalance (balance, decimalsToKeep = 1) {
-  var truncatedValue
-  var convertedBalance = parseFloat(balance)
-  if (convertedBalance > 1000000) {
-    truncatedValue = (balance / 1000000).toFixed(decimalsToKeep)
-    return `${truncatedValue}m`
-  } else if (convertedBalance > 1000) {
-    truncatedValue = (balance / 1000).toFixed(decimalsToKeep)
-    return `${truncatedValue}k`
-  } else if (convertedBalance === 0) {
-    return '0'
-  } else if (convertedBalance < 0.001) {
-    return '<0.001'
-  } else if (convertedBalance < 1) {
-    var stringBalance = convertedBalance.toString()
-    if (stringBalance.split('.')[1].length > 3) {
-      return convertedBalance.toFixed(3)
-    } else {
-      return stringBalance
-    }
-  } else {
-    return convertedBalance.toFixed(decimalsToKeep)
-  }
-}
-
-function dataSize (data) {
-  var size = data ? ethUtil.stripHexPrefix(data).length : 0
-  return size + ' bytes'
-}
-
-// Takes a BN and an ethereum currency name,
-// returns a BN in wei
-function normalizeToWei (amount, currency) {
-  try {
-    return amount.mul(bnTable.wei).div(bnTable[currency])
-  } catch (e) {}
-  return amount
-}
-
-function normalizeEthStringToWei (str) {
-  const parts = str.split('.')
-  let eth = new ethUtil.BN(parts[0], 10).mul(bnTable.wei)
-  if (parts[1]) {
-    var decimal = parts[1]
-    while (decimal.length < 18) {
-      decimal += '0'
-    }
-    if (decimal.length > 18) {
-      decimal = decimal.slice(0, 18)
-    }
-    const decimalBN = new ethUtil.BN(decimal, 10)
-    eth = eth.add(decimalBN)
-  }
-  return eth
-}
-
-var multiple = new ethUtil.BN('10000', 10)
-function normalizeNumberToWei (n, currency) {
-  var enlarged = n * 10000
-  var amount = new ethUtil.BN(String(enlarged), 10)
-  return normalizeToWei(amount, currency).div(multiple)
-}
-
-function readableDate (ms) {
-  var date = new Date(ms)
-  var month = date.getMonth()
-  var day = date.getDate()
-  var year = date.getFullYear()
-  var hours = date.getHours()
-  var minutes = '0' + date.getMinutes()
-  var seconds = '0' + date.getSeconds()
-
-  var dateStr = `${month}/${day}/${year}`
-  var time = `${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}`
-  return `${dateStr} ${time}`
-}
-
-function isHex (str) {
-  return Boolean(str.match(/^(0x)?[0-9a-fA-F]+$/))
-}
-
-function bnMultiplyByFraction (targetBN, numerator, denominator) {
-  const numBN = new ethUtil.BN(numerator)
-  const denomBN = new ethUtil.BN(denominator)
-  return targetBN.mul(numBN).div(denomBN)
-}
-
-function getTxFeeBn (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16), blockGasLimit) {
-  const gasBn = hexToBn(gas)
-  const gasPriceBn = hexToBn(gasPrice)
-  const txFeeBn = gasBn.mul(gasPriceBn)
-
-  return txFeeBn.toString(16)
-}
-
-function getContractAtAddress (tokenAddress) {
-  return global.eth.contract(abi).at(tokenAddress)
-}
-
-function exportAsFile (filename, data, type = 'text/csv') {
-  // source: https://stackoverflow.com/a/33542499 by Ludovic Feltz
-  const blob = new Blob([data], {type})
-  if (window.navigator.msSaveOrOpenBlob) {
-    window.navigator.msSaveBlob(blob, filename)
-  } else {
-    const elem = window.document.createElement('a')
-    elem.target = '_blank'
-    elem.href = window.URL.createObjectURL(blob)
-    elem.download = filename
-    document.body.appendChild(elem)
-    elem.click()
-    document.body.removeChild(elem)
-  }
-}
-
-function allNull (obj) {
-  return Object.entries(obj).every(([key, value]) => value === null)
-}
-
-function getTokenAddressFromTokenObject (token) {
-  return Object.values(token)[0].address.toLowerCase()
-}
-
-/**
- * Safely checksumms a potentially-null address
- *
- * @param {String} [address] - address to checksum
- * @param {String} [network] - network id
- * @returns {String} - checksummed address
- *
- */
-function checksumAddress (address, network) {
-  const checksummed = address ? ethUtil.toChecksumAddress(address) : ''
-  return checksummed
-}
-
-function addressSlicer (address = '') {
-  if (address.length < 11) {
-    return address
-  }
-
-  return `${address.slice(0, 6)}...${address.slice(-4)}`
-}