remove the ui/app and ui/lib folders (#10911)

.eslintrc.js

@@ -108,7 +108,7 @@ module.exports = {
     },
     {
       files: ['**/*.test.js'],
-      excludedFiles: ['ui/**/*.test.js', 'ui/app/__mocks__/*.js'],
+      excludedFiles: ['ui/**/*.test.js', 'ui/__mocks__/*.js'],
       extends: ['@metamask/eslint-config-mocha'],
       rules: {
         'mocha/no-setup-in-describe': 'off',
@@ -125,7 +125,7 @@ module.exports = {
       },
     },
     {
-      files: ['ui/**/*.test.js', 'ui/app/__mocks__/*.js'],
+      files: ['ui/**/*.test.js', 'ui/__mocks__/*.js'],
       extends: ['@metamask/eslint-config-jest'],
       rules: {
         'jest/no-restricted-matchers': 'off',

.gitignore

@@ -39,7 +39,7 @@ test-builds
 build-artifacts
 
 #ignore css output and sourcemaps
-ui/app/css/output/
+ui/css/output/
 
 notes.txt
 

.storybook/i18n.js

@@ -1,12 +1,12 @@
 import React, { Component, createContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getMessage } from '../ui/app/helpers/utils/i18n-helper';
-import { I18nContext } from '../ui/app/contexts/i18n';
+import { getMessage } from '../ui/helpers/utils/i18n-helper';
+import { I18nContext } from '../ui/contexts/i18n';
 
-export { I18nContext }
+export { I18nContext };
 
 export const I18nProvider = (props) => {
-  const { currentLocale, current, en } = props
+  const { currentLocale, current, en } = props;
 
   const t = useMemo(() => {
     return (key, ...args) =>

.storybook/main.js

@@ -1,9 +1,9 @@
-const path = require('path')
+const path = require('path');
 
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-  stories: ['../ui/app/**/*.stories.js'],
+  stories: ['../ui/**/*.stories.js'],
   addons: [
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
@@ -12,7 +12,7 @@ module.exports = {
     './i18n-party-addon/register.js',
   ],
   webpackFinal: async (config) => {
-    config.module.strictExportPresence = true
+    config.module.strictExportPresence = true;
     config.module.rules.push({
       test: /\.scss$/,
       loaders: [
@@ -31,12 +31,12 @@ module.exports = {
             sourceMap: true,
             implementation: require('sass'),
             sassOptions: {
-              includePaths: ['ui/app/css/'],
+              includePaths: ['ui/css/'],
             },
           },
         },
       ],
-    })
+    });
     config.plugins.push(
       new CopyWebpackPlugin({
         patterns: [
@@ -51,7 +51,7 @@ module.exports = {
           },
         ],
       }),
-    )
-    return config
+    );
+    return config;
   },
-}
+};

.storybook/preview.js

@@ -3,12 +3,12 @@ import { addDecorator, addParameters } from '@storybook/react';
 import { useGlobals } from '@storybook/api';
 import { withKnobs } from '@storybook/addon-knobs';
 import { Provider } from 'react-redux';
-import configureStore from '../ui/app/store/store';
-import '../ui/app/css/index.scss';
+import configureStore from '../ui/store/store';
+import '../ui/css/index.scss';
 import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
 import { I18nProvider, LegacyI18nProvider } from './i18n';
-import testData from './test-data.js'
+import testData from './test-data.js';
 
 addParameters({
   backgrounds: {
@@ -41,7 +41,7 @@ const styles = {
   alignItems: 'center',
 };
 
-const store = configureStore(testData)
+const store = configureStore(testData);
 
 const metamaskDecorator = (story, context) => {
   const currentLocale = context.globals.locale;

app/scripts/controllers/swaps.js

@@ -4,9 +4,9 @@ import BigNumber from 'bignumber.js';
 import { ObservableStore } from '@metamask/obs-store';
 import { mapValues, cloneDeep } from 'lodash';
 import abi from 'human-standard-token-abi';
-import { calcTokenAmount } from '../../../ui/app/helpers/utils/token-util';
-import { calcGasTotal } from '../../../ui/app/pages/send/send.utils';
-import { conversionUtil } from '../../../ui/app/helpers/utils/conversion-util';
+import { calcTokenAmount } from '../../../ui/helpers/utils/token-util';
+import { calcGasTotal } from '../../../ui/pages/send/send.utils';
+import { conversionUtil } from '../../../ui/helpers/utils/conversion-util';
 import {
   DEFAULT_ERC20_APPROVE_GAS,
   QUOTES_EXPIRED_ERROR,
@@ -20,7 +20,7 @@ import {
   fetchTradesInfo as defaultFetchTradesInfo,
   fetchSwapsFeatureLiveness as defaultFetchSwapsFeatureLiveness,
   fetchSwapsQuoteRefreshTime as defaultFetchSwapsQuoteRefreshTime,
-} from '../../../ui/app/pages/swaps/swaps.util';
+} from '../../../ui/pages/swaps/swaps.util';
 import { NETWORK_EVENTS } from './network';
 
 // The MAX_GAS_LIMIT is a number that is higher than the maximum gas costs we have observed on any aggregator

app/scripts/controllers/transactions/index.js

@@ -16,8 +16,8 @@ import {
   BnMultiplyByFraction,
   addHexPrefix,
 } from '../../lib/util';
-import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/app/helpers/constants/error-keys';
-import { getSwapsTokensReceivedFromTxMeta } from '../../../../ui/app/pages/swaps/swaps.util';
+import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/helpers/constants/error-keys';
+import { getSwapsTokensReceivedFromTxMeta } from '../../../../ui/pages/swaps/swaps.util';
 import {
   TRANSACTION_STATUSES,
   TRANSACTION_TYPES,

development/build/static.js

@@ -35,7 +35,7 @@ const copyTargets = [
     dest: `fonts/fontawesome`,
   },
   {
-    src: `./ui/app/css/output/`,
+    src: `./ui/css/output/`,
     pattern: `*.css`,
     dest: ``,
   },

development/build/styles.js

@@ -18,8 +18,8 @@ function createStyleTasks({ livereload }) {
   const prod = createTask(
     'styles:prod',
     createScssBuildTask({
-      src: 'ui/app/css/index.scss',
-      dest: 'ui/app/css/output',
+      src: 'ui/css/index.scss',
+      dest: 'ui/css/output',
       devMode: false,
     }),
   );
@@ -27,15 +27,15 @@ function createStyleTasks({ livereload }) {
   const dev = createTask(
     'styles:dev',
     createScssBuildTask({
-      src: 'ui/app/css/index.scss',
-      dest: 'ui/app/css/output',
+      src: 'ui/css/index.scss',
+      dest: 'ui/css/output',
       devMode: true,
-      pattern: 'ui/app/**/*.scss',
+      pattern: 'ui/**/*.scss',
     }),
   );
 
   const lint = createTask('lint-scss', function () {
-    return gulp.src('ui/app/css/itcss/**/*.scss').pipe(
+    return gulp.src('ui/css/itcss/**/*.scss').pipe(
       gulpStylelint({
         reporters: [{ formatter: 'string', console: true }],
         fix: true,

development/verify-locale-strings.js

@@ -171,8 +171,8 @@ async function verifyEnglishLocale() {
   // In the meantime we'll use glob to specify which paths can be strict searched
   // and gradually phase out the key based search
   const globsToStrictSearch = [
-    'ui/app/components/app/metamask-translation/*.js',
-    'ui/app/pages/confirmation/templates/*.js',
+    'ui/components/app/metamask-translation/*.js',
+    'ui/pages/confirmation/templates/*.js',
   ];
   const testGlob = '**/*.test.js';
   const javascriptFiles = await glob(['ui/**/*.js', 'shared/**/*.js'], {

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   restoreMocks: true,
   coverageDirectory: 'jest-coverage/',
-  collectCoverageFrom: ['<rootDir>/ui/app/**/swaps/**'],
+  collectCoverageFrom: ['<rootDir>/ui/**/swaps/**'],
   coveragePathIgnorePatterns: ['.stories.js', '.snap'],
   coverageThreshold: {
     global: {

package.json

@@ -49,7 +49,7 @@
     "verify-locales": "node ./development/verify-locale-strings.js",
     "verify-locales:fix": "node ./development/verify-locale-strings.js --fix",
     "mozilla-lint": "addons-linter dist/firefox",
-    "watch": "mocha --watch --require test/env.js --require test/setup.js --reporter min --recursive \"test/unit/**/*.js\" \"ui/app/**/*.test.js\" \"shared/**/*.test.js\"",
+    "watch": "mocha --watch --require test/env.js --require test/setup.js --reporter min --recursive \"test/unit/**/*.js\" \"ui/**/*.test.js\" \"shared/**/*.test.js\"",
     "devtools:react": "react-devtools",
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",

test/jest/background.js

@@ -1,4 +1,4 @@
-import * as actions from '../../ui/app/store/actions';
+import * as actions from '../../ui/store/actions';
 
 export const setBackgroundConnection = (backgroundConnection = {}) => {
   actions._setBackgroundConnection(backgroundConnection);

test/jest/rendering.js

@@ -4,8 +4,8 @@ import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import { I18nContext, LegacyI18nProvider } from '../../ui/app/contexts/i18n';
-import { getMessage } from '../../ui/app/helpers/utils/i18n-helper';
+import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
+import { getMessage } from '../../ui/helpers/utils/i18n-helper';
 import * as en from '../../app/_locales/en/messages.json';
 
 export const I18nProvider = (props) => {

test/lib/render-helpers.js

@@ -1,13 +1,19 @@
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { I18nContext, LegacyI18nProvider } from '../../ui/app/contexts/i18n';
-import { getMessage } from '../../ui/app/helpers/utils/i18n-helper';
+import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
+import { getMessage } from '../../ui/helpers/utils/i18n-helper';
 import * as en from '../../app/_locales/en/messages.json';
 
+export function shallowWithContext(jsxComponent) {
+  return shallow(jsxComponent, {
+    context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) },
+  });
+}
+
 export function mountWithRouter(component, store = {}, pathname = '/') {
   // Instantiate router context
   const router = {

test/unit-global/balance-formatter.test.js

@@ -1,6 +1,6 @@
 import assert from 'assert';
 import currencyFormatter from 'currency-formatter';
-import availableCurrencies from '../../ui/app/helpers/constants/available-conversions.json';
+import availableCurrencies from '../../ui/helpers/constants/available-conversions.json';
 
 describe('currencyFormatting', function () {
   it('be able to format any infura currency', function (done) {

ui/app/components/app/signature-request/signature-request.constants.js

@@ -1,3 +0,0 @@
-import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../../shared/constants/app';
-
-export { ENVIRONMENT_TYPE_NOTIFICATION };

ui/components/app/account-list-item/account-list-item-component.test.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import Identicon from '../../ui/identicon';
-import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
+import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import AccountListItem from './account-list-item';
 
-jest.mock('../../../../../shared/modules/hexstring-utils', () => ({
+jest.mock('../../../../shared/modules/hexstring-utils', () => ({
   toChecksumHexAddress: jest.fn(() => 'mockCheckSumAddress'),
 }));
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Identicon from '../../ui/identicon';
 import AccountMismatchWarning from '../../ui/account-mismatch-warning/account-mismatch-warning.component';
-import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
+import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 
 export default function AccountListItem({
   account,

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

@@ -4,8 +4,8 @@ import { debounce } from 'lodash';
 import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import classnames from 'classnames';
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../shared/constants/app';
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import Identicon from '../../ui/identicon';
 import SiteIcon from '../../ui/site-icon';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import sinon from 'sinon';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import { mountWithRouter } from '../../../../../test/lib/render-helpers';
+import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import AccountMenu from '.';
 
 describe('Account Menu', () => {

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.test.js

@@ -6,11 +6,11 @@ import thunk from 'redux-thunk';
 import { fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 
-import { tick } from '../../../../../../test/lib/tick';
-import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
+import { tick } from '../../../../../test/lib/tick';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 
 import * as actions from '../../../../store/actions';
-import { KOVAN_CHAIN_ID } from '../../../../../../shared/constants/network';
+import { KOVAN_CHAIN_ID } from '../../../../../shared/constants/network';
 import UnconnectedAccountAlert from '.';
 
 describe('Unconnected Account Alert', () => {

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

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
-} from '../../../../../../shared/constants/app';
-import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
+} from '../../../../../shared/constants/app';
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
 import NetworkDisplay from '../../network-display';
 import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';

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

@@ -3,10 +3,10 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import { Provider } from 'react-redux';
 import configureStore from '../../../../store/store';
-import testData from '../../../../../../.storybook/test-data';
+import testData from '../../../../../.storybook/test-data';
 import ConfirmPageContainerHeader from './confirm-page-container-header.component';
 
-const util = require('../../../../../../app/scripts/lib/util');
+const util = require('../../../../../app/scripts/lib/util');
 
 describe('Confirm Detail Row Component', () => {
   describe('render', () => {

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

@@ -9,10 +9,10 @@ import {
   NETWORKS_ROUTE,
   NETWORKS_FORM_ROUTE,
 } from '../../../helpers/constants/routes';
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app';
-import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network';
-import { isPrefixedFormattedHexString } from '../../../../../shared/modules/network.utils';
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
+import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network';
+import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 
 import ColorIndicator from '../../ui/color-indicator';
 import { COLORS, SIZES } from '../../../helpers/constants/design-system';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { mountWithRouter } from '../../../../../test/lib/render-helpers';
+import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import ColorIndicator from '../../ui/color-indicator';
 import NetworkDropdown from './network-dropdown';
 import { DropdownMenuItem } from './dropdown';