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

app/scripts/controllers/transactions/tx-gas-utils.js

@@ -7,7 +7,7 @@ const {
 const { addHexPrefix } = require('ethereumjs-util')
 const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
 
-import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/app/constants/error-keys'
+import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/app/helpers/constants/error-keys'
 
 /**
 tx-gas-utils are gas utility methods for Transaction manager

development/mock-dev.js

@@ -14,9 +14,9 @@
 
 const render = require('react-dom').render
 const h = require('react-hyperscript')
-const Root = require('../ui/app/root')
+const Root = require('../ui/app/pages')
-const configureStore = require('../ui/app/store')
+const configureStore = require('../ui/app/store/store')
-const actions = require('../ui/app/actions')
+const actions = require('../ui/app/store/actions')
 const states = require('./states')
 const backGroundConnectionModifiers = require('./backGroundConnectionModifiers')
 const Selector = require('./selector')

development/ui-dev.js

@@ -17,7 +17,7 @@
 
 const render = require('react-dom').render
 const h = require('react-hyperscript')
-const Root = require('../ui/app/root')
+const Root = require('../ui/app/pages')
 const configureStore = require('./uiStore')
 const states = require('./states')
 const Selector = require('./selector')

development/uiStore.js

@@ -2,7 +2,7 @@ const createStore = require('redux').createStore
 const applyMiddleware = require('redux').applyMiddleware
 const thunkMiddleware = require('redux-thunk').default
 const createLogger = require('redux-logger').createLogger
-const rootReducer = require('../ui/app/reducers')
+const rootReducer = require('../ui/app/ducks')
 
 module.exports = configureStore
 

docs/adding-new-networks.md

@@ -5,7 +5,7 @@ To add another network to our dropdown menu, make sure the following files are a
 ```
 app/scripts/config.js
 app/scripts/lib/buy-eth-url.js
-ui/app/app.js
+ui/app/index.js
 ui/app/components/buy-button-subview.js
 ui/app/components/drop-menu-item.js
 ui/app/components/network.js

mascara/src/app/buy-ether-widget/index.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-generator'
 import copyToClipboard from 'copy-to-clipboard'
 import ShapeShiftForm from '../shapeshift-form'
-import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
+import {buyEth, showAccountDetail} from '../../../../ui/app/store/actions'
 
 const OPTION_VALUES = {
   COINBASE: 'coinbase',

mascara/src/app/shapeshift-form/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import qrcode from 'qrcode-generator'
 import {connect} from 'react-redux'
-import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/actions'
+import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/store/actions'
-import {isValidAddress} from '../../../../ui/app/util'
+import {isValidAddress} from '../../../../ui/app/helpers/utils/util'
 
 export class ShapeShiftForm extends Component {
   static propTypes = {

test/unit/actions/config_test.js

@@ -3,8 +3,8 @@ var assert = require('assert')
 var freeze = require('deep-freeze-strict')
 var path = require('path')
 
-var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('config view actions', function () {
   var initialState = {

test/unit/actions/set_account_label_test.js

@@ -2,8 +2,8 @@ const assert = require('assert')
 const freeze = require('deep-freeze-strict')
 const path = require('path')
 
-const actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+const actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-const reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+const reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('SET_ACCOUNT_LABEL', function () {
   it('updates the state.metamask.identities[:i].name property of the state to the action.value.label', function () {

test/unit/actions/set_selected_account_test.js

@@ -3,8 +3,8 @@ var assert = require('assert')
 var freeze = require('deep-freeze-strict')
 var path = require('path')
 
-var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('SET_SELECTED_ACCOUNT', function () {
   it('sets the state.appState.activeAddress property of the state to the action.value', function () {

test/unit/actions/tx_test.js

@@ -4,7 +4,7 @@ var path = require('path')
 import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 
-const actions = require(path.join(__dirname, '../../../ui/app/actions.js'))
+const actions = require(path.join(__dirname, '../../../ui/app/store/actions.js'))
 
 const middlewares = [thunk]
 const mockStore = configureMockStore(middlewares)

test/unit/actions/view_info_test.js

@@ -3,8 +3,8 @@ var assert = require('assert')
 var freeze = require('deep-freeze-strict')
 var path = require('path')
 
-var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('SHOW_INFO_PAGE', function () {
   it('sets the state.appState.currentView.name property to info', function () {

test/unit/actions/warning_test.js

@@ -3,8 +3,8 @@ var assert = require('assert')
 var freeze = require('deep-freeze-strict')
 var path = require('path')
 
-var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('action DISPLAY_WARNING', function () {
   it('sets appState.warning to provided value', function () {

test/unit/balance-formatter-test.js

@@ -1,6 +1,6 @@
 const assert = require('assert')
 const currencyFormatter = require('currency-formatter')
-const infuraConversion = require('../../ui/app/infura-conversion.json')
+const infuraConversion = require('../../ui/app/helpers/constants/infura-conversion.json')
 
 describe('currencyFormatting', function () {
   it('be able to format any infura currency', function (done) {

test/unit/reducers/unlock_vault_test.js

@@ -4,8 +4,8 @@ var assert = require('assert')
 var path = require('path')
 var sinon = require('sinon')
 
-var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'actions.js'))
+var actions = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'store', 'actions.js'))
-var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'reducers.js'))
+var reducers = require(path.join(__dirname, '..', '..', '..', 'ui', 'app', 'ducks', 'index.js'))
 
 describe('#unlockMetamask(selectedAccount)', function () {
   beforeEach(function () {

test/unit/responsive/components/dropdown-test.js

@@ -3,7 +3,7 @@ const assert = require('assert')
 const h = require('react-hyperscript')
 const sinon = require('sinon')
 const path = require('path')
-const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown
+const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'app', 'dropdowns', 'index.js')).Dropdown
 
 const { createMockStore } = require('redux-test-utils')
 const { mountWithStore } = require('../../../lib/render-helpers')

test/unit/ui/app/actions.spec.js

@@ -16,7 +16,7 @@ const { createTestProviderTools } = require('../../../stub/provider')
 const provider = createTestProviderTools({ scaffold: {}}).provider
 
 const enLocale = require('../../../../app/_locales/en/messages.json')
-const actions = require('../../../../ui/app/actions')
+const actions = require('../../../../ui/app/store/actions')
 const MetaMaskController = require('../../../../app/scripts/metamask-controller')
 
 const firstTimeState = require('../../../unit/localhostState')

test/unit/ui/app/components/token-cell.spec.js

@@ -5,8 +5,8 @@ import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import { mount } from 'enzyme'
 
-import TokenCell from '../../../../../ui/app/components/token-cell'
+import TokenCell from '../../../../../ui/app/components/app/token-cell'
-import Identicon from '../../../../../ui/app/components/identicon'
+import Identicon from '../../../../../ui/app/components/ui/identicon'
 
 describe('Token Cell', () => {
   let wrapper

test/unit/ui/app/reducers/app.spec.js

@@ -1,6 +1,6 @@
 import assert from 'assert'
-import reduceApp from '../../../../../ui/app/reducers/app'
+import reduceApp from '../../../../../ui/app/ducks/app/app'
-import * as actions from '../../../../../ui/app/actions'
+import * as actions from '../../../../../ui/app/store/actions'
 
 describe('App State', () => {
 

test/unit/ui/app/reducers/metamask.spec.js

@@ -1,6 +1,6 @@
 import assert from 'assert'
-import reduceMetamask from '../../../../../ui/app/reducers/metamask'
+import reduceMetamask from '../../../../../ui/app/ducks/metamask/metamask'
-import * as actions from '../../../../../ui/app/actions'
+import * as actions from '../../../../../ui/app/store/actions'
 
 describe('MetaMask Reducers', () => {
 

test/unit/ui/app/selectors.spec.js

@@ -1,5 +1,5 @@
 const assert = require('assert')
-const selectors = require('../../../../ui/app/selectors')
+const selectors = require('../../../../ui/app/selectors/selectors')
 const mockState = require('../../../data/mock-state.json')
 const Eth = require('ethjs')
 

test/unit/util_test.js

@@ -3,7 +3,7 @@ var sinon = require('sinon')
 const ethUtil = require('ethereumjs-util')
 
 var path = require('path')
-var util = require(path.join(__dirname, '..', '..', 'ui', 'app', 'util.js'))
+var util = require(path.join(__dirname, '..', '..', 'ui', 'app', 'helpers', 'utils', 'util.js'))
 
 describe('util', function () {
   var ethInWei = '1'

ui/.gitignore

@@ -1,66 +0,0 @@
-
-# Created by https://www.gitignore.io/api/osx,node
-
-### OSX ###
-.DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
-node_modules
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-

ui/app/accounts/new-account/index.js

@@ -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),
-
-    ]),
-
-  ])
-}

ui/app/components/app/account-dropdowns.js

@@ -1,15 +1,15 @@
 const Component = require('react').Component
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const actions = require('../actions')
+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('../util')
+const { checksumAddress } = require('../../helpers/utils/util')
 
-import Identicon from './identicon'
+import Identicon from '../ui/identicon'
 
 class AccountDropdowns extends Component {
   constructor (props) {

ui/app/components/app/account-menu/account-menu.component.js

@@ -2,12 +2,12 @@ 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 { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../app/scripts/lib/util'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
-import Tooltip from '../tooltip'
+import Tooltip from '../../ui/tooltip'
-import Identicon from '../identicon'
+import Identicon from '../../ui/identicon'
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { PRIMARY } from '../../constants/common'
+import { PRIMARY } from '../../../helpers/constants/common'
 import {
   SETTINGS_ROUTE,
   INFO_ROUTE,
@@ -15,7 +15,7 @@ import {
   IMPORT_ACCOUNT_ROUTE,
   CONNECT_HARDWARE_ROUTE,
   DEFAULT_ROUTE,
-} from '../../routes'
+} from '../../../helpers/constants/routes'
 
 export default class AccountMenu extends PureComponent {
   static contextTypes = {

ui/app/components/app/account-menu/account-menu.container.js

@@ -10,8 +10,8 @@ import {
   showConfigPage,
   showInfoPage,
   showModal,
-} from '../../actions'
+} from '../../../store/actions'
-import { getMetaMaskAccounts } from '../../selectors'
+import { getMetaMaskAccounts } from '../../../selectors/selectors'
 import AccountMenu from './account-menu.component'
 
 function mapStateToProps (state) {

ui/app/components/app/account-panel.js

@@ -1,9 +1,9 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-import Identicon from './identicon'
+import Identicon from '../ui/identicon'
-const formatBalance = require('../util').formatBalance
+const formatBalance = require('../../helpers/utils/util').formatBalance
-const addressSummary = require('../util').addressSummary
+const addressSummary = require('../../helpers/utils/util').addressSummary
 
 module.exports = AccountPanel
 

ui/app/components/app/app-header/app-header.component.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Identicon from '../identicon'
+import Identicon from '../../ui/identicon'
-import { DEFAULT_ROUTE } from '../../routes'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 const NetworkIndicator = require('../network')
 
 export default class AppHeader extends PureComponent {

ui/app/components/app/app-header/app-header.container.js

@@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 
 import AppHeader from './app-header.component'
-const actions = require('../../actions')
+const actions = require('../../../store/actions')
 
 const mapStateToProps = state => {
   const { appState, metamask } = state

ui/app/components/app/coinbase-form.js

@@ -3,7 +3,7 @@ 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 actions = require('../../store/actions')
 
 CoinbaseForm.contextTypes = {
   t: PropTypes.func,

ui/app/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js

@@ -2,7 +2,7 @@ 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'
+import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common'
 
 const ConfirmDetailRow = props => {
   const {

ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { Tabs, Tab } from '../../tabs'
+import { Tabs, Tab } from '../../../ui/tabs'
-import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from './'
+import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.'
-import ErrorMessage from '../../error-message'
+import ErrorMessage from '../../../ui/error-message'
 
 export default class ConfirmPageContainerContent extends Component {
   static propTypes = {

ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Identicon from '../../../identicon'
+import Identicon from '../../../../ui/identicon'
 
 const ConfirmPageContainerSummary = props => {
   const {

ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -1,6 +1,6 @@
-@import './confirm-page-container-warning/index';
+@import 'confirm-page-container-warning/index';
 
-@import './confirm-page-container-summary/index';
+@import 'confirm-page-container-summary/index';
 
 .confirm-page-container-content {
   overflow-y: auto;

ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
-} from '../../../../../app/scripts/lib/enums'
+} from '../../../../../../app/scripts/lib/enums'
 import NetworkDisplay from '../../network-display'
 
 export default class ConfirmPageContainer extends Component {

ui/app/components/app/confirm-page-container/confirm-page-container.component.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import SenderToRecipient from '../sender-to-recipient'
+import SenderToRecipient from '../../ui/sender-to-recipient'
-import { PageContainerFooter } from '../page-container'
+import { PageContainerFooter } from '../../ui/page-container'
-import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation } from './'
+import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation } from '.'
 
 export default class ConfirmPageContainer extends Component {
   static contextTypes = {

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';

ui/app/components/app/copyable.js

@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
-const Tooltip = require('./tooltip')
+const Tooltip = require('../ui/tooltip')
 const copyToClipboard = require('copy-to-clipboard')
 const connect = require('react-redux').connect
 

ui/app/components/app/customize-gas-modal/index.js

@@ -4,15 +4,15 @@ 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 actions = require('../../../store/actions')
 const GasModalCard = require('./gas-modal-card')
-import Button from '../button'
+import Button from '../../ui/button'
 
 const ethUtil = require('ethereumjs-util')
 
 import {
   updateSendErrors,
-} from '../../ducks/send.duck'
+} from '../../../ducks/send/send.duck'
 
 const {
   MIN_GAS_PRICE_DEC,
@@ -30,7 +30,7 @@ const {
   conversionGreaterThan,
   conversionMax,
   subtractCurrencies,
-} = require('../../conversion-util')
+} = require('../../../helpers/utils/conversion-util')
 
 const {
   getGasIsLoading,
@@ -42,7 +42,7 @@ const {
   getCurrentAccountWithSendEtherInfo,
   getSelectedTokenToFiatRate,
   getSendMaxModeState,
-} = require('../../selectors')
+} = require('../../../selectors/selectors')
 
 const {
   getGasPrice,

ui/app/components/app/dropdowns/account-details-dropdown.js

@@ -3,9 +3,9 @@ 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 actions = require('../../../store/actions')
-const { getSelectedIdentity } = require('../../selectors')
+const { getSelectedIdentity } = require('../../../selectors/selectors')
-const genAccountLink = require('../../../lib/account-link.js')
+const genAccountLink = require('../../../../lib/account-link.js')
 const { Menu, Item, CloseArea } = require('./components/menu')
 
 AccountDetailsDropdown.contextTypes = {

ui/app/components/app/dropdowns/components/account-dropdowns.js

@@ -1,15 +1,15 @@
 const Component = require('react').Component
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const actions = require('../../../actions')
+const actions = require('../../../../store/actions')
-const genAccountLink = require('../../../../lib/account-link.js')
+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'
+import Identicon from '../../../ui/identicon'
-const { checksumAddress } = require('../../../util')
+const { checksumAddress } = require('../../../../helpers/utils/util')
 const copyToClipboard = require('copy-to-clipboard')
-const { formatBalance } = require('../../../util')
+const { formatBalance } = require('../../../../helpers/utils/util')
 
 
 class AccountDropdowns extends Component {

ui/app/components/app/dropdowns/network-dropdown.js

@@ -5,12 +5,12 @@ 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 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('../../routes')
+const { SETTINGS_ROUTE } = require('../../../helpers/constants/routes')
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [

ui/app/components/app/dropdowns/tests/network-dropdown.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import assert from 'assert'
 import { createMockStore } from 'redux-test-utils'
-import { mountWithRouter } from '../../../../../test/lib/render-helpers'
+import { mountWithRouter } from '../../../../../../test/lib/render-helpers'
 import NetworkDropdown from '../network-dropdown'
 import { DropdownMenuItem } from '../components/dropdown'
 import NetworkDropdownIcon from '../components/network-dropdown-icon'

ui/app/components/app/dropdowns/token-menu-dropdown.js

@@ -3,7 +3,7 @@ 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 actions = require('../../../store/actions')
 const genAccountLink = require('etherscan-link').createAccountLink
 const { Menu, Item, CloseArea } = require('./components/menu')
 

ui/app/components/app/ens-input.js

@@ -12,7 +12,7 @@ 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')
+const { isValidENSAddress } = require('../../helpers/utils/util')
 
 EnsInput.contextTypes = {
   t: PropTypes.func,

ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux'
-import { showModal } from '../../../actions'
+import { showModal } from '../../../../store/actions'
 import {
   decGWEIToHexWEI,
   decimalToHex,
   hexWEIToDecGWEI,
-} from '../../../helpers/conversions.util'
+} from '../../../../helpers/utils/conversions.util'
 import AdvancedGasInputs from './advanced-gas-inputs.component'
 
 function convertGasPriceForInputs (gasPriceInHexWEI) {

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Loading from '../../../loading-screen'
+import Loading from '../../../../ui/loading-screen'
 import GasPriceChart from '../../gas-price-chart'
 import debounce from 'lodash.debounce'
 

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import assert from 'assert'
-import shallow from '../../../../../../lib/shallow-with-context'
+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'
+import Loading from '../../../../../ui/loading-screen'
 
 const propsMethodSpies = {
   updateCustomGasPrice: sinon.spy(),

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import assert from 'assert'
-import shallow from '../../../../../../../lib/shallow-with-context'
+import shallow from '../../../../../../../../lib/shallow-with-context'
 import TimeRemaining from '../time-remaining.component.js'
 
 describe('TimeRemaining Component', function () {

ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Loading from '../../../loading-screen'
+import Loading from '../../../../ui/loading-screen'
 import GasPriceButtonGroup from '../../gas-price-button-group'
 
 export default class BasicTabContent extends Component {

ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import assert from 'assert'
-import shallow from '../../../../../../lib/shallow-with-context'
+import shallow from '../../../../../../../lib/shallow-with-context'
 import BasicTabContent from '../basic-tab-content.component'
 
-import GasPriceButtonGroup from '../../../gas-price-button-group/'
+import GasPriceButtonGroup from '../../../gas-price-button-group'
-import Loading from '../../../../loading-screen'
+import Loading from '../../../../../ui/loading-screen'
 
 const mockGasPriceButtonGroupProps = {
   buttonDataLoading: false,

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import PageContainer from '../../page-container'
+import PageContainer from '../../../ui/page-container'
-import { Tabs, Tab } from '../../tabs'
+import { Tabs, Tab } from '../../../ui/tabs'
 import AdvancedTabContent from './advanced-tab-content'
 import BasicTabContent from './basic-tab-content'
 

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -7,7 +7,7 @@ import {
   setGasPrice,
   createSpeedUpTransaction,
   hideSidebar,
-} from '../../../actions'
+} from '../../../../store/actions'
 import {
   setCustomGasPrice,
   setCustomGasLimit,
@@ -15,19 +15,19 @@ import {
   setCustomTimeEstimate,
   fetchGasEstimates,
   fetchBasicGasAndTimeEstimates,
-} from '../../../ducks/gas.duck'
+} from '../../../../ducks/gas/gas.duck'
 import {
   hideGasButtonGroup,
-} from '../../../ducks/send.duck'
+} from '../../../../ducks/send/send.duck'
 import {
   updateGasAndCalculate,
-} from '../../../ducks/confirm-transaction.duck'
+} from '../../../../ducks/confirm-transaction/confirm-transaction.duck'
 import {
   getCurrentCurrency,
   conversionRateSelector as getConversionRate,
   getSelectedToken,
   getCurrentEthBalance,
-} from '../../../selectors.js'
+} from '../../../../selectors/selectors.js'
 import {
   formatTimeEstimate,
   getFastPriceEstimateInHexWEI,
@@ -41,29 +41,29 @@ import {
   getRenderableBasicEstimateData,
   getBasicGasEstimateBlockTime,
   isCustomPriceSafe,
-} from '../../../selectors/custom-gas'
+} from '../../../../selectors/custom-gas'
 import {
   submittedPendingTransactionsSelector,
-} from '../../../selectors/transactions'
+} from '../../../../selectors/transactions'
 import {
   formatCurrency,
-} from '../../../helpers/confirm-transaction/util'
+} from '../../../../helpers/utils/confirm-tx.util'
 import {
   addHexWEIsToDec,
   decEthToConvertedCurrency as ethTotalToConvertedCurrency,
   decGWEIToHexWEI,
   hexWEIToDecGWEI,
-} from '../../../helpers/conversions.util'
+} from '../../../../helpers/utils/conversions.util'
 import {
   formatETHFee,
-} from '../../../helpers/formatters'
+} 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'
+import {getIsMainnet, preferencesSelector} from '../../../../selectors/selectors'
 
 const mapStateToProps = (state, ownProps) => {
   const { transaction = {} } = ownProps