diff --git a/.eslintrc.js b/.eslintrc.js index 3cc83ee1f..8ea5865e8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -41,6 +41,12 @@ module.exports = { }, rules: { + /* TODO: Remove these when upgrading to `@metamask/eslint-config@2` */ + 'array-callback-return': 'error', + 'callback-return': 'error', + 'global-require': 'error', + 'guard-for-in': 'error', + /* End v2 rules */ 'arrow-parens': 'error', 'no-tabs': 'error', 'no-mixed-operators': 'error', @@ -101,6 +107,13 @@ module.exports = { rules: { 'import/no-anonymous-default-export': ['error', { 'allowObject': true }], }, + }, { + files: [ + 'app/scripts/migrations/*.js', + ], + rules: { + 'global-require': 'off', + }, }], settings: { diff --git a/CHANGELOG.md b/CHANGELOG.md index 17db87987..49e998535 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ ## Current Develop Branch +## 8.0.6 Wed Jul 22 2020 +- [#9030](https://github.com/MetaMask/metamask-extension/pull/9030): Hide "delete" button when editing contact of wallet account +- [#9031](https://github.com/MetaMask/metamask-extension/pull/9031): Fix crash upon removing contact +- [#9032](https://github.com/MetaMask/metamask-extension/pull/9032): Do not show spend limit for approvals +- [#9046](https://github.com/MetaMask/metamask-extension/pull/9046): Update @metamask/inpage-provider@6.1.0 +- [#9048](https://github.com/MetaMask/metamask-extension/pull/9048): Skip attempts to resolve 0x contract prefix +- [#9051](https://github.com/MetaMask/metamask-extension/pull/9051): Use content-hash@2.5.2 +- [#9056](https://github.com/MetaMask/metamask-extension/pull/9056): Display at least one significant digit of small non-zero token balances + ## 8.0.5 Thu Jul 16 2020 - [#8942](https://github.com/MetaMask/metamask-extension/pull/8942): Fix display of incoming transactions (#8942) - [#8998](https://github.com/MetaMask/metamask-extension/pull/8998): Fix `web3_clientVersion` method (#8998) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 76e3fafaa..32331189b 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -187,11 +187,11 @@ "alertsSettingsDescription": { "message": "Enable or disable each alert" }, - "alertSettingsUnconnectedAccount": { - "message": "Browsing a website with an unconnected account selected" - }, - "alertSettingsUnconnectedAccountDescription": { - "message": "This alert is shown in the popup when you are browsing a connected Web3 site, but the currently selected account is not connected." + "alertSettingsUnconnectedAccount": { + "message": "Browsing a website with an unconnected account selected" + }, + "alertSettingsUnconnectedAccountDescription": { + "message": "This alert is shown in the popup when you are browsing a connected Web3 site, but the currently selected account is not connected." }, "allowOriginSpendToken": { "message": "Allow $1 to spend your $2?", @@ -224,6 +224,10 @@ "approve": { "message": "Approve spend limit" }, + "approveSpendLimit": { + "message": "Approve $1 spend limit", + "description": "The token symbol that is being approved" + }, "approved": { "message": "Approved" }, diff --git a/app/manifest/_base.json b/app/manifest/_base.json index fb12daf81..053cb878a 100644 --- a/app/manifest/_base.json +++ b/app/manifest/_base.json @@ -1,7 +1,7 @@ { "name": "__MSG_appName__", "short_name": "__MSG_appName__", - "version": "8.0.5", + "version": "8.0.6", "manifest_version": 2, "author": "https://metamask.io", "description": "__MSG_appDescription__", diff --git a/app/scripts/controllers/detect-tokens.js b/app/scripts/controllers/detect-tokens.js index 4b49aef44..6b7424f98 100644 --- a/app/scripts/controllers/detect-tokens.js +++ b/app/scripts/controllers/detect-tokens.js @@ -25,8 +25,7 @@ export default class DetectTokensController { } /** - * For each token in eth-contract-metada, find check selectedAddress balance. - * + * For each token in eth-contract-metadata, find check selectedAddress balance. */ async detectNewTokens () { if (!this.isActive) { diff --git a/app/scripts/controllers/permissions/methodMiddleware.js b/app/scripts/controllers/permissions/methodMiddleware.js index b57585acd..613ea3876 100644 --- a/app/scripts/controllers/permissions/methodMiddleware.js +++ b/app/scripts/controllers/permissions/methodMiddleware.js @@ -107,6 +107,7 @@ export default function createMethodMiddleware ({ } // when this promise resolves, the response is on its way back + // eslint-disable-next-line callback-return await next() if (responseHandler) { diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 0a2c0bbe3..47fa73746 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -206,13 +206,15 @@ export default class PreferencesController { res.result = result end() } - break + return default: end(new Error(`Asset of type ${type} not supported`)) + return } - } else { - next() } + + next() + return } /** @@ -335,9 +337,9 @@ export default class PreferencesController { } // store lost accounts - for (const key in newlyLost) { + Object.keys(newlyLost).forEach((key) => { lostIdentities[key] = newlyLost[key] - } + }) } this.store.updateState({ identities, lostIdentities }) diff --git a/app/scripts/controllers/transactions/README.md b/app/scripts/controllers/transactions/README.md index 04c823192..7f9787b1b 100644 --- a/app/scripts/controllers/transactions/README.md +++ b/app/scripts/controllers/transactions/README.md @@ -31,7 +31,7 @@ txMeta = { "time": 1524094064821, // time of creation "status": "confirmed", "metamaskNetworkId": "1524091532133", //the network id for the transaction - "loadingDefaults": false, // used to tell the ui when we are done calculatyig gass defaults + "loadingDefaults": false, // used to tell the ui when we are done calculating gas defaults "txParams": { // the txParams object "from": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675", "to": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675", diff --git a/app/scripts/controllers/transactions/lib/tx-state-history-helpers.js b/app/scripts/controllers/transactions/lib/tx-state-history-helpers.js index 8045fbeeb..20505ec06 100644 --- a/app/scripts/controllers/transactions/lib/tx-state-history-helpers.js +++ b/app/scripts/controllers/transactions/lib/tx-state-history-helpers.js @@ -23,7 +23,7 @@ export function migrateFromSnapshotsToDiffs (longHistory) { Generates an array of history objects sense the previous state. The object has the keys op (the operation performed), - path (the key and if a nested object then each key will be seperated with a `/`) + path (the key and if a nested object then each key will be separated with a `/`) value with the first entry having the note and a timestamp when the change took place @param {Object} previousState - the previous state of the object diff --git a/app/scripts/controllers/transactions/tx-gas-utils.js b/app/scripts/controllers/transactions/tx-gas-utils.js index cdb922c7d..1fca82afd 100644 --- a/app/scripts/controllers/transactions/tx-gas-utils.js +++ b/app/scripts/controllers/transactions/tx-gas-utils.js @@ -7,7 +7,7 @@ import log from 'loglevel' * debug information for a failed analysis. * @typedef {Object} GasAnalysisResult * @property {string} blockGasLimit - The gas limit of the block used for the analysis - * @property {string} estimatedGasHex - The estimated gas, in hexidecimal + * @property {string} estimatedGasHex - The estimated gas, in hexadecimal * @property {Object} simulationFails - Debug information about why an analysis failed */ diff --git a/app/scripts/controllers/transactions/tx-state-manager.js b/app/scripts/controllers/transactions/tx-state-manager.js index 7992a1d02..b8adf8deb 100644 --- a/app/scripts/controllers/transactions/tx-state-manager.js +++ b/app/scripts/controllers/transactions/tx-state-manager.js @@ -100,7 +100,7 @@ export default class TransactionStateManager extends EventEmitter { } /** - @returns {array} - the tx list whos status is unapproved + @returns {array} - the tx list whose status is unapproved */ getUnapprovedTxList () { const txList = this.getTxsByMetaData('status', 'unapproved') @@ -112,7 +112,7 @@ export default class TransactionStateManager extends EventEmitter { /** @param [address] {string} - hex prefixed address to sort the txMetas for [optional] - @returns {array} - the tx list whos status is approved if no address is provide + @returns {array} - the tx list whose status is approved if no address is provide returns all txMetas who's status is approved for the current network */ getApprovedTransactions (address) { @@ -125,7 +125,7 @@ export default class TransactionStateManager extends EventEmitter { /** @param [address] {string} - hex prefixed address to sort the txMetas for [optional] - @returns {array} - the tx list whos status is submitted if no address is provide + @returns {array} - the tx list whose status is submitted if no address is provide returns all txMetas who's status is submitted for the current network */ getPendingTransactions (address) { @@ -138,7 +138,7 @@ export default class TransactionStateManager extends EventEmitter { /** @param [address] {string} - hex prefixed address to sort the txMetas for [optional] - @returns {array} - the tx list whos status is confirmed if no address is provide + @returns {array} - the tx list whose status is confirmed if no address is provide returns all txMetas who's status is confirmed for the current network */ getConfirmedTransactions (address) { @@ -153,7 +153,7 @@ export default class TransactionStateManager extends EventEmitter { Adds the txMeta to the list of transactions in the store. if the list is over txHistoryLimit it will remove a transaction that is in its final state - it will allso add the key `history` to the txMeta with the snap shot of the original + it will also add the key `history` to the txMeta with the snap shot of the original object @param {Object} txMeta @returns {Object} - the txMeta diff --git a/app/scripts/lib/ComposableObservableStore.js b/app/scripts/lib/ComposableObservableStore.js index d8308465b..3f8b99af4 100644 --- a/app/scripts/lib/ComposableObservableStore.js +++ b/app/scripts/lib/ComposableObservableStore.js @@ -25,9 +25,11 @@ export default class ComposableObservableStore extends ObservableStore { this.config = config this.removeAllListeners() for (const key in config) { - config[key].subscribe((state) => { - this.updateState({ [key]: state }) - }) + if (config.hasOwnProperty(key)) { + config[key].subscribe((state) => { + this.updateState({ [key]: state }) + }) + } } } @@ -40,9 +42,11 @@ export default class ComposableObservableStore extends ObservableStore { getFlatState () { let flatState = {} for (const key in this.config) { - const controller = this.config[key] - const state = controller.getState ? controller.getState() : controller.state - flatState = { ...flatState, ...state } + if (this.config.hasOwnProperty(key)) { + const controller = this.config[key] + const state = controller.getState ? controller.getState() : controller.state + flatState = { ...flatState, ...state } + } } return flatState } diff --git a/app/scripts/lib/createStreamSink.js b/app/scripts/lib/createStreamSink.js index 8f2d6186a..5a9d0808e 100644 --- a/app/scripts/lib/createStreamSink.js +++ b/app/scripts/lib/createStreamSink.js @@ -9,7 +9,7 @@ class AsyncWritableStream extends WritableStream { this._asyncWriteFn = asyncWriteFn } - // write from incomming stream to state + // write from incoming stream to state _write (chunk, encoding, callback) { promiseToCallback(this._asyncWriteFn(chunk, encoding))(callback) } diff --git a/app/scripts/lib/decrypt-message-manager.js b/app/scripts/lib/decrypt-message-manager.js index 6345dbf57..ca308090f 100644 --- a/app/scripts/lib/decrypt-message-manager.js +++ b/app/scripts/lib/decrypt-message-manager.js @@ -30,9 +30,9 @@ export default class DecryptMessageManager extends EventEmitter { * Controller in charge of managing - storing, adding, removing, updating - DecryptMessage. * * @typedef {Object} DecryptMessageManager - * @property {Object} memStore The observable store where DecryptMessage are saved with persistance. + * @property {Object} memStore The observable store where DecryptMessage are saved. * @property {Object} memStore.unapprovedDecryptMsgs A collection of all DecryptMessages in the 'unapproved' state - * @property {number} memStore.unapprovedDecryptMsgCount The count of all DecryptMessages in this.memStore.unapprobedMsgs + * @property {number} memStore.unapprovedDecryptMsgCount The count of all DecryptMessages in this.memStore.unapprovedDecryptMsgs * @property {array} messages Holds all messages that have been created by this DecryptMessageManager * */ diff --git a/app/scripts/lib/message-manager.js b/app/scripts/lib/message-manager.js index 228b407a8..b2de1eeab 100644 --- a/app/scripts/lib/message-manager.js +++ b/app/scripts/lib/message-manager.js @@ -32,7 +32,7 @@ export default class MessageManager extends EventEmitter { * @param {Object} opts @deprecated * @property {Object} memStore The observable store where Messages are saved. * @property {Object} memStore.unapprovedMsgs A collection of all Messages in the 'unapproved' state - * @property {number} memStore.unapprovedMsgCount The count of all Messages in this.memStore.unapprobedMsgs + * @property {number} memStore.unapprovedMsgCount The count of all Messages in this.memStore.unapprovedMsgs * @property {array} messages Holds all messages that have been created by this MessageManager * */ @@ -99,7 +99,7 @@ export default class MessageManager extends EventEmitter { * new Message to this.messages, and to save the unapproved Messages from that list to this.memStore. * * @param {Object} msgParams - The params for the eth_sign call to be made after the message is approved. - * @param {Object} req (optional) The original request object where the origin may be specificied + * @param {Object} req (optional) The original request object where the origin may be specified * @returns {number} - The id of the newly created message. * */ diff --git a/app/scripts/lib/migrator/index.js b/app/scripts/lib/migrator/index.js index ebc70f73f..a82b93294 100644 --- a/app/scripts/lib/migrator/index.js +++ b/app/scripts/lib/migrator/index.js @@ -35,8 +35,7 @@ export default class Migrator extends EventEmitter { const pendingMigrations = this.migrations.filter(migrationIsPending) // perform each migration - for (const index in pendingMigrations) { - const migration = pendingMigrations[index] + for (const migration of pendingMigrations) { try { // attempt migration and validate const migratedData = await migration.migrate(versionedData) diff --git a/app/scripts/lib/notification-manager.js b/app/scripts/lib/notification-manager.js index 326bec822..497100354 100644 --- a/app/scripts/lib/notification-manager.js +++ b/app/scripts/lib/notification-manager.js @@ -68,7 +68,7 @@ export default class NotificationManager { * type 'popup') * * @private - * @param {Function} cb - A node style callback that to whcih the found notification window will be passed. + * @param {Function} cb - A node style callback that to which the found notification window will be passed. * */ async _getPopup () { diff --git a/app/scripts/lib/personal-message-manager.js b/app/scripts/lib/personal-message-manager.js index 7d603a583..067c696bd 100644 --- a/app/scripts/lib/personal-message-manager.js +++ b/app/scripts/lib/personal-message-manager.js @@ -33,7 +33,7 @@ export default class PersonalMessageManager extends EventEmitter { * * @typedef {Object} PersonalMessageManager * @param {Object} opts @deprecated - * @property {Object} memStore The observable store where PersonalMessage are saved with persistance. + * @property {Object} memStore The observable store where PersonalMessage are saved. * @property {Object} memStore.unapprovedPersonalMsgs A collection of all PersonalMessages in the 'unapproved' state * @property {number} memStore.unapprovedPersonalMsgCount The count of all PersonalMessages in this.memStore.unapprobedMsgs * @property {array} messages Holds all messages that have been created by this PersonalMessageManager diff --git a/app/scripts/lib/setupSentry.js b/app/scripts/lib/setupSentry.js index 8ec1402c4..04c4b5014 100644 --- a/app/scripts/lib/setupSentry.js +++ b/app/scripts/lib/setupSentry.js @@ -101,6 +101,9 @@ export default function setupSentry ({ release, getState }) { // append app state if (getState) { const appState = getState() + if (!report.extra) { + report.extra = {} + } report.extra.appState = appState } } catch (err) { diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js index 5b21a5f0e..dfd3bc54c 100644 --- a/app/scripts/lib/util.js +++ b/app/scripts/lib/util.js @@ -134,7 +134,7 @@ function BnMultiplyByFraction (targetBN, numerator, denominator) { /** * Returns an Error if extension.runtime.lastError is present - * this is a workaround for the non-standard error object thats used + * this is a workaround for the non-standard error object that's used * @returns {Error} */ function checkForError () { diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 396873d36..3f1511333 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1119,6 +1119,7 @@ export default class MetamaskController extends EventEmitter { messageManager.rejectMsg(msgId) if (cb && typeof cb === 'function') { cb(null, this.getState()) + return } } @@ -1177,6 +1178,7 @@ export default class MetamaskController extends EventEmitter { messageManager.rejectMsg(msgId) if (cb && typeof cb === 'function') { cb(null, this.getState()) + return } } @@ -1197,7 +1199,7 @@ export default class MetamaskController extends EventEmitter { } /** - * Only decypt message and don't touch transaction state + * Only decrypt message and don't touch transaction state * * @param {Object} msgParams - The params of the message to decrypt. * @returns {Promise} - A full state update. @@ -1261,6 +1263,7 @@ export default class MetamaskController extends EventEmitter { messageManager.rejectMsg(msgId) if (cb && typeof cb === 'function') { cb(null, this.getState()) + return } } @@ -1318,6 +1321,7 @@ export default class MetamaskController extends EventEmitter { messageManager.rejectMsg(msgId) if (cb && typeof cb === 'function') { cb(null, this.getState()) + return } } @@ -1377,6 +1381,7 @@ export default class MetamaskController extends EventEmitter { messageManager.rejectMsg(msgId) if (cb && typeof cb === 'function') { cb(null, this.getState()) + return } } @@ -1843,8 +1848,10 @@ export default class MetamaskController extends EventEmitter { this.currencyRateController.update(currencyState) this.currencyRateController.configure(currencyState) cb(null, this.currencyRateController.state) + return } catch (err) { cb(err) + return } } @@ -1925,8 +1932,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setUseBlockie(val) cb(null) + return } catch (err) { cb(err) + return } } @@ -1939,8 +1948,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setUseNonceField(val) cb(null) + return } catch (err) { cb(err) + return } } @@ -1953,8 +1964,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setUsePhishDetect(val) cb(null) + return } catch (err) { cb(err) + return } } @@ -1967,8 +1980,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setIpfsGateway(val) cb(null) + return } catch (err) { cb(err) + return } } @@ -1981,8 +1996,10 @@ export default class MetamaskController extends EventEmitter { try { const metaMetricsId = this.preferencesController.setParticipateInMetaMetrics(bool) cb(null, metaMetricsId) + return } catch (err) { cb(err) + return } } @@ -1990,8 +2007,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setMetaMetricsSendCount(val) cb(null) + return } catch (err) { cb(err) + return } } @@ -2004,8 +2023,10 @@ export default class MetamaskController extends EventEmitter { try { this.preferencesController.setFirstTimeFlowType(type) cb(null) + return } catch (err) { cb(err) + return } } @@ -2019,8 +2040,10 @@ export default class MetamaskController extends EventEmitter { try { const direction = this.preferencesController.setCurrentLocale(key) cb(null, direction) + return } catch (err) { cb(err) + return } } diff --git a/app/scripts/migrations/028.js b/app/scripts/migrations/028.js index 583f3299d..09fc18f11 100644 --- a/app/scripts/migrations/028.js +++ b/app/scripts/migrations/028.js @@ -29,9 +29,9 @@ function transformState (state) { const identities = newState.PreferencesController.identities const tokens = newState.PreferencesController.tokens newState.PreferencesController.accountTokens = {} - for (const identity in identities) { + Object.keys(identities).forEach((identity) => { newState.PreferencesController.accountTokens[identity] = { 'mainnet': tokens } - } + }) newState.PreferencesController.tokens = [] } } diff --git a/app/scripts/migrations/037.js b/app/scripts/migrations/037.js index 42287af4f..1d7f13810 100644 --- a/app/scripts/migrations/037.js +++ b/app/scripts/migrations/037.js @@ -27,9 +27,9 @@ function transformState (state) { const newAddressBook = {} // add all of the chainIds to a set - for (const item in ab) { - chainIds.add(ab[item].chainId) - } + Object.values(ab).forEach((v) => { + chainIds.add(v.chainId) + }) // fill the chainId object with the entries with the matching chainId for (const id of chainIds.values()) { diff --git a/app/scripts/platforms/extension.js b/app/scripts/platforms/extension.js index 0bf94dac0..f62ef98e4 100644 --- a/app/scripts/platforms/extension.js +++ b/app/scripts/platforms/extension.js @@ -105,6 +105,7 @@ export default class ExtensionPlatform { }) } catch (e) { cb(e) + return } } diff --git a/development/build/display.js b/development/build/display.js index e9c255af5..90ca4e7ba 100644 --- a/development/build/display.js +++ b/development/build/display.js @@ -15,7 +15,7 @@ const SYMBOLS = { Quarter: '▎', Eighth: '▏', RightHalf: '▐', - RightEigth: '▕', + RightEighth: '▕', } function setupTaskDisplay (taskEvents) { @@ -47,7 +47,7 @@ function displayChart (data) { console.log(`\nbuild completed. task timeline:`) // build bars for bounds - data.map((entry, index) => { + data.forEach((entry, index) => { const [label, start, end] = entry const [start2, end2] = [start, end].map((value) => adjust(value, first, last, 40)) const barString = barBuilder(start2, end2) @@ -141,7 +141,7 @@ function getSymbolNormalRight (value) { } else if (rounded === 1 / 2) { return SYMBOLS.RightHalf } else if (rounded === 7 / 8) { - return SYMBOLS.RightEigth + return SYMBOLS.RightEighth } else if (rounded === 1) { return SYMBOLS.Space } else { diff --git a/development/run-ganache b/development/run-ganache index 3a770617a..8831c2112 100755 --- a/development/run-ganache +++ b/development/run-ganache @@ -22,6 +22,7 @@ _int () { trap _term SIGTERM trap _int SIGINT +# shellcheck disable=SC2086 $ganache_cli --noVMErrorsOnRPCResponse --networkId 5777 --mnemonic "$seed_phrase" ${GANACHE_ARGS:-} & child=$! diff --git a/docs/add-to-firefox.md b/docs/add-to-firefox.md index 593d06170..8eff28222 100644 --- a/docs/add-to-firefox.md +++ b/docs/add-to-firefox.md @@ -10,5 +10,5 @@ You can optionally enable debugging, and click `Debug`, for a console window tha If you have problems debugging, try connecting to the IRC channel `#webextensions` on `irc.mozilla.org`. -For longer questions, use the StackOverfow tag `firefox-addons`. +For longer questions, use the StackOverflow tag `firefox-addons`. diff --git a/package.json b/package.json index d1fe481d6..d0b2a48b6 100644 --- a/package.json +++ b/package.json @@ -67,9 +67,9 @@ "@material-ui/core": "^4.11.0", "@metamask/controllers": "^2.0.1", "@metamask/eth-ledger-bridge-keyring": "^0.2.6", - "@metamask/eth-token-tracker": "^2.0.0", + "@metamask/eth-token-tracker": "^3.0.0", "@metamask/etherscan-link": "^1.1.0", - "@metamask/inpage-provider": "^6.0.1", + "@metamask/inpage-provider": "^6.1.0", "@popperjs/core": "^2.4.0", "@reduxjs/toolkit": "^1.3.2", "@sentry/browser": "^5.11.1", @@ -83,7 +83,7 @@ "bn.js": "^4.11.7", "c3": "^0.7.10", "classnames": "^2.2.6", - "content-hash": "^2.5.0", + "content-hash": "^2.5.2", "copy-to-clipboard": "^3.0.8", "currency-formatter": "^1.4.2", "d3": "^5.15.0", diff --git a/test/e2e/benchmark.js b/test/e2e/benchmark.js index e8612065b..52008bb40 100644 --- a/test/e2e/benchmark.js +++ b/test/e2e/benchmark.js @@ -43,7 +43,7 @@ const standardDeviationResult = calculateResult((array) => { const squareDiffs = array.map((value) => Math.pow(value - average, 2)) return Math.sqrt(calculateAverage(squareDiffs)) }) -// 95% margin of error calculated using Student's t-distrbution +// 95% margin of error calculated using Student's t-distribution const calculateMarginOfError = (array) => ttest(array).confidence()[1] - calculateAverage(array) const marginOfErrorResult = calculateResult((array) => calculateMarginOfError(array)) diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js index f7954ffd7..1611e66da 100644 --- a/test/e2e/helpers.js +++ b/test/e2e/helpers.js @@ -33,6 +33,7 @@ async function withFixtures (options, callback) { const { driver } = await buildWebDriver(driverOptions) webDriver = driver + // eslint-disable-next-line callback-return await callback({ driver, }) @@ -46,7 +47,9 @@ async function withFixtures (options, callback) { } } } catch (error) { - await webDriver.verboseReportOnFailure(title) + if (webDriver) { + await webDriver.verboseReportOnFailure(title) + } throw error } finally { await fixtureServer.stop() diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 9e8b90cb2..15d0198cd 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -830,9 +830,9 @@ describe('MetaMask', function () { it('renders the balance for the new token', async function () { const balance = await driver.findElement(By.css('.wallet-overview .token-overview__primary-balance')) - await driver.wait(until.elementTextMatches(balance, /^10.000\s*TST\s*$/)) + await driver.wait(until.elementTextMatches(balance, /^10\s*TST\s*$/)) const tokenAmount = await balance.getText() - assert.ok(/^10.000\s*TST\s*$/.test(tokenAmount)) + assert.ok(/^10\s*TST\s*$/.test(tokenAmount)) await driver.delay(regularDelayMs) }) }) @@ -992,7 +992,7 @@ describe('MetaMask', function () { await driver.wait(until.elementTextMatches(txStatuses[0], /Send\sTST/), 10000) const tokenBalanceAmount = await driver.findElements(By.css('.token-overview__primary-balance')) - await driver.wait(until.elementTextMatches(tokenBalanceAmount[0], /7.500\s*TST/), 10000) + await driver.wait(until.elementTextMatches(tokenBalanceAmount[0], /7.5\s*TST/), 10000) }) }) @@ -1018,8 +1018,8 @@ describe('MetaMask', function () { return pendingTxes.length === 1 }, 10000) - const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primary-currency')) - await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/)) + const [txtListHeading] = await driver.findElements(By.css('.transaction-list-item .list-item__heading')) + await driver.wait(until.elementTextMatches(txtListHeading, /Approve TST spend limit/)) await driver.clickElement(By.css('.transaction-list-item')) await driver.delay(regularDelayMs) }) @@ -1104,14 +1104,12 @@ describe('MetaMask', function () { return confirmedTxes.length === 3 }, 10000) - const txValues = await driver.findElements(By.css('.transaction-list-item__primary-currency')) - await driver.wait(until.elementTextMatches(txValues[0], /-5\s*TST/)) const txStatuses = await driver.findElements(By.css('.list-item__heading')) - await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/)) + await driver.wait(until.elementTextMatches(txStatuses[0], /Approve TST spend limit/)) }) }) - describe('Tranfers a custom token from dapp when no gas value is specified', function () { + describe('Transfers a custom token from dapp when no gas value is specified', function () { it('transfers an already created token, without specifying gas', async function () { const windowHandles = await driver.getAllWindowHandles() const extension = windowHandles[0] @@ -1177,8 +1175,8 @@ describe('MetaMask', function () { return pendingTxes.length === 1 }, 10000) - const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primary-currency')) - await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/)) + const [txtListHeading] = await driver.findElements(By.css('.transaction-list-item .list-item__heading')) + await driver.wait(until.elementTextMatches(txtListHeading, /Approve TST spend limit/)) await driver.clickElement(By.css('.transaction-list-item')) await driver.delay(regularDelayMs) }) @@ -1204,10 +1202,8 @@ describe('MetaMask', function () { return confirmedTxes.length === 5 }, 10000) - const txValues = await driver.findElements(By.css('.transaction-list-item__primary-currency')) - await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/)) const txStatuses = await driver.findElements(By.css('.list-item__heading')) - await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/)) + await driver.wait(until.elementTextMatches(txStatuses[0], /Approve TST spend limit/)) }) }) diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js index 8c80116ec..6e2a558ec 100644 --- a/test/e2e/signature-request.spec.js +++ b/test/e2e/signature-request.spec.js @@ -51,7 +51,7 @@ describe('MetaMask', function () { await driver.quit() }) - describe('successfuly signs typed data', function () { + describe('successfully signs typed data', function () { let extension let popup let dapp diff --git a/test/e2e/webdriver/index.js b/test/e2e/webdriver/index.js index 32319cfe5..652e27283 100644 --- a/test/e2e/webdriver/index.js +++ b/test/e2e/webdriver/index.js @@ -9,7 +9,7 @@ async function buildWebDriver ({ responsive, port } = {}) { const extensionPath = `dist/${browser}` const { driver: seleniumDriver, extensionId, extensionUrl } = await buildBrowserWebDriver(browser, { extensionPath, responsive, port }) - setupFetchMocking(seleniumDriver) + await setupFetchMocking(seleniumDriver) const driver = new Driver(seleniumDriver, browser, extensionUrl) await driver.navigate() diff --git a/test/helper.js b/test/helper.js index b608057bf..ea44bee48 100644 --- a/test/helper.js +++ b/test/helper.js @@ -3,6 +3,8 @@ import nock from 'nock' import Enzyme from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import log from 'loglevel' +import { JSDOM } from 'jsdom' + nock.disableNetConnect() nock.enableNetConnect('localhost') @@ -45,8 +47,6 @@ global.log = log // // dom -const { JSDOM } = require('jsdom') - const jsdom = new JSDOM() global.window = jsdom.window @@ -87,5 +87,6 @@ if (!window.crypto) { window.crypto = {} } if (!window.crypto.getRandomValues) { + // eslint-disable-next-line global-require window.crypto.getRandomValues = require('polyfill-crypto.getrandomvalues') } diff --git a/test/unit/app/controllers/detect-tokens-test.js b/test/unit/app/controllers/detect-tokens-test.js index 6fb08b002..ee2418856 100644 --- a/test/unit/app/controllers/detect-tokens-test.js +++ b/test/unit/app/controllers/detect-tokens-test.js @@ -89,8 +89,8 @@ describe('DetectTokensController', function () { controller.isOpen = true controller.isUnlocked = true - const contractAddressses = Object.keys(contracts) - const erc20ContractAddresses = contractAddressses + const contractAddresses = Object.keys(contracts) + const erc20ContractAddresses = contractAddresses .filter((contractAddress) => contracts[contractAddress].erc20 === true) const existingTokenAddress = erc20ContractAddresses[0] @@ -100,7 +100,7 @@ describe('DetectTokensController', function () { const tokenAddressToAdd = erc20ContractAddresses[1] const tokenToAdd = contracts[tokenAddressToAdd] - const contractAddresssesToDetect = contractAddressses + const contractAddresssesToDetect = contractAddresses .filter((address) => address !== existingTokenAddress) const indexOfTokenToAdd = contractAddresssesToDetect.indexOf(tokenAddressToAdd) diff --git a/test/unit/app/controllers/metamask-controller-test.js b/test/unit/app/controllers/metamask-controller-test.js index e3c4d2618..746b098d3 100644 --- a/test/unit/app/controllers/metamask-controller-test.js +++ b/test/unit/app/controllers/metamask-controller-test.js @@ -53,9 +53,9 @@ const createLoggerMiddlewareMock = () => (req, res, next) => { loggerMiddlewareMock.responses.push(res) cb() }) - } else { - next() + return } + next() } const MetaMaskController = proxyquire('../../../../app/scripts/metamask-controller', { @@ -839,9 +839,9 @@ describe('MetaMaskController', function () { const streamTest = createThoughStream((chunk, _, cb) => { if (chunk.data && chunk.data.method) { cb(null, chunk) - } else { - cb() + return } + cb() }) metamaskController.setupUntrustedCommunication(streamTest, messageSender) @@ -877,9 +877,9 @@ describe('MetaMaskController', function () { const streamTest = createThoughStream((chunk, _, cb) => { if (chunk.data && chunk.data.method) { cb(null, chunk) - } else { - cb() + return } + cb() }) metamaskController.setupUntrustedCommunication(streamTest, messageSender) diff --git a/test/unit/app/controllers/transactions/tx-state-manager-test.js b/test/unit/app/controllers/transactions/tx-state-manager-test.js index e4dd13515..abd7a7098 100644 --- a/test/unit/app/controllers/transactions/tx-state-manager-test.js +++ b/test/unit/app/controllers/transactions/tx-state-manager-test.js @@ -323,7 +323,7 @@ describe('TransactionStateManager', function () { } const invalidValues = [1, true, {}, Symbol('1')] - for (const key in validTxParams) { + Object.keys(validTxParams).forEach((key) => { for (const value of invalidValues) { const tx = { id: 1, @@ -339,7 +339,7 @@ describe('TransactionStateManager', function () { assert.ok(Array.isArray(result), 'txList should be an array') assert.equal(result.length, 0, 'txList should be empty') } - } + }) }) it('does not override txs from other networks', function () { @@ -361,7 +361,7 @@ describe('TransactionStateManager', function () { } const result = txStateManager.getTxList() assert.equal(result.length, limit, `limit of ${limit} txs enforced`) - assert.equal(result[0].id, 1, 'early txs truncted') + assert.equal(result[0].id, 1, 'early txs truncated') }) it('cuts off early txs beyond a limit whether or not it is confirmed or rejected', function () { @@ -372,7 +372,7 @@ describe('TransactionStateManager', function () { } const result = txStateManager.getTxList() assert.equal(result.length, limit, `limit of ${limit} txs enforced`) - assert.equal(result[0].id, 1, 'early txs truncted') + assert.equal(result[0].id, 1, 'early txs truncated') }) it('cuts off early txs beyond a limit but does not cut unapproved txs', function () { @@ -387,7 +387,7 @@ describe('TransactionStateManager', function () { assert.equal(result.length, limit, `limit of ${limit} txs enforced`) assert.equal(result[0].id, 0, 'first tx should still be there') assert.equal(result[0].status, 'unapproved', 'first tx should be unapproved') - assert.equal(result[1].id, 2, 'early txs truncted') + assert.equal(result[1].id, 2, 'early txs truncated') }) }) @@ -416,7 +416,7 @@ describe('TransactionStateManager', function () { txStateManager.addTx({ id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: validTxParams }) - for (const key in validTxParams) { + Object.keys(validTxParams).forEach((key) => { for (const value of invalidValues) { const originalTx = txStateManager.getTx(1) const newTx = { @@ -430,7 +430,7 @@ describe('TransactionStateManager', function () { const result = txStateManager.getTx(1) assert.deepEqual(result, originalTx, 'tx should not be updated') } - } + }) }) it('updates gas price and adds history items', function () { diff --git a/test/unit/migrations/023-test.js b/test/unit/migrations/023-test.js index 6b9d4de3f..821057bf8 100644 --- a/test/unit/migrations/023-test.js +++ b/test/unit/migrations/023-test.js @@ -68,31 +68,31 @@ describe('storage is migrated successfully and the proper transactions are remov leftoverNonDeletableTxCount++ } }) - assert.equal(leftoverNonDeletableTxCount, nonDeletableCount, 'migration shouldnt delete transactions we want to keep') + assert.equal(leftoverNonDeletableTxCount, nonDeletableCount, "migration shouldn't delete transactions we want to keep") assert((migratedTransactions.length >= 40), `should be equal or greater to 40 if they are non deletable states got ${migratedTransactions.length} transactions`) done() }).catch(done) }) - it('should not remove any transactions because 40 is the expectable limit', function (done) { + it('should not remove any transactions because 40 is the expected limit', function (done) { storage.meta.version = 22 storage.data.TransactionController.transactions = transactions40 migration23.migrate(storage) .then((migratedData) => { const migratedTransactions = migratedData.data.TransactionController.transactions - assert.equal(migratedTransactions.length, 40, 'migration shouldnt delete when at limit') + assert.equal(migratedTransactions.length, 40, "migration shouldn't delete when at limit") done() }).catch(done) }) - it('should not remove any transactions because 20 txs is under the expectable limit', function (done) { + it('should not remove any transactions because 20 txs is under the expected limit', function (done) { storage.meta.version = 22 storage.data.TransactionController.transactions = transactions20 migration23.migrate(storage) .then((migratedData) => { const migratedTransactions = migratedData.data.TransactionController.transactions - assert.equal(migratedTransactions.length, 20, 'migration shouldnt delete when under limit') + assert.equal(migratedTransactions.length, 20, "migration shouldn't delete when under limit") done() }).catch(done) }) diff --git a/test/unit/migrations/026-test.js b/test/unit/migrations/026-test.js index cb64346dd..83858c1c9 100644 --- a/test/unit/migrations/026-test.js +++ b/test/unit/migrations/026-test.js @@ -1,4 +1,5 @@ import assert from 'assert' +import firstTimeState from '../../../app/scripts/first-time-state' import migration26 from '../../../app/scripts/migrations/026' const oldStorage = { @@ -32,7 +33,7 @@ describe('migration #26', function () { it('should successfully migrate first time state', function (done) { migration26.migrate({ meta: {}, - data: require('../../../app/scripts/first-time-state'), + data: firstTimeState, }) .then((migratedData) => { assert.equal(migratedData.meta.version, migration26.version) diff --git a/test/unit/migrations/027-test.js b/test/unit/migrations/027-test.js index c8b947dcf..126a3b620 100644 --- a/test/unit/migrations/027-test.js +++ b/test/unit/migrations/027-test.js @@ -1,4 +1,5 @@ import assert from 'assert' +import firstTimeState from '../../../app/scripts/first-time-state' import migration27 from '../../../app/scripts/migrations/027' const oldStorage = { @@ -42,7 +43,7 @@ describe('migration #27', function () { it('should successfully migrate first time state', function (done) { migration27.migrate({ meta: {}, - data: require('../../../app/scripts/first-time-state'), + data: firstTimeState, }) .then((migratedData) => { assert.equal(migratedData.meta.version, migration27.version) diff --git a/test/unit/migrations/028-test.js b/test/unit/migrations/028-test.js index 1207b2734..dd58b8a42 100644 --- a/test/unit/migrations/028-test.js +++ b/test/unit/migrations/028-test.js @@ -1,4 +1,5 @@ import assert from 'assert' +import firstTimeState from '../../../app/scripts/first-time-state' import migration28 from '../../../app/scripts/migrations/028' const oldStorage = { @@ -36,7 +37,7 @@ describe('migration #28', function () { it('should successfully migrate first time state', function (done) { migration28.migrate({ meta: {}, - data: require('../../../app/scripts/first-time-state'), + data: firstTimeState, }) .then((migratedData) => { assert.equal(migratedData.meta.version, migration28.version) diff --git a/test/unit/ui/app/reducers/metamask.spec.js b/test/unit/ui/app/reducers/metamask.spec.js index c21841459..3b232c0f6 100644 --- a/test/unit/ui/app/reducers/metamask.spec.js +++ b/test/unit/ui/app/reducers/metamask.spec.js @@ -12,7 +12,6 @@ describe('MetaMask Reducers', function () { it('locks MetaMask', function () { const unlockMetaMaskState = { isUnlocked: true, - isInitialzed: false, selectedAddress: 'test address', } const lockMetaMask = reduceMetamask(unlockMetaMaskState, { diff --git a/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss b/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss index 35ffe43dd..1ae28dd50 100644 --- a/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss +++ b/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss @@ -17,7 +17,7 @@ } &__dismiss-button { - background: #037dd6; + background: $primary-blue; color: white; height: 40px; width: 100px; @@ -29,7 +29,7 @@ margin-bottom: 16px; padding: 16px; font-size: 14px; - border: 1px solid #d73a49; + border: 1px solid $accent-red; background: #f8eae8; border-radius: 3px; } diff --git a/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss index 25b901ed3..cfd888817 100644 --- a/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss +++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss @@ -35,7 +35,7 @@ color: $scorpion; &--edit { - color: $curious-blue; + color: $primary-blue; cursor: pointer; } diff --git a/ui/app/components/app/connected-accounts-list/index.scss b/ui/app/components/app/connected-accounts-list/index.scss index f6dd23893..5da7aba9a 100644 --- a/ui/app/components/app/connected-accounts-list/index.scss +++ b/ui/app/components/app/connected-accounts-list/index.scss @@ -34,7 +34,7 @@ &, &:hover { - color: $curious-blue; + color: $primary-blue; cursor: pointer; } } @@ -49,8 +49,8 @@ border-top: 1px solid $geyser; &--highlight { - background-color: $warning-light-yellow; - border: 1px solid $warning-yellow; + background-color: $Yellow-000; + border: 1px solid $accent-yellow; box-sizing: border-box; padding: 16px; margin-bottom: 16px; diff --git a/ui/app/components/app/contact-list/contact-list.component.js b/ui/app/components/app/contact-list/contact-list.component.js index ec9b5f8eb..b41bfe1c1 100644 --- a/ui/app/components/app/contact-list/contact-list.component.js +++ b/ui/app/components/app/contact-list/contact-list.component.js @@ -67,7 +67,7 @@ export default class ContactList extends PureComponent { return 1 } else if (letter1 === letter2) { return 0 - } else if (letter1 < letter2) { + } else { return -1 } }) diff --git a/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js index 20e2b3494..34f3decd5 100644 --- a/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js +++ b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js @@ -53,7 +53,7 @@ export default function RecipientGroup ({ label, items, onSelect, selectedAddres RecipientGroup.propTypes = { label: PropTypes.string, items: PropTypes.arrayOf(PropTypes.shape({ - address: PropTypes.string, + address: PropTypes.string.isRequired, name: PropTypes.string, })), onSelect: PropTypes.func.isRequired, diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js index b28da6615..3bf49aca1 100644 --- a/ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js +++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js @@ -74,7 +74,7 @@ describe('Advanced Gas Inputs', function () { assert.equal(props.updateCustomGasLimit.calledWith(21000), true) }) - it('errors when insuffientBalance under gas price and gas limit', function () { + it('errors when insufficientBalance under gas price and gas limit', function () { wrapper.setProps({ insufficientBalance: true }) const renderError = wrapper.find('.advanced-gas-inputs__gas-edit-row__error-text') assert.equal(renderError.length, 2) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss index c128d67ac..1794a45c1 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss @@ -68,8 +68,8 @@ } &--selected { - color: $curious-blue; - border-bottom: 2px solid $curious-blue; + color: $primary-blue; + border-bottom: 2px solid $primary-blue; } } } diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss index 4eb307f5c..2d4ab5f82 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss @@ -50,13 +50,13 @@ } .button-group__button--active { - border: 2px solid $curious-blue; + border: 2px solid $primary-blue; color: $scorpion; i { &:last-child { display: flex; - color: $curious-blue; + color: $primary-blue; margin-top: 8px; } } @@ -137,7 +137,7 @@ i { &:last-child { display: flex; - color: $curious-blue; + color: $primary-blue; margin-top: 10px; } } @@ -235,7 +235,7 @@ i { display: flex; - color: $curious-blue; + color: $primary-blue; font-size: 12px; } } diff --git a/ui/app/components/app/gas-customization/gas-slider/index.scss b/ui/app/components/app/gas-customization/gas-slider/index.scss index f526e5dd7..aacbea9e6 100644 --- a/ui/app/components/app/gas-customization/gas-slider/index.scss +++ b/ui/app/components/app/gas-customization/gas-slider/index.scss @@ -16,7 +16,7 @@ -webkit-appearance: none !important; height: 34px; width: 34px; - background-color: $curious-blue; + background-color: $primary-blue; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); border-radius: 50%; position: relative; diff --git a/ui/app/components/app/modals/confirm-reset-account/tests/confirm-reset-account.test.js b/ui/app/components/app/modals/confirm-reset-account/tests/confirm-reset-account.test.js index 052f21eba..be27151f1 100644 --- a/ui/app/components/app/modals/confirm-reset-account/tests/confirm-reset-account.test.js +++ b/ui/app/components/app/modals/confirm-reset-account/tests/confirm-reset-account.test.js @@ -33,7 +33,7 @@ describe('Confirm Reset Account', function () { assert(props.hideModal.calledOnce) }) - it('resets account and hidels modal when reset button is clicked', function (done) { + it('resets account and hides modal when reset button is clicked', function (done) { const reset = wrapper.find('.btn-danger.modal-container__footer-button') reset.simulate('click') diff --git a/ui/app/components/app/modals/edit-approval-permission/index.scss b/ui/app/components/app/modals/edit-approval-permission/index.scss index 17f0ef6ca..0b80db408 100644 --- a/ui/app/components/app/modals/edit-approval-permission/index.scss +++ b/ui/app/components/app/modals/edit-approval-permission/index.scss @@ -97,7 +97,7 @@ } &__option-label--selected { - color: #037dd6; + color: $primary-blue; } &__option-description { @@ -136,7 +136,7 @@ } &__radio-button-outline--selected { - background: #037dd6; + background: $primary-blue; } &__radio-button-fill { @@ -150,7 +150,7 @@ &__radio-button-dot { width: 8px; height: 8px; - background: #037dd6; + background: $primary-blue; border-radius: 4px; position: absolute; } diff --git a/ui/app/components/app/modals/fade-modal.js b/ui/app/components/app/modals/fade-modal.js index 873861e27..a59c8995b 100644 --- a/ui/app/components/app/modals/fade-modal.js +++ b/ui/app/components/app/modals/fade-modal.js @@ -25,16 +25,16 @@ const insertKeyframesRule = (keyframes) => { const name = 'anim_' + (++index) + (+new Date()) let css = '@' + 'keyframes ' + name + ' {' - for (const key in keyframes) { + Object.keys(keyframes).forEach((key) => { css += key + ' {' - for (const property in keyframes[key]) { + Object.keys(keyframes[key]).forEach((property) => { const part = ':' + keyframes[key][property] + ';' css += property + part - } + }) css += '}' - } + }) css += '}' diff --git a/ui/app/components/app/multiple-notifications/index.scss b/ui/app/components/app/multiple-notifications/index.scss index 0f2d86ad3..c1a52cf95 100644 --- a/ui/app/components/app/multiple-notifications/index.scss +++ b/ui/app/components/app/multiple-notifications/index.scss @@ -16,7 +16,6 @@ position: relative; width: 100%; height: 100%; - visibility: none; .fa-sm { display: initial; diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss index 2db5ec09f..c26189e0c 100644 --- a/ui/app/components/app/permission-page-container/index.scss +++ b/ui/app/components/app/permission-page-container/index.scss @@ -129,8 +129,8 @@ } &__tooltip-body { - display: 'flex'; - flex-direction: 'column'; + display: flex; + flex-direction: column; } &__bold-title-elements { diff --git a/ui/app/components/app/permissions-connect-footer/index.scss b/ui/app/components/app/permissions-connect-footer/index.scss index f8ea463f6..ac6508417 100644 --- a/ui/app/components/app/permissions-connect-footer/index.scss +++ b/ui/app/components/app/permissions-connect-footer/index.scss @@ -14,7 +14,7 @@ margin-top: 10px; &--link { - color: #037dd6; + color: $primary-blue; margin-left: 4px; cursor: pointer; } diff --git a/ui/app/components/app/sidebars/sidebar-content.scss b/ui/app/components/app/sidebars/sidebar-content.scss index 7b3c10116..e67bab43a 100644 --- a/ui/app/components/app/sidebars/sidebar-content.scss +++ b/ui/app/components/app/sidebars/sidebar-content.scss @@ -34,7 +34,6 @@ .page-container__bottom { display: flex; flex-direction: column; - flex-flow: space-between; height: 100%; } diff --git a/ui/app/components/app/signature-request/signature-request-footer/index.scss b/ui/app/components/app/signature-request/signature-request-footer/index.scss index 53a64dc38..b0c07f0b1 100644 --- a/ui/app/components/app/signature-request/signature-request-footer/index.scss +++ b/ui/app/components/app/signature-request/signature-request-footer/index.scss @@ -9,11 +9,11 @@ border-radius: 3px; } - button:first-child() { + button:first-child { margin-left: 1rem; } - button:last-child() { + button:last-child { margin-right: 1rem; } } diff --git a/ui/app/components/app/transaction-activity-log/index.scss b/ui/app/components/app/transaction-activity-log/index.scss index 6c0ef388e..d5b748d17 100644 --- a/ui/app/components/app/transaction-activity-log/index.scss +++ b/ui/app/components/app/transaction-activity-log/index.scss @@ -75,7 +75,7 @@ &__action-link { font-size: 0.75rem; cursor: pointer; - color: $curious-blue; + color: $primary-blue; } b { diff --git a/ui/app/components/app/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 a21c8c102..7e4a4313a 100644 --- a/ui/app/components/app/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 @@ -3,7 +3,7 @@ import { combineTransactionHistories, getActivities } from '../transaction-activ describe('TransactionActivityLog utils', function () { describe('combineTransactionHistories', function () { - it('should return no activites for an empty list of transactions', function () { + it('should return no activities for an empty list of transactions', function () { assert.deepEqual(combineTransactionHistories([]), []) }) 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 index c89ef3b3a..b01c66145 100644 --- 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 @@ -171,7 +171,7 @@ export function getActivities (transaction, isFirstTransaction = false) { return acc }, []) - // If txReceipt.status is '0x0', that means that an on-chain error occured for the transaction, + // If txReceipt.status is '0x0', that means that an on-chain error occurred for the transaction, // so we add an error entry to the Activity Log. return status === '0x0' ? historyActivities.concat({ id, hash, eventKey: TRANSACTION_ERRORED_EVENT }) 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 index b47d5e945..bd6a61c91 100644 --- 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 @@ -15,6 +15,7 @@ import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes' import { TRANSACTION_CATEGORY_SIGNATURE_REQUEST, UNAPPROVED_STATUS, + TRANSACTION_CATEGORY_APPROVAL, FAILED_STATUS, DROPPED_STATUS, REJECTED_STATUS, @@ -55,6 +56,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce const isSignatureReq = category === TRANSACTION_CATEGORY_SIGNATURE_REQUEST + const isApproval = category === TRANSACTION_CATEGORY_APPROVAL const isUnapproved = status === UNAPPROVED_STATUS const className = classnames('transaction-list-item', { @@ -137,7 +139,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce )} - rightContent={!isSignatureReq && ( + rightContent={!isSignatureReq && !isApproval && ( <>

{primaryCurrency}

{secondaryCurrency}

diff --git a/ui/app/components/ui/alert-circle-icon/index.scss b/ui/app/components/ui/alert-circle-icon/index.scss index 71e3ccb2e..4bdd9baf2 100644 --- a/ui/app/components/ui/alert-circle-icon/index.scss +++ b/ui/app/components/ui/alert-circle-icon/index.scss @@ -1,13 +1,13 @@ .alert-circle-icon { &--danger { - border-color: $danger-red; - color: $danger-red; - background: $danger-light-red; + border-color: $accent-red; + color: $accent-red; + background: $Red-000; } &--warning { - border-color: $warning-yellow; - color: $warning-yellow; - background: $warning-light-yellow; + border-color: $accent-yellow; + color: $accent-yellow; + background: $Yellow-000; } } diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss index e8ad6e5fa..2fdc1da01 100644 --- a/ui/app/components/ui/button/buttons.scss +++ b/ui/app/components/ui/button/buttons.scss @@ -8,7 +8,6 @@ $hover-confirm: #0372c3; $hover-red: #feb6bf; $hover-red-primary: #c72837; $hover-orange: #ffd3b5; -$danger-light-red: #ea7e77; $warning-light-orange: #f8b588; %button { @@ -216,7 +215,7 @@ $warning-light-orange: #f8b588; */ .btn-raised { - color: $curious-blue; + color: $primary-blue; background-color: $white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; @@ -297,7 +296,7 @@ button.primary { &--disabled, &[disabled] { border-color: $Red-100; - color: $danger-light-red; + color: $Red-300; } &:active { @@ -337,7 +336,7 @@ button.primary { &--disabled, &[disabled] { - background-color: $danger-light-red; + background-color: $Red-300; } &:active { diff --git a/ui/app/components/ui/check-box/index.scss b/ui/app/components/ui/check-box/index.scss index 0897549c1..8e6060bb3 100644 --- a/ui/app/components/ui/check-box/index.scss +++ b/ui/app/components/ui/check-box/index.scss @@ -12,8 +12,8 @@ &__checked, &__indeterminate { - color: $curious-blue; - border-color: $curious-blue; + color: $primary-blue; + border-color: $primary-blue; } &:disabled { diff --git a/ui/app/components/ui/export-text-container/index.scss b/ui/app/components/ui/export-text-container/index.scss index 975d62f70..c3e32895f 100644 --- a/ui/app/components/ui/export-text-container/index.scss +++ b/ui/app/components/ui/export-text-container/index.scss @@ -39,7 +39,7 @@ align-items: center; font-size: 12px; cursor: pointer; - color: $curious-blue; + color: $primary-blue; &--copy { border-right: 1px solid $alto; diff --git a/ui/app/components/ui/icon/index.scss b/ui/app/components/ui/icon/index.scss index 43e55299d..4e7e9c782 100644 --- a/ui/app/components/ui/icon/index.scss +++ b/ui/app/components/ui/icon/index.scss @@ -2,18 +2,18 @@ margin: 0 4px; &--success { - fill: $success-green; + fill: $accent-green; } &--info { - fill: $info-blue; + fill: $primary-blue; } &--warning { - fill: $warning-yellow; + fill: $accent-yellow; } &--danger { - fill: $danger-red; + fill: $accent-red; } } diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss index 188c2d1e8..427ac8d45 100644 --- a/ui/app/components/ui/identicon/index.scss +++ b/ui/app/components/ui/identicon/index.scss @@ -17,7 +17,7 @@ border-style: solid; border-radius: 50%; border-width: 2px; - border-color: $curious-blue; + border-color: $primary-blue; } &__eth-logo { diff --git a/ui/app/components/ui/tabs/tab/index.scss b/ui/app/components/ui/tabs/tab/index.scss index 7245c695e..b0fb0d30e 100644 --- a/ui/app/components/ui/tabs/tab/index.scss +++ b/ui/app/components/ui/tabs/tab/index.scss @@ -6,6 +6,6 @@ &--active { color: $black; - border-bottom: 2px solid $curious-blue; + border-bottom: 2px solid $primary-blue; } } diff --git a/ui/app/components/ui/unit-input/tests/unit-input.component.test.js b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js index b4a13061d..798ae3676 100644 --- a/ui/app/components/ui/unit-input/tests/unit-input.component.test.js +++ b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js @@ -27,7 +27,7 @@ describe('UnitInput Component', function () { assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH') }) - it('should render properly with a child omponent', function () { + it('should render properly with a child component', function () { const wrapper = shallow(
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 0df12d3cb..d757a2374 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -1,14 +1,25 @@ +/* + MetaMask design system imports + The variables declared here should take precedence. + They are included first because they will be used to replace bad variable names in itcss + prior to it being fully removed from the system. +*/ +@import './variables/index'; + /* ITCSS http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ - */ + DEPRECATED: This CSS architecture is deprecated. The following imports will be removed + overtime. + */ @import './itcss/settings/index'; @import './itcss/tools/index'; @import './itcss/generic/index'; @import './itcss/objects/index'; @import './itcss/components/index'; @import './itcss/trumps/index'; +// Other imports @import '../../../node_modules/react-select/dist/react-select'; diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 20fbe94ce..1d7baf7b6 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -78,7 +78,7 @@ position: absolute; top: 3px; left: -8px; - color: $curious-blue; + color: $primary-blue; } &__account-primary-balance { diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 2ee11279c..7a034e4e9 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -98,7 +98,7 @@ } .confirm-screen-back-button { - color: $curious-blue; + color: $primary-blue; font-family: Roboto; font-size: 1rem; position: absolute; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index b7fa9a879..567e7a418 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -342,7 +342,7 @@ } &__link { - color: $curious-blue; + color: $primary-blue; } } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 298e7978a..77fd07afa 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -53,8 +53,8 @@ } &__selected { - color: $curious-blue; - border-bottom: 3px solid $curious-blue; + color: $primary-blue; + border-bottom: 3px solid $primary-blue; cursor: initial; pointer-events: none; } diff --git a/ui/app/css/itcss/components/pages/permission-approval.scss b/ui/app/css/itcss/components/pages/permission-approval.scss index a4f062f38..e8e712cbc 100644 --- a/ui/app/css/itcss/components/pages/permission-approval.scss +++ b/ui/app/css/itcss/components/pages/permission-approval.scss @@ -5,7 +5,7 @@ } .permission_approval_origin { - font-weight: 999; + font-weight: 900; margin-top: 16px; word-wrap: break-word; } diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 0a47d4252..03623e187 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -230,7 +230,7 @@ &__help-link { cursor: pointer; text-decoration: underline; - color: $curious-blue; + color: $primary-blue; } &__footer { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9b823cf0b..e82d938d6 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -149,7 +149,7 @@ .currency-toggle { &__item { - color: $curious-blue; + color: $primary-blue; cursor: pointer; &--selected { @@ -160,7 +160,7 @@ } .send-screen-gas-input-customize { - color: $curious-blue; + color: $primary-blue; font-size: 12px; cursor: pointer; } @@ -801,8 +801,8 @@ } input:checked + &__button { - background-color: #037dd6; - border: 2px solid #037dd6; + background-color: $primary-blue; + border: 2px solid $primary-blue; color: #fff; } } @@ -830,7 +830,7 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $primary-blue; border-radius: 4px; background-color: $white; position: absolute; @@ -841,7 +841,7 @@ } &__sliders-icon { - color: $curious-blue; + color: $primary-blue; } &__memo-text-area { @@ -1077,7 +1077,7 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $primary-blue; border-radius: 4px; background-color: $white; position: absolute; @@ -1105,5 +1105,5 @@ } .sliders-icon { - color: $curious-blue; + color: $primary-blue; } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 1910c39d0..9a40ec9ff 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -13,23 +13,12 @@ $gray: #808080; Colors http://chir.ag/projects/name-that-color */ -$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)' -$rajah: #f5c26d; // formerly 'light orange (button shades)' -$buttercup: #f5a623; // formerly 'dark orange (text)' -$tundora: #4a4a4a; // formerly 'borders/font/any gray' -$flamingo: #f56821; -$valencia: #d73a49; $gallery: #efefef; -$alabaster: #f7f7f7; -$shark: #22232c; $wild-sand: #f6f6f6; -$white: #fff; $dusty-gray: #9b9b9b; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #037dd6; -$concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; $scorpion: #5d5d5d; @@ -42,19 +31,12 @@ $purple: #690496; $tulip-tree: #ebb33f; $malibu-blue: #7ac9fd; $athens-grey: #e9edf0; -$jaffa: #f28930; $geyser: #d2d8dd; $manatee: #93949d; $spindle: #c7ddec; $mid-gray: #5b5d67; $cape-cod: #38393a; -$onahau: #d1edff; -$java: #29b6af; -$wild-strawberry: #ff4a8d; -$cornflower-blue: #7057ff; -$saffron: #f6c343; $dodger-blue: #3099f2; -$zumthor: #edf7ff; $ecstasy: #f7861c; $linen: #fdf4f4; $oslo-gray: #8c8e94; @@ -63,19 +45,6 @@ $blizzard-blue: #bfdef3; $mischka: #dddee9; $web-orange: #f2a202; $mercury: #e5e5e5; -$lochmara: #037dd6; - -/* - notification and error message colors - */ -$success-green: #28a745; -$success-light-green: #e8f9f1; -$danger-red: #d73a49; -$danger-light-red: #f8eae8; -$info-blue: #037dd6; -$info-light-blue: #e8f4fd; -$warning-yellow: #ffd33d; -$warning-light-yellow: #fefae8; /* Z-Indicies @@ -139,44 +108,6 @@ $break-large: 576px; $primary-font-type: Roboto; -$Blue-000: #eaf6ff; -$Blue-100: #a7d9fe; -$Blue-200: #75c4fd; -$Blue-300: #43aefc; -$Blue-400: #1098fc; -$Blue-500: #037dd6; -$Blue-600: #0260a4; -$Blue-700: #024272; -$Blue-800: #01253f; -$Blue-900: #00080d; - -$Grey-000: #f2f3f4; -$Grey-100: #d6d9dc; -$Grey-200: #bbc0c5; -$Grey-300: #9fa6ae; -$Grey-400: #848c96; -$Grey-200: #bbc0c5; -$Grey-500: #6a737d; -$Grey-600: #535a61; -$Grey-800: #24272a; - -$Red-000: #fcf2f3; -$Red-100: #f7d5d8; -$Red-200: #f1b9be; -$Red-300: #e88f97; -$Red-400: #e06470; -$Red-500: #d73a49; -$Red-600: #b92534; -$Red-700: #8e1d28; -$Red-800: #64141c; -$Red-900: #3a0c10; - -$Orange-000: #fef5ef; -$Orange-300: #faa66c; -$Orange-600: #c65507; -$Orange-500: #f66a0a; - -$Black-100: #24292e; // Font Sizes %h3 { diff --git a/ui/app/css/variables/colors.scss b/ui/app/css/variables/colors.scss new file mode 100644 index 000000000..c945c0de1 --- /dev/null +++ b/ui/app/css/variables/colors.scss @@ -0,0 +1,76 @@ +// These are the colors of the MetaMask design system +// Only design system colors should be added, no superfluous variables +// See https://bit.ly/32mnoja (link to figma design system) +$Blue-000: #eaf6ff; +$Blue-100: #a7d9fe; +$Blue-200: #75c4fd; +$Blue-300: #43aefc; +$Blue-400: #1098fc; +$Blue-500: #037dd6; +$Blue-600: #0260a4; +$Blue-700: #024272; +$Blue-800: #01253f; +$Blue-900: #00080d; + +$Grey-000: #f2f3f4; +$Grey-100: #d6d9dc; +$Grey-200: #bbc0c5; +$Grey-300: #9fa6ae; +$Grey-400: #848c96; +$Grey-500: #6a737d; +$Grey-600: #535a61; +$Grey-700: #3b4046; +$Grey-800: #24272a; +$Grey-900: #141618; + +$Green-000: #f3fcf5; +$Green-100: #d6ffdf; +$Green-200: #afecbd; +$Green-300: #86e29b; +$Green-400: #5dd879; +$Green-500: #28a745; +$Green-600: #1e7e34; +$Green-700: #145523; +$Green-800: #0a2c12; +$Green-900: #041007; + +$Red-000: #fcf2f3; +$Red-100: #f7d5d8; +$Red-200: #f1b9be; +$Red-300: #e88f97; +$Red-400: #e06470; +$Red-500: #d73a49; +$Red-600: #b92534; +$Red-700: #8e1d28; +$Red-800: #64141c; +$Red-900: #3a0c10; + +$Orange-000: #fef5ef; +$Orange-100: #fde2cf; +$Orange-200: #fbc49d; +$Orange-300: #faa66c; +$Orange-400: #f8883b; +$Orange-500: #f66a0a; +$Orange-600: #c65507; +$Orange-700: #954005; +$Orange-800: #632b04; +$Orange-900: #321602; + +$Yellow-000: #fefae8; // Temporary placeholder +$Yellow-100: #fefcde; +$Yellow-500: #ffd33d; + +$Black-100: #24292e; + +$primary-blue: $Blue-500; +$primary-orange: $Orange-500; + +$accent-yellow: $Yellow-500; +$accent-green: $Green-500; +$accent-red: $Red-500; +$accent-purple: #6f42c1; +$accent-pink: #ff45d8; + +$neutral-white: #fff; +$neutral-black: $Black-100; +$neutral-grey: $Grey-500; diff --git a/ui/app/css/variables/index.scss b/ui/app/css/variables/index.scss new file mode 100644 index 000000000..7aa2d674f --- /dev/null +++ b/ui/app/css/variables/index.scss @@ -0,0 +1 @@ +@import './colors.scss'; diff --git a/ui/app/helpers/higher-order-components/with-method-data/index.js b/ui/app/helpers/higher-order-components/with-method-data/index.js deleted file mode 100644 index f511e1ae7..000000000 --- a/ui/app/helpers/higher-order-components/with-method-data/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './with-method-data.component' 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 deleted file mode 100644 index 05b253f19..000000000 --- a/ui/app/helpers/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 { getMethodDataAsync, 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 getMethodDataAsync(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 ( - - ) - } - } -} diff --git a/ui/app/helpers/utils/util.js b/ui/app/helpers/utils/util.js index 37f852530..7643519a8 100644 --- a/ui/app/helpers/utils/util.js +++ b/ui/app/helpers/utils/util.js @@ -28,9 +28,9 @@ const valueTable = { tether: '0.000000000001', } const bnTable = {} -for (const currency in valueTable) { +Object.keys(valueTable).forEach((currency) => { bnTable[currency] = new ethUtil.BN(valueTable[currency], 10) -} +}) export function isEthNetwork (netId) { if (!netId || netId === '1' || netId === '3' || netId === '4' || netId === '42' || netId === '5777') { diff --git a/ui/app/helpers/utils/util.test.js b/ui/app/helpers/utils/util.test.js index 4be1713e9..ef1f5f153 100644 --- a/ui/app/helpers/utils/util.test.js +++ b/ui/app/helpers/utils/util.test.js @@ -230,11 +230,11 @@ describe('util', function () { } const oneEthBn = new ethUtil.BN(ethInWei, 10) - for (const currency in valueTable) { + Object.keys(valueTable).forEach((currency) => { const value = new ethUtil.BN(valueTable[currency], 10) const output = util.normalizeToWei(value, currency) assert.equal(output.toString(10), valueTable.wei, `value of ${output.toString(10)} ${currency} should convert to ${oneEthBn}`) - } + }) }) }) diff --git a/ui/app/hooks/tests/useCancelTransaction.test.js b/ui/app/hooks/tests/useCancelTransaction.test.js index 8bf58706a..7e887486e 100644 --- a/ui/app/hooks/tests/useCancelTransaction.test.js +++ b/ui/app/hooks/tests/useCancelTransaction.test.js @@ -21,7 +21,7 @@ describe('useCancelTransaction', function () { dispatch.resetHistory() }) - describe('when account has insufficent balance to cover gas', function () { + describe('when account has insufficient balance to cover gas', function () { before(function () { useSelector = sinon.stub(reactRedux, 'useSelector') useSelector.callsFake((selector) => { diff --git a/ui/app/hooks/useTransactionDisplayData.js b/ui/app/hooks/useTransactionDisplayData.js index f5e17f4b3..52d161e7d 100644 --- a/ui/app/hooks/useTransactionDisplayData.js +++ b/ui/app/hooks/useTransactionDisplayData.js @@ -106,7 +106,7 @@ export function useTransactionDisplayData (transactionGroup) { subtitleContainsOrigin = true } else if (transactionCategory === TOKEN_METHOD_APPROVE) { category = TRANSACTION_CATEGORY_APPROVAL - title = t('approve') + title = t('approveSpendLimit', [token?.symbol || t('token')]) subtitle = origin subtitleContainsOrigin = true } else if (transactionCategory === DEPLOY_CONTRACT_ACTION_KEY || transactionCategory === CONTRACT_INTERACTION_KEY) { diff --git a/ui/app/pages/add-token/index.scss b/ui/app/pages/add-token/index.scss index 51a80aab2..5060a6348 100644 --- a/ui/app/pages/add-token/index.scss +++ b/ui/app/pages/add-token/index.scss @@ -36,7 +36,7 @@ &__edit { flex: 1 1 auto; text-align: right; - color: $curious-blue; + color: $primary-blue; padding-right: 4px; cursor: pointer; } diff --git a/ui/app/pages/confirm-approve/confirm-approve-content/index.scss b/ui/app/pages/confirm-approve/confirm-approve-content/index.scss index 8449ca73d..70771fcaf 100644 --- a/ui/app/pages/confirm-approve/confirm-approve-content/index.scss +++ b/ui/app/pages/confirm-approve/confirm-approve-content/index.scss @@ -141,7 +141,7 @@ div { width: 22px; height: 2px; - background: #037dd6; + background: $primary-blue; position: absolute; } @@ -157,7 +157,7 @@ &__circle { width: 14px; height: 14px; - border: 2px solid #037dd6; + border: 2px solid $primary-blue; border-radius: 50%; background: white; position: absolute; @@ -236,7 +236,7 @@ font-size: 14px; line-height: 20px; font-weight: 500; - color: #037dd6; + color: $primary-blue; } &__medium-text, @@ -262,7 +262,7 @@ } &__small-blue-text { - color: #037dd6; + color: $primary-blue; } &__info-row { diff --git a/ui/app/pages/connected-accounts/index.scss b/ui/app/pages/connected-accounts/index.scss index a320b2111..a32c405f9 100644 --- a/ui/app/pages/connected-accounts/index.scss +++ b/ui/app/pages/connected-accounts/index.scss @@ -2,7 +2,7 @@ &__footer { a, a:hover { - color: #037dd6; + color: $primary-blue; cursor: pointer; font-size: 14px; } diff --git a/ui/app/pages/connected-sites/index.scss b/ui/app/pages/connected-sites/index.scss index 652df5a28..5b963bf42 100644 --- a/ui/app/pages/connected-sites/index.scss +++ b/ui/app/pages/connected-sites/index.scss @@ -28,7 +28,7 @@ a:hover { font-size: 14px; line-height: 20px; - color: #037dd6; + color: $primary-blue; cursor: pointer; } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 8481139f5..3b7498b2b 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -159,6 +159,6 @@ } &__link-text { - color: $curious-blue; + color: $primary-blue; } } diff --git a/ui/app/pages/first-time-flow/onboarding-initiator-util.js b/ui/app/pages/first-time-flow/onboarding-initiator-util.js index dd70085f6..7653f7852 100644 --- a/ui/app/pages/first-time-flow/onboarding-initiator-util.js +++ b/ui/app/pages/first-time-flow/onboarding-initiator-util.js @@ -18,7 +18,7 @@ const returnToOnboardingInitiatorTab = async (onboardingInitiator) => { if (!tab) { // this case can happen if the tab was closed since being checked with `extension.tabs.get` - log.warn(`Setting current tab to onboarding initator has failed; falling back to redirect`) + log.warn(`Setting current tab to onboarding initiator has failed; falling back to redirect`) window.location.assign(onboardingInitiator.location) } else { window.close() diff --git a/ui/app/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 a6f3c88a2..6d6c90a1e 100644 --- a/ui/app/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 @@ -54,7 +54,7 @@ } &__export-text { - color: $curious-blue; + color: $primary-blue; cursor: pointer; font-weight: 500; } diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss index 9bcdd89ef..4f71942c1 100644 --- a/ui/app/pages/permissions-connect/choose-account/index.scss +++ b/ui/app/pages/permissions-connect/choose-account/index.scss @@ -34,7 +34,7 @@ } &__text-blue { - color: $curious-blue; + color: $primary-blue; cursor: pointer; } @@ -143,7 +143,7 @@ display: flex; flex-direction: column; align-items: flex-end; - color: #037dd6; + color: $primary-blue; } } diff --git a/ui/app/pages/send/send-footer/tests/send-footer-component.test.js b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js index 8ab8e4754..12317cf09 100644 --- a/ui/app/pages/send/send-footer/tests/send-footer-component.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js @@ -128,7 +128,7 @@ describe('SendFooter Component', function () { }, } - Object.entries(config).map(([description, obj]) => { + Object.entries(config).forEach(([description, obj]) => { it(description, function () { wrapper.setProps(obj) assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult) diff --git a/ui/app/pages/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js index c5c58739f..8e9c75f8f 100644 --- a/ui/app/pages/send/send-header/tests/send-header-component.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-component.test.js @@ -56,7 +56,7 @@ describe('SendHeader Component', function () { }) describe('render', function () { - it('should render a PageContainerHeader compenent', function () { + it('should render a PageContainerHeader component', function () { assert.equal(wrapper.find(PageContainerHeader).length, 1) }) diff --git a/ui/app/pages/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js index c3d92e801..08bc30289 100644 --- a/ui/app/pages/send/tests/send-utils.test.js +++ b/ui/app/pages/send/tests/send-utils.test.js @@ -103,7 +103,7 @@ describe('send utils', function () { expectedResult: false, }, } - Object.entries(config).map(([description, obj]) => { + Object.entries(config).forEach(([description, obj]) => { it(description, function () { assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult) }) @@ -166,7 +166,7 @@ describe('send utils', function () { expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR }, }, } - Object.entries(config).map(([description, obj]) => { + Object.entries(config).forEach(([description, obj]) => { it(description, function () { assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult) }) @@ -190,7 +190,7 @@ describe('send utils', function () { expectedResult: { gasFee: null }, }, } - Object.entries(config).map(([description, obj]) => { + Object.entries(config).forEach(([description, obj]) => { it(description, function () { assert.deepEqual(getGasFeeErrorObject(obj), obj.expectedResult) }) @@ -198,7 +198,7 @@ describe('send utils', function () { }) describe('calcTokenBalance()', function () { - it('should return the calculated token blance', function () { + it('should return the calculated token balance', function () { assert.equal(calcTokenBalance({ sendToken: { address: '0x0', diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js index 92079c3d5..fef025376 100644 --- a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import { Redirect } from 'react-router-dom' import Identicon from '../../../../components/ui/identicon' import Button from '../../../../components/ui/button/button.component' import TextField from '../../../../components/ui/text-field' @@ -23,11 +24,11 @@ export default class EditContact extends PureComponent { viewRoute: PropTypes.string, listRoute: PropTypes.string, setAccountLabel: PropTypes.func, + showingMyAccounts: PropTypes.bool.isRequired, } static defaultProps = { name: '', - address: '', memo: '', } @@ -40,22 +41,43 @@ export default class EditContact extends PureComponent { render () { const { t } = this.context - const { history, name, addToAddressBook, removeFromAddressBook, address, chainId, memo, viewRoute, listRoute, setAccountLabel } = this.props + const { + address, + addToAddressBook, + chainId, + history, + listRoute, + memo, + name, + removeFromAddressBook, + setAccountLabel, + showingMyAccounts, + viewRoute, + } = this.props + + if (!address) { + return + } return (
- + { + showingMyAccounts + ? null + : ( + + ) + }
@@ -117,7 +139,9 @@ export default class EditContact extends PureComponent { if (isValidAddress(this.state.newAddress)) { await removeFromAddressBook(chainId, address) await addToAddressBook(this.state.newAddress, this.state.newName || name, this.state.newMemo || memo) - setAccountLabel(this.state.newAddress, this.state.newName || name) + if (showingMyAccounts) { + setAccountLabel(this.state.newAddress, this.state.newName || name) + } history.push(listRoute) } else { this.setState({ error: this.context.t('invalidAddress') }) @@ -125,7 +149,9 @@ export default class EditContact extends PureComponent { } else { // update name await addToAddressBook(address, this.state.newName || name, this.state.newMemo || memo) - setAccountLabel(address, this.state.newName || name) + if (showingMyAccounts) { + setAccountLabel(address, this.state.newName || name) + } history.push(listRoute) } }} diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js index f649c2300..3766f1ac8 100644 --- a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js @@ -19,14 +19,15 @@ const mapStateToProps = (state, ownProps) => { const pathNameTailIsAddress = pathNameTail.includes('0x') const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id - const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + const contact = getAddressBookEntry(state, address) || state.metamask.identities[address] + const { memo, name } = contact || {} const chainId = state.metamask.network const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) return { - address, + address: contact ? address : null, chainId, name, memo, diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss index 0a18ff54b..0f9c673f8 100644 --- a/ui/app/pages/settings/contact-list-tab/index.scss +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -21,7 +21,7 @@ border-bottom: 1px solid #dedede; &:hover { - border: 1px solid #037dd6; + border: 1px solid $primary-blue; cursor: pointer; } } @@ -48,7 +48,7 @@ .button { justify-content: flex-end; - color: #d73a49; + color: $accent-red; font-size: 14px; } } @@ -227,7 +227,7 @@ align-items: center; border-radius: 50%; border-width: 2px; - background: #037dd6; + background: $primary-blue; margin-right: 5px; cursor: pointer; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js index e251aff6f..9db3f690f 100644 --- a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -1,8 +1,9 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import { Redirect } from 'react-router-dom' + import Identicon from '../../../../components/ui/identicon' import Copy from '../../../../components/ui/icon/copy-icon.component' - import Button from '../../../../components/ui/button/button.component' import copyToClipboard from 'copy-to-clipboard' @@ -23,11 +24,16 @@ export default class ViewContact extends PureComponent { checkSummedAddress: PropTypes.string, memo: PropTypes.string, editRoute: PropTypes.string, + listRoute: PropTypes.string.isRequired, } render () { const { t } = this.context - const { history, name, address, checkSummedAddress, memo, editRoute } = this.props + const { history, name, address, checkSummedAddress, memo, editRoute, listRoute } = this.props + + if (!address) { + return + } return (
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js index 3390e1a0b..7f7c5d8c1 100644 --- a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js @@ -6,7 +6,9 @@ import { getAddressBookEntry } from '../../../../selectors' import { checksumAddress } from '../../../../helpers/utils/util' import { CONTACT_EDIT_ROUTE, + CONTACT_LIST_ROUTE, CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, CONTACT_MY_ACCOUNTS_VIEW_ROUTE, } from '../../../../helpers/constants/routes' @@ -17,16 +19,18 @@ const mapStateToProps = (state, ownProps) => { const pathNameTailIsAddress = pathNameTail.includes('0x') const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id - const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + const contact = getAddressBookEntry(state, address) || state.metamask.identities[address] + const { memo, name } = contact || {} const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE)) return { name, - address, + address: contact ? address : null, checkSummedAddress: checksumAddress(address), memo, editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE, + listRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_ROUTE : CONTACT_LIST_ROUTE, } } diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index 5cf2d4a88..0c4371cf4 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -46,7 +46,7 @@ &__subheader--link:hover { cursor: pointer; - color: #037dd6; + color: $primary-blue; } &__subheader--break { diff --git a/ui/app/pages/unlock-page/unlock-page.component.js b/ui/app/pages/unlock-page/unlock-page.component.js index 5a74f98c5..ffaadc5ee 100644 --- a/ui/app/pages/unlock-page/unlock-page.component.js +++ b/ui/app/pages/unlock-page/unlock-page.component.js @@ -76,7 +76,7 @@ export default class UnlockPage extends Component { eventOpts: { category: 'Navigation', action: 'Unlock', - name: 'Incorrect Passowrd', + name: 'Incorrect Password', }, customVariables: { numberOfTokens: newState.tokens.length, diff --git a/ui/app/selectors/tests/confirm-transaction.test.js b/ui/app/selectors/tests/confirm-transaction.test.js index b7a758159..79536a0fb 100644 --- a/ui/app/selectors/tests/confirm-transaction.test.js +++ b/ui/app/selectors/tests/confirm-transaction.test.js @@ -61,7 +61,7 @@ describe('Confirm Transaction Selector', function () { }, } - it('returns calulcated token amount based on token value and token decimals and recipient address', function () { + it('returns calculated token amount based on token value and token decimals and recipient address', function () { assert.deepEqual(tokenAmountAndToAddressSelector(state), { toAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', tokenAmount: 0.01 }) }) diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index 5f92cdd98..abb855233 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -2190,7 +2190,8 @@ export function getContractMethodData (data = '') { const prefixedData = ethUtil.addHexPrefix(data) const fourBytePrefix = prefixedData.slice(0, 10) const { knownMethodData } = getState().metamask - if (knownMethodData && knownMethodData[fourBytePrefix] && Object.keys(knownMethodData[fourBytePrefix]).length !== 0) { + + if ((knownMethodData && knownMethodData[fourBytePrefix] && Object.keys(knownMethodData[fourBytePrefix]).length !== 0) || fourBytePrefix === '0x') { return Promise.resolve(knownMethodData[fourBytePrefix]) } diff --git a/yarn.lock b/yarn.lock index 7671c5fb8..0290b9ac1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1730,10 +1730,10 @@ events "^2.0.0" hdkey "0.8.0" -"@metamask/eth-token-tracker@^2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@metamask/eth-token-tracker/-/eth-token-tracker-2.0.0.tgz#a94a99bd3160ee85ec5feace29fbb02f80f5c826" - integrity sha512-PTiUbx7JulDREswWmebRyIj2wNUV8eLTZWGEA2Duca8IGVP1r8q+kb163tXT4FNNAGR+6JoVvkJ8SpIN+XoiNQ== +"@metamask/eth-token-tracker@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@metamask/eth-token-tracker/-/eth-token-tracker-3.0.0.tgz#16ad4820abd6603d745c8cdaf7c5a9ae60e6db02" + integrity sha512-UxYkmEMrUYb8wzsqEY8x6QeiW2955guR/aaalqfElI2rlDyvKJ1lIaAiT7y642vcqoyIGhqYG2aejeHDpifMbA== dependencies: deep-equal "^1.1.0" eth-block-tracker "^4.4.2" @@ -1753,10 +1753,10 @@ resolved "https://registry.yarnpkg.com/@metamask/forwarder/-/forwarder-1.1.0.tgz#13829d8244bbf19ea658c0b20d21a77b67de0bdd" integrity sha512-Hggj4y0QIjDzKGTXzarhEPIQyFSB2bi2y6YLJNwaT4JmP30UB5Cj6gqoY0M4pj3QT57fzp0BUuGp7F/AUe28tw== -"@metamask/inpage-provider@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/@metamask/inpage-provider/-/inpage-provider-6.0.1.tgz#09bf3a3157d604fb511133c5a6e8eb1178d776bc" - integrity sha512-kcc2Tmq6bgjMyYxCgDJczdCAUBmAR4FPo+zmN0np02y/KNgDlzuKLdsrv3Y9B/S5XTxjuW95xYtMaxXZ5drEkQ== +"@metamask/inpage-provider@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@metamask/inpage-provider/-/inpage-provider-6.1.0.tgz#6a4ec9437169b6d6f2b439dd7a2e604ebcfc2fca" + integrity sha512-Sgl+kHyJCTkyWzNKIX18/O+CJUMWlc5jWB27p3NBfA/r1ldr87n7wdJhK9VnHrKZ2GMJtwBmtuE9Do+mLIKHXA== dependencies: eth-json-rpc-errors "^2.0.2" fast-deep-equal "^2.0.1" @@ -7130,10 +7130,10 @@ content-disposition@0.5.3, content-disposition@^0.5.2, content-disposition@~0.5. dependencies: safe-buffer "5.1.2" -content-hash@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/content-hash/-/content-hash-2.5.0.tgz#6f8a98feec0360f09213e951c69e57c727093e3a" - integrity sha512-Opn9YSjQQc3Wst/VPwGTdKcNONuQr4yc0dtvEbV82UGDIsc7dE2bdTz3FpLRxfnuOkHx8y9/94sZ3aytmUQ1HA== +content-hash@^2.5.2: + version "2.5.2" + resolved "https://registry.yarnpkg.com/content-hash/-/content-hash-2.5.2.tgz#bbc2655e7c21f14fd3bfc7b7d4bfe6e454c9e211" + integrity sha512-FvIQKy0S1JaWV10sMsA7TRx8bpU+pqPkhbsfvOJAdjRXvYxEckAwQWGwtRjiaJfh+E0DvcWUGqcdjwMGFjsSdw== dependencies: cids "^0.7.1" multicodec "^0.5.5"