diff --git a/.circleci/config.yml b/.circleci/config.yml index 4d9d01ee6..0ad5cdf53 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -30,6 +30,15 @@ workflows: - prep-deps-npm - prep-deps-firefox - prep-build + - test-e2e-beta-chrome: + requires: + - prep-deps-npm + - prep-build + - test-e2e-beta-firefox: + requires: + - prep-deps-npm + - prep-deps-firefox + - prep-build - test-unit: requires: - prep-deps-npm @@ -57,6 +66,8 @@ workflows: - test-unit - test-e2e-chrome - test-e2e-firefox + - test-e2e-beta-chrome + - test-e2e-beta-firefox - test-integration-mascara-chrome - test-integration-mascara-firefox - test-integration-flat-chrome @@ -86,7 +97,7 @@ workflows: jobs: prep-deps-npm: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -105,14 +116,12 @@ jobs: prep-deps-firefox: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - run: name: Download Firefox - command: > - wget https://ftp.mozilla.org/pub/firefox/releases/58.0/linux-x86_64/en-US/firefox-58.0.tar.bz2 - && tar xjf firefox-58.0.tar.bz2 + command: ./.circleci/scripts/firefox-download.sh - save_cache: key: dependency-cache-firefox-{{ .Revision }} paths: @@ -120,7 +129,7 @@ jobs: prep-build: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -139,7 +148,7 @@ jobs: prep-docs: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -154,7 +163,7 @@ jobs: prep-scss: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -173,7 +182,7 @@ jobs: test-lint: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -184,7 +193,7 @@ jobs: test-deps: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -195,7 +204,7 @@ jobs: test-e2e-chrome: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -203,28 +212,22 @@ jobs: - restore_cache: key: build-cache-{{ .Revision }} - run: - name: Test + name: test:e2e:chrome command: npm run test:e2e:chrome - store_artifacts: path: test-artifacts destination: test-artifacts test-e2e-firefox: - environment: - browsers: '["Firefox"]' docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: key: dependency-cache-firefox-{{ .Revision }} - run: name: Install firefox - command: > - sudo rm -r /opt/firefox - && sudo mv firefox /opt/firefox58 - && sudo mv /usr/bin/firefox /usr/bin/firefox-old - && sudo ln -s /opt/firefox58/firefox /usr/bin/firefox + command: ./.circleci/scripts/firefox-install.sh - restore_cache: key: dependency-cache-{{ .Revision }} - restore_cache: @@ -236,9 +239,46 @@ jobs: path: test-artifacts destination: test-artifacts + test-e2e-beta-chrome: + docker: + - image: circleci/node:8.11.3-browsers + steps: + - checkout + - restore_cache: + key: dependency-cache-{{ .Revision }} + - restore_cache: + key: build-cache-{{ .Revision }} + - run: + name: test:e2e:chrome:beta + command: npm run test:e2e:chrome:beta + - store_artifacts: + path: test-artifacts + destination: test-artifacts + + test-e2e-beta-firefox: + docker: + - image: circleci/node:8.11.3-browsers + steps: + - checkout + - restore_cache: + key: dependency-cache-firefox-{{ .Revision }} + - run: + name: Install firefox + command: ./.circleci/scripts/firefox-install.sh + - restore_cache: + key: dependency-cache-{{ .Revision }} + - restore_cache: + key: build-cache-{{ .Revision }} + - run: + name: test:e2e:firefox:beta + command: npm run test:e2e:firefox:beta + - store_artifacts: + path: test-artifacts + destination: test-artifacts + job-screens: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -255,7 +295,7 @@ jobs: job-publish-prerelease: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -282,7 +322,7 @@ jobs: job-publish-release: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -305,7 +345,7 @@ jobs: test-unit: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -318,18 +358,14 @@ jobs: environment: browsers: '["Firefox"]' docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: key: dependency-cache-firefox-{{ .Revision }} - run: name: Install firefox - command: > - sudo rm -r /opt/firefox - && sudo mv firefox /opt/firefox58 - && sudo mv /usr/bin/firefox /usr/bin/firefox-old - && sudo ln -s /opt/firefox58/firefox /usr/bin/firefox + command: ./.circleci/scripts/firefox-install.sh - restore_cache: key: dependency-cache-{{ .Revision }} - run: @@ -346,7 +382,7 @@ jobs: environment: browsers: '["Chrome"]' docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -365,18 +401,14 @@ jobs: environment: browsers: '["Firefox"]' docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: key: dependency-cache-firefox-{{ .Revision }} - run: name: Install firefox - command: > - sudo rm -r /opt/firefox - && sudo mv firefox /opt/firefox58 - && sudo mv /usr/bin/firefox /usr/bin/firefox-old - && sudo ln -s /opt/firefox58/firefox /usr/bin/firefox + command: ./.circleci/scripts/firefox-install.sh - restore_cache: key: dependency-cache-{{ .Revision }} - run: @@ -393,7 +425,7 @@ jobs: environment: browsers: '["Chrome"]' docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - checkout - restore_cache: @@ -410,9 +442,8 @@ jobs: all-tests-pass: docker: - - image: circleci/node:8-browsers + - image: circleci/node:8.11.3-browsers steps: - run: name: All Tests Passed command: echo 'weew - everything passed!' - diff --git a/.circleci/scripts/firefox-download.sh b/.circleci/scripts/firefox-download.sh new file mode 100755 index 000000000..c63e8c3df --- /dev/null +++ b/.circleci/scripts/firefox-download.sh @@ -0,0 +1,6 @@ +#!/usr/bin/env bash + +echo "Downloading firefox..." +wget https://ftp.mozilla.org/pub/firefox/releases/58.0/linux-x86_64/en-US/firefox-58.0.tar.bz2 \ +&& tar xjf firefox-58.0.tar.bz2 +echo "firefox download complete" diff --git a/.circleci/scripts/firefox-install.sh b/.circleci/scripts/firefox-install.sh new file mode 100755 index 000000000..589bcbbb5 --- /dev/null +++ b/.circleci/scripts/firefox-install.sh @@ -0,0 +1,8 @@ +#!/usr/bin/env bash + +echo "Installing firefox..." +sudo rm -r /opt/firefox +sudo mv firefox /opt/firefox58 +sudo mv /usr/bin/firefox /usr/bin/firefox-old +sudo ln -s /opt/firefox58/firefox /usr/bin/firefox +echo "Firefox installed." diff --git a/.eslintignore b/.eslintignore index e4cade21c..44b38c3de 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,20 @@ +node_modules/** +dist/** +builds/** +docs/** + +development/bundle.js +development/states.js + app/scripts/lib/extension-instance.js +app/scripts/chromereload.js + +ui/lib/blockies.js + +mascara/src/app/first-time/spinner.js +mascara/test/jquery-3.1.0.min.js + test/integration/bundle.js test/integration/jquery-3.1.0.min.js test/integration/helpers.js test/integration/lib/first-time.js -ui/lib/blockies.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index 511d6f216..1317864d1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -37,7 +37,9 @@ "document": false, "navigator": false, "web3": true, - "window": false + "window": false, + "$": false, + "QUnit": false }, "rules": { @@ -142,6 +144,7 @@ "operator-linebreak": [1, "after", { "overrides": { "?": "ignore", ":": "ignore" } }], "padded-blocks": "off", "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}], + "react/no-deprecated": 0, "semi": [2, "never"], "semi-spacing": [2, { "before": false, "after": true }], "space-before-blocks": [1, "always"], @@ -158,5 +161,6 @@ "yield-star-spacing": [2, "both"], "yoda": [2, "never"], "prefer-const": 1, + "mocha/no-exclusive-tests": "error" } } diff --git a/.nvmrc b/.nvmrc index bb83eeea2..41c421777 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v6.3.1 +v8.11.3 diff --git a/CHANGELOG.md b/CHANGELOG.md index af4c886bc..d86fcd713 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,42 @@ ## Current Master +## 4.8.0 Thur Jun 14 2018 + +- [#4513](https://github.com/MetaMask/metamask-extension/pull/4513): Attempting to import an empty private key will now show a clear error. +- [#4570](https://github.com/MetaMask/metamask-extension/pull/4570): Fix bug where metamask data would stop being written to disk after prolonged use. +- [#4523](https://github.com/MetaMask/metamask-extension/pull/4523): Fix bug where account reset did not work with custom RPC providers. +- [#4524](https://github.com/MetaMask/metamask-extension/pull/4524): Fix for Brave i18n getAcceptLanguages. +- [#4557](https://github.com/MetaMask/metamask-extension/pull/4557): Fix bug where nonce mutex was never released. +- [#4566](https://github.com/MetaMask/metamask-extension/pull/4566): Add phishing notice. +- [#4591](https://github.com/MetaMask/metamask-extension/pull/4591): Allow Copying Token Addresses and link to Token on Etherscan. + +## 4.7.4 Tue Jun 05 2018 + +- Add diagnostic reporting for users with multiple HD keyrings +- Throw explicit error when selected account is unset + +## 4.7.3 Mon Jun 04 2018 + +- Hide token now uses new modal +- Indicate the current selected account on the popup account view +- Reduce height of notice container in onboarding +- Fixes issue where old nicknames were kept around causing errors + +## 4.7.2 Sun Jun 03 2018 + +- Fix bug preventing users from logging in. Internally accounts and identities were out of sync. +- Fix support links to point to new support system (Zendesk) +- Fix bug in migration #26 ( moving account nicknames to preferences ) +- Clears account nicknames on restore from seedPhrase + +## 4.7.1 Fri Jun 01 2018 + +- Fix bug where errors were not returned to Dapps. + +## 4.7.0 Wed May 30 2018 + +- Fix Brave support - Adds error messages when passwords don't match in onboarding flow. - Adds modal notification if a retry in the process of being confirmed is dropped. - New unlock screen design. diff --git a/LICENSE b/LICENSE index ddfbecf90..bbed2e24b 100644 --- a/LICENSE +++ b/LICENSE @@ -18,3 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 970bd758f..70faa8856 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,9 @@ If you're a web dapp developer, we've got two types of guides for you: ## Building locally - Install [Node.js](https://nodejs.org/en/) version 6.3.1 or later. - - Install local dependencies with `npm install`. + - Install dependencies: + - For node versions up to and including 9, install local dependencies with `npm install`. + - For node versions 10 and later, install [Yarn](https://yarnpkg.com/lang/en/docs/install/) and use `yarn install`. - Install gulp globally with `npm install -g gulp-cli`. - Build the project to the `./dist/` folder with `gulp build`. - Optionally, to rebuild on file changes, run `gulp dev`. diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 40d362f51..46fbdc1a7 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -146,6 +146,9 @@ "copy": { "message": "Copy" }, + "copyContractAddress": { + "message": "Copy Contract Address" + }, "copyToClipboard": { "message": "Copy to clipboard" }, @@ -253,12 +256,18 @@ "editAccountName": { "message": "Edit Account Name" }, + "editingTransaction": { + "message": "Make changes to your transaction" + }, "emailUs": { "message": "Email us!" }, "encryptNewDen": { "message": "Encrypt your new DEN" }, + "ensNameNotFound": { + "message": "ENS name not found" + }, "enterPassword": { "message": "Enter password" }, @@ -771,6 +780,10 @@ "onlySendToEtherAddress": { "message": "Only send ETH to an Ethereum address." }, + "onlySendTokensToAccountAddress": { + "message": "Only send $1 to an Ethereum account address.", + "description": "displays token symbol" + }, "searchTokens": { "message": "Search Tokens" }, @@ -948,6 +961,9 @@ "viewAccount": { "message": "View Account" }, + "viewOnEtherscan": { + "message": "View on Etherscan" + }, "visitWebSite": { "message": "Visit our web site" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 3a664ec00..75deeaddf 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -62,6 +62,9 @@ "message": " $1以上 $2以下にして下さい。", "description": "helper for inputting hex as decimal input" }, + "blockiesIdenticon": { + "message": "Blockies Identicon を使用" + }, "borrowDharma": { "message": "Dharmaで借りる(ベータ版)" }, @@ -95,6 +98,9 @@ "confirmTransaction": { "message": "トランザクションの確認" }, + "continue": { + "message": "続行" + }, "continueToCoinbase": { "message": "Coinbaseを開く" }, @@ -359,6 +365,9 @@ "likeToAddTokens": { "message": "トークンを追加しますか?" }, + "links": { + "message": "リンク" + }, "limit": { "message": "リミット" }, @@ -371,12 +380,18 @@ "localhost": { "message": "Localhost 8545" }, + "login": { + "message": "ログイン" + }, "logout": { "message": "ログアウト" }, "loose": { "message": "外部秘密鍵" }, + "max": { + "message": "最大" + }, "mainnet": { "message": "Ethereumメインネットワーク" }, @@ -417,7 +432,7 @@ "message": "新規コントラクト" }, "newPassword": { - "message": "新規パスワード(最低８文字)" + "message": "新規パスワード(最低8文字)" }, "newRecipient": { "message": "新規受取人" @@ -453,6 +468,9 @@ "message": "または", "description": "choice between creating or importing a new account" }, + "password": { + "message": "パスワード" + }, "passwordMismatch": { "message": "パスワードが一致しません。", "description": "in password creation process, the two new password fields did not match" @@ -474,6 +492,9 @@ "popularTokens": { "message": "人気のトークン" }, + "privacyMsg": { + "message": "プライバシーポリシー" + }, "privateKey": { "message": "秘密鍵", "description": "select this type of file to use to import an account" @@ -546,6 +567,12 @@ "message": "ファイルとして保存", "description": "Account export process" }, + "search": { + "message": "検索" + }, + "searchResults": { + "message": "検索結果" + }, "selectService": { "message": "サービスを選択" }, @@ -575,7 +602,7 @@ }, "info": { "message": "情報" - }, + }, "shapeshiftBuy": { "message": "Shapeshiftで交換" }, @@ -609,6 +636,9 @@ "takesTooLong": { "message": "送信に時間がかかりますか?" }, + "terms": { + "message": "利用規約" + }, "testFaucet": { "message": "Faucetをテスト" }, @@ -619,6 +649,9 @@ "message": "ShapeShiftで $1をETHにする", "description": "system will fill in deposit type in start of message" }, + "token": { + "message": "トークン" + }, "tokenAddress": { "message": "トークンアドレス" }, @@ -690,6 +723,12 @@ "warning": { "message": "警告" }, + "welcomeBack": { + "message": "おかえりなさい!" + }, + "welcomeBeta": { + "message": "MetaMask ベータ版へようこそ!" + }, "whatsThis": { "message": "この機能について" }, diff --git a/app/manifest.json b/app/manifest.json index 027f9a045..a226adfb0 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -1,7 +1,7 @@ { "name": "__MSG_appName__", "short_name": "__MSG_appName__", - "version": "4.6.1", + "version": "4.8.0", "manifest_version": 2, "author": "https://metamask.io", "description": "__MSG_appDescription__", @@ -71,6 +71,8 @@ "matches": [ "https://metamask.io/*" ], - "ids": ["*"] + "ids": [ + "*" + ] } } diff --git a/app/scripts/account-import-strategies/index.js b/app/scripts/account-import-strategies/index.js index 96e2b5912..16ae224ea 100644 --- a/app/scripts/account-import-strategies/index.js +++ b/app/scripts/account-import-strategies/index.js @@ -16,7 +16,18 @@ const accountImporter = { strategies: { 'Private Key': (privateKey) => { - const stripped = ethUtil.stripHexPrefix(privateKey) + if (!privateKey) { + throw new Error('Cannot import an empty key.') + } + + const prefixed = ethUtil.addHexPrefix(privateKey) + const buffer = ethUtil.toBuffer(prefixed) + + if (!ethUtil.isValidPrivate(buffer)) { + throw new Error('Cannot import invalid private key.') + } + + const stripped = ethUtil.stripHexPrefix(prefixed) return stripped }, 'JSON File': (input, password) => { diff --git a/app/scripts/background.js b/app/scripts/background.js index 610409975..1479d9f72 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -16,6 +16,7 @@ const ExtensionPlatform = require('./platforms/extension') const Migrator = require('./lib/migrator/') const migrations = require('./migrations/') const PortStream = require('./lib/port-stream.js') +const createStreamSink = require('./lib/createStreamSink') const NotificationManager = require('./lib/notification-manager.js') const MetamaskController = require('./metamask-controller') const firstTimeState = require('./first-time-state') @@ -68,7 +69,6 @@ initialize().catch(log.error) setupMetamaskMeshMetrics() - /** * An object representing a transaction, in whatever state it is in. * @typedef TransactionMeta @@ -279,7 +279,7 @@ function setupController (initState, initLangCode) { asStream(controller.store), debounce(1000), storeTransform(versionifyData), - storeTransform(persistData), + createStreamSink(persistData), (error) => { log.error('MetaMask - Persistence pipeline failed', error) } @@ -295,7 +295,7 @@ function setupController (initState, initLangCode) { return versionedData } - function persistData (state) { + async function persistData (state) { if (!state) { throw new Error('MetaMask - updated state is missing', state) } @@ -303,12 +303,13 @@ function setupController (initState, initLangCode) { throw new Error('MetaMask - updated state does not have data', state) } if (localStore.isSupported) { - localStore.set(state) - .catch((err) => { + try { + await localStore.set(state) + } catch (err) { + // log error so we dont break the pipeline log.error('error setting state in local store:', err) - }) + } } - return state } // @@ -382,7 +383,7 @@ function setupController (initState, initLangCode) { } // communication with page or other extension - function connectExternal(remotePort) { + function connectExternal (remotePort) { const originDomain = urlUtil.parse(remotePort.sender.url).hostname const portStream = new PortStream(remotePort) controller.setupUntrustedCommunication(portStream, originDomain) diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index 555902ddf..b35a70dd2 100644 --- a/app/scripts/contentscript.js +++ b/app/scripts/contentscript.js @@ -115,8 +115,8 @@ function logStreamDisconnectWarning (remoteLabel, err) { * @returns {boolean} {@code true} if Web3 should be injected */ function shouldInjectWeb3 () { - return doctypeCheck() && suffixCheck() - && documentElementCheck() && !blacklistedDomainCheck() + return doctypeCheck() && suffixCheck() && + documentElementCheck() && !blacklistedDomainCheck() } /** @@ -176,6 +176,7 @@ function blacklistedDomainCheck () { 'webbyawards.com', 'cdn.shopify.com/s/javascripts/tricorder/xtld-read-only-frame.html', 'adyen.com', + 'gravityforms.com', ] var currentUrl = window.location.href var currentRegex diff --git a/app/scripts/controllers/balance.js b/app/scripts/controllers/balance.js index 86619fce1..4c97810a3 100644 --- a/app/scripts/controllers/balance.js +++ b/app/scripts/controllers/balance.js @@ -60,7 +60,7 @@ class BalanceController { * Sets up listeners and subscriptions which should trigger an update of ethBalance. These updates include: * - when a transaction changes state to 'submitted', 'confirmed' or 'failed' * - when the current account changes (i.e. a new account is selected) - * - when there is a block update + * - when there is a block update * * @private * @@ -100,7 +100,7 @@ class BalanceController { /** * Gets the pending transactions (i.e. those with a 'submitted' status). These are accessed from the - * TransactionController passed to this BalanceController during construction. + * TransactionController passed to this BalanceController during construction. * * @private * @returns {Promise} Promises an array of transaction objects. diff --git a/app/scripts/controllers/blacklist.js b/app/scripts/controllers/blacklist.js index f100c4525..1d2191433 100644 --- a/app/scripts/controllers/blacklist.js +++ b/app/scripts/controllers/blacklist.js @@ -87,7 +87,7 @@ class BlacklistController { * * @private * @param {object} config A config object like that found at {@link https://github.com/MetaMask/eth-phishing-detect/blob/master/src/config.json} - * + * */ _setupPhishingDetector (config) { this._phishingDetector = new PhishingDetector(config) diff --git a/app/scripts/controllers/computed-balances.js b/app/scripts/controllers/computed-balances.js index 1a6802f9a..e04ce2ef7 100644 --- a/app/scripts/controllers/computed-balances.js +++ b/app/scripts/controllers/computed-balances.js @@ -18,7 +18,7 @@ class ComputedbalancesController { /** * Creates a new controller instance * - * @param {ComputedBalancesOptions} [opts] Controller configuration parameters + * @param {ComputedBalancesOptions} [opts] Controller configuration parameters */ constructor (opts = {}) { const { accountTracker, txController, blockTracker } = opts diff --git a/app/scripts/controllers/currency.js b/app/scripts/controllers/currency.js index 480c08b1c..a93aff49b 100644 --- a/app/scripts/controllers/currency.js +++ b/app/scripts/controllers/currency.js @@ -16,9 +16,9 @@ class CurrencyController { * currentCurrency, conversionRate and conversionDate properties * @property {string} currentCurrency A 2-4 character shorthand that describes a specific currency, currently * selected by the user - * @property {number} conversionRate The conversion rate from ETH to the selected currency. + * @property {number} conversionRate The conversion rate from ETH to the selected currency. * @property {string} conversionDate The date at which the conversion rate was set. Expressed in in milliseconds - * since midnight of January 1, 1970 + * since midnight of January 1, 1970 * @property {number} conversionInterval The id of the interval created by the scheduleConversionInterval method. * Used to clear an existing interval on subsequent calls of that method. * @@ -59,7 +59,7 @@ class CurrencyController { /** * A getter for the conversionRate property * - * @returns {string} The conversion rate from ETH to the selected currency. + * @returns {string} The conversion rate from ETH to the selected currency. * */ getConversionRate () { @@ -80,7 +80,7 @@ class CurrencyController { * A getter for the conversionDate property * * @returns {string} The date at which the conversion rate was set. Expressed in milliseconds since midnight of - * January 1, 1970 + * January 1, 1970 * */ getConversionDate () { diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js index 93fde7c57..a50f6dc45 100644 --- a/app/scripts/controllers/network/network.js +++ b/app/scripts/controllers/network/network.js @@ -89,14 +89,21 @@ module.exports = class NetworkController extends EventEmitter { type: 'rpc', rpcTarget, } - this.providerStore.updateState(providerConfig) - this._switchNetwork(providerConfig) + this.providerConfig = providerConfig } async setProviderType (type) { assert.notEqual(type, 'rpc', `NetworkController - cannot call "setProviderType" with type 'rpc'. use "setRpcTarget"`) assert(INFURA_PROVIDER_TYPES.includes(type) || type === LOCALHOST, `NetworkController - Unknown rpc type "${type}"`) const providerConfig = { type } + this.providerConfig = providerConfig + } + + resetConnection () { + this.providerConfig = this.getProviderConfig() + } + + set providerConfig (providerConfig) { this.providerStore.updateState(providerConfig) this._switchNetwork(providerConfig) } @@ -125,7 +132,7 @@ module.exports = class NetworkController extends EventEmitter { } else if (type === LOCALHOST) { this._configureStandardProvider({ rpcUrl: LOCALHOST_RPC_URL }) // url-based rpc endpoints - } else if (type === 'rpc'){ + } else if (type === 'rpc') { this._configureStandardProvider({ rpcUrl: rpcTarget }) } else { throw new Error(`NetworkController - _configureProvider - unknown type "${type}"`) diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index a4ff1207e..b314745f5 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -2,6 +2,7 @@ const ObservableStore = require('obs-store') const normalizeAddress = require('eth-sig-util').normalize const extend = require('xtend') + class PreferencesController { /** @@ -28,7 +29,11 @@ class PreferencesController { featureFlags: {}, currentLocale: opts.initLangCode, identities: {}, + lostIdentities: {}, }, opts.initState) + + this.diagnostics = opts.diagnostics + this.store = new ObservableStore(initState) } // PUBLIC METHODS @@ -63,6 +68,13 @@ class PreferencesController { this.store.updateState({ currentLocale: key }) } + /** + * Updates identities to only include specified addresses. Removes identities + * not included in addresses array + * + * @param {string[]} addresses An array of hex addresses + * + */ setAddresses (addresses) { const oldIdentities = this.store.getState().identities const identities = addresses.reduce((ids, address, index) => { @@ -73,6 +85,68 @@ class PreferencesController { this.store.updateState({ identities }) } + /** + * Adds addresses to the identities object without removing identities + * + * @param {string[]} addresses An array of hex addresses + * + */ + addAddresses (addresses) { + const identities = this.store.getState().identities + addresses.forEach((address) => { + // skip if already exists + if (identities[address]) return + // add missing identity + const identityCount = Object.keys(identities).length + identities[address] = { name: `Account ${identityCount + 1}`, address } + }) + this.store.updateState({ identities }) + } + + /* + * Synchronizes identity entries with known accounts. + * Removes any unknown identities, and returns the resulting selected address. + * + * @param {Array} addresses known to the vault. + * @returns {Promise} selectedAddress the selected address. + */ + syncAddresses (addresses) { + const { identities, lostIdentities } = this.store.getState() + + const newlyLost = {} + Object.keys(identities).forEach((identity) => { + if (!addresses.includes(identity)) { + newlyLost[identity] = identities[identity] + delete identities[identity] + } + }) + + // Identities are no longer present. + if (Object.keys(newlyLost).length > 0) { + + // Notify our servers: + if (this.diagnostics) this.diagnostics.reportOrphans(newlyLost) + + // store lost accounts + for (const key in newlyLost) { + lostIdentities[key] = newlyLost[key] + } + } + + this.store.updateState({ identities, lostIdentities }) + this.addAddresses(addresses) + + // If the selected account is no longer valid, + // select an arbitrary other account: + let selected = this.getSelectedAddress() + if (!addresses.includes(selected)) { + selected = addresses[0] + this.setSelectedAddress(selected) + } + + return selected + } + /** * Setter for the `selectedAddress` property * @@ -111,7 +185,7 @@ class PreferencesController { /** * Adds a new token to the token array, or updates the token if passed an address that already exists. * Modifies the existing tokens array from the store. All objects in the tokens array array AddedToken objects. - * @see AddedToken {@link AddedToken} + * @see AddedToken {@link AddedToken} * * @param {string} rawAddress Hex address of the token contract. May or may not be a checksum address. * @param {string} symbol The symbol of the token @@ -173,6 +247,7 @@ class PreferencesController { * @return {Promise} */ setAccountLabel (account, label) { + if (!account) throw new Error('setAccountLabel requires a valid address, got ' + String(account)) const address = normalizeAddress(account) const {identities} = this.store.getState() identities[address] = identities[address] || {} @@ -197,7 +272,7 @@ class PreferencesController { } /** - * Setter for the `currentAccountTab` property + * Setter for the `currentAccountTab` property * * @param {string} currentAccountTab Specifies the new tab to be marked as current * @returns {Promise} Promise resolves with undefined @@ -215,7 +290,7 @@ class PreferencesController { * The returned list will have a max length of 2. If the _url currently exists it the list, it will be moved to the * end of the list. The current list is modified and returned as a promise. * - * @param {string} _url The rpc url to add to the frequentRpcList. + * @param {string} _url The rpc url to add to the frequentRpcList. * @returns {Promise} The updated frequentRpcList. * */ diff --git a/app/scripts/controllers/recent-blocks.js b/app/scripts/controllers/recent-blocks.js index 033ef1d7e..926268691 100644 --- a/app/scripts/controllers/recent-blocks.js +++ b/app/scripts/controllers/recent-blocks.js @@ -117,7 +117,7 @@ class RecentBlocksController { * * @returns {Promise} Promises undefined */ - async backfill() { + async backfill () { this.blockTracker.once('block', async (block) => { const currentBlockNumber = Number.parseInt(block.number, 16) const blocksToFetch = Math.min(currentBlockNumber, this.historyLength) diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js index aff5db984..8e2288aed 100644 --- a/app/scripts/controllers/transactions/index.js +++ b/app/scripts/controllers/transactions/index.js @@ -10,6 +10,7 @@ const NonceTracker = require('./nonce-tracker') const txUtils = require('./lib/util') const cleanErrorStack = require('../../lib/cleanErrorStack') const log = require('loglevel') +const recipientBlacklistChecker = require('./lib/recipient-blacklist-checker') /** Transaction Controller is an aggregate of sub-controllers and trackers @@ -157,11 +158,14 @@ class TransactionController extends EventEmitter { let txMeta = this.txStateManager.generateTxMeta({ txParams: normalizedTxParams }) this.addTx(txMeta) this.emit('newUnapprovedTx', txMeta) - // add default tx params + try { + // check whether recipient account is blacklisted + recipientBlacklistChecker.checkAccount(txMeta.metamaskNetworkId, normalizedTxParams.to) + // add default tx params txMeta = await this.addTxGasDefaults(txMeta) } catch (error) { - console.log(error) + log.warn(error) this.txStateManager.setTxStatusFailed(txMeta.id, error) throw error } @@ -260,7 +264,12 @@ class TransactionController extends EventEmitter { // must set transaction to submitted/failed before releasing lock nonceLock.releaseLock() } catch (err) { - this.txStateManager.setTxStatusFailed(txId, err) + // this is try-catch wrapped so that we can guarantee that the nonceLock is released + try { + this.txStateManager.setTxStatusFailed(txId, err) + } catch (err) { + log.error(err) + } // must set transaction to submitted/failed before releasing lock if (nonceLock) nonceLock.releaseLock() // continue with error chain diff --git a/app/scripts/controllers/transactions/lib/recipient-blacklist-checker.js b/app/scripts/controllers/transactions/lib/recipient-blacklist-checker.js new file mode 100644 index 000000000..e4df2367e --- /dev/null +++ b/app/scripts/controllers/transactions/lib/recipient-blacklist-checker.js @@ -0,0 +1,24 @@ +const Config = require('./recipient-blacklist.js') + +/** @module*/ +module.exports = { + checkAccount, +} + +/** + * Checks if a specified account on a specified network is blacklisted. + @param networkId {number} + @param account {string} +*/ +function checkAccount (networkId, account) { + + const mainnetId = 1 + if (networkId !== mainnetId) { + return + } + + const accountToCheck = account.toLowerCase() + if (Config.blacklist.includes(accountToCheck)) { + throw new Error('Recipient is a public account') + } +} diff --git a/app/scripts/controllers/transactions/lib/recipient-blacklist.js b/app/scripts/controllers/transactions/lib/recipient-blacklist.js new file mode 100644 index 000000000..08e1a2ccd --- /dev/null +++ b/app/scripts/controllers/transactions/lib/recipient-blacklist.js @@ -0,0 +1,17 @@ +module.exports = { + 'blacklist': [ + // IDEX phisher + '0x9bcb0A9d99d815Bb87ee3191b1399b1Bcc46dc77', + // Ganache default seed phrases + '0x627306090abab3a6e1400e9345bc60c78a8bef57', + '0xf17f52151ebef6c7334fad080c5704d77216b732', + '0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef', + '0x821aea9a577a9b44299b9c15c88cf3087f3b5544', + '0x0d1d4e623d10f9fba5db95830f7d3839406c6af2', + '0x2932b7a2355d6fecc4b5c0b6bd44cc31df247a2e', + '0x2191ef87e392377ec08e7c08eb105ef5448eced5', + '0x0f4f2ac550a1b4e2280d04c21cea7ebd822934b5', + '0x6330a553fc93768f612722bb8c2ec78ac90b3bbc', + '0x5aeda56215b167893e80b4fe645ba6d5bab767de', + ], +} diff --git a/app/scripts/controllers/transactions/nonce-tracker.js b/app/scripts/controllers/transactions/nonce-tracker.js index f8cdc5523..35ca08d6c 100644 --- a/app/scripts/controllers/transactions/nonce-tracker.js +++ b/app/scripts/controllers/transactions/nonce-tracker.js @@ -49,29 +49,35 @@ class NonceTracker { await this._globalMutexFree() // await lock free, then take lock const releaseLock = await this._takeMutex(address) - // evaluate multiple nextNonce strategies - const nonceDetails = {} - const networkNonceResult = await this._getNetworkNextNonce(address) - const highestLocallyConfirmed = this._getHighestLocallyConfirmed(address) - const nextNetworkNonce = networkNonceResult.nonce - const highestSuggested = Math.max(nextNetworkNonce, highestLocallyConfirmed) - - const pendingTxs = this.getPendingTransactions(address) - const localNonceResult = this._getHighestContinuousFrom(pendingTxs, highestSuggested) || 0 - - nonceDetails.params = { - highestLocallyConfirmed, - highestSuggested, - nextNetworkNonce, + try { + // evaluate multiple nextNonce strategies + const nonceDetails = {} + const networkNonceResult = await this._getNetworkNextNonce(address) + const highestLocallyConfirmed = this._getHighestLocallyConfirmed(address) + const nextNetworkNonce = networkNonceResult.nonce + const highestSuggested = Math.max(nextNetworkNonce, highestLocallyConfirmed) + + const pendingTxs = this.getPendingTransactions(address) + const localNonceResult = this._getHighestContinuousFrom(pendingTxs, highestSuggested) || 0 + + nonceDetails.params = { + highestLocallyConfirmed, + highestSuggested, + nextNetworkNonce, + } + nonceDetails.local = localNonceResult + nonceDetails.network = networkNonceResult + + const nextNonce = Math.max(networkNonceResult.nonce, localNonceResult.nonce) + assert(Number.isInteger(nextNonce), `nonce-tracker - nextNonce is not an integer - got: (${typeof nextNonce}) "${nextNonce}"`) + + // return nonce and release cb + return { nextNonce, nonceDetails, releaseLock } + } catch (err) { + // release lock if we encounter an error + releaseLock() + throw err } - nonceDetails.local = localNonceResult - nonceDetails.network = networkNonceResult - - const nextNonce = Math.max(networkNonceResult.nonce, localNonceResult.nonce) - assert(Number.isInteger(nextNonce), `nonce-tracker - nextNonce is not an integer - got: (${typeof nextNonce}) "${nextNonce}"`) - - // return nonce and release cb - return { nextNonce, nonceDetails, releaseLock } } async _getCurrentBlock () { @@ -85,8 +91,8 @@ class NonceTracker { async _globalMutexFree () { const globalMutex = this._lookupMutex('global') - const release = await globalMutex.acquire() - release() + const releaseLock = await globalMutex.acquire() + releaseLock() } async _takeMutex (lockId) { diff --git a/app/scripts/controllers/transactions/pending-tx-tracker.js b/app/scripts/controllers/transactions/pending-tx-tracker.js index 6e2fcb40b..4e41cdaf8 100644 --- a/app/scripts/controllers/transactions/pending-tx-tracker.js +++ b/app/scripts/controllers/transactions/pending-tx-tracker.js @@ -196,14 +196,14 @@ class PendingTransactionTracker extends EventEmitter { async _checkPendingTxs () { const signedTxList = this.getPendingTransactions() // in order to keep the nonceTracker accurate we block it while updating pending transactions - const nonceGlobalLock = await this.nonceTracker.getGlobalLock() + const { releaseLock } = await this.nonceTracker.getGlobalLock() try { await Promise.all(signedTxList.map((txMeta) => this._checkPendingTx(txMeta))) } catch (err) { log.error('PendingTransactionWatcher - Error updating pending transactions') log.error(err) } - nonceGlobalLock.releaseLock() + releaseLock() } /** diff --git a/app/scripts/controllers/transactions/tx-gas-utils.js b/app/scripts/controllers/transactions/tx-gas-utils.js index 36b5cdbc9..ab4031faa 100644 --- a/app/scripts/controllers/transactions/tx-gas-utils.js +++ b/app/scripts/controllers/transactions/tx-gas-utils.js @@ -126,4 +126,4 @@ class TxGasUtil { } } -module.exports = TxGasUtil \ No newline at end of file +module.exports = TxGasUtil diff --git a/app/scripts/controllers/user-actions.js b/app/scripts/controllers/user-actions.js new file mode 100644 index 000000000..f777054b8 --- /dev/null +++ b/app/scripts/controllers/user-actions.js @@ -0,0 +1,17 @@ +const MessageManager = require('./lib/message-manager') +const PersonalMessageManager = require('./lib/personal-message-manager') +const TypedMessageManager = require('./lib/typed-message-manager') + +class UserActionController { + + constructor (opts = {}) { + + this.messageManager = new MessageManager() + this.personalMessageManager = new PersonalMessageManager() + this.typedMessageManager = new TypedMessageManager() + + } + +} + +module.exports = UserActionController diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js index 6d16eebd4..7dd7fda02 100644 --- a/app/scripts/inpage.js +++ b/app/scripts/inpage.js @@ -38,9 +38,30 @@ web3.setProvider = function () { log.debug('MetaMask - overrode web3.setProvider') } log.debug('MetaMask - injected web3') -// export global web3, with usage-detection + setupDappAutoReload(web3, inpageProvider.publicConfigStore) +// export global web3, with usage-detection and deprecation warning + +/* TODO: Uncomment this area once auto-reload.js has been deprecated: +let hasBeenWarned = false +global.web3 = new Proxy(web3, { + get: (_web3, key) => { + // show warning once on web3 access + if (!hasBeenWarned && key !== 'currentProvider') { + console.warn('MetaMask: web3 will be deprecated in the near future in favor of the ethereumProvider \nhttps://github.com/MetaMask/faq/blob/master/detecting_metamask.md#web3-deprecation') + hasBeenWarned = true + } + // return value normally + return _web3[key] + }, + set: (_web3, key, value) => { + // set value normally + _web3[key] = value + }, +}) +*/ + // set web3 defaultAccount inpageProvider.publicConfigStore.subscribe(function (state) { web3.eth.defaultAccount = state.selectedAddress diff --git a/app/scripts/lib/cleanErrorStack.js b/app/scripts/lib/cleanErrorStack.js index fe1bfb0ce..8adf55db7 100644 --- a/app/scripts/lib/cleanErrorStack.js +++ b/app/scripts/lib/cleanErrorStack.js @@ -3,7 +3,7 @@ * @param {Error} err - error * @returns {Error} Error with clean stack trace. */ -function cleanErrorStack(err){ +function cleanErrorStack (err) { var name = err.name name = (name === undefined) ? 'Error' : String(name) diff --git a/app/scripts/lib/contracts/registrar.js b/app/scripts/lib/contracts/registrar.js index 980a64d7f..99ca24458 100644 --- a/app/scripts/lib/contracts/registrar.js +++ b/app/scripts/lib/contracts/registrar.js @@ -1 +1 @@ -module.exports = [{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"resolver","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"label","type":"bytes32"},{"name":"owner","type":"address"}],"name":"setSubnodeOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"ttl","type":"uint64"}],"name":"setTTL","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"ttl","outputs":[{"name":"","type":"uint64"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"resolver","type":"address"}],"name":"setResolver","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"owner","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"owner","type":"address"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":true,"name":"label","type":"bytes32"},{"indexed":false,"name":"owner","type":"address"}],"name":"NewOwner","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"resolver","type":"address"}],"name":"NewResolver","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"ttl","type":"uint64"}],"name":"NewTTL","type":"event"}] \ No newline at end of file +module.exports = [{'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'resolver', 'outputs': [{'name': '', 'type': 'address'}], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'owner', 'outputs': [{'name': '', 'type': 'address'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'label', 'type': 'bytes32'}, {'name': 'owner', 'type': 'address'}], 'name': 'setSubnodeOwner', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'ttl', 'type': 'uint64'}], 'name': 'setTTL', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'ttl', 'outputs': [{'name': '', 'type': 'uint64'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'resolver', 'type': 'address'}], 'name': 'setResolver', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'owner', 'type': 'address'}], 'name': 'setOwner', 'outputs': [], 'payable': false, 'type': 'function'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'owner', 'type': 'address'}], 'name': 'Transfer', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': true, 'name': 'label', 'type': 'bytes32'}, {'indexed': false, 'name': 'owner', 'type': 'address'}], 'name': 'NewOwner', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'resolver', 'type': 'address'}], 'name': 'NewResolver', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'ttl', 'type': 'uint64'}], 'name': 'NewTTL', 'type': 'event'}] diff --git a/app/scripts/lib/contracts/resolver.js b/app/scripts/lib/contracts/resolver.js index f42777cc7..1bf3f90ce 100644 --- a/app/scripts/lib/contracts/resolver.js +++ b/app/scripts/lib/contracts/resolver.js @@ -1,2 +1,2 @@ module.exports = -[{"constant":true,"inputs":[{"name":"interfaceID","type":"bytes4"}],"name":"supportsInterface","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"},{"name":"contentTypes","type":"uint256"}],"name":"ABI","outputs":[{"name":"contentType","type":"uint256"},{"name":"data","type":"bytes"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"x","type":"bytes32"},{"name":"y","type":"bytes32"}],"name":"setPubkey","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"content","outputs":[{"name":"ret","type":"bytes32"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"addr","outputs":[{"name":"ret","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"contentType","type":"uint256"},{"name":"data","type":"bytes"}],"name":"setABI","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"name","outputs":[{"name":"ret","type":"string"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"name","type":"string"}],"name":"setName","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"hash","type":"bytes32"}],"name":"setContent","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"node","type":"bytes32"}],"name":"pubkey","outputs":[{"name":"x","type":"bytes32"},{"name":"y","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"node","type":"bytes32"},{"name":"addr","type":"address"}],"name":"setAddr","outputs":[],"payable":false,"type":"function"},{"inputs":[{"name":"ensAddr","type":"address"}],"payable":false,"type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"a","type":"address"}],"name":"AddrChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"hash","type":"bytes32"}],"name":"ContentChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"name","type":"string"}],"name":"NameChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":true,"name":"contentType","type":"uint256"}],"name":"ABIChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"node","type":"bytes32"},{"indexed":false,"name":"x","type":"bytes32"},{"indexed":false,"name":"y","type":"bytes32"}],"name":"PubkeyChanged","type":"event"}] \ No newline at end of file +[{'constant': true, 'inputs': [{'name': 'interfaceID', 'type': 'bytes4'}], 'name': 'supportsInterface', 'outputs': [{'name': '', 'type': 'bool'}], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'contentTypes', 'type': 'uint256'}], 'name': 'ABI', 'outputs': [{'name': 'contentType', 'type': 'uint256'}, {'name': 'data', 'type': 'bytes'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'x', 'type': 'bytes32'}, {'name': 'y', 'type': 'bytes32'}], 'name': 'setPubkey', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'content', 'outputs': [{'name': 'ret', 'type': 'bytes32'}], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'addr', 'outputs': [{'name': 'ret', 'type': 'address'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'contentType', 'type': 'uint256'}, {'name': 'data', 'type': 'bytes'}], 'name': 'setABI', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'name', 'outputs': [{'name': 'ret', 'type': 'string'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'name', 'type': 'string'}], 'name': 'setName', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'hash', 'type': 'bytes32'}], 'name': 'setContent', 'outputs': [], 'payable': false, 'type': 'function'}, {'constant': true, 'inputs': [{'name': 'node', 'type': 'bytes32'}], 'name': 'pubkey', 'outputs': [{'name': 'x', 'type': 'bytes32'}, {'name': 'y', 'type': 'bytes32'}], 'payable': false, 'type': 'function'}, {'constant': false, 'inputs': [{'name': 'node', 'type': 'bytes32'}, {'name': 'addr', 'type': 'address'}], 'name': 'setAddr', 'outputs': [], 'payable': false, 'type': 'function'}, {'inputs': [{'name': 'ensAddr', 'type': 'address'}], 'payable': false, 'type': 'constructor'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'a', 'type': 'address'}], 'name': 'AddrChanged', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'hash', 'type': 'bytes32'}], 'name': 'ContentChanged', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'name', 'type': 'string'}], 'name': 'NameChanged', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': true, 'name': 'contentType', 'type': 'uint256'}], 'name': 'ABIChanged', 'type': 'event'}, {'anonymous': false, 'inputs': [{'indexed': true, 'name': 'node', 'type': 'bytes32'}, {'indexed': false, 'name': 'x', 'type': 'bytes32'}, {'indexed': false, 'name': 'y', 'type': 'bytes32'}], 'name': 'PubkeyChanged', 'type': 'event'}] diff --git a/app/scripts/lib/createErrorMiddleware.js b/app/scripts/lib/createErrorMiddleware.js index baed99e45..7f6a4bd73 100644 --- a/app/scripts/lib/createErrorMiddleware.js +++ b/app/scripts/lib/createErrorMiddleware.js @@ -59,8 +59,9 @@ function createErrorMiddleware ({ override = true } = {}) { if (!error) { return done() } sanitizeRPCError(error) log.error(`MetaMask - RPC Error: ${error.message}`, error) + done() }) } } -module.exports = createErrorMiddleware \ No newline at end of file +module.exports = createErrorMiddleware diff --git a/app/scripts/lib/createStreamSink.js b/app/scripts/lib/createStreamSink.js new file mode 100644 index 000000000..b93dbc089 --- /dev/null +++ b/app/scripts/lib/createStreamSink.js @@ -0,0 +1,24 @@ +const WritableStream = require('readable-stream').Writable +const promiseToCallback = require('promise-to-callback') + +module.exports = createStreamSink + + +function createStreamSink (asyncWriteFn, _opts) { + return new AsyncWritableStream(asyncWriteFn, _opts) +} + +class AsyncWritableStream extends WritableStream { + + constructor (asyncWriteFn, _opts) { + const opts = Object.assign({ objectMode: true }, _opts) + super(opts) + this._asyncWriteFn = asyncWriteFn + } + + // write from incomming stream to state + _write (chunk, encoding, callback) { + promiseToCallback(this._asyncWriteFn(chunk, encoding))(callback) + } + +} diff --git a/app/scripts/lib/diagnostics-reporter.js b/app/scripts/lib/diagnostics-reporter.js new file mode 100644 index 000000000..569eb3268 --- /dev/null +++ b/app/scripts/lib/diagnostics-reporter.js @@ -0,0 +1,71 @@ +class DiagnosticsReporter { + + constructor ({ firstTimeInfo, version }) { + this.firstTimeInfo = firstTimeInfo + this.version = version + } + + async reportOrphans (orphans) { + try { + return await this.submit({ + accounts: Object.keys(orphans), + metadata: { + type: 'orphans', + }, + }) + } catch (err) { + console.error('DiagnosticsReporter - "reportOrphans" encountered an error:') + console.error(err) + } + } + + async reportMultipleKeyrings (rawKeyrings) { + try { + const keyrings = await Promise.all(rawKeyrings.map(async (keyring, index) => { + return { + index, + type: keyring.type, + accounts: await keyring.getAccounts(), + } + })) + return await this.submit({ + accounts: [], + metadata: { + type: 'keyrings', + keyrings, + }, + }) + } catch (err) { + console.error('DiagnosticsReporter - "reportMultipleKeyrings" encountered an error:') + console.error(err) + } + } + + async submit (message) { + try { + // add metadata + message.metadata.version = this.version + message.metadata.firstTimeInfo = this.firstTimeInfo + return await postData(message) + } catch (err) { + console.error('DiagnosticsReporter - "submit" encountered an error:') + throw err + } + } + +} + +function postData (data) { + const uri = 'https://diagnostics.metamask.io/v1/orphanedAccounts' + return fetch(uri, { + body: JSON.stringify(data), // must match 'Content-Type' header + credentials: 'same-origin', // include, same-origin, *omit + headers: { + 'content-type': 'application/json', + }, + method: 'POST', // *GET, POST, PUT, DELETE, etc. + mode: 'cors', // no-cors, cors, *same-origin + }) +} + +module.exports = DiagnosticsReporter diff --git a/app/scripts/lib/extractEthjsErrorMessage.js b/app/scripts/lib/extractEthjsErrorMessage.js index 0f100756f..4891075c3 100644 --- a/app/scripts/lib/extractEthjsErrorMessage.js +++ b/app/scripts/lib/extractEthjsErrorMessage.js @@ -10,13 +10,13 @@ module.exports = extractEthjsErrorMessage * * @param {string} errorMessage The error message to parse * @returns {string} Returns an error message, either the same as was passed, or the ending message portion of an isEthjsRpcError - * + * * @example * // returns 'Transaction Failed: replacement transaction underpriced' * extractEthjsErrorMessage(`Error: [ethjs-rpc] rpc error with payload {"id":3947817945380,"jsonrpc":"2.0","params":["0xf8eb8208708477359400830398539406012c8cf97bead5deae237070f9587f8e7a266d80b8843d7d3f5a0000000000000000000000000000000000000000000000000000000000081d1a000000000000000000000000000000000000000000000000001ff973cafa800000000000000000000000000000000000000000000000000000038d7ea4c68000000000000000000000000000000000000000000000000000000000000003f48025a04c32a9b630e0d9e7ff361562d850c86b7a884908135956a7e4a336fa0300d19ca06830776423f25218e8d19b267161db526e66895567147015b1f3fc47aef9a3c7"],"method":"eth_sendRawTransaction"} Error: replacement transaction underpriced`) * */ -function extractEthjsErrorMessage(errorMessage) { +function extractEthjsErrorMessage (errorMessage) { const isEthjsRpcError = errorMessage.includes(ethJsRpcSlug) if (isEthjsRpcError) { const payloadAndError = errorMessage.slice(ethJsRpcSlug.length) diff --git a/app/scripts/lib/get-first-preferred-lang-code.js b/app/scripts/lib/get-first-preferred-lang-code.js index 1e6a83ba6..170d508c1 100644 --- a/app/scripts/lib/get-first-preferred-lang-code.js +++ b/app/scripts/lib/get-first-preferred-lang-code.js @@ -2,8 +2,7 @@ const extension = require('extensionizer') const promisify = require('pify') const allLocales = require('../../_locales/index.json') -const isSupported = extension.i18n && extension.i18n.getAcceptLanguages -const getPreferredLocales = isSupported ? promisify( +const getPreferredLocales = extension.i18n ? promisify( extension.i18n.getAcceptLanguages, { errorFirst: false } ) : async () => [] @@ -18,7 +17,21 @@ const existingLocaleCodes = allLocales.map(locale => locale.code.toLowerCase().r * */ async function getFirstPreferredLangCode () { - const userPreferredLocaleCodes = await getPreferredLocales() + let userPreferredLocaleCodes + + try { + userPreferredLocaleCodes = await getPreferredLocales() + } catch (e) { + // Brave currently throws when calling getAcceptLanguages, so this handles that. + userPreferredLocaleCodes = [] + } + + // safeguard for Brave Browser until they implement chrome.i18n.getAcceptLanguages + // https://github.com/MetaMask/metamask-extension/issues/4270 + if (!userPreferredLocaleCodes) { + userPreferredLocaleCodes = [] + } + const firstPreferredLangCode = userPreferredLocaleCodes .map(code => code.toLowerCase()) .find(code => existingLocaleCodes.includes(code)) @@ -26,3 +39,4 @@ async function getFirstPreferredLangCode () { } module.exports = getFirstPreferredLangCode + diff --git a/app/scripts/lib/getObjStructure.js b/app/scripts/lib/getObjStructure.js index 52250d3fb..9c92879fb 100644 --- a/app/scripts/lib/getObjStructure.js +++ b/app/scripts/lib/getObjStructure.js @@ -18,12 +18,12 @@ module.exports = getObjStructure * Creates an object that represents the structure of the given object. It replaces all values with the result of their * type. * - * @param {object} obj The object for which a 'structure' will be returned. Usually a plain object and not a class. + * @param {object} obj The object for which a 'structure' will be returned. Usually a plain object and not a class. * @returns {object} The "mapped" version of a deep clone of the passed object, with each non-object property value * replaced with the javascript type of that value. * */ -function getObjStructure(obj) { +function getObjStructure (obj) { const structure = clone(obj) return deepMap(structure, (value) => { return value === null ? 'null' : typeof value @@ -38,7 +38,7 @@ function getObjStructure(obj) { * @param {Function} visit The modifier to apply to each non-object property value * @returns {object} The modified object */ -function deepMap(target = {}, visit) { +function deepMap (target = {}, visit) { Object.entries(target).forEach(([key, value]) => { if (typeof value === 'object' && value !== null) { target[key] = deepMap(value, visit) diff --git a/app/scripts/lib/ipfsContent.js b/app/scripts/lib/ipfsContent.js index 2ddbe5558..a6b99b2f9 100644 --- a/app/scripts/lib/ipfsContent.js +++ b/app/scripts/lib/ipfsContent.js @@ -3,12 +3,12 @@ const resolver = require('./resolver.js') module.exports = function (provider) { extension.webRequest.onBeforeRequest.addListener(details => { - const urlhttpreplace = details.url.replace(/\w+?:\/\//, "") - const url = urlhttpreplace.replace(/[\\\/].*/g, "") - let domainhtml = urlhttpreplace.match(/[\\\/].*/g) + const urlhttpreplace = details.url.replace(/\w+?:\/\//, '') + const url = urlhttpreplace.replace(/[\\/].*/g, '') // eslint-disable-line no-useless-escape + let domainhtml = urlhttpreplace.match(/[\\/].*/g) // eslint-disable-line no-useless-escape let clearTime = null - let name = url.replace(/\/$/g, "") - if (domainhtml === null) domainhtml = [""] + const name = url.replace(/\/$/g, '') + if (domainhtml === null) domainhtml = [''] extension.tabs.getSelected(null, tab => { extension.tabs.update(tab.id, { url: 'loading.html' }) diff --git a/app/scripts/lib/local-store.js b/app/scripts/lib/local-store.js index 139ff86bd..fbcba09cd 100644 --- a/app/scripts/lib/local-store.js +++ b/app/scripts/lib/local-store.js @@ -8,7 +8,7 @@ module.exports = class ExtensionStore { /** * @constructor */ - constructor() { + constructor () { this.isSupported = !!(extension.storage.local) if (!this.isSupported) { log.error('Storage local API not available.') @@ -19,7 +19,7 @@ module.exports = class ExtensionStore { * Returns all of the keys currently saved * @return {Promise<*>} */ - async get() { + async get () { if (!this.isSupported) return undefined const result = await this._get() // extension.storage.local always returns an obj @@ -36,7 +36,7 @@ module.exports = class ExtensionStore { * @param {object} state - The state to set * @return {Promise} */ - async set(state) { + async set (state) { return this._set(state) } @@ -45,7 +45,7 @@ module.exports = class ExtensionStore { * @private * @return {object} the key-value map from local storage */ - _get() { + _get () { const local = extension.storage.local return new Promise((resolve, reject) => { local.get(null, (/** @type {any} */ result) => { @@ -65,7 +65,7 @@ module.exports = class ExtensionStore { * @return {Promise} * @private */ - _set(obj) { + _set (obj) { const local = extension.storage.local return new Promise((resolve, reject) => { local.set(obj, () => { @@ -85,6 +85,6 @@ module.exports = class ExtensionStore { * @param {object} obj - The object to check * @returns {boolean} */ -function isEmpty(obj) { +function isEmpty (obj) { return Object.keys(obj).length === 0 } diff --git a/app/scripts/lib/notification-manager.js b/app/scripts/lib/notification-manager.js index 5dfb42078..969a9459a 100644 --- a/app/scripts/lib/notification-manager.js +++ b/app/scripts/lib/notification-manager.js @@ -26,13 +26,15 @@ class NotificationManager { // bring focus to existing chrome popup extension.windows.update(popup.id, { focused: true }) } else { + const cb = (currentPopup) => { this._popupId = currentPopup.id } // create new notification popup - extension.windows.create({ + const creation = extension.windows.create({ url: 'notification.html', type: 'popup', width, height, - }) + }, cb) + creation && creation.then && creation.then(cb) } }) } @@ -84,7 +86,7 @@ class NotificationManager { } /** - * Given an array of windows, returns the first that has a 'popup' type, or null if no such window exists. + * Given an array of windows, returns the 'popup' that has been opened by MetaMask, or null if no such window exists. * * @private * @param {array} windows An array of objects containing data about the open MetaMask extension windows. @@ -93,7 +95,7 @@ class NotificationManager { _getPopupIn (windows) { return windows ? windows.find((win) => { // Returns notification popup - return (win && win.type === 'popup') + return (win && win.type === 'popup' && win.id === this._popupId) }) : null } diff --git a/app/scripts/lib/port-stream.js b/app/scripts/lib/port-stream.js index 5c4224fd9..fd65d94f3 100644 --- a/app/scripts/lib/port-stream.js +++ b/app/scripts/lib/port-stream.js @@ -58,7 +58,7 @@ PortDuplexStream.prototype._read = noop /** * Called internally when data should be written to * this writable stream. - * + * * @private * @param {*} msg Arbitrary object to write * @param {string} encoding Encoding to use when writing payload diff --git a/app/scripts/lib/reportFailedTxToSentry.js b/app/scripts/lib/reportFailedTxToSentry.js index e09f4f1f8..df5661e59 100644 --- a/app/scripts/lib/reportFailedTxToSentry.js +++ b/app/scripts/lib/reportFailedTxToSentry.js @@ -7,7 +7,7 @@ module.exports = reportFailedTxToSentry // for sending to sentry // -function reportFailedTxToSentry({ raven, txMeta }) { +function reportFailedTxToSentry ({ raven, txMeta }) { const errorMessage = 'Transaction Failed: ' + extractEthjsErrorMessage(txMeta.err.message) raven.captureMessage(errorMessage, { // "extra" key is required by Sentry diff --git a/app/scripts/lib/setupMetamaskMeshMetrics.js b/app/scripts/lib/setupMetamaskMeshMetrics.js index 02690a948..fd3b93fc4 100644 --- a/app/scripts/lib/setupMetamaskMeshMetrics.js +++ b/app/scripts/lib/setupMetamaskMeshMetrics.js @@ -4,7 +4,7 @@ module.exports = setupMetamaskMeshMetrics /** * Injects an iframe into the current document for testing */ -function setupMetamaskMeshMetrics() { +function setupMetamaskMeshMetrics () { const testingContainer = document.createElement('iframe') testingContainer.src = 'https://metamask.github.io/mesh-testing/' console.log('Injecting MetaMask Mesh testing client') diff --git a/app/scripts/lib/setupRaven.js b/app/scripts/lib/setupRaven.js index d164827ab..3f69fb3bb 100644 --- a/app/scripts/lib/setupRaven.js +++ b/app/scripts/lib/setupRaven.js @@ -7,7 +7,7 @@ const DEV = 'https://f59f3dd640d2429d9d0e2445a87ea8e1@sentry.io/273496' module.exports = setupRaven // Setup raven / sentry remote error reporting -function setupRaven(opts) { +function setupRaven (opts) { const { release } = opts let ravenTarget @@ -21,7 +21,7 @@ function setupRaven(opts) { const client = Raven.config(ravenTarget, { release, - transport: function(opts) { + transport: function (opts) { const report = opts.data try { // handle error-like non-error exceptions @@ -42,7 +42,7 @@ function setupRaven(opts) { return Raven } -function rewriteErrorLikeExceptions(report) { +function rewriteErrorLikeExceptions (report) { // handle errors that lost their error-ness in serialization (e.g. dnode) rewriteErrorMessages(report, (errorMessage) => { if (!errorMessage.includes('Non-Error exception captured with keys:')) return errorMessage @@ -51,7 +51,7 @@ function rewriteErrorLikeExceptions(report) { }) } -function simplifyErrorMessages(report) { +function simplifyErrorMessages (report) { rewriteErrorMessages(report, (errorMessage) => { // simplify ethjs error messages errorMessage = extractEthjsErrorMessage(errorMessage) @@ -64,9 +64,9 @@ function simplifyErrorMessages(report) { }) } -function rewriteErrorMessages(report, rewriteFn) { +function rewriteErrorMessages (report, rewriteFn) { // rewrite top level message - report.message = rewriteFn(report.message) + if (report.message) report.message = rewriteFn(report.message) // rewrite each exception message if (report.exception && report.exception.values) { report.exception.values.forEach(item => { @@ -75,7 +75,7 @@ function rewriteErrorMessages(report, rewriteFn) { } } -function rewriteReportUrls(report) { +function rewriteReportUrls (report) { // update request url report.request.url = toMetamaskUrl(report.request.url) // update exception stack trace @@ -88,7 +88,7 @@ function rewriteReportUrls(report) { } } -function toMetamaskUrl(origUrl) { +function toMetamaskUrl (origUrl) { const filePath = origUrl.split(location.origin)[1] if (!filePath) return origUrl const metamaskUrl = `metamask${filePath}` diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index a570f2567..b4d39031a 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -139,6 +139,8 @@ module.exports = class MetamaskController extends EventEmitter { const address = addresses[0] this.preferencesController.setSelectedAddress(address) } + // ensure preferences + identities controller know about all addresses + this.preferencesController.addAddresses(addresses) this.accountTracker.syncWithAddresses(addresses) }) @@ -179,9 +181,6 @@ module.exports = class MetamaskController extends EventEmitter { version, firstVersion: initState.firstTimeInfo.version, }) - this.noticeController.updateNoticesList() - // to be uncommented when retrieving notices from a remote server. - // this.noticeController.startPolling() this.shapeshiftController = new ShapeShiftController({ initState: initState.ShapeShiftController, @@ -354,7 +353,7 @@ module.exports = class MetamaskController extends EventEmitter { importAccountWithStrategy: nodeify(this.importAccountWithStrategy, this), // vault management - submitPassword: nodeify(keyringController.submitPassword, keyringController), + submitPassword: nodeify(this.submitPassword, this), // network management setProviderType: nodeify(networkController.setProviderType, networkController), @@ -384,6 +383,8 @@ module.exports = class MetamaskController extends EventEmitter { updateAndApproveTransaction: nodeify(txController.updateAndApproveTransaction, txController), retryTransaction: nodeify(this.retryTransaction, this), getFilteredTxList: nodeify(txController.getFilteredTxList, txController), + isNonceTaken: nodeify(txController.isNonceTaken, txController), + estimateGas: nodeify(this.estimateGas, this), // messageManager signMessage: nodeify(this.signMessage, this), @@ -404,7 +405,6 @@ module.exports = class MetamaskController extends EventEmitter { } - //============================================================================= // VAULT / KEYRING RELATED METHODS //============================================================================= @@ -424,28 +424,24 @@ module.exports = class MetamaskController extends EventEmitter { * @returns {Object} vault */ async createNewVaultAndKeychain (password) { - const release = await this.createVaultMutex.acquire() - let vault - + const releaseLock = await this.createVaultMutex.acquire() try { + let vault const accounts = await this.keyringController.getAccounts() - if (accounts.length > 0) { vault = await this.keyringController.fullUpdate() - } else { vault = await this.keyringController.createNewVaultAndKeychain(password) const accounts = await this.keyringController.getAccounts() this.preferencesController.setAddresses(accounts) this.selectFirstIdentity() } - release() + releaseLock() + return vault } catch (err) { - release() + releaseLock() throw err } - - return vault } /** @@ -454,20 +450,46 @@ module.exports = class MetamaskController extends EventEmitter { * @param {} seed */ async createNewVaultAndRestore (password, seed) { - const release = await this.createVaultMutex.acquire() + const releaseLock = await this.createVaultMutex.acquire() try { + // clear known identities + this.preferencesController.setAddresses([]) + // create new vault const vault = await this.keyringController.createNewVaultAndRestore(password, seed) + // set new identities const accounts = await this.keyringController.getAccounts() this.preferencesController.setAddresses(accounts) this.selectFirstIdentity() - release() + releaseLock() return vault } catch (err) { - release() + releaseLock() throw err } } + /* + * Submits the user's password and attempts to unlock the vault. + * Also synchronizes the preferencesController, to ensure its schema + * is up to date with known accounts once the vault is decrypted. + * + * @param {string} password - The user's password + * @returns {Promise} - The keyringController update. + */ + async submitPassword (password) { + await this.keyringController.submitPassword(password) + const accounts = await this.keyringController.getAccounts() + + // verify keyrings + const nonSimpleKeyrings = this.keyringController.keyrings.filter(keyring => keyring.type !== 'Simple Key Pair') + if (nonSimpleKeyrings.length > 1 && this.diagnostics) { + await this.diagnostics.reportMultipleKeyrings(nonSimpleKeyrings) + } + + await this.preferencesController.syncAddresses(accounts) + return this.keyringController.fullUpdate() + } + /** * @type Identity * @property {string} name - The account nickname. @@ -592,10 +614,7 @@ module.exports = class MetamaskController extends EventEmitter { async resetAccount () { const selectedAddress = this.preferencesController.getSelectedAddress() this.txController.wipeTransactions(selectedAddress) - - const networkController = this.networkController - const oldType = networkController.getProviderConfig().type - await networkController.setProviderType(oldType, true) + this.networkController.resetConnection() return selectedAddress } @@ -922,6 +941,18 @@ module.exports = class MetamaskController extends EventEmitter { return state } + estimateGas (estimateGasParams) { + return new Promise((resolve, reject) => { + return this.txController.txGasUtil.query.estimateGas(estimateGasParams, (err, res) => { + if (err) { + return reject(err) + } + + return resolve(res) + }) + }) + } + //============================================================================= // PASSWORD MANAGEMENT //============================================================================= @@ -930,7 +961,7 @@ module.exports = class MetamaskController extends EventEmitter { * Allows a user to begin the seed phrase recovery process. * @param {Function} cb - A callback function called when complete. */ - markPasswordForgotten(cb) { + markPasswordForgotten (cb) { this.configManager.setPasswordForgotten(true) this.sendUpdate() cb() @@ -940,7 +971,7 @@ module.exports = class MetamaskController extends EventEmitter { * Allows a user to end the seed phrase recovery process. * @param {Function} cb - A callback function called when complete. */ - unMarkPasswordForgotten(cb) { + unMarkPasswordForgotten (cb) { this.configManager.setPasswordForgotten(false) this.sendUpdate() cb() diff --git a/app/scripts/migrations/013.js b/app/scripts/migrations/013.js index 15a9b28d4..fb7131f8e 100644 --- a/app/scripts/migrations/013.js +++ b/app/scripts/migrations/013.js @@ -28,7 +28,7 @@ module.exports = { function transformState (state) { const newState = state const { config } = newState - if ( config && config.provider ) { + if (config && config.provider) { if (config.provider.type === 'testnet') { newState.config.provider.type = 'ropsten' } diff --git a/app/scripts/migrations/023.js b/app/scripts/migrations/023.js index 151496b06..18493a789 100644 --- a/app/scripts/migrations/023.js +++ b/app/scripts/migrations/023.js @@ -35,10 +35,10 @@ function transformState (state) { if (transactions.length <= 40) return newState - let reverseTxList = transactions.reverse() + const reverseTxList = transactions.reverse() let stripping = true while (reverseTxList.length > 40 && stripping) { - let txIndex = reverseTxList.findIndex((txMeta) => { + const txIndex = reverseTxList.findIndex((txMeta) => { return (txMeta.status === 'failed' || txMeta.status === 'rejected' || txMeta.status === 'confirmed' || diff --git a/app/scripts/migrations/026.js b/app/scripts/migrations/026.js index 1b8a91a45..4e907e09c 100644 --- a/app/scripts/migrations/026.js +++ b/app/scripts/migrations/026.js @@ -27,7 +27,7 @@ module.exports = { function transformState (state) { if (!state.KeyringController || !state.PreferencesController) { - return + return state } if (!state.KeyringController.walletNicknames) { diff --git a/app/scripts/notice-controller.js b/app/scripts/notice-controller.js index 14a63eae7..2def4371e 100644 --- a/app/scripts/notice-controller.js +++ b/app/scripts/notice-controller.js @@ -2,7 +2,7 @@ const EventEmitter = require('events').EventEmitter const semver = require('semver') const extend = require('xtend') const ObservableStore = require('obs-store') -const hardCodedNotices = require('../../notices/notices.json') +const hardCodedNotices = require('../../notices/notices.js') const uniqBy = require('lodash.uniqby') module.exports = class NoticeController extends EventEmitter { @@ -16,8 +16,12 @@ module.exports = class NoticeController extends EventEmitter { noticesList: [], }, opts.initState) this.store = new ObservableStore(initState) + // setup memStore this.memStore = new ObservableStore({}) this.store.subscribe(() => this._updateMemstore()) + this._updateMemstore() + // pull in latest notices + this.updateNoticesList() } getNoticesList () { @@ -29,9 +33,9 @@ module.exports = class NoticeController extends EventEmitter { return notices.filter((notice) => notice.read === false) } - getLatestUnreadNotice () { + getNextUnreadNotice () { const unreadNotices = this.getUnreadNotices() - return unreadNotices[unreadNotices.length - 1] + return unreadNotices[0] } async setNoticesList (noticesList) { @@ -47,7 +51,7 @@ module.exports = class NoticeController extends EventEmitter { notices[index].read = true notices[index].body = '' this.setNoticesList(notices) - const latestNotice = this.getLatestUnreadNotice() + const latestNotice = this.getNextUnreadNotice() cb(null, latestNotice) } catch (err) { cb(err) @@ -64,15 +68,6 @@ module.exports = class NoticeController extends EventEmitter { return result } - startPolling () { - if (this.noticePoller) { - clearInterval(this.noticePoller) - } - this.noticePoller = setInterval(() => { - this.noticeController.updateNoticesList() - }, 300000) - } - _mergeNotices (oldNotices, newNotices) { return uniqBy(oldNotices.concat(newNotices), 'id') } @@ -91,19 +86,15 @@ module.exports = class NoticeController extends EventEmitter { }) } - _mapNoticeIds (notices) { - return notices.map((notice) => notice.id) - } - async _retrieveNoticeData () { - // Placeholder for the API. + // Placeholder for remote notice API. return hardCodedNotices } _updateMemstore () { - const lastUnreadNotice = this.getLatestUnreadNotice() - const noActiveNotices = !lastUnreadNotice - this.memStore.updateState({ lastUnreadNotice, noActiveNotices }) + const nextUnreadNotice = this.getNextUnreadNotice() + const noActiveNotices = !nextUnreadNotice + this.memStore.updateState({ nextUnreadNotice, noActiveNotices }) } } diff --git a/app/scripts/popup-core.js b/app/scripts/popup-core.js index 6325b8a8d..db885ec93 100644 --- a/app/scripts/popup-core.js +++ b/app/scripts/popup-core.js @@ -12,7 +12,7 @@ module.exports = initializePopup /** * Asynchronously initializes the MetaMask popup UI * - * @param {{ container: Element, connectionStream: * }} config Popup configuration object + * @param {{ container: Element, connectionStream: * }} config Popup configuration object * @param {Function} cb Called when initialization is complete */ function initializePopup ({ container, connectionStream }, cb) { diff --git a/app/scripts/ui.js b/app/scripts/ui.js index bdab29c1e..9bf97be87 100644 --- a/app/scripts/ui.js +++ b/app/scripts/ui.js @@ -14,7 +14,7 @@ const log = require('loglevel') start().catch(log.error) -async function start() { +async function start () { // create platform global global.platform = new ExtensionPlatform() diff --git a/development/announcer.js b/development/announcer.js index e97ea65b6..ea1bfdd36 100644 --- a/development/announcer.js +++ b/development/announcer.js @@ -7,6 +7,6 @@ var changelog = fs.readFileSync(path.join(__dirname, '..', 'CHANGELOG.md')).toSt var log = changelog.split(version)[1].split('##')[0].trim() -let msg = `*MetaMask ${version}* now published! It should auto-update soon!\n${log}` +const msg = `*MetaMask ${version}* now published! It should auto-update soon!\n${log}` console.log(msg) diff --git a/development/backGroundConnectionModifiers.js b/development/backGroundConnectionModifiers.js index ffbe49d4d..665f72898 100644 --- a/development/backGroundConnectionModifiers.js +++ b/development/backGroundConnectionModifiers.js @@ -1,5 +1,5 @@ module.exports = { - "confirm sig requests": { + 'confirm sig requests': { signMessage: (msgData, cb) => { const stateUpdate = { unapprovedMsgs: {}, diff --git a/development/beefy.js b/development/beefy.js index 9eff94320..c1c436cb6 100644 --- a/development/beefy.js +++ b/development/beefy.js @@ -1,17 +1,14 @@ const beefy = require('beefy') const http = require('http') -const fs = require('fs') -const path = require('path') - const port = 8124 const handler = beefy({ - entries: {'mocker.js': 'bundle.js'} - , cwd: __dirname - , live: true - , open: true - , quiet: false - , bundlerFlags: ['-t', 'brfs'] + entries: {'mocker.js': 'bundle.js'}, + cwd: __dirname, + live: true, + open: true, + quiet: false, + bundlerFlags: ['-t', 'brfs'], }) diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js index 88614ca5c..96b5572fe 100755 --- a/development/metamaskbot-build-announce.js +++ b/development/metamaskbot-build-announce.js @@ -4,7 +4,7 @@ const VERSION = require('../dist/chrome/manifest.json').version start().catch(console.error) -async function start() { +async function start () { const GITHUB_COMMENT_TOKEN = process.env.GITHUB_COMMENT_TOKEN const CIRCLE_PULL_REQUEST = process.env.CIRCLE_PULL_REQUEST @@ -20,7 +20,7 @@ async function start() { } const CIRCLE_PR_NUMBER = CIRCLE_PULL_REQUEST.split('/').pop() - const SHORT_SHA1 = CIRCLE_SHA1.slice(0,7) + const SHORT_SHA1 = CIRCLE_SHA1.slice(0, 7) const BUILD_LINK_BASE = `https://${CIRCLE_BUILD_NUM}-42009758-gh.circle-artifacts.com/0` const MASCARA = `${BUILD_LINK_BASE}/builds/mascara/home.html` diff --git a/development/mock-dev.js b/development/mock-dev.js index f332633d5..15f6ad4bf 100644 --- a/development/mock-dev.js +++ b/development/mock-dev.js @@ -12,7 +12,6 @@ * To use, run `npm run mock`. */ -const extend = require('xtend') const render = require('react-dom').render const h = require('react-hyperscript') const Root = require('../ui/app/root') @@ -24,7 +23,6 @@ const Selector = require('./selector') const MetamaskController = require('../app/scripts/metamask-controller') const firstTimeState = require('../app/scripts/first-time-state') const ExtensionPlatform = require('../app/scripts/platforms/extension') -const extension = require('./mockExtension') const noop = function () {} const log = require('loglevel') @@ -81,14 +79,14 @@ const controller = new MetamaskController({ initState: firstTimeState, }) global.metamaskController = controller -global.platform = new ExtensionPlatform +global.platform = new ExtensionPlatform() // // User Interface // actions._setBackgroundConnection(controller.getApi()) -actions.update = function(stateName) { +actions.update = function (stateName) { selectedView = stateName updateQueryParams(stateName) const newState = states[selectedView] @@ -98,7 +96,7 @@ actions.update = function(stateName) { } } -function modifyBackgroundConnection(backgroundConnectionModifier) { +function modifyBackgroundConnection (backgroundConnectionModifier) { const modifiedBackgroundConnection = Object.assign({}, controller.getApi(), backgroundConnectionModifier) actions._setBackgroundConnection(modifiedBackgroundConnection) } @@ -112,7 +110,7 @@ var store = configureStore(firstState) // start app startApp() -function startApp(){ +function startApp () { const body = document.body const container = document.createElement('div') container.id = 'test-container' diff --git a/development/mockExtension.js b/development/mockExtension.js index ac03d965c..634d4263a 100644 --- a/development/mockExtension.js +++ b/development/mockExtension.js @@ -39,6 +39,6 @@ extension.runtime.reload = noop extension.tabs.create = noop extension.runtime.getManifest = function () { return { - version: 'development' + version: 'development', } -} \ No newline at end of file +} diff --git a/development/run-version-bump.js b/development/run-version-bump.js index 98757f58e..32fed1865 100644 --- a/development/run-version-bump.js +++ b/development/run-version-bump.js @@ -11,7 +11,7 @@ const bumpType = normalizeType(process.argv[2]) start().catch(console.error) -async function start() { +async function start () { const changeBuffer = await readFile(changelogPath) const changelog = changeBuffer.toString() diff --git a/development/selector.js b/development/selector.js index fd387df15..2673d0fe3 100644 --- a/development/selector.js +++ b/development/selector.js @@ -11,7 +11,7 @@ function NewComponent () { NewComponent.prototype.render = function () { const props = this.props - let { + const { states, selectedKey, actions, @@ -28,7 +28,7 @@ NewComponent.prototype.render = function () { margin: '20px 20px 0px', }, value: selected, - onChange:(event) => { + onChange: (event) => { const selectedKey = event.target.value const backgroundConnectionModifier = backGroundConnectionModifiers[selectedKey] modifyBackgroundConnection(backgroundConnectionModifier || {}) diff --git a/development/sentry-publish.js b/development/sentry-publish.js index ab3acabbd..7a6d55115 100644 --- a/development/sentry-publish.js +++ b/development/sentry-publish.js @@ -5,7 +5,7 @@ const VERSION = require('../dist/chrome/manifest.json').version start().catch(console.error) -async function start(){ +async function start () { const authWorked = await checkIfAuthWorks() if (!authWorked) { console.log(`Sentry auth failed...`) @@ -31,21 +31,21 @@ async function start(){ console.log('all done!') } -async function checkIfAuthWorks() { +async function checkIfAuthWorks () { const itWorked = await doesNotFail(async () => { await exec(`sentry-cli releases --org 'metamask' --project 'metamask' list`) }) return itWorked } -async function checkIfVersionExists() { +async function checkIfVersionExists () { const versionAlreadyExists = await doesNotFail(async () => { await exec(`sentry-cli releases --org 'metamask' --project 'metamask' info ${VERSION}`) }) return versionAlreadyExists } -async function doesNotFail(asyncFn) { +async function doesNotFail (asyncFn) { try { await asyncFn() return true diff --git a/development/sourcemap-validator.js b/development/sourcemap-validator.js index edc97667a..143888128 100644 --- a/development/sourcemap-validator.js +++ b/development/sourcemap-validator.js @@ -1,6 +1,6 @@ const fs = require('fs') const { SourceMapConsumer } = require('source-map') - +const path = require('path') // // Utility to help check if sourcemaps are working // @@ -11,9 +11,11 @@ const { SourceMapConsumer } = require('source-map') start() -async function start() { - const rawBuild = fs.readFileSync(__dirname + '/../dist/chrome/inpage.js', 'utf8') - const rawSourceMap = fs.readFileSync(__dirname + '/../dist/sourcemaps/inpage.js.map', 'utf8') + +async function start () { + const rawBuild = fs.readFileSync(path.join(__dirname, '/../dist/chrome/', 'inpage.js') + , 'utf8') + const rawSourceMap = fs.readFileSync(path.join(__dirname, '/../dist/sourcemaps/', 'inpage.js.map'), 'utf8') const consumer = await new SourceMapConsumer(rawSourceMap) console.log('hasContentsOfAllSources:', consumer.hasContentsOfAllSources(), '\n') @@ -34,7 +36,7 @@ async function start() { if (result.source === 'node_modules/web3/dist/web3.min.js') return // minified mess const sourceContent = consumer.sourceContentFor(result.source) const sourceLines = sourceContent.split('\n') - const line = sourceLines[result.line-1] + const line = sourceLines[result.line - 1] console.log(`\n========================== ${result.source} ====================================\n`) console.log(line) console.log(`\n==============================================================================\n`) @@ -42,8 +44,9 @@ async function start() { }) } -function indicesOf(substring, string) { - var a=[],i=-1; - while((i=string.indexOf(substring,i+1)) >= 0) a.push(i); - return a; +function indicesOf (substring, string) { + var a = [] + var i = -1 + while ((i = string.indexOf(substring, i + 1)) >= 0) a.push(i) + return a } diff --git a/development/states/add-token.json b/development/states/add-token.json index 9c0f16372..84ad5dd4c 100644 --- a/development/states/add-token.json +++ b/development/states/add-token.json @@ -75,9 +75,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { diff --git a/development/states/conf-tx.json b/development/states/conf-tx.json index 0f1a13751..57f667cb9 100644 --- a/development/states/conf-tx.json +++ b/development/states/conf-tx.json @@ -52,7 +52,7 @@ "conversionRate": 12.7200827, "conversionDate": 1487363041, "noActiveNotices": true, - "lastUnreadNotice": { + "nextUnreadNotice": { "read": true, "date": "Thu Feb 09 2017", "title": "Terms of Use", diff --git a/development/states/confirm-new-ui.json b/development/states/confirm-new-ui.json index ae3098ecb..71ccbd96c 100644 --- a/development/states/confirm-new-ui.json +++ b/development/states/confirm-new-ui.json @@ -151,5 +151,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/confirm-sig-requests.json b/development/states/confirm-sig-requests.json index b51003d11..3c9caafb0 100644 --- a/development/states/confirm-sig-requests.json +++ b/development/states/confirm-sig-requests.json @@ -115,9 +115,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { diff --git a/development/states/currency-localization.json b/development/states/currency-localization.json index 302e24c11..8c8b18a91 100644 --- a/development/states/currency-localization.json +++ b/development/states/currency-localization.json @@ -76,9 +76,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { diff --git a/development/states/first-time.json b/development/states/first-time.json index fe9188b80..f10eefd35 100644 --- a/development/states/first-time.json +++ b/development/states/first-time.json @@ -12,7 +12,7 @@ "conversionRate": 12.7527416, "conversionDate": 1487624341, "noActiveNotices": false, - "lastUnreadNotice": { + "nextUnreadNotice": { "read": false, "date": "Thu Feb 09 2017", "title": "Terms of Use", diff --git a/development/states/notice.json b/development/states/notice.json index efeffab08..4401393c3 100644 --- a/development/states/notice.json +++ b/development/states/notice.json @@ -13,7 +13,7 @@ "conversionRate": 8.3533002, "conversionDate": 1481671082, "noActiveNotices": false, - "lastUnreadNotice": { + "nextUnreadNotice": { "read": false, "date": "Tue Dec 13 2016", "title": "MultiVault Support", diff --git a/development/states/send-edit.json b/development/states/send-edit.json index ae3098ecb..b05acbf3b 100644 --- a/development/states/send-edit.json +++ b/development/states/send-edit.json @@ -94,9 +94,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { @@ -151,5 +151,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/send-new-ui.json b/development/states/send-new-ui.json index 1297a9139..b457749ee 100644 --- a/development/states/send-new-ui.json +++ b/development/states/send-new-ui.json @@ -76,9 +76,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { @@ -130,5 +130,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/states/tx-list-items.json b/development/states/tx-list-items.json index d567e3fed..f22fd0a56 100644 --- a/development/states/tx-list-items.json +++ b/development/states/tx-list-items.json @@ -83,9 +83,9 @@ { "type": "HD Key Tree", "accounts": [ - "fdea65c8e26263f6d9a1b5de9555d2931a33b825", - "c5b8dbac4c1d3f152cdeb400e2313f309c410acb", - "2f8d4a878cfa04a6e60d46362f5644deab66572d" + "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", + "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", + "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" ] }, { @@ -124,5 +124,10 @@ "scrollToBottom": false, "forgottenPassword": null }, - "identities": {} + "identities": {}, + "send": { + "fromDropdownOpen": false, + "toDropdownOpen": false, + "errors": {} + } } diff --git a/development/ui-dev.js b/development/ui-dev.js index cac433909..bae0ce50e 100644 --- a/development/ui-dev.js +++ b/development/ui-dev.js @@ -29,9 +29,8 @@ log.setDefaultLevel(1) // Query String const qs = require('qs') -let queryString = qs.parse(window.location.href.split('#')[1]) +const queryString = qs.parse(window.location.href.split('#')[1]) let selectedView = queryString.view || 'first time' -const firstState = states[selectedView] updateQueryParams(selectedView) // CSS @@ -39,15 +38,15 @@ const MetaMaskUiCss = require('../ui/css') const injectCss = require('inject-css') -function updateQueryParams(newView) { +function updateQueryParams (newView) { queryString.view = newView const params = qs.stringify(queryString) window.location.href = window.location.href.split('#')[0] + `#${params}` } const actions = { - _setBackgroundConnection(){}, - update: function(stateName) { + _setBackgroundConnection () {}, + update: function (stateName) { selectedView = stateName updateQueryParams(stateName) const newState = states[selectedView] @@ -67,7 +66,7 @@ var store = configureStore(states[selectedView]) // start app startApp() -function startApp(){ +function startApp () { const body = document.body const container = document.createElement('div') container.id = 'test-container' diff --git a/development/verify-locale-strings.js b/development/verify-locale-strings.js index 8dc0a30f1..0eef2b35d 100644 --- a/development/verify-locale-strings.js +++ b/development/verify-locale-strings.js @@ -1,4 +1,4 @@ -//////////////////////////////////////////////////////////////////////////////// +// ////////////////////////////////////////////////////////////////////////////// // // Locale verification script // @@ -8,7 +8,7 @@ // // will check the given locale against the strings in english // -//////////////////////////////////////////////////////////////////////////////// +// ////////////////////////////////////////////////////////////////////////////// const fs = require('fs') const path = require('path') @@ -20,7 +20,7 @@ const specifiedLocale = process.argv[2] if (specifiedLocale) { console.log(`Verifying selected locale "${specifiedLocale}":\n\n`) const locale = localeIndex.find(localeMeta => localeMeta.code === specifiedLocale) - verifyLocale({ localeMeta }) + verifyLocale({ locale }) } else { console.log('Verifying all locales:\n\n') localeIndex.forEach(localeMeta => { @@ -30,16 +30,16 @@ if (specifiedLocale) { } - -function verifyLocale({ localeMeta }) { +function verifyLocale ({ localeMeta }) { const localeCode = localeMeta.code const localeName = localeMeta.name + let targetLocale, englishLocale try { const localeFilePath = path.join(process.cwd(), 'app', '_locales', localeCode, 'messages.json') - targetLocale = JSON.parse(fs.readFileSync(localeFilePath, 'utf8')); + targetLocale = JSON.parse(fs.readFileSync(localeFilePath, 'utf8')) } catch (e) { - if (e.code == 'ENOENT') { + if (e.code === 'ENOENT') { console.log('Locale file not found') } else { console.log(`Error opening your locale ("${localeCode}") file: `, e) @@ -49,9 +49,9 @@ function verifyLocale({ localeMeta }) { try { const englishFilePath = path.join(process.cwd(), 'app', '_locales', 'en', 'messages.json') - englishLocale = JSON.parse(fs.readFileSync(englishFilePath, 'utf8')); + englishLocale = JSON.parse(fs.readFileSync(englishFilePath, 'utf8')) } catch (e) { - if(e.code == 'ENOENT') { + if (e.code === 'ENOENT') { console.log('English File not found') } else { console.log('Error opening english locale file: ', e) @@ -71,7 +71,7 @@ function verifyLocale({ localeMeta }) { if (extraItems.length) { console.log('\nMissing from english locale:') - extraItems.forEach(function(key) { + extraItems.forEach(function (key) { console.log(` - [ ] ${key}`) }) } else { @@ -80,7 +80,7 @@ function verifyLocale({ localeMeta }) { if (missingItems.length) { console.log(`\nMissing:`) - missingItems.forEach(function(key) { + missingItems.forEach(function (key) { console.log(` - [ ] ${key}`) }) } else { @@ -92,6 +92,6 @@ function verifyLocale({ localeMeta }) { } } -function compareLocalesForMissingItems({ base, subject }) { +function compareLocalesForMissingItems ({ base, subject }) { return Object.keys(base).filter((key) => !subject[key]) } diff --git a/development/version-bump.js b/development/version-bump.js index bedf87c01..fa20e9f75 100644 --- a/development/version-bump.js +++ b/development/version-bump.js @@ -1,6 +1,6 @@ const clone = require('clone') -async function versionBump(bumpType, changelog, oldManifest) { +async function versionBump (bumpType, changelog, oldManifest) { const manifest = clone(oldManifest) const newVersion = newVersionFrom(manifest, bumpType) @@ -19,13 +19,13 @@ async function versionBump(bumpType, changelog, oldManifest) { return { version: newVersion, manifest: manifest, - changelog: logLines.join('\n') + changelog: logLines.join('\n'), } } function newVersionFrom (manifest, bumpType) { const string = manifest.version - let segments = string.split('.').map((str) => parseInt(str)) + const segments = string.split('.').map((str) => parseInt(str)) switch (bumpType) { case 'major': @@ -45,8 +45,4 @@ function newVersionFrom (manifest, bumpType) { return segments.map(String).join('.') } -function bumpManifest (manifest, bumpType) { - -} - module.exports = versionBump diff --git a/docs/publishing.md b/docs/publishing.md index 3022b7eda..45662900d 100644 --- a/docs/publishing.md +++ b/docs/publishing.md @@ -2,18 +2,32 @@ When publishing a new version of MetaMask, we follow this procedure: +## Preparation + +We try to ensure certain criteria are met before deploying: + +- Deploy early in the week, to give time for emergency responses to unforeseen bugs. +- Deploy early in the day, for the same reason. +- Make sure at least one member of the support team is "on duty" to watch for new user issues coming through the support system. +- Roll out incrementally when possible, to a small number of users first, and gradually to more users. + ## Incrementing Version & Changelog Version can be automatically incremented [using our bump script](./bumping-version.md). npm run version:bump $BUMP_TYPE` where `$BUMP_TYPE` is one of `major`, `minor`, or `patch`. -## Publishing +## Building -1. `npm run dist` to generate the latest build. -2. Publish to chrome store. - - Visit [the chrome developer dashboard](https://chrome.google.com/webstore/developer/dashboard?authuser=2). -3. Publish to firefox addon marketplace. -4. Post on Github releases page. -5. `npm run announce`, post that announcement in our public places. +While we develop on the main `develop` branch, our production version is maintained on the `master` branch. + +With each pull request, the @MetaMaskBot will comment with a build of that new pull request, so after bumping the version on `develop`, open a pull request against `master`, and once the pull request is reviewed and merged, you can download those builds for publication. + +## Publishing +1. Publish to chrome store. +2. Visit [the chrome developer dashboard](https://chrome.google.com/webstore/developer/dashboard?authuser=2). +3. Publish to [firefox addon marketplace](http://addons.mozilla.org/en-us/firefox/addon/ether-metamask). +4. Publish to [Opera store](https://addons.opera.com/en/extensions/details/metamask/). +5. Post on [Github releases](https://github.com/MetaMask/metamask-extension/releases) page. +6. Run the `npm run announce` script, and post that announcement in our public places. diff --git a/gentests.js b/gentests.js new file mode 100644 index 000000000..9c591e98c --- /dev/null +++ b/gentests.js @@ -0,0 +1,241 @@ +const fs = require('fs') +const path = require('path') +const async = require('async') +const promisify = require('pify') + +// start(/\.selectors.js/, generateSelectorTest).catch(console.error) +// start(/\.utils.js/, generateUtilTest).catch(console.error) +startContainer(/\.container.js/, generateContainerTest).catch(console.error) + +async function getAllFileNames (dirName) { + const allNames = (await promisify(fs.readdir)(dirName)) + const fileNames = allNames.filter(name => name.match(/^.+\./)) + const dirNames = allNames.filter(name => name.match(/^[^.]+$/)) + + const fullPathDirNames = dirNames.map(d => `${dirName}/${d}`) + const subNameArrays = await promisify(async.map)(fullPathDirNames, getAllFileNames) + let subNames = [] + subNameArrays.forEach(subNameArray => { subNames = [...subNames, ...subNameArray] }) + + return [ + ...fileNames.map(name => dirName + '/' + name), + ...subNames, + ] +} + +/* +async function start (fileRegEx, testGenerator) { + const fileNames = await getAllFileNames('./ui/app') + const sFiles = fileNames.filter(name => name.match(fileRegEx)) + + let sFileMethodNames + let testFilePath + async.each(sFiles, async (sFile, cb) => { + const [, sRootPath, sPath] = sFile.match(/^(.+\/)([^/]+)$/) + sFileMethodNames = Object.keys(require(__dirname + '/' + sFile)) + + testFilePath = sPath.replace('.', '-').replace('.', '.test.') + + await promisify(fs.writeFile)( + `${__dirname}/${sRootPath}tests/${testFilePath}`, + testGenerator(sPath, sFileMethodNames), + 'utf8' + ) + }, (err) => { + console.log(err) + }) + +} +*/ + +async function startContainer (fileRegEx, testGenerator) { + const fileNames = await getAllFileNames('./ui/app') + const sFiles = fileNames.filter(name => name.match(fileRegEx)) + + async.each(sFiles, async (sFile, cb) => { + console.log(`sFile`, sFile) + const [, sRootPath, sPath] = sFile.match(/^(.+\/)([^/]+)$/) + + const testFilePath = sPath.replace('.', '-').replace('.', '.test.') + + await promisify(fs.readFile)( + path.join(__dirname, sFile), + 'utf8', + async (err, result) => { + if (err) { + console.log('Error: ', err) + } else { + console.log(`result`, result.length) + const returnObjectStrings = result + .match(/return\s(\{[\s\S]+?})\n}/g) + .map(str => { + return str + .slice(0, str.length - 1) + .slice(7) + .replace(/\n/g, '') + .replace(/\s\s+/g, ' ') + + }) + const mapStateToPropsAssertionObject = returnObjectStrings[0] + .replace(/\w+:\s\w+\([\w,\s]+\),/g, str => { + const strKey = str.match(/^\w+/)[0] + return strKey + ': \'mock' + str.match(/^\w+/)[0].replace(/^./, c => c.toUpperCase()) + ':mockState\',\n' + }) + .replace(/{\s\w.+/, firstLinePair => `{\n ${firstLinePair.slice(2)}`) + .replace(/\w+:.+,/g, s => ` ${s}`) + .replace(/}/g, s => ` ${s}`) + let mapDispatchToPropsMethodNames + if (returnObjectStrings[1]) { + mapDispatchToPropsMethodNames = returnObjectStrings[1].match(/\s\w+:\s/g).map(str => str.match(/\w+/)[0]) + } + const proxyquireObject = ('{\n ' + result + .match(/import\s{[\s\S]+?}\sfrom\s.+/g) + .map(s => s.replace(/\n/g, '')) + .map((s, i) => { + const proxyKeys = s.match(/{.+}/)[0].match(/\w+/g) + return '\'' + s.match(/'(.+)'/)[1] + '\': { ' + (proxyKeys.length > 1 + ? '\n ' + proxyKeys.join(': () => {},\n ') + ': () => {},\n ' + : proxyKeys[0] + ': () => {},') + ' }' + }) + .join(',\n ') + '\n}') + .replace('{ connect: () => {}, },', `{ + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + },`) + // console.log(`proxyquireObject`, proxyquireObject); + // console.log(`mapStateToPropsAssertionObject`, mapStateToPropsAssertionObject); + // console.log(`mapDispatchToPropsMethodNames`, mapDispatchToPropsMethodNames); + + const containerTest = generateContainerTest(sPath, { + mapStateToPropsAssertionObject, + mapDispatchToPropsMethodNames, + proxyquireObject, + }) + // console.log(`containerTest`, `${__dirname}/${sRootPath}tests/${testFilePath}`, containerTest); + console.log('----') + console.log(`sRootPath`, sRootPath) + console.log(`testFilePath`, testFilePath) + await promisify(fs.writeFile)( + `${__dirname}/${sRootPath}tests/${testFilePath}`, + containerTest, + 'utf8' + ) + } + } + ) + }, (err) => { + console.log('123', err) + }) + +} +/* +function generateMethodList (methodArray) { + return methodArray.map(n => ' ' + n).join(',\n') + ',' +} + +function generateMethodDescribeBlock (methodName, index) { + const describeBlock = + `${index ? ' ' : ''}describe('${methodName}()', () => { + it('should', () => { + const state = {} + + assert.equal(${methodName}(state), ) + }) + })` + return describeBlock +} +*/ +function generateDispatchMethodDescribeBlock (methodName, index) { + const describeBlock = + `${index ? ' ' : ''}describe('${methodName}()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.${methodName}() + assert(dispatchSpy.calledOnce) + }) + })` + return describeBlock +} +/* +function generateMethodDescribeBlocks (methodArray) { + return methodArray + .map((methodName, index) => generateMethodDescribeBlock(methodName, index)) + .join('\n\n') +} +*/ + +function generateDispatchMethodDescribeBlocks (methodArray) { + return methodArray + .map((methodName, index) => generateDispatchMethodDescribeBlock(methodName, index)) + .join('\n\n') +} + +/* +function generateSelectorTest (name, methodArray) { +return `import assert from 'assert' +import { +${generateMethodList(methodArray)} +} from '../${name}' + +describe('${name.match(/^[^.]+/)} selectors', () => { + + ${generateMethodDescribeBlocks(methodArray)} + +})` +} + +function generateUtilTest (name, methodArray) { +return `import assert from 'assert' +import { +${generateMethodList(methodArray)} +} from '../${name}' + +describe('${name.match(/^[^.]+/)} utils', () => { + + ${generateMethodDescribeBlocks(methodArray)} + +})` +} +*/ + +function generateContainerTest (sPath, { + mapStateToPropsAssertionObject, + mapDispatchToPropsMethodNames, + proxyquireObject, +}) { +return `import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +proxyquire('../${sPath}', ${proxyquireObject}) + +describe('${sPath.match(/^[^.]+/)} container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), ${mapStateToPropsAssertionObject}) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + ${mapDispatchToPropsMethodNames ? generateDispatchMethodDescribeBlocks(mapDispatchToPropsMethodNames) : 'delete'} + + }) + +})` +} diff --git a/gulpfile.js b/gulpfile.js index 4dca7089f..480f544d8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,27 +13,21 @@ const zip = require('gulp-zip') const assign = require('lodash.assign') const livereload = require('gulp-livereload') const del = require('del') -const eslint = require('gulp-eslint') const fs = require('fs') const path = require('path') const manifest = require('./app/manifest.json') -const replace = require('gulp-replace') const mkdirp = require('mkdirp') -const asyncEach = require('async/each') -const exec = require('child_process').exec const sass = require('gulp-sass') const autoprefixer = require('gulp-autoprefixer') const gulpStylelint = require('gulp-stylelint') const stylefmt = require('gulp-stylefmt') const uglify = require('gulp-uglify-es').default -const babel = require('gulp-babel') -const debug = require('gulp-debug') const pify = require('pify') const gulpMultiProcess = require('gulp-multi-process') const endOfStream = pify(require('end-of-stream')) function gulpParallel (...args) { - return function spawnGulpChildProcess(cb) { + return function spawnGulpChildProcess (cb) { return gulpMultiProcess(args, cb, true) } } @@ -48,12 +42,12 @@ const commonPlatforms = [ // browser webapp 'mascara', // browser extensions - ...browserPlatforms + ...browserPlatforms, ] // browser reload -gulp.task('dev:reload', function() { +gulp.task('dev:reload', function () { livereload.listen({ port: 35729, }) @@ -108,7 +102,7 @@ createCopyTasks('html:mascara', { destinations: [`./dist/mascara/`], }) -function createCopyTasks(label, opts) { +function createCopyTasks (label, opts) { if (!opts.devOnly) { const copyTaskName = `copy:${label}` copyTask(copyTaskName, opts) @@ -119,7 +113,7 @@ function createCopyTasks(label, opts) { copyDevTaskNames.push(copyDevTaskName) } -function copyTask(taskName, opts){ +function copyTask (taskName, opts) { const source = opts.source const destination = opts.destination const destinations = opts.destinations || [destination] @@ -137,12 +131,12 @@ function copyTask(taskName, opts){ return performCopy() }) - function performCopy() { + function performCopy () { // stream from source let stream = gulp.src(source + pattern, { base: source }) // copy to destinations - destinations.forEach(function(destination) { + destinations.forEach(function (destination) { stream = stream.pipe(gulp.dest(destination)) }) @@ -152,40 +146,40 @@ function copyTask(taskName, opts){ // manifest tinkering -gulp.task('manifest:chrome', function() { +gulp.task('manifest:chrome', function () { return gulp.src('./dist/chrome/manifest.json') - .pipe(jsoneditor(function(json) { + .pipe(jsoneditor(function (json) { delete json.applications return json })) .pipe(gulp.dest('./dist/chrome', { overwrite: true })) }) -gulp.task('manifest:opera', function() { +gulp.task('manifest:opera', function () { return gulp.src('./dist/opera/manifest.json') - .pipe(jsoneditor(function(json) { + .pipe(jsoneditor(function (json) { json.permissions = [ - "storage", - "tabs", - "clipboardWrite", - "clipboardRead", - "http://localhost:8545/" + 'storage', + 'tabs', + 'clipboardWrite', + 'clipboardRead', + 'http://localhost:8545/', ] return json })) .pipe(gulp.dest('./dist/opera', { overwrite: true })) }) -gulp.task('manifest:production', function() { +gulp.task('manifest:production', function () { return gulp.src([ './dist/firefox/manifest.json', './dist/chrome/manifest.json', './dist/edge/manifest.json', './dist/opera/manifest.json', - ],{base: './dist/'}) + ], {base: './dist/'}) // Exclude chromereload script in production: - .pipe(jsoneditor(function(json) { + .pipe(jsoneditor(function (json) { json.background.scripts = json.background.scripts.filter((script) => { return !script.includes('chromereload') }) @@ -212,29 +206,6 @@ gulp.task('dev:copy', ) ) -// lint js - -const lintTargets = ['app/**/*.json', 'app/**/*.js', '!app/scripts/vendor/**/*.js', 'ui/**/*.js', 'old-ui/**/*.js', 'mascara/src/*.js', 'mascara/server/*.js', '!node_modules/**', '!dist/firefox/**', '!docs/**', '!app/scripts/chromereload.js', '!mascara/test/jquery-3.1.0.min.js'] - -gulp.task('lint', function () { - // Ignoring node_modules, dist/firefox, and docs folders: - return gulp.src(lintTargets) - .pipe(eslint(fs.readFileSync(path.join(__dirname, '.eslintrc')))) - // eslint.format() outputs the lint results to the console. - // Alternatively use eslint.formatEach() (see Docs). - .pipe(eslint.format()) - // To have the process exit with an error code (1) on - // lint error, return the stream and pipe to failAfterError last. - .pipe(eslint.failAfterError()) -}); - -gulp.task('lint:fix', function () { - return gulp.src(lintTargets) - .pipe(eslint(Object.assign(fs.readFileSync(path.join(__dirname, '.eslintrc')), {fix: true}))) - .pipe(eslint.format()) - .pipe(eslint.failAfterError()) -}); - // scss compilation and autoprefixing tasks gulp.task('build:scss', createScssBuildTask({ @@ -250,7 +221,7 @@ gulp.task('dev:scss', createScssBuildTask({ pattern: 'ui/app/**/*.scss', })) -function createScssBuildTask({ src, dest, devMode, pattern }) { +function createScssBuildTask ({ src, dest, devMode, pattern }) { return function () { if (devMode) { watch(pattern, async (event) => { @@ -262,7 +233,7 @@ function createScssBuildTask({ src, dest, devMode, pattern }) { return buildScss() } - function buildScss() { + function buildScss () { return gulp.src(src) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) @@ -272,22 +243,22 @@ function createScssBuildTask({ src, dest, devMode, pattern }) { } } -gulp.task('lint-scss', function() { +gulp.task('lint-scss', function () { return gulp .src('ui/app/css/itcss/**/*.scss') .pipe(gulpStylelint({ reporters: [ - { formatter: 'string', console: true } + { formatter: 'string', console: true }, ], fix: true, - })); -}); + })) +}) gulp.task('fmt-scss', function () { return gulp.src('ui/app/css/itcss/**/*.scss') .pipe(stylefmt()) - .pipe(gulp.dest('ui/app/css/itcss')); -}); + .pipe(gulp.dest('ui/app/css/itcss')) +}) // build js @@ -300,11 +271,11 @@ const buildJsFiles = [ // bundle tasks createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true }) -createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' }) +createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' }) createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' }) createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true }) -function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) { +function createTasksForBuildJsExtension ({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) { // inpage must be built before all other scripts: const rootDir = './app/scripts' const nonInpageFiles = buildJsFiles.filter(file => file !== 'inpage') @@ -322,7 +293,7 @@ function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bun createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 }) } -function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} }) { +function createTasksForBuildJsMascara ({ taskPrefix, devMode, bundleTaskOpts = {} }) { // inpage must be built before all other scripts: const rootDir = './mascara/src/' const buildPhase1 = ['ui', 'proxy', 'background', 'metamascara'] @@ -338,7 +309,7 @@ function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 }) } -function createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) { +function createTasksForBuildJs ({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) { // bundle task for each file const jsFiles = [].concat(buildPhase1, buildPhase2) jsFiles.forEach((jsFile) => { @@ -367,7 +338,7 @@ gulp.task('disc', gulp.parallel(buildJsFiles.map(jsFile => `disc:${jsFile}`))) // clean dist -gulp.task('clean', function clean() { +gulp.task('clean', function clean () { return del(['./dist/*']) }) @@ -460,7 +431,7 @@ gulp.task('dist', // task generators -function zipTask(target) { +function zipTask (target) { return () => { return gulp.src(`dist/${target}/**`) .pipe(zip(`metamask-${target}-${manifest.version}.zip`)) @@ -468,7 +439,7 @@ function zipTask(target) { } } -function generateBundler(opts, performBundle) { +function generateBundler (opts, performBundle) { const browserifyOpts = assign({}, watchify.args, { entries: [opts.filepath], plugin: 'browserify-derequire', @@ -497,7 +468,7 @@ function generateBundler(opts, performBundle) { return bundler } -function discTask(opts) { +function discTask (opts) { opts = Object.assign({ buildWithFullPaths: true, }, opts) @@ -508,7 +479,7 @@ function discTask(opts) { return performBundle - function performBundle(){ + function performBundle () { // start "disc" build const discDir = path.join(__dirname, 'disc') mkdirp.sync(discDir) @@ -523,14 +494,14 @@ function discTask(opts) { } -function bundleTask(opts) { +function bundleTask (opts) { const bundler = generateBundler(opts, performBundle) // output build logs to terminal bundler.on('log', gutil.log) return performBundle - function performBundle(){ + function performBundle () { let buildStream = bundler.bundle() // handle errors @@ -562,7 +533,7 @@ function bundleTask(opts) { buildStream = buildStream .pipe(uglify({ mangle: { - reserved: [ 'MetamaskInpageProvider' ] + reserved: [ 'MetamaskInpageProvider' ], }, })) } diff --git a/mascara/example/app.js b/mascara/example/app.js index 598e2c84c..7b6421fdc 100644 --- a/mascara/example/app.js +++ b/mascara/example/app.js @@ -3,7 +3,7 @@ const EthQuery = require('ethjs-query') window.addEventListener('load', loadProvider) window.addEventListener('message', console.warn) -async function loadProvider() { +async function loadProvider () { const ethereumProvider = window.metamask.createDefaultProvider({ host: 'http://localhost:9001' }) const ethQuery = new EthQuery(ethereumProvider) const accounts = await ethQuery.accounts() @@ -13,7 +13,7 @@ async function loadProvider() { } -function logToDom(message, context){ +function logToDom (message, context) { document.getElementById(context).innerText = message console.log(message) } @@ -35,4 +35,4 @@ function setupButtons (ethQuery) { }) logToDom(txHash, 'cb-value') }) -} \ No newline at end of file +} diff --git a/mascara/example/server.js b/mascara/example/server.js index d39c19600..bdb1efa16 100644 --- a/mascara/example/server.js +++ b/mascara/example/server.js @@ -1,8 +1,8 @@ const express = require('express') +const path = require('path') const createMetamascaraServer = require('../server/') const createBundle = require('../server/util').createBundle const serveBundle = require('../server/util').serveBundle - // // Iframe Server // @@ -23,7 +23,7 @@ const dappServer = express() // serve dapp bundle serveBundle(dappServer, '/app.js', createBundle(require.resolve('./app.js'))) -dappServer.use(express.static(__dirname + '/app/')) +dappServer.use(express.static(path.join(__dirname, '/app/'))) // start the server const dappPort = '9002' diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js index b81a9fb9b..d86e10d48 100644 --- a/mascara/src/app/first-time/breadcrumbs.js +++ b/mascara/src/app/first-time/breadcrumbs.js @@ -8,7 +8,7 @@ export default class Breadcrumbs extends Component { currentIndex: PropTypes.number, }; - render() { + render () { const {total, currentIndex} = this.props return (
@@ -20,7 +20,7 @@ export default class Breadcrumbs extends Component { /> ))}
- ); + ) } } diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js index c5a560638..e270392e1 100644 --- a/mascara/src/app/first-time/buy-ether-screen.js +++ b/mascara/src/app/first-time/buy-ether-screen.js @@ -54,7 +54,7 @@ class BuyEtherScreen extends Component { return (
showAccountDetail(address)} > Do it later @@ -64,17 +64,17 @@ class BuyEtherScreen extends Component { renderCoinbaseLogo () { return ( - - - - - - - - - - - + + + + + + + + + + + @@ -85,13 +85,13 @@ class BuyEtherScreen extends Component { const {goToCoinbase, address} = this.props return ( -
+
{this.renderCoinbaseLogo()}
-
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
- What is Ethereum? -
+
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
+ What is Ethereum? +
+ + + + + \ No newline at end of file diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js index e07d4a99e..b396dc5b9 100644 --- a/test/e2e/beta/from-import-beta-ui.spec.js +++ b/test/e2e/beta/from-import-beta-ui.spec.js @@ -1,7 +1,7 @@ const path = require('path') const assert = require('assert') const webdriver = require('selenium-webdriver') -const { By, Key } = webdriver +const { By, Key, until } = webdriver const { delay, buildChromeWebDriver, @@ -12,20 +12,21 @@ const { } = require('../func') const { checkBrowserForConsoleErrors, - loadExtension, verboseReportOnFailure, + findElement, + findElements, } = require('./helpers') + describe('Using MetaMask with an existing account', function () { let extensionId let driver - let tokenAddress const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' const testAddress = '0xE18035BF8712672935FDB4e5e431b1a0183d2DFC' + const testPrivateKey2 = '14abe6f4aab7f9f626fe981c864d0adeb5685f289ac9270c27b8fd790b4235d6' const regularDelayMs = 1000 const largeDelayMs = regularDelayMs * 2 - const waitingNewPageDelayMs = regularDelayMs * 10 this.timeout(0) this.bail(true) @@ -79,30 +80,34 @@ describe('Using MetaMask with an existing account', function () { }) it('use the local network', async function () { - const [networkSelector] = await driver.findElements(By.css('#network_component')) + const networkSelector = await findElement(driver, By.css('#network_component')) await networkSelector.click() await delay(regularDelayMs) - const [localhost] = await driver.findElements(By.xpath(`//li[contains(text(), 'Localhost')]`)) + const [localhost] = await findElements(driver, By.xpath(`//li[contains(text(), 'Localhost')]`)) await localhost.click() await delay(regularDelayMs) }) it('selects the new UI option', async () => { - const button = await driver.findElement(By.xpath("//p[contains(text(), 'Try Beta Version')]")) + const button = await findElement(driver, By.xpath("//p[contains(text(), 'Try Beta Version')]")) await button.click() await delay(regularDelayMs) // Close all other tabs const [oldUi, infoPage, newUi] = await driver.getAllWindowHandles() + + const newUiOrInfoPage = newUi || infoPage await driver.switchTo().window(oldUi) await driver.close() - await driver.switchTo().window(infoPage) - await driver.close() - await driver.switchTo().window(newUi) + if (infoPage !== newUiOrInfoPage) { + await driver.switchTo().window(infoPage) + await driver.close() + } + await driver.switchTo().window(newUiOrInfoPage) await delay(regularDelayMs) - const [continueBtn] = await driver.findElements(By.css('.welcome-screen__button')) + const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) await continueBtn.click() await delay(regularDelayMs) }) @@ -110,37 +115,50 @@ describe('Using MetaMask with an existing account', function () { describe('First time flow starting from an existing seed phrase', () => { it('imports a seed phrase', async () => { - const [seedPhrase] = await driver.findElements(By.xpath(`//a[contains(text(), 'Import with seed phrase')]`)) + const [seedPhrase] = await findElements(driver, By.xpath(`//a[contains(text(), 'Import with seed phrase')]`)) await seedPhrase.click() await delay(regularDelayMs) - const [seedTextArea] = await driver.findElements(By.css('textarea.import-account__secret-phrase')) + const [seedTextArea] = await findElements(driver, By.css('textarea.import-account__secret-phrase')) await seedTextArea.sendKeys(testSeedPhrase) await delay(regularDelayMs) - const [password] = await driver.findElements(By.id('password')) + const [password] = await findElements(driver, By.id('password')) await password.sendKeys('correct horse battery staple') - const [confirmPassword] = await driver.findElements(By.id('confirm-password')) + const [confirmPassword] = await findElements(driver, By.id('confirm-password')) confirmPassword.sendKeys('correct horse battery staple') - const [importButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Import')]`)) + const [importButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`)) await importButton.click() await delay(regularDelayMs) }) + it('clicks through the ToS', async () => { + // terms of use + const canClickThrough = await driver.findElement(By.css('.tou button')).isEnabled() + assert.equal(canClickThrough, false, 'disabled continue button') + const bottomOfTos = await findElement(driver, By.linkText('Attributions')) + await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) + await delay(regularDelayMs) + const acceptTos = await findElement(driver, By.css('.tou button')) + await acceptTos.click() + await delay(regularDelayMs) + }) + it('clicks through the privacy notice', async () => { - const [nextScreen] = await driver.findElements(By.css('.tou button')) + // privacy notice + const nextScreen = await findElement(driver, By.css('.tou button')) await nextScreen.click() await delay(regularDelayMs) + }) - const canClickThrough = await driver.findElement(By.css('.tou button')).isEnabled() - assert.equal(canClickThrough, false, 'disabled continue button') - const element = await driver.findElement(By.linkText('Attributions')) - await driver.executeScript('arguments[0].scrollIntoView(true)', element) + it('clicks through the phishing notice', async () => { + // phishing notice + const noticeElement = await driver.findElement(By.css('.markdown')) + await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) await delay(regularDelayMs) - - const [acceptTos] = await driver.findElements(By.css('.tou button')) - await acceptTos.click() + const nextScreen = await findElement(driver, By.css('.tou button')) + await nextScreen.click() await delay(regularDelayMs) }) }) @@ -151,7 +169,7 @@ describe('Using MetaMask with an existing account', function () { await driver.findElement(By.css('.qr-wrapper')).isDisplayed() await delay(regularDelayMs) - const [address] = await driver.findElements(By.css('input.qr-ellip-address')) + const [address] = await findElements(driver, By.css('input.qr-ellip-address')) assert.equal(await address.getAttribute('value'), testAddress) await driver.executeScript("document.querySelector('.account-modal-close').click()") @@ -161,19 +179,22 @@ describe('Using MetaMask with an existing account', function () { it('shows a QR code for the account', async () => { await driver.findElement(By.css('.wallet-view__details-button')).click() await driver.findElement(By.css('.qr-wrapper')).isDisplayed() + const detailModal = await driver.findElement(By.css('span .modal')) await delay(regularDelayMs) await driver.executeScript("document.querySelector('.account-modal-close').click()") + await driver.wait(until.stalenessOf(detailModal)) await delay(regularDelayMs) }) }) describe('Log out and log back in', () => { it('logs out of the account', async () => { - await driver.findElement(By.css('.account-menu__icon')).click() + const accountIdenticon = driver.findElement(By.css('.account-menu__icon .identicon')) + accountIdenticon.click() await delay(regularDelayMs) - const [logoutButton] = await driver.findElements(By.css('.account-menu__logout-button')) + const [logoutButton] = await findElements(driver, By.css('.account-menu__logout-button')) assert.equal(await logoutButton.getText(), 'Log out') await logoutButton.click() await delay(regularDelayMs) @@ -191,23 +212,23 @@ describe('Using MetaMask with an existing account', function () { await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [createAccount] = await driver.findElements(By.xpath(`//div[contains(text(), 'Create Account')]`)) + const [createAccount] = await findElements(driver, By.xpath(`//div[contains(text(), 'Create Account')]`)) await createAccount.click() await delay(regularDelayMs) }) it('set account name', async () => { - const [accountName] = await driver.findElements(By.css('.new-account-create-form input')) + const [accountName] = await findElements(driver, By.css('.new-account-create-form input')) await accountName.sendKeys('2nd account') await delay(regularDelayMs) - const [createButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Create')]`)) + const [createButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Create')]`)) await createButton.click() await delay(regularDelayMs) }) it('should show the correct account name', async () => { - const [accountName] = await driver.findElements(By.css('.account-name')) + const [accountName] = await findElements(driver, By.css('.account-name')) assert.equal(await accountName.getText(), '2nd account') await delay(regularDelayMs) }) @@ -218,7 +239,7 @@ describe('Using MetaMask with an existing account', function () { await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [originalAccountMenuItem] = await driver.findElements(By.css('.account-menu__name')) + const [originalAccountMenuItem] = await findElements(driver, By.css('.account-menu__name')) await originalAccountMenuItem.click() await delay(regularDelayMs) }) @@ -226,181 +247,78 @@ describe('Using MetaMask with an existing account', function () { describe('Send ETH from inside MetaMask', () => { it('starts to send a transaction', async function () { - const [sendButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Send')]`)) + const sendButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`)) await sendButton.click() await delay(regularDelayMs) - const [inputAddress] = await driver.findElements(By.css('input[placeholder="Recipient Address"]')) - const [inputAmount] = await driver.findElements(By.css('.currency-display__input')) + const inputAddress = await findElement(driver, By.css('input[placeholder="Recipient Address"]')) + const inputAmount = await findElement(driver, By.css('.currency-display__input')) await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') await inputAmount.sendKeys('1') // Set the gas limit - const [configureGas] = await driver.findElements(By.css('.send-v2__gas-fee-display button')) + const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button')) await configureGas.click() await delay(regularDelayMs) - const [save] = await driver.findElements(By.xpath(`//button[contains(text(), 'Save')]`)) + const gasModal = await driver.findElement(By.css('span .modal')) + const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`)) await save.click() + await driver.wait(until.stalenessOf(gasModal)) await delay(regularDelayMs) // Continue to next screen - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) + const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) await nextScreen.click() await delay(regularDelayMs) }) it('confirms the transaction', async function () { - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Confirm')]`)) + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) await confirmButton.click() await delay(regularDelayMs) }) it('finds the transaction in the transactions list', async function () { - const transactions = await driver.findElements(By.css('.tx-list-item')) + const transactions = await findElements(driver, By.css('.tx-list-item')) assert.equal(transactions.length, 1) - const txValues = await driver.findElements(By.css('.tx-list-value')) + const txValues = await findElements(driver, By.css('.tx-list-value')) assert.equal(txValues.length, 1) assert.equal(await txValues[0].getText(), '1 ETH') }) }) - describe('Send ETH from Faucet', () => { - it('starts a send transaction inside Faucet', async () => { - await driver.executeScript('window.open("https://faucet.metamask.io")') - await delay(waitingNewPageDelayMs) - - const [extension, faucet] = await driver.getAllWindowHandles() - await driver.switchTo().window(faucet) - await delay(regularDelayMs) - - const [send1eth] = await driver.findElements(By.xpath(`//button[contains(text(), '10 ether')]`)) - await send1eth.click() - await delay(regularDelayMs) - - await driver.switchTo().window(extension) - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(),'Confirm')]`)) - await confirmButton.click() - await delay(regularDelayMs) - - await driver.switchTo().window(faucet) - await delay(regularDelayMs) - await driver.close() - await delay(regularDelayMs) - await driver.switchTo().window(extension) - await delay(regularDelayMs) - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - }) - }) - - describe('Add existing token using search', () => { - it('clicks on the Add Token button', async () => { - const [addToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Token')]`)) - await addToken.click() - await delay(regularDelayMs) - }) - - it('picks an existing token', async () => { - const [tokenSearch] = await driver.findElements(By.css('input.add-token__input')) - await tokenSearch.sendKeys('BAT') - await delay(regularDelayMs) - - const [token] = await driver.findElements(By.xpath("//div[contains(text(), 'BAT')]")) - await token.click() - await delay(regularDelayMs) - - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) - await nextScreen.click() + describe('Imports an account with private key', () => { + it('choose Create Account from the account menu', async () => { + await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [addTokens] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Tokens')]`)) - await addTokens.click() - await delay(largeDelayMs) - }) - - it('renders the balance for the new token', async () => { - const balance = await driver.findElement(By.css('.tx-view .balance-display .token-amount')) - const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '0BAT') + const [importAccount] = await findElements(driver, By.xpath(`//div[contains(text(), 'Import Account')]`)) + await importAccount.click() await delay(regularDelayMs) }) - }) - - describe('Add a custom token from TokenFactory', () => { - it('creates a new token', async () => { - await driver.executeScript('window.open("https://tokenfactory.surge.sh/#/factory")') - await delay(waitingNewPageDelayMs) - - const [extension, tokenFactory] = await driver.getAllWindowHandles() - await driver.switchTo().window(tokenFactory) - const [ - totalSupply, - tokenName, - tokenDecimal, - tokenSymbol, - ] = await driver.findElements(By.css('input')) - - await totalSupply.sendKeys('100') - await tokenName.sendKeys('Test') - await tokenDecimal.sendKeys('0') - await tokenSymbol.sendKeys('TST') - - const [createToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Create Token')]`)) - await createToken.click() - await delay(regularDelayMs) - await driver.switchTo().window(extension) - await loadExtension(driver, extensionId) + it('enter private key', async () => { + const privateKeyInput = await findElement(driver, By.css('#private-key-box')) + await privateKeyInput.sendKeys(testPrivateKey2) await delay(regularDelayMs) - - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(),'Confirm')]`)) - await confirmButton.click() - await delay(regularDelayMs) - - await driver.switchTo().window(tokenFactory) - await delay(regularDelayMs) - const tokenContactAddress = await driver.findElement(By.css('div > div > div:nth-child(2) > span:nth-child(3)')) - tokenAddress = await tokenContactAddress.getText() - await driver.close() - await driver.switchTo().window(extension) - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - }) - - it('clicks on the Add Token button', async () => { - const [addToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Token')]`)) - await addToken.click() + const importButtons = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`)) + await importButtons[0].click() await delay(regularDelayMs) }) - it('picks the new Test token', async () => { - const [addCustomToken] = await driver.findElements(By.xpath("//div[contains(text(), 'Custom Token')]")) - await addCustomToken.click() - await delay(regularDelayMs) - - const [newTokenAddress] = await driver.findElements(By.css('.add-token__add-custom-form input')) - await newTokenAddress.sendKeys(tokenAddress) - await delay(regularDelayMs) - - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) - await nextScreen.click() - await delay(regularDelayMs) - - const [addTokens] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Tokens')]`)) - await addTokens.click() + it('should show the correct account name', async () => { + const [accountName] = await findElements(driver, By.css('.account-name')) + assert.equal(await accountName.getText(), 'Account 3') await delay(regularDelayMs) }) - it('renders the balance for the new token', async () => { - const [balance] = await driver.findElements(By.css('.tx-view .balance-display .token-amount')) - const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '100TST') + it('should show the imported label', async () => { + const [importedLabel] = await findElements(driver, By.css('.wallet-view__keyring-label')) + assert.equal(await importedLabel.getText(), 'IMPORTED') await delay(regularDelayMs) }) }) + }) diff --git a/test/e2e/beta/helpers.js b/test/e2e/beta/helpers.js index 8307fdc50..fcc3e96d6 100644 --- a/test/e2e/beta/helpers.js +++ b/test/e2e/beta/helpers.js @@ -1,11 +1,16 @@ const fs = require('fs') const mkdirp = require('mkdirp') const pify = require('pify') +const {until} = require('selenium-webdriver') +const { delay } = require('../func') module.exports = { checkBrowserForConsoleErrors, loadExtension, verboseReportOnFailure, + findElement, + findElements, + openNewPage, } async function loadExtension (driver, extensionId) { @@ -53,3 +58,23 @@ async function verboseReportOnFailure (driver, test) { const htmlSource = await driver.getPageSource() await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) } + +async function findElement (driver, by, timeout = 10000) { + return driver.wait(until.elementLocated(by), timeout) +} + +async function findElements (driver, by, timeout = 10000) { + return driver.wait(until.elementsLocated(by), timeout) +} + +async function openNewPage (driver, url) { + await driver.executeScript('window.open()') + await delay(1000) + + const handles = await driver.getAllWindowHandles() + const secondHandle = handles[1] + await driver.switchTo().window(secondHandle) + + await driver.get(url) + await delay(1000) +} diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 00863e3b3..5f270b52b 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -1,7 +1,7 @@ const path = require('path') const assert = require('assert') const webdriver = require('selenium-webdriver') -const { By, Key } = webdriver +const { By, Key, until } = webdriver const { delay, buildChromeWebDriver, @@ -11,9 +11,12 @@ const { getExtensionIdFirefox, } = require('../func') const { + findElement, + findElements, checkBrowserForConsoleErrors, loadExtension, verboseReportOnFailure, + openNewPage, } = require('./helpers') describe('MetaMask', function () { @@ -22,10 +25,9 @@ describe('MetaMask', function () { let tokenAddress const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' - const tinyDelayMs = 500 + const tinyDelayMs = 1000 const regularDelayMs = tinyDelayMs * 2 const largeDelayMs = regularDelayMs * 2 - const waitingNewPageDelayMs = regularDelayMs * 10 this.timeout(0) this.bail(true) @@ -60,7 +62,7 @@ describe('MetaMask', function () { } } if (this.currentTest.state === 'failed') { - await verboseReportOnFailure(this.currentTest) + await verboseReportOnFailure(driver, this.currentTest) } }) @@ -69,37 +71,52 @@ describe('MetaMask', function () { }) describe('New UI setup', async function () { + let networkSelector it('switches to first tab', async function () { const [firstTab] = await driver.getAllWindowHandles() await driver.switchTo().window(firstTab) await delay(regularDelayMs) + try { + networkSelector = await findElement(driver, By.css('#network_component')) + } catch (e) { + await loadExtension(driver, extensionId) + } + await delay(regularDelayMs) }) it('use the local network', async function () { - const [networkSelector] = await driver.findElements(By.css('#network_component')) await networkSelector.click() await delay(regularDelayMs) - const [localhost] = await driver.findElements(By.xpath(`//li[contains(text(), 'Localhost')]`)) + const localhost = await findElement(driver, By.xpath(`//li[contains(text(), 'Localhost')]`)) await localhost.click() await delay(regularDelayMs) }) it('selects the new UI option', async () => { - const button = await driver.findElement(By.xpath("//p[contains(text(), 'Try Beta Version')]")) + const button = await findElement(driver, By.xpath("//p[contains(text(), 'Try Beta Version')]")) await button.click() await delay(regularDelayMs) // Close all other tabs - const [oldUi, infoPage, newUi] = await driver.getAllWindowHandles() + const [oldUi, tab1, tab2] = await driver.getAllWindowHandles() await driver.switchTo().window(oldUi) await driver.close() - await driver.switchTo().window(infoPage) - await driver.close() - await driver.switchTo().window(newUi) + + await driver.switchTo().window(tab1) + const tab1Url = await driver.getCurrentUrl() + if (tab1Url.match(/metamask.io/)) { + await driver.switchTo().window(tab1) + await driver.close() + await driver.switchTo().window(tab2) + } else if (tab2) { + await driver.switchTo().window(tab2) + await driver.close() + await driver.switchTo().window(tab1) + } await delay(regularDelayMs) - const [continueBtn] = await driver.findElements(By.css('.welcome-screen__button')) + const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) await continueBtn.click() await delay(regularDelayMs) }) @@ -107,9 +124,9 @@ describe('MetaMask', function () { describe('Going through the first time flow', () => { it('accepts a secure password', async () => { - const [passwordBox] = await driver.findElements(By.css('.create-password #create-password')) - const [passwordBoxConfirm] = await driver.findElements(By.css('.create-password #confirm-password')) - const [button] = await driver.findElements(By.css('.create-password button')) + const passwordBox = await findElement(driver, By.css('.create-password #create-password')) + const passwordBoxConfirm = await findElement(driver, By.css('.create-password #confirm-password')) + const button = await findElement(driver, By.css('.create-password button')) await passwordBox.sendKeys('correct horse battery staple') await passwordBoxConfirm.sendKeys('correct horse battery staple') @@ -118,102 +135,141 @@ describe('MetaMask', function () { }) it('clicks through the unique image screen', async () => { - const [nextScreen] = await driver.findElements(By.css('.unique-image button')) + const nextScreen = await findElement(driver, By.css('.unique-image button')) await nextScreen.click() await delay(regularDelayMs) }) - it('clicks through the privacy notice', async () => { - const [nextScreen] = await driver.findElements(By.css('.tou button')) - await nextScreen.click() - await delay(regularDelayMs) - + it('clicks through the ToS', async () => { + // terms of use const canClickThrough = await driver.findElement(By.css('.tou button')).isEnabled() assert.equal(canClickThrough, false, 'disabled continue button') - const [bottomOfTos] = await driver.findElements(By.linkText('Attributions')) + const bottomOfTos = await findElement(driver, By.linkText('Attributions')) await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) await delay(regularDelayMs) - - const [acceptTos] = await driver.findElements(By.css('.tou button')) + const acceptTos = await findElement(driver, By.css('.tou button')) + driver.wait(until.elementIsEnabled(acceptTos)) await acceptTos.click() await delay(regularDelayMs) }) + it('clicks through the privacy notice', async () => { + // privacy notice + const nextScreen = await findElement(driver, By.css('.tou button')) + await nextScreen.click() + await delay(regularDelayMs) + }) + + it('clicks through the phishing notice', async () => { + // phishing notice + const noticeElement = await driver.findElement(By.css('.markdown')) + await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) + await delay(regularDelayMs) + const nextScreen = await findElement(driver, By.css('.tou button')) + await nextScreen.click() + await delay(regularDelayMs) + }) + let seedPhrase it('reveals the seed phrase', async () => { - const [revealSeedPhrase] = await driver.findElements(By.css('.backup-phrase__secret-blocker')) - await revealSeedPhrase.click() + const byRevealButton = By.css('.backup-phrase__secret-blocker .backup-phrase__reveal-button') + await driver.wait(until.elementLocated(byRevealButton, 10000)) + const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) + await revealSeedPhraseButton.click() await delay(regularDelayMs) seedPhrase = await driver.findElement(By.css('.backup-phrase__secret-words')).getText() assert.equal(seedPhrase.split(' ').length, 12) await delay(regularDelayMs) - const [nextScreen] = await driver.findElements(By.css('.backup-phrase button')) + const nextScreen = await findElement(driver, By.css('.backup-phrase button')) await nextScreen.click() await delay(regularDelayMs) }) - it('can retype the seed phrase', async () => { - const words = seedPhrase.split(' ') + async function retypeSeedPhrase (words) { + try { + const word0 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[0]}')]`), 10000) - const [word0] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[0]}')]`)) - await word0.click() - await delay(tinyDelayMs) + await word0.click() + await delay(tinyDelayMs) - const [word1] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[1]}')]`)) - await word1.click() - await delay(tinyDelayMs) + const word1 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[1]}')]`), 10000) - const [word2] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[2]}')]`)) - await word2.click() - await delay(tinyDelayMs) + await word1.click() + await delay(tinyDelayMs) - const [word3] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[3]}')]`)) - await word3.click() - await delay(tinyDelayMs) + const word2 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[2]}')]`), 10000) - const [word4] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[4]}')]`)) - await word4.click() - await delay(tinyDelayMs) + await word2.click() + await delay(tinyDelayMs) - const [word5] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[5]}')]`)) - await word5.click() - await delay(tinyDelayMs) + const word3 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[3]}')]`), 10000) - const [word6] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[6]}')]`)) - await word6.click() - await delay(tinyDelayMs) + await word3.click() + await delay(tinyDelayMs) - const [word7] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[7]}')]`)) - await word7.click() - await delay(tinyDelayMs) + const word4 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[4]}')]`), 10000) - const [word8] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[8]}')]`)) - await word8.click() - await delay(tinyDelayMs) + await word4.click() + await delay(tinyDelayMs) - const [word9] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[9]}')]`)) - await word9.click() - await delay(tinyDelayMs) + const word5 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[5]}')]`), 10000) - const [word10] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[10]}')]`)) - await word10.click() - await delay(tinyDelayMs) + await word5.click() + await delay(tinyDelayMs) - const [word11] = await driver.findElements(By.xpath(`//button[contains(text(), '${words[11]}')]`)) - await word11.click() - await delay(tinyDelayMs) + const word6 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[6]}')]`), 10000) + + await word6.click() + await delay(tinyDelayMs) + + const word7 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[7]}')]`), 10000) + + await word7.click() + await delay(tinyDelayMs) + + const word8 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[8]}')]`), 10000) - const [confirm] = await driver.findElements(By.xpath(`//button[contains(text(), 'Confirm')]`)) + await word8.click() + await delay(tinyDelayMs) + + const word9 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[9]}')]`), 10000) + + await word9.click() + await delay(tinyDelayMs) + + const word10 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[10]}')]`), 10000) + + await word10.click() + await delay(tinyDelayMs) + + const word11 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[11]}')]`), 10000) + await word11.click() + await delay(tinyDelayMs) + } catch (e) { + await loadExtension(driver, extensionId) + await retypeSeedPhrase(words) + } + } + + it('can retype the seed phrase', async () => { + const words = seedPhrase.split(' ') + + await retypeSeedPhrase(words) + + const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) await confirm.click() await delay(regularDelayMs) }) it('clicks through the deposit modal', async () => { - const [closeModal] = await driver.findElements(By.css('.page-container__header-close')) + const byBuyModal = By.css('span .modal') + const buyModal = await driver.wait(until.elementLocated(byBuyModal)) + const closeModal = await findElement(driver, By.css('.page-container__header-close')) await closeModal.click() + await driver.wait(until.stalenessOf(buyModal)) await delay(regularDelayMs) }) }) @@ -224,8 +280,12 @@ describe('MetaMask', function () { await driver.findElement(By.css('.qr-wrapper')).isDisplayed() await delay(regularDelayMs) + const accountModal = await driver.findElement(By.css('span .modal')) + await driver.executeScript("document.querySelector('.account-modal-close').click()") - await delay(regularDelayMs * 4) + + await driver.wait(until.stalenessOf(accountModal)) + await delay(regularDelayMs) }) }) @@ -234,7 +294,7 @@ describe('MetaMask', function () { await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [logoutButton] = await driver.findElements(By.css('.account-menu__logout-button')) + const logoutButton = await findElement(driver, By.css('.account-menu__logout-button')) assert.equal(await logoutButton.getText(), 'Log out') await logoutButton.click() await delay(regularDelayMs) @@ -252,23 +312,23 @@ describe('MetaMask', function () { await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [createAccount] = await driver.findElements(By.xpath(`//div[contains(text(), 'Create Account')]`)) + const createAccount = await findElement(driver, By.xpath(`//div[contains(text(), 'Create Account')]`)) await createAccount.click() await delay(regularDelayMs) }) it('set account name', async () => { - const [accountName] = await driver.findElements(By.css('.new-account-create-form input')) + const accountName = await findElement(driver, By.css('.new-account-create-form input')) await accountName.sendKeys('2nd account') await delay(regularDelayMs) - const [create] = await driver.findElements(By.xpath(`//button[contains(text(), 'Create')]`)) + const create = await findElement(driver, By.xpath(`//button[contains(text(), 'Create')]`)) await create.click() await delay(regularDelayMs) }) it('should correct account name', async () => { - const [accountName] = await driver.findElements(By.css('.account-name')) + const accountName = await findElement(driver, By.css('.account-name')) assert.equal(await accountName.getText(), '2nd account') await delay(regularDelayMs) }) @@ -279,19 +339,19 @@ describe('MetaMask', function () { await driver.findElement(By.css('.account-menu__icon')).click() await delay(regularDelayMs) - const [logoutButton] = await driver.findElements(By.css('.account-menu__logout-button')) + const logoutButton = await findElement(driver, By.css('.account-menu__logout-button')) assert.equal(await logoutButton.getText(), 'Log out') await logoutButton.click() await delay(regularDelayMs) }) it('imports seed phrase', async () => { - const [restoreSeedLink] = await driver.findElements(By.css('.unlock-page__link--import')) + const restoreSeedLink = await findElement(driver, By.css('.unlock-page__link--import')) assert.equal(await restoreSeedLink.getText(), 'Import using account seed phrase') await restoreSeedLink.click() await delay(regularDelayMs) - const [seedTextArea] = await driver.findElements(By.css('textarea')) + const seedTextArea = await findElement(driver, By.css('textarea')) await seedTextArea.sendKeys(testSeedPhrase) await delay(regularDelayMs) @@ -302,7 +362,7 @@ describe('MetaMask', function () { }) it('balance renders', async () => { - const balance = await driver.findElement(By.css('.balance-display .token-amount')) + const balance = await findElement(driver, By.css('.balance-display .token-amount')) const tokenAmount = await balance.getText() assert.equal(tokenAmount, '100.000 ETH') await delay(regularDelayMs) @@ -311,56 +371,60 @@ describe('MetaMask', function () { describe('Send ETH from inside MetaMask', () => { it('starts to send a transaction', async function () { - const [sendButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Send')]`)) + const sendButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`)) await sendButton.click() await delay(regularDelayMs) - const [inputAddress] = await driver.findElements(By.css('input[placeholder="Recipient Address"]')) - const [inputAmount] = await driver.findElements(By.css('.currency-display__input')) + const inputAddress = await findElement(driver, By.css('input[placeholder="Recipient Address"]')) + const inputAmount = await findElement(driver, By.css('.currency-display__input')) await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') await inputAmount.sendKeys('1') // Set the gas limit - const [configureGas] = await driver.findElements(By.css('.send-v2__gas-fee-display button')) + const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button')) await configureGas.click() await delay(regularDelayMs) - const [save] = await driver.findElements(By.xpath(`//button[contains(text(), 'Save')]`)) + const gasModal = await driver.findElement(By.css('span .modal')) + + const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`)) await save.click() + await driver.wait(until.stalenessOf(gasModal)) await delay(regularDelayMs) // Continue to next screen - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) + const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) await nextScreen.click() await delay(regularDelayMs) }) it('confirms the transaction', async function () { - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Confirm')]`)) + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) await confirmButton.click() await delay(regularDelayMs) }) it('finds the transaction in the transactions list', async function () { - const transactions = await driver.findElements(By.css('.tx-list-item')) + const transactions = await findElements(driver, By.css('.tx-list-item')) assert.equal(transactions.length, 1) - const txValues = await driver.findElements(By.css('.tx-list-value')) - assert.equal(txValues.length, 1) - assert.equal(await txValues[0].getText(), '1 ETH') + const txValues = await findElement(driver, By.css('.tx-list-value')) + await driver.wait(until.elementTextMatches(txValues, /1\sETH/), 10000) }) }) describe('Send ETH from Faucet', () => { it('starts a send transaction inside Faucet', async () => { - await driver.executeScript('window.open("https://faucet.metamask.io")') - await delay(waitingNewPageDelayMs) + await openNewPage(driver, 'https://faucet.metamask.io') const [extension, faucet] = await driver.getAllWindowHandles() await driver.switchTo().window(faucet) + + const faucetPageTitle = await findElement(driver, By.css('.container-fluid')) + await driver.wait(until.elementTextMatches(faucetPageTitle, /MetaMask/)) await delay(regularDelayMs) - const [send1eth] = await driver.findElements(By.xpath(`//button[contains(text(), '10 ether')]`)) + const send1eth = await findElement(driver, By.xpath(`//button[contains(text(), '10 ether')]`), 14000) await send1eth.click() await delay(regularDelayMs) @@ -368,7 +432,7 @@ describe('MetaMask', function () { await loadExtension(driver, extensionId) await delay(regularDelayMs) - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Confirm')]`)) + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`), 14000) await confirmButton.click() await delay(regularDelayMs) @@ -383,59 +447,146 @@ describe('MetaMask', function () { }) }) - describe('Add existing token using search', () => { - it('clicks on the Add Token button', async () => { - const [addToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Token')]`)) - await addToken.click() + describe('Deploy contract and call contract methods', () => { + let extension + let contractTestPage + it('confirms a deploy contract transaction', async () => { + await openNewPage(driver, 'http://127.0.0.1:8080/'); + + [extension, contractTestPage] = await driver.getAllWindowHandles() + await delay(regularDelayMs) + + const deployContractButton = await findElement(driver, By.css('#deployButton')) + await deployContractButton.click() await delay(regularDelayMs) + + await driver.switchTo().window(extension) + await delay(regularDelayMs) + + const txListItem = await findElement(driver, By.css('.tx-list-item')) + await txListItem.click() + await delay(regularDelayMs) + + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirmButton.click() + await delay(regularDelayMs) + + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) + + const txAccounts = await findElements(driver, By.css('.tx-list-account')) + assert.equal(await txAccounts[0].getText(), 'Contract Deployment') }) - it('can pick a token from the existing options', async () => { - const [tokenSearch] = await driver.findElements(By.css('input.add-token__input')) - await tokenSearch.sendKeys('BAT') + it('calls and confirms a contract method where ETH is sent', async () => { + await driver.switchTo().window(contractTestPage) await delay(regularDelayMs) - const [token] = await driver.findElements(By.xpath("//div[contains(text(), 'BAT')]")) - await token.click() + const depositButton = await findElement(driver, By.css('#depositButton')) + await depositButton.click() await delay(regularDelayMs) - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) - await nextScreen.click() + await driver.switchTo().window(extension) await delay(regularDelayMs) - const [addTokens] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Tokens')]`)) - await addTokens.click() - await delay(largeDelayMs) + const txListItem = await findElement(driver, By.css('.tx-list-item')) + await txListItem.click() + await delay(regularDelayMs) + + // Set the gas limit + const configureGas = await findElement(driver, By.css('.sliders-icon-container')) + await configureGas.click() + await delay(regularDelayMs) + + const gasModal = await driver.findElement(By.css('span .modal')) + await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title'))) + + const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input')) + await gasPriceInput.clear() + await gasPriceInput.sendKeys('10') + await gasLimitInput.clear() + await gasLimitInput.sendKeys('60001') + + const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`)) + await save.click() + await delay(regularDelayMs) + + await driver.wait(until.stalenessOf(gasModal)) + + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirmButton.click() + await delay(regularDelayMs) + + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) + + const txValues = await findElement(driver, By.css('.tx-list-value')) + await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000) + + const txAccounts = await findElements(driver, By.css('.tx-list-account')) + const firstTxAddress = await txAccounts[0].getText() + assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/)) }) - it('renders the balance for the chosen token', async () => { - const balance = await driver.findElement(By.css('.tx-view .balance-display .token-amount')) + it('calls and confirms a contract method where ETH is received', async () => { + await driver.switchTo().window(contractTestPage) + await delay(regularDelayMs) + + const withdrawButton = await findElement(driver, By.css('#withdrawButton')) + await withdrawButton.click() + await delay(regularDelayMs) + + await driver.switchTo().window(extension) + await delay(regularDelayMs) + + const txListItem = await findElement(driver, By.css('.tx-list-item')) + await txListItem.click() + await delay(regularDelayMs) + + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirmButton.click() + await delay(regularDelayMs) + + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) + + const txValues = await findElement(driver, By.css('.tx-list-value')) + await driver.wait(until.elementTextMatches(txValues, /0\sETH/), 10000) + + await driver.switchTo().window(contractTestPage) + await driver.close() + await driver.switchTo().window(extension) + }) + + it('renders the correct ETH balance', async () => { + const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) + await driver.wait(until.elementTextMatches(balance, /^86.*ETH.*$/), 10000) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '0BAT') + assert.ok(/^86.*ETH.*$/.test(tokenAmount)) await delay(regularDelayMs) }) }) describe('Add a custom token from TokenFactory', () => { it('creates a new token', async () => { - await driver.executeScript('window.open("https://tokenfactory.surge.sh/#/factory")') - await delay(waitingNewPageDelayMs) + openNewPage(driver, 'https://tokenfactory.surge.sh/#/factory') + await delay(regularDelayMs * 10) const [extension, tokenFactory] = await driver.getAllWindowHandles() - await driver.switchTo().window(tokenFactory) + const [ totalSupply, tokenName, tokenDecimal, tokenSymbol, - ] = await driver.findElements(By.css('input')) + ] = await findElements(driver, By.css('.form-control')) await totalSupply.sendKeys('100') await tokenName.sendKeys('Test') await tokenDecimal.sendKeys('0') await tokenSymbol.sendKeys('TST') - const [createToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Create Token')]`)) + const createToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Create Token')]`)) await createToken.click() await delay(regularDelayMs) @@ -443,48 +594,261 @@ describe('MetaMask', function () { await loadExtension(driver, extensionId) await delay(regularDelayMs) - const [confirmButton] = await driver.findElements(By.xpath(`//button[contains(text(), 'Confirm')]`)) + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) await confirmButton.click() await delay(regularDelayMs) await driver.switchTo().window(tokenFactory) await delay(regularDelayMs) + const tokenContactAddress = await driver.findElement(By.css('div > div > div:nth-child(2) > span:nth-child(3)')) tokenAddress = await tokenContactAddress.getText() + await driver.close() await driver.switchTo().window(extension) await loadExtension(driver, extensionId) + await driver.switchTo().window(extension) await delay(regularDelayMs) + }) it('clicks on the Add Token button', async () => { - const [addToken] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Token')]`)) + const addToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Token')]`)) await addToken.click() await delay(regularDelayMs) }) it('picks the newly created Test token', async () => { - const [addCustomToken] = await driver.findElements(By.xpath("//div[contains(text(), 'Custom Token')]")) + const addCustomToken = await findElement(driver, By.xpath("//div[contains(text(), 'Custom Token')]")) await addCustomToken.click() await delay(regularDelayMs) - const [newTokenAddress] = await driver.findElements(By.css('.add-token__add-custom-form input')) + const newTokenAddress = await findElement(driver, By.css('#custom-address')) await newTokenAddress.sendKeys(tokenAddress) await delay(regularDelayMs) - const [nextScreen] = await driver.findElements(By.xpath(`//button[contains(text(), 'Next')]`)) + const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) await nextScreen.click() await delay(regularDelayMs) - const [addTokens] = await driver.findElements(By.xpath(`//button[contains(text(), 'Add Tokens')]`)) + const addTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Tokens')]`)) await addTokens.click() await delay(regularDelayMs) }) it('renders the balance for the new token', async () => { - const [balance] = await driver.findElements(By.css('.tx-view .balance-display .token-amount')) + const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) + await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/)) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '100TST') + assert.ok(/^100\s*TST\s*$/.test(tokenAmount)) + await delay(regularDelayMs) + }) + }) + + describe('Send token from inside MetaMask', () => { + let gasModal + it('starts to send a transaction', async function () { + const sendButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`)) + await sendButton.click() + await delay(regularDelayMs) + + const inputAddress = await findElement(driver, By.css('input[placeholder="Recipient Address"]')) + const inputAmount = await findElement(driver, By.css('.currency-display__input')) + await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') + await inputAmount.sendKeys('50') + + // Set the gas limit + const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button')) + await configureGas.click() + await delay(regularDelayMs) + + gasModal = await driver.findElement(By.css('span .modal')) + }) + + it('customizes gas', async () => { + await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title'))) + const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`)) + await save.click() + await delay(regularDelayMs) + }) + + it('transitions to the confirm screen', async () => { + await driver.wait(until.stalenessOf(gasModal)) + + // Continue to next screen + const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) + await nextScreen.click() + await delay(regularDelayMs) + }) + + it('submits the transaction', async function () { + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirmButton.click() + await delay(regularDelayMs) + }) + + it('finds the transaction in the transactions list', async function () { + const transactions = await findElements(driver, By.css('.tx-list-item')) + assert.equal(transactions.length, 1) + + const txValues = await findElements(driver, By.css('.tx-list-value')) + assert.equal(txValues.length, 1) + + // test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved, + // or possibly until we use latest version of firefox in the tests + if (process.env.SELENIUM_BROWSER !== 'firefox') { + await driver.wait(until.elementTextMatches(txValues[0], /50\sTST/), 10000) + } + + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + const tx = await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed|Failed/), 10000) + assert.equal(await tx.getText(), 'Confirmed') + }) + }) + + describe('Send a custom token from TokenFactory', () => { + let gasModal + it('sends an already created token', async () => { + openNewPage(driver, `https://tokenfactory.surge.sh/#/token/${tokenAddress}`) + + const [extension] = await driver.getAllWindowHandles() + + const [ + transferToAddress, + transferToAmount, + ] = await findElements(driver, By.css('.form-control')) + + await transferToAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') + await transferToAmount.sendKeys('26') + + const transferAmountButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Transfer Amount')]`)) + await transferAmountButton.click() + await delay(regularDelayMs) + + const [,, popup] = await driver.getAllWindowHandles() + await driver.switchTo().window(popup) + await driver.close() + await driver.switchTo().window(extension) + await delay(regularDelayMs) + + const [txListItem] = await findElements(driver, By.css('.tx-list-item')) + await txListItem.click() + await delay(regularDelayMs) + + // Set the gas limit + const configureGas = await driver.wait(until.elementLocated(By.css('.send-v2__gas-fee-display button'))) + await configureGas.click() + await delay(regularDelayMs) + + gasModal = await driver.findElement(By.css('span .modal')) + }) + + it('customizes gas', async () => { + await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title'))) + + const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input')) + await gasPriceInput.clear() + await delay(tinyDelayMs) + await gasPriceInput.sendKeys('10') + await delay(tinyDelayMs) + await gasLimitInput.clear() + await delay(tinyDelayMs) + await gasLimitInput.sendKeys(Key.chord(Key.CONTROL, 'a')) + await gasLimitInput.sendKeys('60000') + await gasLimitInput.sendKeys(Key.chord(Key.CONTROL, 'e')) + + // Needed for different behaviour of input in different versions of firefox + const gasLimitInputValue = await gasLimitInput.getAttribute('value') + if (gasLimitInputValue === '600001') { + await gasLimitInput.sendKeys(Key.BACK_SPACE) + } + + const save = await findElement(driver, By.css('.send-v2__customize-gas__save')) + await save.click() + await driver.wait(until.stalenessOf(gasModal)) + + const gasFeeInput = await findElement(driver, By.css('.currency-display__input')) + assert.equal(await gasFeeInput.getAttribute('value'), 0.0006) + }) + + it('submits the transaction', async function () { + const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirmButton.click() + await delay(regularDelayMs) + }) + + it('finds the transaction in the transactions list', async function () { + const transactions = await findElements(driver, By.css('.tx-list-item')) + assert.equal(transactions.length, 2) + + const txValues = await findElements(driver, By.css('.tx-list-value')) + await driver.wait(until.elementTextMatches(txValues[0], /26\sTST/)) + const txStatuses = await findElements(driver, By.css('.tx-list-status')) + await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/)) + + const walletBalance = await findElement(driver, By.css('.wallet-balance')) + await walletBalance.click() + + const tokenListItems = await findElements(driver, By.css('.token-list-item')) + await tokenListItems[0].click() + + // test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved, + // or possibly until we use latest version of firefox in the tests + if (process.env.SELENIUM_BROWSER !== 'firefox') { + const tokenBalanceAmount = await findElement(driver, By.css('.token-balance__amount')) + assert.equal(await tokenBalanceAmount.getText(), '24') + } + }) + }) + + describe('Hide token', () => { + it('hides the token when clicked', async () => { + const [hideTokenEllipsis] = await findElements(driver, By.css('.token-list-item__ellipsis')) + await hideTokenEllipsis.click() + + const byTokenMenuDropdownOption = By.css('.menu__item--clickable') + const tokenMenuDropdownOption = await driver.wait(until.elementLocated(byTokenMenuDropdownOption)) + + await tokenMenuDropdownOption.click() + + const confirmHideModal = await findElement(driver, By.css('span .modal')) + + const byHideTokenConfirmationButton = By.css('.hide-token-confirmation__button') + const hideTokenConfirmationButton = await driver.wait(until.elementLocated(byHideTokenConfirmationButton)) + await hideTokenConfirmationButton.click() + + await driver.wait(until.stalenessOf(confirmHideModal)) + }) + }) + + describe('Add existing token using search', () => { + it('clicks on the Add Token button', async () => { + const addToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Token')]`)) + await addToken.click() + await delay(regularDelayMs) + }) + + it('can pick a token from the existing options', async () => { + const tokenSearch = await findElement(driver, By.css('#search-tokens')) + await tokenSearch.sendKeys('BAT') + await delay(regularDelayMs) + + const token = await findElement(driver, By.xpath("//span[contains(text(), 'BAT')]")) + await token.click() + await delay(regularDelayMs) + + const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) + await nextScreen.click() + await delay(regularDelayMs) + + const addTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Tokens')]`)) + await addTokens.click() + await delay(largeDelayMs) + }) + + it('renders the balance for the chosen token', async () => { + const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) + await driver.wait(until.elementTextMatches(balance, /0\sBAT/)) await delay(regularDelayMs) }) }) diff --git a/test/e2e/beta/run-all.sh b/test/e2e/beta/run-all.sh index 5916d5614..493e1360a 100755 --- a/test/e2e/beta/run-all.sh +++ b/test/e2e/beta/run-all.sh @@ -6,5 +6,5 @@ set -o pipefail export PATH="$PATH:./node_modules/.bin" -shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec' -shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec' +shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && superstatic test/e2e/beta/contract-test/ --port 8080 --host 127.0.0.1' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec' +shell-parallel -s 'npm run ganache:start -- -d' -x 'sleep 5 && superstatic test/e2e/beta/contract-test/ --port 8080 --host 127.0.0.1' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec' diff --git a/test/e2e/func.js b/test/e2e/func.js index 9f06e7f37..7b1730959 100644 --- a/test/e2e/func.js +++ b/test/e2e/func.js @@ -21,7 +21,7 @@ function delay (time) { } function buildChromeWebDriver (extPath) { - const tmpProfile = path.join(os.tmpdir(), fs.mkdtempSync('mm-chrome-profile')); + const tmpProfile = fs.mkdtempSync(path.join(os.tmpdir(), 'mm-chrome-profile')) return new webdriver.Builder() .withCapabilities({ chromeOptions: { diff --git a/test/e2e/metamask.spec.js b/test/e2e/metamask.spec.js index a08a34d96..a32b924b8 100644 --- a/test/e2e/metamask.spec.js +++ b/test/e2e/metamask.spec.js @@ -4,7 +4,7 @@ const path = require('path') const assert = require('assert') const pify = require('pify') const webdriver = require('selenium-webdriver') -const { By, Key } = webdriver +const { By, Key, until } = webdriver const { delay, buildChromeWebDriver, buildFirefoxWebdriver, installWebExt, getExtensionIdChrome, getExtensionIdFirefox } = require('./func') describe('Metamask popup page', function () { @@ -71,13 +71,6 @@ describe('Metamask popup page', function () { it('matches MetaMask title', async () => { const title = await driver.getTitle() assert.equal(title, 'MetaMask', 'title matches MetaMask') - }) - - it('shows privacy notice', async () => { - await delay(300) - const privacy = await driver.findElement(By.css('.terms-header')).getText() - assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice') - await driver.findElement(By.css('button')).click() await delay(300) }) @@ -100,6 +93,24 @@ describe('Metamask popup page', function () { await button.click() }) + it('shows privacy notice', async () => { + const privacy = await driver.findElement(By.css('.terms-header')).getText() + assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice') + await driver.findElement(By.css('button')).click() + await delay(300) + }) + + it('shows phishing notice', async () => { + await delay(300) + const noticeHeader = await driver.findElement(By.css('.terms-header')).getText() + assert.equal(noticeHeader, 'PHISHING WARNING', 'shows phishing warning') + const element = await driver.findElement(By.css('.markdown')) + await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', element) + await delay(300) + await driver.findElement(By.css('button')).click() + await delay(300) + }) + it('accepts password with length of eight', async () => { const passwordBox = await driver.findElement(By.id('password-box')) const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm')) @@ -218,7 +229,11 @@ describe('Metamask popup page', function () { it('confirms transaction', async function () { await delay(300) - await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')).click() + const bySubmitButton = By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input') + const submitButton = await driver.wait(until.elementLocated(bySubmitButton)) + + submitButton.click() + await delay(500) }) @@ -258,7 +273,8 @@ describe('Metamask popup page', function () { it('confirms transaction in MetaMask popup', async function () { const windowHandles = await driver.getAllWindowHandles() await driver.switchTo().window(windowHandles[windowHandles.length - 1]) - const metamaskSubmit = await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')) + const byMetamaskSubmit = By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input') + const metamaskSubmit = await driver.wait(until.elementLocated(byMetamaskSubmit)) await metamaskSubmit.click() await delay(1000) }) @@ -319,7 +335,7 @@ describe('Metamask popup page', function () { await driver.executeScript('window.metamask.setProviderType(arguments[0])', type) } - async function checkBrowserForConsoleErrors() { + async function checkBrowserForConsoleErrors () { const ignoredLogTypes = ['WARNING'] const ignoredErrorMessages = [ // React throws error warnings on "dataset", but still sets the data-* properties correctly diff --git a/test/flat.conf.js b/test/flat.conf.js index cd2dbdcdc..1c9ec3dcd 100644 --- a/test/flat.conf.js +++ b/test/flat.conf.js @@ -1,6 +1,6 @@ const getBaseConfig = require('./base.conf.js') -module.exports = function(config) { +module.exports = function (config) { const settings = getBaseConfig(config) settings.files.push('development/bundle.js') settings.files.push('test/integration/bundle.js') diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js index 5a08c90cd..6de7574c4 100644 --- a/test/integration/lib/add-token.js +++ b/test/integration/lib/add-token.js @@ -75,7 +75,7 @@ async function runAddTokenFlowTest (assert, done) { tokenWrapper[0].click() // Click Next button - let nextButton = await queryAsync($, 'button.btn-primary.btn--large') + const nextButton = await queryAsync($, 'button.btn-primary.btn--large') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') nextButton[0].click() diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js index d5ed7c77c..5613c0dcb 100644 --- a/test/integration/lib/confirm-sig-requests.js +++ b/test/integration/lib/confirm-sig-requests.js @@ -1,10 +1,7 @@ const reactTriggerChange = require('react-trigger-change') const { - timeout, queryAsync, - findAsync, } = require('../../lib/util') -const PASSWORD = 'password123' QUnit.module('confirm sig requests') @@ -16,8 +13,8 @@ QUnit.test('successful confirmation of sig requests', (assert) => { }) }) -async function runConfirmSigRequestsTest(assert, done) { - let selectState = await queryAsync($, 'select') +async function runConfirmSigRequestsTest (assert, done) { + const selectState = await queryAsync($, 'select') selectState.val('confirm sig requests') reactTriggerChange(selectState[0]) @@ -32,7 +29,7 @@ async function runConfirmSigRequestsTest(assert, done) { let confirmSigHeadline = await queryAsync($, '.request-signature__headline') assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') - let confirmSigMessage = await queryAsync($, '.request-signature__notice') + const confirmSigMessage = await queryAsync($, '.request-signature__notice') assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/)) let confirmSigRowValue = await queryAsync($, '.request-signature__row-value') @@ -45,7 +42,7 @@ async function runConfirmSigRequestsTest(assert, done) { assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested') confirmSigRowValue = await queryAsync($, '.request-signature__row-value') - assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) + assert.ok(confirmSigRowValue[0].textContent.match(/^#\sTerms\sof\sUse/)) confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large') confirmSigSignButton[0].click() diff --git a/test/integration/lib/currency-localization.js b/test/integration/lib/currency-localization.js index 7705c9720..3ad1a23e5 100644 --- a/test/integration/lib/currency-localization.js +++ b/test/integration/lib/currency-localization.js @@ -15,7 +15,7 @@ QUnit.test('renders localized currency', (assert) => { }) }) -async function runCurrencyLocalizationTest(assert, done) { +async function runCurrencyLocalizationTest (assert, done) { console.log('*** start runCurrencyLocalizationTest') const selectState = await queryAsync($, 'select') selectState.val('currency localization') diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js index f43a30c74..8bbdb4410 100644 --- a/test/integration/lib/mascara-first-time.js +++ b/test/integration/lib/mascara-first-time.js @@ -42,7 +42,7 @@ async function runFirstTimeUsageTest (assert, done) { assert.equal(created.textContent, 'Your unique account image', 'unique image screen') // Agree button - let button = (await findAsync(app, 'button'))[0] + const button = (await findAsync(app, 'button'))[0] assert.ok(button, 'button present') button.click() diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 176907926..241358135 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -5,8 +5,6 @@ const { findAsync, } = require('../../lib/util') -const PASSWORD = 'password123' - QUnit.module('new ui send flow') QUnit.test('successful send flow', (assert) => { @@ -54,7 +52,7 @@ async function customizeGas (assert, price, limit, ethFee, usdFee) { ) } -async function runSendFlowTest(assert, done) { +async function runSendFlowTest (assert, done) { console.log('*** start runSendFlowTest') const selectState = await queryAsync($, 'select') selectState.val('send new ui') @@ -87,7 +85,7 @@ async function runSendFlowTest(assert, done) { sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name') assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name') - let sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input') + const sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input') sendToFieldInput[0].focus() const sendToDropdownList = await queryAsync($, '.send-v2__from-dropdown__list') @@ -101,7 +99,7 @@ async function runSendFlowTest(assert, done) { const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)') sendAmountField.find('.currency-display')[0].click() - const sendAmountFieldInput = await findAsync(sendAmountField, 'input:text') + const sendAmountFieldInput = await findAsync(sendAmountField, '.currency-display__input') sendAmountFieldInput.val('5.1') reactTriggerChange(sendAmountField.find('input')[0]) @@ -117,17 +115,17 @@ async function runSendFlowTest(assert, done) { const sendGasField = await queryAsync($, '.send-v2__gas-fee-display') assert.equal( sendGasField.find('.currency-display__input-wrapper > input').val(), - '0.000198', + '0.000021', 'send gas field should show estimated gas total' ) assert.equal( sendGasField.find('.currency-display__converted-value')[0].textContent, - '$0.24 USD', + '$0.03 USD', 'send gas field should show estimated gas total converted to USD' ) await customizeGas(assert, 0, 21000, '0', '$0.00 USD') - await customizeGas(assert, 500, 60000, '0.003', '$3.60 USD') + await customizeGas(assert, 500, 60000, '0.03', '$36.03 USD') const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button') assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') @@ -165,7 +163,7 @@ async function runSendFlowTest(assert, done) { const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)') sendAmountFieldInEdit.find('.currency-display')[0].click() - const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text') + const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('.currency-display__input') sendAmountFieldInputInEdit.val('1.0') reactTriggerChange(sendAmountFieldInputInEdit[0]) diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js index 4856b3852..6b67b1d2e 100644 --- a/test/integration/lib/tx-list-items.js +++ b/test/integration/lib/tx-list-items.js @@ -1,6 +1,5 @@ const reactTriggerChange = require('../../lib/react-trigger-change') const { - timeout, queryAsync, findAsync, } = require('../../lib/util') @@ -15,7 +14,7 @@ QUnit.test('renders list items successfully', (assert) => { }) }) -async function runTxListItemsTest(assert, done) { +async function runTxListItemsTest (assert, done) { console.log('*** start runTxListItemsTest') const selectState = await queryAsync($, 'select') selectState.val('tx list items') diff --git a/test/lib/mock-encryptor.js b/test/lib/mock-encryptor.js index ef229a82f..48aa9e52c 100644 --- a/test/lib/mock-encryptor.js +++ b/test/lib/mock-encryptor.js @@ -31,6 +31,6 @@ module.exports = { getRandomValues () { return 'SOO RANDO!!!1' - } + }, } diff --git a/test/lib/mock-tx-gen.js b/test/lib/mock-tx-gen.js index 7aea09c59..106101500 100644 --- a/test/lib/mock-tx-gen.js +++ b/test/lib/mock-tx-gen.js @@ -17,14 +17,14 @@ class TxGenerator { } generate (tx = {}, opts = {}) { - let { count, fromNonce } = opts + const { count, fromNonce } = opts let nonce = fromNonce || this.txs.length - let txs = [] + const txs = [] for (let i = 0; i < count; i++) { txs.push(extend(template, { txParams: { nonce: hexify(nonce++), - } + }, }, tx)) } this.txs = this.txs.concat(txs) diff --git a/test/lib/react-trigger-change.js b/test/lib/react-trigger-change.js index a25ddff00..d169dd614 100644 --- a/test/lib/react-trigger-change.js +++ b/test/lib/react-trigger-change.js @@ -1,7 +1,7 @@ // Trigger React's synthetic change events on input, textarea and select elements // https://github.com/vitalyq/react-trigger-change -/******************IMPORTANT NOTE******************/ +/** ****************IMPORTANT NOTE******************/ /* This file is a modification of the */ /* 'react-trigger-change' library linked above. */ /* That library breaks when 'onFocus' events are */ @@ -11,13 +11,13 @@ /* This modification removes the accomodations */ /* 'react-trigger-change' makes for IE to ensure */ /* our tests can pass in chrome and firefox. */ -/**************************************************/ +/** ************************************************/ -'use strict'; +'use strict' // Constants and functions are declared inside the closure. // In this way, reactTriggerChange can be passed directly to executeScript in Selenium. -module.exports = function reactTriggerChange(node) { +module.exports = function reactTriggerChange (node) { var supportedInputTypes = { color: true, date: true, @@ -33,47 +33,47 @@ module.exports = function reactTriggerChange(node) { text: true, time: true, url: true, - week: true - }; - var nodeName = node.nodeName.toLowerCase(); - var type = node.type; - var event; - var descriptor; - var initialValue; - var initialChecked; - var initialCheckedRadio; + week: true, + } + var nodeName = node.nodeName.toLowerCase() + var type = node.type + var event + var descriptor + var initialValue + var initialChecked + var initialCheckedRadio // Do not try to delete non-configurable properties. // Value and checked properties on DOM elements are non-configurable in PhantomJS. - function deletePropertySafe(elem, prop) { - var desc = Object.getOwnPropertyDescriptor(elem, prop); + function deletePropertySafe (elem, prop) { + var desc = Object.getOwnPropertyDescriptor(elem, prop) if (desc && desc.configurable) { - delete elem[prop]; + delete elem[prop] } } - function getCheckedRadio(radio) { - var name = radio.name; - var radios; - var i; + function getCheckedRadio (radio) { + var name = radio.name + var radios + var i if (name) { - radios = document.querySelectorAll('input[type="radio"][name="' + name + '"]'); + radios = document.querySelectorAll('input[type="radio"][name="' + name + '"]') for (i = 0; i < radios.length; i += 1) { if (radios[i].checked) { - return radios[i] !== radio ? radios[i] : null; + return radios[i] !== radio ? radios[i] : null } } } - return null; + return null } - function preventChecking(e) { - e.preventDefault(); + function preventChecking (e) { + e.preventDefault() if (!initialChecked) { - e.target.checked = false; + e.target.checked = false } if (initialCheckedRadio) { - initialCheckedRadio.checked = true; + initialCheckedRadio.checked = true } } @@ -81,81 +81,81 @@ module.exports = function reactTriggerChange(node) { (nodeName === 'input' && type === 'file')) { // IE9-IE11, non-IE // Dispatch change. - event = document.createEvent('HTMLEvents'); - event.initEvent('change', true, false); - node.dispatchEvent(event); + event = document.createEvent('HTMLEvents') + event.initEvent('change', true, false) + node.dispatchEvent(event) } else if ((nodeName === 'input' && supportedInputTypes[type]) || nodeName === 'textarea') { // React 16 // Cache artificial value property descriptor. // Property doesn't exist in React <16, descriptor is undefined. - descriptor = Object.getOwnPropertyDescriptor(node, 'value'); + descriptor = Object.getOwnPropertyDescriptor(node, 'value') // Update inputValueTracking cached value. // Remove artificial value property. // Restore initial value to trigger event with it. - initialValue = node.value; - node.value = initialValue + '#'; - deletePropertySafe(node, 'value'); - node.value = initialValue; + initialValue = node.value + node.value = initialValue + '#' + deletePropertySafe(node, 'value') + node.value = initialValue // React 0.14: IE10-IE11, non-IE // React 15: non-IE // React 16: IE10-IE11, non-IE - event = document.createEvent('HTMLEvents'); - event.initEvent('input', true, false); - node.dispatchEvent(event); + event = document.createEvent('HTMLEvents') + event.initEvent('input', true, false) + node.dispatchEvent(event) // React 16 // Restore artificial value property descriptor. if (descriptor) { - Object.defineProperty(node, 'value', descriptor); + Object.defineProperty(node, 'value', descriptor) } } else if (nodeName === 'input' && type === 'checkbox') { // Invert inputValueTracking cached value. - node.checked = !node.checked; + node.checked = !node.checked // Dispatch click. // Click event inverts checked value. - event = document.createEvent('MouseEvents'); - event.initEvent('click', true, true); - node.dispatchEvent(event); + event = document.createEvent('MouseEvents') + event.initEvent('click', true, true) + node.dispatchEvent(event) } else if (nodeName === 'input' && type === 'radio') { // Cache initial checked value. - initialChecked = node.checked; + initialChecked = node.checked // Find and cache initially checked radio in the group. - initialCheckedRadio = getCheckedRadio(node); + initialCheckedRadio = getCheckedRadio(node) // React 16 // Cache property descriptor. // Invert inputValueTracking cached value. // Remove artificial checked property. // Restore initial value, otherwise preventDefault will eventually revert the value. - descriptor = Object.getOwnPropertyDescriptor(node, 'checked'); - node.checked = !initialChecked; - deletePropertySafe(node, 'checked'); - node.checked = initialChecked; + descriptor = Object.getOwnPropertyDescriptor(node, 'checked') + node.checked = !initialChecked + deletePropertySafe(node, 'checked') + node.checked = initialChecked // Prevent toggling during event capturing phase. // Set checked value to false if initialChecked is false, // otherwise next listeners will see true. // Restore initially checked radio in the group. - node.addEventListener('click', preventChecking, true); + node.addEventListener('click', preventChecking, true) // Dispatch click. // Click event inverts checked value. - event = document.createEvent('MouseEvents'); - event.initEvent('click', true, true); - node.dispatchEvent(event); + event = document.createEvent('MouseEvents') + event.initEvent('click', true, true) + node.dispatchEvent(event) // Remove listener to stop further change prevention. - node.removeEventListener('click', preventChecking, true); + node.removeEventListener('click', preventChecking, true) // React 16 // Restore artificial checked property descriptor. if (descriptor) { - Object.defineProperty(node, 'checked', descriptor); + Object.defineProperty(node, 'checked', descriptor) } } -}; +} diff --git a/test/lib/util.js b/test/lib/util.js index 626280745..858565bb9 100644 --- a/test/lib/util.js +++ b/test/lib/util.js @@ -11,7 +11,7 @@ function timeout (time) { }) } -async function findAsync(container, selector, opts) { +async function findAsync (container, selector, opts) { try { return await pollUntilTruthy(() => { const result = container.find(selector) @@ -22,7 +22,7 @@ async function findAsync(container, selector, opts) { } } -async function queryAsync(jQuery, selector, opts) { +async function queryAsync (jQuery, selector, opts) { try { return await pollUntilTruthy(() => { const result = jQuery(selector) @@ -33,7 +33,7 @@ async function queryAsync(jQuery, selector, opts) { } } -async function pollUntilTruthy(fn, opts = {}){ +async function pollUntilTruthy (fn, opts = {}) { const pollingInterval = opts.pollingInterval || 100 const timeoutInterval = opts.timeoutInterval || 5000 const start = Date.now() diff --git a/test/mascara.conf.js b/test/mascara.conf.js index 97e53fc2b..faf3147bd 100644 --- a/test/mascara.conf.js +++ b/test/mascara.conf.js @@ -1,13 +1,13 @@ const getBaseConfig = require('./base.conf.js') -module.exports = function(config) { +module.exports = function (config) { const settings = getBaseConfig(config) // ui and tests settings.files.push('dist/mascara/ui.js') settings.files.push('dist/mascara/tests.js') // service worker background - settings.files.push({ pattern: 'dist/mascara/background.js', watched: false, included: false, served: true }), + settings.files.push({ pattern: 'dist/mascara/background.js', watched: false, included: false, served: true }) settings.proxies['/background.js'] = '/base/dist/mascara/background.js' // use this to keep the browser open for debugging diff --git a/test/screens/new-ui.js b/test/screens/new-ui.js index e3ba7f6ab..92d1b8378 100644 --- a/test/screens/new-ui.js +++ b/test/screens/new-ui.js @@ -12,7 +12,7 @@ const pngFileStream = require('png-file-stream') const sizeOfPng = require('image-size/lib/types/png') const By = webdriver.By const localesIndex = require('../../app/_locales/index.json') -const { delay, buildChromeWebDriver, buildFirefoxWebdriver, installWebExt, getExtensionIdChrome, getExtensionIdFirefox } = require('../e2e/func') +const { delay, buildChromeWebDriver, getExtensionIdChrome } = require('../e2e/func') const eth = new Ethjs(new Ethjs.HttpProvider('http://localhost:8545')) @@ -41,11 +41,9 @@ captureAllScreens() }) -async function captureAllScreens() { +async function captureAllScreens () { // common names - let button let tabs - let element await cleanScreenShotDir() @@ -108,7 +106,7 @@ async function captureAllScreens() { await captureLanguageScreenShots('terms') await delay(300) - element = driver.findElement(By.linkText('Attributions')) + const element = driver.findElement(By.linkText('Attributions')) await driver.executeScript('arguments[0].scrollIntoView(true)', element) await delay(300) await captureLanguageScreenShots('terms-scrolled') @@ -134,10 +132,10 @@ async function captureAllScreens() { // enter seed phrase const seedPhraseButtons = await driver.findElements(By.css('.backup-phrase__confirm-seed-options > button')) const seedPhraseButtonWords = await Promise.all(seedPhraseButtons.map(button => button.getText())) - for (let targetWord of seedPhraseWords) { + for (const targetWord of seedPhraseWords) { const wordIndex = seedPhraseButtonWords.indexOf(targetWord) if (wordIndex === -1) throw new Error(`Captured seed phrase word "${targetWord}" not in found seed phrase button options ${seedPhraseButtonWords.join(' ')}`) - await driver.findElement(By.css(`.backup-phrase__confirm-seed-options > button:nth-child(${wordIndex+1})`)).click() + await driver.findElement(By.css(`.backup-phrase__confirm-seed-options > button:nth-child(${wordIndex + 1})`)).click() await delay(100) } await captureLanguageScreenShots('confirm secret backup phrase - words selected correctly') @@ -191,11 +189,11 @@ async function captureAllScreens() { } -async function captureLanguageScreenShots(label) { +async function captureLanguageScreenShots (label) { const nonEnglishLocales = localesIndex.filter(localeMeta => localeMeta.code !== 'en') // take english shot await captureScreenShot(`${label} (en)`) - for (let localeMeta of nonEnglishLocales) { + for (const localeMeta of nonEnglishLocales) { // set locale and take shot await setLocale(localeMeta.code) await delay(300) @@ -206,19 +204,19 @@ async function captureLanguageScreenShots(label) { await delay(300) } -async function setLocale(code) { +async function setLocale (code) { await driver.executeScript('window.metamask.updateCurrentLocale(arguments[0])', code) } -async function setProviderType(type) { +async function setProviderType (type) { await driver.executeScript('window.metamask.setProviderType(arguments[0])', type) } -async function cleanScreenShotDir() { +async function cleanScreenShotDir () { await pify(rimraf)(`./test-artifacts/screens/`) } -async function captureScreenShot(label) { +async function captureScreenShot (label) { const shotIndex = screenshotCount.toString().padStart(4, '0') screenshotCount++ const artifactDir = `./test-artifacts/screens/` @@ -228,7 +226,7 @@ async function captureScreenShot(label) { await pify(fs.writeFile)(`${artifactDir}/${shotIndex} - ${label}.png`, screenshot, { encoding: 'base64' }) } -async function generateGif(){ +async function generateGif () { // calculate screenshot size const screenshot = await driver.takeScreenshot() const pngBuffer = Buffer.from(screenshot, 'base64') @@ -244,7 +242,7 @@ async function generateGif(){ await pify(endOfStream)(stream) } -async function verboseReportOnFailure(test) { +async function verboseReportOnFailure (test) { const artifactDir = `./test-artifacts/${test.title}` const filepathBase = `${artifactDir}/test-failure` await pify(mkdirp)(artifactDir) @@ -256,7 +254,7 @@ async function verboseReportOnFailure(test) { await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) } -async function requestEther(address) { +async function requestEther (address) { const accounts = await eth.accounts() await eth.sendTransaction({ from: accounts[0], to: address, value: 1 * 1e18, data: '0x0' }) } diff --git a/test/unit/app/account-import-strategies.spec.js b/test/unit/app/account-import-strategies.spec.js index 83cfaeb3e..d20ba0f0b 100644 --- a/test/unit/app/account-import-strategies.spec.js +++ b/test/unit/app/account-import-strategies.spec.js @@ -1,31 +1,58 @@ const assert = require('assert') -const path = require('path') -const accountImporter = require('../../../app/scripts/account-import-strategies/index') const ethUtil = require('ethereumjs-util') +const accountImporter = require('../../../app/scripts/account-import-strategies/index') +const { assertRejects } = require('../test-utils') describe('Account Import Strategies', function () { const privkey = '0x4cfd3e90fc78b0f86bf7524722150bb8da9c60cd532564d7ff43f5716514f553' const json = '{"version":3,"id":"dbb54385-0a99-437f-83c0-647de9f244c3","address":"a7f92ce3fba24196cf6f4bd2e1eb3db282ba998c","Crypto":{"ciphertext":"bde13d9ade5c82df80281ca363320ce254a8a3a06535bbf6ffdeaf0726b1312c","cipherparams":{"iv":"fbf93718a57f26051b292f072f2e5b41"},"cipher":"aes-128-ctr","kdf":"scrypt","kdfparams":{"dklen":32,"salt":"7ffe00488319dec48e4c49a120ca49c6afbde9272854c64d9541c83fc6acdffe","n":8192,"r":8,"p":1},"mac":"2adfd9c4bc1cdac4c85bddfb31d9e21a684e0e050247a70c5698facf6b7d4681"}}' - it('imports a private key and strips 0x prefix', async function () { - const importPrivKey = await accountImporter.importAccount('Private Key', [ privkey ]) - assert.equal(importPrivKey, ethUtil.stripHexPrefix(privkey)) - }) + describe('private key import', function () { + it('imports a private key and strips 0x prefix', async function () { + const importPrivKey = await accountImporter.importAccount('Private Key', [ privkey ]) + assert.equal(importPrivKey, ethUtil.stripHexPrefix(privkey)) + }) - it('fails when password is incorrect for keystore', async function () { - const wrongPassword = 'password2' + it('throws an error for empty string private key', async () => { + assertRejects(async function () { + await accountImporter.importAccount('Private Key', [ '' ]) + }, Error, 'no empty strings') + }) - try { - await accountImporter.importAccount('JSON File', [ json, wrongPassword]) - } catch (error) { - assert.equal(error.message, 'Key derivation failed - possibly wrong passphrase') - } - }) + it('throws an error for undefined string private key', async () => { + assertRejects(async function () { + await accountImporter.importAccount('Private Key', [ undefined ]) + }) + }) - it('imports json string and password to return a private key', async function () { - const fileContentsPassword = 'password1' - const importJson = await accountImporter.importAccount('JSON File', [ json, fileContentsPassword]) - assert.equal(importJson, '0x5733876abe94146069ce8bcbabbde2677f2e35fa33e875e92041ed2ac87e5bc7') + it('throws an error for undefined string private key', async () => { + assertRejects(async function () { + await accountImporter.importAccount('Private Key', []) + }) + }) + + it('throws an error for invalid private key', async () => { + assertRejects(async function () { + await accountImporter.importAccount('Private Key', [ 'popcorn' ]) + }) + }) }) + describe('JSON keystore import', function () { + it('fails when password is incorrect for keystore', async function () { + const wrongPassword = 'password2' + + try { + await accountImporter.importAccount('JSON File', [ json, wrongPassword]) + } catch (error) { + assert.equal(error.message, 'Key derivation failed - possibly wrong passphrase') + } + }) + + it('imports json string and password to return a private key', async function () { + const fileContentsPassword = 'password1' + const importJson = await accountImporter.importAccount('JSON File', [ json, fileContentsPassword]) + assert.equal(importJson, '0x5733876abe94146069ce8bcbabbde2677f2e35fa33e875e92041ed2ac87e5bc7') + }) + }) }) diff --git a/test/unit/app/controllers/address-book-controller.js b/test/unit/app/controllers/address-book-controller.js index dc4b8e3ff..1350e1a61 100644 --- a/test/unit/app/controllers/address-book-controller.js +++ b/test/unit/app/controllers/address-book-controller.js @@ -12,7 +12,7 @@ const stubPreferencesStore = { }, } }, -}; +} describe('address-book-controller', function () { var addressBookController diff --git a/test/unit/app/controllers/metamask-controller-test.js b/test/unit/app/controllers/metamask-controller-test.js index 4bc16e65e..0dda4609b 100644 --- a/test/unit/app/controllers/metamask-controller-test.js +++ b/test/unit/app/controllers/metamask-controller-test.js @@ -45,7 +45,7 @@ describe('MetaMaskController', function () { encryptor: { encrypt: function (password, object) { this.object = object - return Promise.resolve() + return Promise.resolve('mock-encrypted') }, decrypt: function () { return Promise.resolve(this.object) @@ -53,6 +53,9 @@ describe('MetaMaskController', function () { }, initState: clone(firstTimeState), }) + // disable diagnostics + metamaskController.diagnostics = null + // add sinon method spies sandbox.spy(metamaskController.keyringController, 'createNewVaultAndKeychain') sandbox.spy(metamaskController.keyringController, 'createNewVaultAndRestore') }) @@ -62,6 +65,31 @@ describe('MetaMaskController', function () { sandbox.restore() }) + describe('submitPassword', function () { + const password = 'password' + + beforeEach(async function () { + await metamaskController.createNewVaultAndKeychain(password) + }) + + it('removes any identities that do not correspond to known accounts.', async function () { + const fakeAddress = '0xbad0' + metamaskController.preferencesController.addAddresses([fakeAddress]) + await metamaskController.submitPassword(password) + + const identities = Object.keys(metamaskController.preferencesController.store.getState().identities) + const addresses = await metamaskController.keyringController.getAccounts() + + identities.forEach((identity) => { + assert.ok(addresses.includes(identity), `addresses should include all IDs: ${identity}`) + }) + + addresses.forEach((address) => { + assert.ok(identities.includes(address), `identities should include all Addresses: ${address}`) + }) + }) + }) + describe('#getGasPrice', function () { it('gives the 50th percentile lowest accepted gas price from recentBlocksController', async function () { @@ -479,7 +507,7 @@ describe('MetaMaskController', function () { it('errors when signing a message', async function () { await metamaskController.signPersonalMessage(personalMessages[0].msgParams) assert.equal(metamaskPersonalMsgs[msgId].status, 'signed') - assert.equal(metamaskPersonalMsgs[msgId].rawSig, '0x6a1b65e2b8ed53cf398a769fad24738f9fbe29841fe6854e226953542c4b6a173473cb152b6b1ae5f06d601d45dd699a129b0a8ca84e78b423031db5baa734741b') + assert.equal(metamaskPersonalMsgs[msgId].rawSig, '0x6a1b65e2b8ed53cf398a769fad24738f9fbe29841fe6854e226953542c4b6a173473cb152b6b1ae5f06d601d45dd699a129b0a8ca84e78b423031db5baa734741b') }) }) @@ -513,7 +541,7 @@ describe('MetaMaskController', function () { }) it('sets up controller dnode api for trusted communication', function (done) { - streamTest = createThoughStream((chunk, enc, cb) => { + streamTest = createThoughStream((chunk, enc, cb) => { assert.equal(chunk.name, 'controller') cb() done() diff --git a/test/unit/app/controllers/network-contoller-test.js b/test/unit/app/controllers/network-contoller-test.js index 789850ef3..e16fb104e 100644 --- a/test/unit/app/controllers/network-contoller-test.js +++ b/test/unit/app/controllers/network-contoller-test.js @@ -5,9 +5,6 @@ const { getNetworkDisplayName, } = require('../../../../app/scripts/controllers/network/util') -const { createTestProviderTools } = require('../../../stub/provider') -const providerResultStub = {} - describe('# Network Controller', function () { let networkController const noop = () => {} diff --git a/test/unit/app/controllers/notice-controller-test.js b/test/unit/app/controllers/notice-controller-test.js index e78b69623..b3ae75080 100644 --- a/test/unit/app/controllers/notice-controller-test.js +++ b/test/unit/app/controllers/notice-controller-test.js @@ -14,18 +14,6 @@ describe('notice-controller', function () { }) describe('notices', function () { - describe('#getNoticesList', function () { - it('should return an empty array when new', function (done) { - // const testList = [{ - // id: 0, - // read: false, - // title: 'Futuristic Notice', - // }] - var result = noticeController.getNoticesList() - assert.equal(result.length, 0) - done() - }) - }) describe('#setNoticesList', function () { it('should set data appropriately', function (done) { @@ -41,36 +29,6 @@ describe('notice-controller', function () { }) }) - describe('#updateNoticeslist', function () { - it('should integrate the latest changes from the source', function (done) { - var testList = [{ - id: 55, - read: false, - title: 'Futuristic Notice', - }] - noticeController.setNoticesList(testList) - noticeController.updateNoticesList().then(() => { - var newList = noticeController.getNoticesList() - assert.ok(newList[0].id === 55) - assert.ok(newList[1]) - done() - }) - }) - it('should not overwrite any existing fields', function (done) { - var testList = [{ - id: 0, - read: false, - title: 'Futuristic Notice', - }] - noticeController.setNoticesList(testList) - var newList = noticeController.getNoticesList() - assert.equal(newList[0].id, 0) - assert.equal(newList[0].title, 'Futuristic Notice') - assert.equal(newList.length, 1) - done() - }) - }) - describe('#markNoticeRead', function () { it('should mark a notice as read', function (done) { var testList = [{ @@ -86,7 +44,7 @@ describe('notice-controller', function () { }) }) - describe('#getLatestUnreadNotice', function () { + describe('#getNextUnreadNotice', function () { it('should retrieve the latest unread notice', function (done) { var testList = [ {id: 0, read: true, title: 'Past Notice'}, @@ -94,8 +52,8 @@ describe('notice-controller', function () { {id: 2, read: false, title: 'Future Notice'}, ] noticeController.setNoticesList(testList) - var latestUnread = noticeController.getLatestUnreadNotice() - assert.equal(latestUnread.id, 2) + var latestUnread = noticeController.getNextUnreadNotice() + assert.equal(latestUnread.id, 1) done() }) it('should return undefined if no unread notices exist.', function (done) { @@ -105,7 +63,7 @@ describe('notice-controller', function () { {id: 2, read: true, title: 'Future Notice'}, ] noticeController.setNoticesList(testList) - var latestUnread = noticeController.getLatestUnreadNotice() + var latestUnread = noticeController.getNextUnreadNotice() assert.ok(!latestUnread) done() }) diff --git a/test/unit/app/controllers/transactions/nonce-tracker-test.js b/test/unit/app/controllers/transactions/nonce-tracker-test.js index fc852458c..6c0ac759f 100644 --- a/test/unit/app/controllers/transactions/nonce-tracker-test.js +++ b/test/unit/app/controllers/transactions/nonce-tracker-test.js @@ -1,12 +1,10 @@ const assert = require('assert') const NonceTracker = require('../../../../../app/scripts/controllers/transactions/nonce-tracker') const MockTxGen = require('../../../../lib/mock-tx-gen') -let providerResultStub = {} +const providerResultStub = {} describe('Nonce Tracker', function () { - let nonceTracker, provider - let getPendingTransactions, pendingTxs - let getConfirmedTransactions, confirmedTxs + let nonceTracker, pendingTxs, confirmedTxs describe('#getNonceLock', function () { @@ -182,8 +180,8 @@ describe('Nonce Tracker', function () { describe('When all three return different values', function () { beforeEach(function () { const txGen = new MockTxGen() - const confirmedTxs = txGen.generate({ status: 'confirmed' }, { count: 10 }) - const pendingTxs = txGen.generate({ + confirmedTxs = txGen.generate({ status: 'confirmed' }, { count: 10 }) + pendingTxs = txGen.generate({ status: 'submitted', nonce: 100, }, { count: 1 }) @@ -202,8 +200,8 @@ describe('Nonce Tracker', function () { describe('Faq issue 67', function () { beforeEach(function () { const txGen = new MockTxGen() - const confirmedTxs = txGen.generate({ status: 'confirmed' }, { count: 64 }) - const pendingTxs = txGen.generate({ + confirmedTxs = txGen.generate({ status: 'confirmed' }, { count: 64 }) + pendingTxs = txGen.generate({ status: 'submitted', }, { count: 10 }) // 0x40 is 64 in hex: diff --git a/test/unit/app/controllers/transactions/pending-tx-test.js b/test/unit/app/controllers/transactions/pending-tx-test.js index e7705c594..8bf2da6f8 100644 --- a/test/unit/app/controllers/transactions/pending-tx-test.js +++ b/test/unit/app/controllers/transactions/pending-tx-test.js @@ -1,20 +1,12 @@ const assert = require('assert') -const ethUtil = require('ethereumjs-util') -const EthTx = require('ethereumjs-tx') -const ObservableStore = require('obs-store') -const clone = require('clone') const { createTestProviderTools } = require('../../../../stub/provider') const PendingTransactionTracker = require('../../../../../app/scripts/controllers/transactions/pending-tx-tracker') const MockTxGen = require('../../../../lib/mock-tx-gen') const sinon = require('sinon') -const noop = () => true -const currentNetworkId = 42 -const otherNetworkId = 36 -const privKey = new Buffer('8718b9618a37d1fc78c436511fc6df3c8258d3250635bba617f33003270ec03e', 'hex') describe('PendingTransactionTracker', function () { - let pendingTxTracker, txMeta, txMetaNoHash, txMetaNoRawTx, providerResultStub, + let pendingTxTracker, txMeta, txMetaNoHash, providerResultStub, provider, txMeta3, txList, knownErrors this.timeout(10000) beforeEach(function () { @@ -34,11 +26,7 @@ describe('PendingTransactionTracker', function () { status: 'signed', txParams: { from: '0x1678a085c290ebd122dc42cba69373b5953b831d'}, } - txMetaNoRawTx = { - hash: '0x0593ee121b92e10d63150ad08b4b8f9c7857d1bd160195ee648fb9a0f8d00eeb', - status: 'signed', - txParams: { from: '0x1678a085c290ebd122dc42cba69373b5953b831d'}, - } + providerResultStub = {} provider = createTestProviderTools({ scaffold: providerResultStub }).provider @@ -47,10 +35,10 @@ describe('PendingTransactionTracker', function () { nonceTracker: { getGlobalLock: async () => { return { releaseLock: () => {} } - } + }, }, - getPendingTransactions: () => {return []}, - getCompletedTransactions: () => {return []}, + getPendingTransactions: () => { return [] }, + getCompletedTransactions: () => { return [] }, publishTransaction: () => {}, }) }) @@ -133,22 +121,20 @@ describe('PendingTransactionTracker', function () { }) describe('#queryPendingTxs', function () { it('should call #_checkPendingTxs if their is no oldBlock', function (done) { - let newBlock, oldBlock - newBlock = { number: '0x01' } + let oldBlock + const newBlock = { number: '0x01' } pendingTxTracker._checkPendingTxs = done pendingTxTracker.queryPendingTxs({ oldBlock, newBlock }) }) it('should call #_checkPendingTxs if oldBlock and the newBlock have a diff of greater then 1', function (done) { - let newBlock, oldBlock - oldBlock = { number: '0x01' } - newBlock = { number: '0x03' } + const oldBlock = { number: '0x01' } + const newBlock = { number: '0x03' } pendingTxTracker._checkPendingTxs = done pendingTxTracker.queryPendingTxs({ oldBlock, newBlock }) }) it('should not call #_checkPendingTxs if oldBlock and the newBlock have a diff of 1 or less', function (done) { - let newBlock, oldBlock - oldBlock = { number: '0x1' } - newBlock = { number: '0x2' } + const oldBlock = { number: '0x1' } + const newBlock = { number: '0x2' } pendingTxTracker._checkPendingTxs = () => { const err = new Error('should not call #_checkPendingTxs if oldBlock and the newBlock have a diff of 1 or less') done(err) @@ -189,7 +175,7 @@ describe('PendingTransactionTracker', function () { txMeta2.id = 2 txMeta3.id = 3 txList = [txMeta, txMeta2, txMeta3].map((tx) => { - tx.processed = new Promise ((resolve) => { tx.resolve = resolve }) + tx.processed = new Promise((resolve) => { tx.resolve = resolve }) return tx }) }) @@ -197,7 +183,6 @@ describe('PendingTransactionTracker', function () { it('should warp all txMeta\'s in #_checkPendingTx', function (done) { pendingTxTracker.getPendingTransactions = () => txList pendingTxTracker._checkPendingTx = (tx) => { tx.resolve(tx) } - const list = txList.map Promise.all(txList.map((tx) => tx.processed)) .then((txCompletedList) => done()) .catch(done) @@ -207,11 +192,11 @@ describe('PendingTransactionTracker', function () { }) describe('#resubmitPendingTxs', function () { - const blockStub = { number: '0x0' }; + const blockStub = { number: '0x0' } beforeEach(function () { const txMeta2 = txMeta3 = txMeta txList = [txMeta, txMeta2, txMeta3].map((tx) => { - tx.processed = new Promise ((resolve) => { tx.resolve = resolve }) + tx.processed = new Promise((resolve) => { tx.resolve = resolve }) return tx }) }) @@ -228,7 +213,7 @@ describe('PendingTransactionTracker', function () { pendingTxTracker.resubmitPendingTxs(blockStub) }) it('should not emit \'tx:failed\' if the txMeta throws a known txError', function (done) { - knownErrors =[ + knownErrors = [ // geth ' Replacement transaction Underpriced ', ' known transaction', @@ -275,7 +260,7 @@ describe('PendingTransactionTracker', function () { }) describe('#_resubmitTx', function () { const mockFirstRetryBlockNumber = '0x1' - let txMetaToTestExponentialBackoff + let txMetaToTestExponentialBackoff, enoughBalance beforeEach(() => { pendingTxTracker.getBalance = (address) => { @@ -298,7 +283,7 @@ describe('PendingTransactionTracker', function () { }) it('should publish the transaction', function (done) { - const enoughBalance = '0x100000' + enoughBalance = '0x100000' // Stubbing out current account state: // Adding the fake tx: @@ -313,7 +298,7 @@ describe('PendingTransactionTracker', function () { }) it('should not publish the transaction if the limit of retries has been exceeded', function (done) { - const enoughBalance = '0x100000' + enoughBalance = '0x100000' const mockLatestBlockNumber = '0x5' pendingTxTracker._resubmitTx(txMetaToTestExponentialBackoff, mockLatestBlockNumber) @@ -327,7 +312,7 @@ describe('PendingTransactionTracker', function () { }) it('should publish the transaction if the number of blocks since last retry exceeds the last set limit', function (done) { - const enoughBalance = '0x100000' + enoughBalance = '0x100000' const mockLatestBlockNumber = '0x11' pendingTxTracker._resubmitTx(txMetaToTestExponentialBackoff, mockLatestBlockNumber) @@ -342,8 +327,8 @@ describe('PendingTransactionTracker', function () { }) describe('#_checkIfNonceIsTaken', function () { - beforeEach ( function () { - let confirmedTxList = [{ + beforeEach(function () { + const confirmedTxList = [{ id: 1, hash: '0x0593ee121b92e10d63150ad08b4b8f9c7857d1bd160195ee648fb9a0f8d00eeb', status: 'confirmed', diff --git a/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js b/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js new file mode 100644 index 000000000..cb413545f --- /dev/null +++ b/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js @@ -0,0 +1,77 @@ +const assert = require('assert') +const recipientBlackListChecker = require('../../../../../app/scripts/controllers/transactions/lib/recipient-blacklist-checker') +const { + ROPSTEN_CODE, + RINKEYBY_CODE, + KOVAN_CODE, +} = require('../../../../../app/scripts/controllers/network/enums') + +const KeyringController = require('eth-keyring-controller') + +describe('Recipient Blacklist Checker', function () { + + let publicAccounts + + before(async function () { + const damnedMnemonic = 'candy maple cake sugar pudding cream honey rich smooth crumble sweet treat' + const keyringController = new KeyringController({}) + const Keyring = keyringController.getKeyringClassForType('HD Key Tree') + const opts = { + mnemonic: damnedMnemonic, + numberOfAccounts: 10, + } + const keyring = new Keyring(opts) + publicAccounts = await keyring.getAccounts() + }) + + describe('#checkAccount', function () { + it('does not fail on test networks', function () { + let callCount = 0 + const networks = [ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE] + for (const networkId in networks) { + publicAccounts.forEach((account) => { + recipientBlackListChecker.checkAccount(networkId, account) + callCount++ + }) + } + assert.equal(callCount, 30) + }) + + it('fails on mainnet', function () { + const mainnetId = 1 + let callCount = 0 + publicAccounts.forEach((account) => { + try { + recipientBlackListChecker.checkAccount(mainnetId, account) + assert.fail('function should have thrown an error') + } catch (err) { + assert.equal(err.message, 'Recipient is a public account') + } + callCount++ + }) + assert.equal(callCount, 10) + }) + + it('fails for public account - uppercase', function () { + const mainnetId = 1 + const publicAccount = '0X0D1D4E623D10F9FBA5DB95830F7D3839406C6AF2' + try { + recipientBlackListChecker.checkAccount(mainnetId, publicAccount) + assert.fail('function should have thrown an error') + } catch (err) { + assert.equal(err.message, 'Recipient is a public account') + } + }) + + it('fails for public account - lowercase', async function () { + const mainnetId = 1 + const publicAccount = '0x0d1d4e623d10f9fba5db95830f7d3839406c6af2' + try { + await recipientBlackListChecker.checkAccount(mainnetId, publicAccount) + assert.fail('function should have thrown an error') + } catch (err) { + assert.equal(err.message, 'Recipient is a public account') + } + }) + }) +}) diff --git a/test/unit/app/controllers/transactions/tx-controller-test.js b/test/unit/app/controllers/transactions/tx-controller-test.js index 1f32a0f37..d4c5ff0ec 100644 --- a/test/unit/app/controllers/transactions/tx-controller-test.js +++ b/test/unit/app/controllers/transactions/tx-controller-test.js @@ -1,20 +1,17 @@ const assert = require('assert') const ethUtil = require('ethereumjs-util') const EthTx = require('ethereumjs-tx') -const EthjsQuery = require('ethjs-query') const ObservableStore = require('obs-store') const sinon = require('sinon') const TransactionController = require('../../../../../app/scripts/controllers/transactions') -const TxGasUtils = require('../../../../../app/scripts/controllers/transactions/tx-gas-utils') const { createTestProviderTools, getTestAccounts } = require('../../../../stub/provider') const noop = () => true const currentNetworkId = 42 -const otherNetworkId = 36 describe('Transaction Controller', function () { - let txController, provider, providerResultStub, query, fromAccount + let txController, provider, providerResultStub, fromAccount beforeEach(function () { providerResultStub = { @@ -24,7 +21,6 @@ describe('Transaction Controller', function () { eth_getCode: '0x', } provider = createTestProviderTools({ scaffold: providerResultStub }).provider - query = new EthjsQuery(provider) fromAccount = getTestAccounts()[0] txController = new TransactionController({ @@ -185,6 +181,23 @@ describe('Transaction Controller', function () { .catch(done) }) + it('should fail if recipient is public', function (done) { + txController.networkStore = new ObservableStore(1) + txController.addUnapprovedTransaction({ from: '0x1678a085c290ebd122dc42cba69373b5953b831d', to: '0x0d1d4e623D10F9FBA5Db95830F7d3839406C6AF2' }) + .catch((err) => { + if (err.message === 'Recipient is a public account') done() + else done(err) + }) + }) + + it('should not fail if recipient is public but not on mainnet', function (done) { + txController.once('newUnapprovedTx', (txMetaFromEmit) => { + assert(txMetaFromEmit, 'txMeta is falsey') + done() + }) + txController.addUnapprovedTransaction({ from: '0x1678a085c290ebd122dc42cba69373b5953b831d', to: '0x0d1d4e623D10F9FBA5Db95830F7d3839406C6AF2' }) + .catch(done) + }) }) describe('#addTxGasDefaults', function () { @@ -371,7 +384,7 @@ describe('Transaction Controller', function () { describe('#retryTransaction', function () { it('should create a new txMeta with the same txParams as the original one', function (done) { - let txParams = { + const txParams = { nonce: '0x00', from: '0xB09d8505E1F4EF1CeA089D47094f5DD3464083d4', to: '0xB09d8505E1F4EF1CeA089D47094f5DD3464083d4', diff --git a/test/unit/app/controllers/transactions/tx-gas-util-test.js b/test/unit/app/controllers/transactions/tx-gas-util-test.js index d1ee86033..31defd6ed 100644 --- a/test/unit/app/controllers/transactions/tx-gas-util-test.js +++ b/test/unit/app/controllers/transactions/tx-gas-util-test.js @@ -1,6 +1,5 @@ const assert = require('assert') const Transaction = require('ethereumjs-tx') -const BN = require('bn.js') const { hexToBn, bnToHex } = require('../../../../../app/scripts/lib/util') diff --git a/test/unit/app/controllers/transactions/tx-state-history-helper-test.js b/test/unit/app/controllers/transactions/tx-state-history-helper-test.js index f4c3a6be1..fba0e7fda 100644 --- a/test/unit/app/controllers/transactions/tx-state-history-helper-test.js +++ b/test/unit/app/controllers/transactions/tx-state-history-helper-test.js @@ -2,16 +2,16 @@ const assert = require('assert') const txStateHistoryHelper = require('../../../../../app/scripts/controllers/transactions/lib/tx-state-history-helper') const testVault = require('../../../../data/v17-long-history.json') -describe ('Transaction state history helper', function () { +describe('Transaction state history helper', function () { describe('#snapshotFromTxMeta', function () { it('should clone deep', function () { const input = { foo: { bar: { - bam: 'baz' - } - } + bam: 'baz', + }, + }, } const output = txStateHistoryHelper.snapshotFromTxMeta(input) assert('foo' in output, 'has a foo key') @@ -50,14 +50,14 @@ describe ('Transaction state history helper', function () { it('replaying history does not mutate the original obj', function () { const initialState = { test: true, message: 'hello', value: 1 } const diff1 = [{ - "op": "replace", - "path": "/message", - "value": "haay", + 'op': 'replace', + 'path': '/message', + 'value': 'haay', }] const diff2 = [{ - "op": "replace", - "path": "/value", - "value": 2, + 'op': 'replace', + 'path': '/value', + 'value': 2, }] const history = [initialState, diff1, diff2] @@ -72,15 +72,15 @@ describe ('Transaction state history helper', function () { describe('#generateHistoryEntry', function () { - function generateHistoryEntryTest(note) { + function generateHistoryEntryTest (note) { const prevState = { someValue: 'value 1', foo: { bar: { - bam: 'baz' - } - } + bam: 'baz', + }, + }, } const nextState = { @@ -89,9 +89,9 @@ describe ('Transaction state history helper', function () { foo: { newPropFirstLevel: 'new property - first level', bar: { - bam: 'baz' - } - } + bam: 'baz', + }, + }, } const before = new Date().getTime() @@ -106,8 +106,7 @@ describe ('Transaction state history helper', function () { assert.equal(result[0].path, expectedEntry1.path) assert.equal(result[0].value, expectedEntry1.value) assert.equal(result[0].value, expectedEntry1.value) - if (note) - assert.equal(result[0].note, note) + if (note) { assert.equal(result[0].note, note) } assert.ok(result[0].timestamp >= before && result[0].timestamp <= after) @@ -124,6 +123,6 @@ describe ('Transaction state history helper', function () { it('should add note to first entry', function () { generateHistoryEntryTest('custom note') - }) + }) }) -}) \ No newline at end of file +}) 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 20bc08b94..2f91b1545 100644 --- a/test/unit/app/controllers/transactions/tx-state-manager-test.js +++ b/test/unit/app/controllers/transactions/tx-state-manager-test.js @@ -1,6 +1,4 @@ const assert = require('assert') -const clone = require('clone') -const ObservableStore = require('obs-store') const TxStateManager = require('../../../../../app/scripts/controllers/transactions/tx-state-manager') const txStateHistoryHelper = require('../../../../../app/scripts/controllers/transactions/lib/tx-state-history-helper') const noop = () => true @@ -16,23 +14,23 @@ describe('TransactionStateManager', function () { transactions: [], }, txHistoryLimit: 10, - getNetwork: () => currentNetworkId + getNetwork: () => currentNetworkId, }) }) describe('#setTxStatusSigned', function () { it('sets the tx status to signed', function () { - let tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx, noop) txStateManager.setTxStatusSigned(1) - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.ok(Array.isArray(result)) assert.equal(result.length, 1) assert.equal(result[0].status, 'signed') }) it('should emit a signed event to signal the exciton of callback', (done) => { - let tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } const noop = function () { assert(true, 'event listener has been triggered and noop executed') done() @@ -46,21 +44,24 @@ describe('TransactionStateManager', function () { describe('#setTxStatusRejected', function () { it('sets the tx status to rejected', function () { - let tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx) txStateManager.setTxStatusRejected(1) - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.ok(Array.isArray(result)) assert.equal(result.length, 1) assert.equal(result[0].status, 'rejected') }) it('should emit a rejected event to signal the exciton of callback', (done) => { - let tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx = { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx) const noop = function (err, txId) { - assert(true, 'event listener has been triggered and noop executed') - done() + if (err) { + console.log('Error: ', err) + } + assert(true, 'event listener has been triggered and noop executed') + done() } txStateManager.on('1:rejected', noop) txStateManager.setTxStatusRejected(1) @@ -69,7 +70,7 @@ describe('TransactionStateManager', function () { describe('#getFullTxList', function () { it('when new should return empty array', function () { - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.ok(Array.isArray(result)) assert.equal(result.length, 0) }) @@ -77,7 +78,7 @@ describe('TransactionStateManager', function () { describe('#getTxList', function () { it('when new should return empty array', function () { - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.ok(Array.isArray(result)) assert.equal(result.length, 0) }) @@ -85,21 +86,21 @@ describe('TransactionStateManager', function () { describe('#addTx', function () { it('adds a tx returned in getTxList', function () { - let tx = { id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx = { id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx, noop) - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.ok(Array.isArray(result)) assert.equal(result.length, 1) assert.equal(result[0].id, 1) }) it('does not override txs from other networks', function () { - let tx = { id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } - let tx2 = { id: 2, status: 'confirmed', metamaskNetworkId: otherNetworkId, txParams: {} } + const tx = { id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } + const tx2 = { id: 2, status: 'confirmed', metamaskNetworkId: otherNetworkId, txParams: {} } txStateManager.addTx(tx, noop) txStateManager.addTx(tx2, noop) - let result = txStateManager.getFullTxList() - let result2 = txStateManager.getTxList() + const result = txStateManager.getFullTxList() + const result2 = txStateManager.getTxList() assert.equal(result.length, 2, 'txs were deleted') assert.equal(result2.length, 1, 'incorrect number of txs on network.') }) @@ -110,7 +111,7 @@ describe('TransactionStateManager', function () { const tx = { id: i, time: new Date(), status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx, noop) } - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.equal(result.length, limit, `limit of ${limit} txs enforced`) assert.equal(result[0].id, 1, 'early txs truncted') }) @@ -121,20 +122,20 @@ describe('TransactionStateManager', function () { const tx = { id: i, time: new Date(), status: 'rejected', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx, noop) } - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() assert.equal(result.length, limit, `limit of ${limit} txs enforced`) assert.equal(result[0].id, 1, 'early txs truncted') }) it('cuts off early txs beyond a limit but does not cut unapproved txs', function () { - let unconfirmedTx = { id: 0, time: new Date(), status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } + const unconfirmedTx = { id: 0, time: new Date(), status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(unconfirmedTx, noop) const limit = txStateManager.txHistoryLimit for (let i = 1; i < limit + 1; i++) { const tx = { id: i, time: new Date(), status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {} } txStateManager.addTx(tx, noop) } - let result = txStateManager.getTxList() + const result = txStateManager.getTxList() 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') @@ -149,7 +150,7 @@ describe('TransactionStateManager', function () { const txMeta = txStateManager.getTx('1') txMeta.hash = 'foo' txStateManager.updateTx(txMeta) - let result = txStateManager.getTx('1') + const result = txStateManager.getTx('1') assert.equal(result.hash, 'foo') }) @@ -166,8 +167,6 @@ describe('TransactionStateManager', function () { }, } - const updatedMeta = clone(txMeta) - txStateManager.addTx(txMeta) const updatedTx = txStateManager.getTx('1') // verify tx was initialized correctly @@ -185,7 +184,7 @@ describe('TransactionStateManager', function () { // validate history was updated assert.equal(result.history.length, 2, 'two history items (initial + diff)') assert.equal(result.history[1].length, 1, 'two history state items (initial + diff)') - + const expectedEntry = { op: 'replace', path: '/txParams/gasPrice', value: desiredGasPrice } assert.deepEqual(result.history[1][0].op, expectedEntry.op, 'two history items (initial + diff) operation') assert.deepEqual(result.history[1][0].path, expectedEntry.path, 'two history items (initial + diff) path') diff --git a/test/unit/app/controllers/transactions/tx-utils-test.js b/test/unit/app/controllers/transactions/tx-utils-test.js index 115127f85..029fab4d5 100644 --- a/test/unit/app/controllers/transactions/tx-utils-test.js +++ b/test/unit/app/controllers/transactions/tx-utils-test.js @@ -27,7 +27,7 @@ describe('txUtils', function () { describe('#normalizeTxParams', () => { it('should normalize txParams', () => { - let txParams = { + const txParams = { chainId: '0x1', from: 'a7df1beDBF813f57096dF77FCd515f0B3900e402', to: null, @@ -91,7 +91,7 @@ describe('txUtils', function () { assert.throws(() => { txUtils.validateFrom(txParams) }, Error, `Invalid from address`) // should run - txParams.from ='0x1678a085c290ebd122dc42cba69373b5953b831d' + txParams.from = '0x1678a085c290ebd122dc42cba69373b5953b831d' txUtils.validateFrom(txParams) }) }) diff --git a/test/unit/app/edge-encryptor-test.js b/test/unit/app/edge-encryptor-test.js index cc9777389..1a6255b36 100644 --- a/test/unit/app/edge-encryptor-test.js +++ b/test/unit/app/edge-encryptor-test.js @@ -11,7 +11,7 @@ global.crypto = global.crypto || { array[i] = Math.random() * 100 } return array - } + }, } describe('EdgeEncryptor', function () { @@ -33,10 +33,10 @@ describe('EdgeEncryptor', function () { it('should return proper format.', function (done) { edgeEncryptor.encrypt(password, data) .then(function (encryptedData) { - let encryptedObject = JSON.parse(encryptedData) + const encryptedObject = JSON.parse(encryptedData) assert.ok(encryptedObject.data, 'there is no data') - assert.ok(encryptedObject.iv && encryptedObject.iv.length != 0, 'there is no iv') - assert.ok(encryptedObject.salt && encryptedObject.salt.length != 0, 'there is no salt') + assert.ok(encryptedObject.iv && encryptedObject.iv.length !== 0, 'there is no iv') + assert.ok(encryptedObject.salt && encryptedObject.salt.length !== 0, 'there is no salt') done() }).catch(function (err) { done(err) @@ -56,7 +56,7 @@ describe('EdgeEncryptor', function () { assert.notEqual(encryptedData[1].length, 0) done() }) - }) + }) }) describe('decrypt', function () { diff --git a/test/unit/app/nodeify-test.js b/test/unit/app/nodeify-test.js index 901603c8b..938b76c68 100644 --- a/test/unit/app/nodeify-test.js +++ b/test/unit/app/nodeify-test.js @@ -13,8 +13,12 @@ describe('nodeify', function () { it('should retain original context', function (done) { var nodified = nodeify(obj.promiseFunc, obj) nodified('baz', function (err, res) { - assert.equal(res, 'barbaz') - done() + if (!err) { + assert.equal(res, 'barbaz') + done() + } else { + done(new Error(err.toString())) + } }) }) diff --git a/test/unit/app/pending-balance-test.js b/test/unit/app/pending-balance-test.js index 1418e4a4e..508635c46 100644 --- a/test/unit/app/pending-balance-test.js +++ b/test/unit/app/pending-balance-test.js @@ -2,7 +2,6 @@ const assert = require('assert') const PendingBalanceCalculator = require('../../../app/scripts/lib/pending-balance-calculator') const MockTxGen = require('../../lib/mock-tx-gen') const BN = require('ethereumjs-util').BN -let providerResultStub = {} const zeroBn = new BN(0) const etherBn = new BN(String(1e18)) @@ -20,7 +19,7 @@ describe('PendingBalanceCalculator', function () { value: ether, gasPrice: '0x0', gas: '0x0', - } + }, }, { count: 1 }) const balanceCalculator = generateBalanceCalcWith([], zeroBn) @@ -36,7 +35,7 @@ describe('PendingBalanceCalculator', function () { value: '0x0', gasPrice: '0x2', gas: '0x3', - } + }, }, { count: 1 }) const balanceCalculator = generateBalanceCalcWith([], zeroBn) @@ -66,7 +65,7 @@ describe('PendingBalanceCalculator', function () { value: ether, gasPrice: '0x0', gas: '0x0', - } + }, }, { count: 1 }) balanceCalculator = generateBalanceCalcWith(pendingTxs, etherBn) diff --git a/test/unit/app/seed-phrase-verifier-test.js b/test/unit/app/seed-phrase-verifier-test.js index b0da534da..d8720d5a0 100644 --- a/test/unit/app/seed-phrase-verifier-test.js +++ b/test/unit/app/seed-phrase-verifier-test.js @@ -9,11 +9,10 @@ describe('SeedPhraseVerifier', function () { describe('verifyAccounts', function () { - let password = 'passw0rd1' - let hdKeyTree = 'HD Key Tree' + const password = 'passw0rd1' + const hdKeyTree = 'HD Key Tree' let keyringController - let vault let primaryKeyring beforeEach(async function () { @@ -24,60 +23,60 @@ describe('SeedPhraseVerifier', function () { assert(keyringController) - vault = await keyringController.createNewVaultAndKeychain(password) + await keyringController.createNewVaultAndKeychain(password) primaryKeyring = keyringController.getKeyringsByType(hdKeyTree)[0] }) it('should be able to verify created account with seed words', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let serialized = await primaryKeyring.serialize() - let seedWords = serialized.mnemonic + const serialized = await primaryKeyring.serialize() + const seedWords = serialized.mnemonic assert.notEqual(seedWords.length, 0) - - let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) + + await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) }) it('should be able to verify created account (upper case) with seed words', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let upperCaseAccounts = [createdAccounts[0].toUpperCase()] + const upperCaseAccounts = [createdAccounts[0].toUpperCase()] - let serialized = await primaryKeyring.serialize() - let seedWords = serialized.mnemonic + const serialized = await primaryKeyring.serialize() + const seedWords = serialized.mnemonic assert.notEqual(seedWords.length, 0) - - let result = await seedPhraseVerifier.verifyAccounts(upperCaseAccounts, seedWords) + + await seedPhraseVerifier.verifyAccounts(upperCaseAccounts, seedWords) }) it('should be able to verify created account (lower case) with seed words', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let lowerCaseAccounts = [createdAccounts[0].toLowerCase()] + const lowerCaseAccounts = [createdAccounts[0].toLowerCase()] - let serialized = await primaryKeyring.serialize() - let seedWords = serialized.mnemonic + const serialized = await primaryKeyring.serialize() + const seedWords = serialized.mnemonic assert.notEqual(seedWords.length, 0) - - let result = await seedPhraseVerifier.verifyAccounts(lowerCaseAccounts, seedWords) + + await seedPhraseVerifier.verifyAccounts(lowerCaseAccounts, seedWords) }) it('should return error with good but different seed words', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let serialized = await primaryKeyring.serialize() - let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' - - try { - let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) - assert.fail("Should reject") + await primaryKeyring.serialize() + const seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' + + try { + await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) + assert.fail('Should reject') } catch (err) { assert.ok(err.message.indexOf('Not identical accounts!') >= 0, 'Wrong error message') } @@ -85,15 +84,15 @@ describe('SeedPhraseVerifier', function () { it('should return error with undefined existing accounts', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let serialized = await primaryKeyring.serialize() - let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' + await primaryKeyring.serialize() + const seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' - try { - let result = await seedPhraseVerifier.verifyAccounts(undefined, seedWords) - assert.fail("Should reject") + try { + await seedPhraseVerifier.verifyAccounts(undefined, seedWords) + assert.fail('Should reject') } catch (err) { assert.equal(err.message, 'No created accounts defined.') } @@ -101,15 +100,15 @@ describe('SeedPhraseVerifier', function () { it('should return error with empty accounts array', async function () { - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 1) - let serialized = await primaryKeyring.serialize() - let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' + await primaryKeyring.serialize() + const seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium' - try { - let result = await seedPhraseVerifier.verifyAccounts([], seedWords) - assert.fail("Should reject") + try { + await seedPhraseVerifier.verifyAccounts([], seedWords) + assert.fail('Should reject') } catch (err) { assert.equal(err.message, 'No created accounts defined.') } @@ -117,17 +116,17 @@ describe('SeedPhraseVerifier', function () { it('should be able to verify more than one created account with seed words', async function () { - const keyState = await keyringController.addNewAccount(primaryKeyring) - const keyState2 = await keyringController.addNewAccount(primaryKeyring) + await keyringController.addNewAccount(primaryKeyring) + await keyringController.addNewAccount(primaryKeyring) - let createdAccounts = await primaryKeyring.getAccounts() + const createdAccounts = await primaryKeyring.getAccounts() assert.equal(createdAccounts.length, 3) - let serialized = await primaryKeyring.serialize() - let seedWords = serialized.mnemonic + const serialized = await primaryKeyring.serialize() + const seedWords = serialized.mnemonic assert.notEqual(seedWords.length, 0) - - let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) + + await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords) }) }) }) diff --git a/test/unit/app/util-test.js b/test/unit/app/util-test.js index 670bc4d22..656b22d92 100644 --- a/test/unit/app/util-test.js +++ b/test/unit/app/util-test.js @@ -38,4 +38,4 @@ describe('SufficientBalance', function () { const result = sufficientBalance(tx, balance) assert.ok(!result, 'insufficient balance found.') }) -}) \ No newline at end of file +}) diff --git a/test/unit/components/balance-component-test.js b/test/unit/components/balance-component-test.js index 9b1e82acf..81e6fdf9e 100644 --- a/test/unit/components/balance-component-test.js +++ b/test/unit/components/balance-component-test.js @@ -8,7 +8,7 @@ const mockState = { accounts: { abc: {} }, network: 1, selectedAddress: 'abc', - } + }, } describe('BalanceComponent', function () { diff --git a/test/unit/components/bn-as-decimal-input-test.js b/test/unit/components/bn-as-decimal-input-test.js index 7b9d9814f..fab396548 100644 --- a/test/unit/components/bn-as-decimal-input-test.js +++ b/test/unit/components/bn-as-decimal-input-test.js @@ -52,13 +52,13 @@ describe('BnInput', function () { it('can tolerate wei precision', function (done) { const renderer = ReactTestUtils.createRenderer() - let valueStr = '1000000000' + const valueStr = '1000000000' const value = new BN(valueStr, 10) const inputStr = '1.000000001' - let targetStr = '1000000001' + const targetStr = '1000000001' const target = new BN(targetStr, 10) diff --git a/test/unit/components/pending-tx-test.js b/test/unit/components/pending-tx-test.js index c6c588e1c..c68e013ac 100644 --- a/test/unit/components/pending-tx-test.js +++ b/test/unit/components/pending-tx-test.js @@ -13,7 +13,7 @@ const mockState = { identities, conversionRate: 10, selectedAddress: 'abc', - } + }, } describe('PendingTx', function () { diff --git a/test/unit/migrations/022-test.js b/test/unit/migrations/022-test.js index 1333d929d..f8ee00e38 100644 --- a/test/unit/migrations/022-test.js +++ b/test/unit/migrations/022-test.js @@ -2,14 +2,14 @@ const assert = require('assert') const migration22 = require('../../../app/scripts/migrations/022') const properTime = (new Date()).getTime() const storage = { - "meta": {}, - "data": { - "TransactionController": { - "transactions": [ - { "status": "submitted" }, - { "status": "submitted", "submittedTime": properTime }, - {"status": "confirmed"}, - ] + 'meta': {}, + 'data': { + 'TransactionController': { + 'transactions': [ + { 'status': 'submitted' }, + { 'status': 'submitted', 'submittedTime': properTime }, + {'status': 'confirmed'}, + ], }, }, } diff --git a/test/unit/migrations/023-test.js b/test/unit/migrations/023-test.js index be432d9fa..7da94448d 100644 --- a/test/unit/migrations/023-test.js +++ b/test/unit/migrations/023-test.js @@ -1,12 +1,11 @@ const assert = require('assert') const migration23 = require('../../../app/scripts/migrations/023') -const properTime = (new Date()).getTime() const storage = { - "meta": {}, - "data": { - "TransactionController": { - "transactions": [ - ] + 'meta': {}, + 'data': { + 'TransactionController': { + 'transactions': [ + ], }, }, } @@ -53,7 +52,6 @@ while (transactions20.length < 20) { } - storage.data.TransactionController.transactions = transactions describe('storage is migrated successfully and the proper transactions are remove from state', () => { diff --git a/test/unit/migrations/024-test.js b/test/unit/migrations/024-test.js index c3c03d06b..c7b0611bc 100644 --- a/test/unit/migrations/024-test.js +++ b/test/unit/migrations/024-test.js @@ -4,13 +4,12 @@ const firstTimeState = { meta: {}, data: require('../../../app/scripts/first-time-state'), } -const properTime = (new Date()).getTime() const storage = { - "meta": {}, - "data": { - "TransactionController": { - "transactions": [ - ] + 'meta': {}, + 'data': { + 'TransactionController': { + 'transactions': [ + ], }, }, } diff --git a/test/unit/migrations/025-test.js b/test/unit/migrations/025-test.js index 76c25dbb6..1e56913a1 100644 --- a/test/unit/migrations/025-test.js +++ b/test/unit/migrations/025-test.js @@ -6,11 +6,11 @@ const firstTimeState = { } const storage = { - "meta": {}, - "data": { - "TransactionController": { - "transactions": [ - ] + 'meta': {}, + 'data': { + 'TransactionController': { + 'transactions': [ + ], }, }, } diff --git a/test/unit/migrations/template-test.js b/test/unit/migrations/template-test.js index 35060e2fe..0db69d65a 100644 --- a/test/unit/migrations/template-test.js +++ b/test/unit/migrations/template-test.js @@ -1,6 +1,5 @@ const assert = require('assert') const migrationTemplate = require('../../../app/scripts/migrations/template') -const properTime = (new Date()).getTime() const storage = { meta: {}, data: {}, diff --git a/test/unit/responsive/components/dropdown-test.js b/test/unit/responsive/components/dropdown-test.js index 982d8c6ec..493b01918 100644 --- a/test/unit/responsive/components/dropdown-test.js +++ b/test/unit/responsive/components/dropdown-test.js @@ -1,24 +1,24 @@ -const assert = require('assert'); +const assert = require('assert') -const h = require('react-hyperscript'); -const sinon = require('sinon'); -const path = require('path'); -const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown; +const h = require('react-hyperscript') +const sinon = require('sinon') +const path = require('path') +const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown const { createMockStore } = require('redux-test-utils') const { mountWithStore } = require('../../../lib/shallow-with-store') const mockState = { metamask: { - } + }, } describe('Dropdown components', function () { - let onClickOutside; - let closeMenu; - let onClick; + let onClickOutside + let closeMenu + let onClick - let dropdownComponentProps = { + const dropdownComponentProps = { isOpen: true, zIndex: 11, onClickOutside, @@ -34,9 +34,9 @@ describe('Dropdown components', function () { let store let component beforeEach(function () { - onClickOutside = sinon.spy(); - closeMenu = sinon.spy(); - onClick = sinon.spy(); + onClickOutside = sinon.spy() + closeMenu = sinon.spy() + onClick = sinon.spy() store = createMockStore(mockState) component = mountWithStore(h( @@ -61,21 +61,21 @@ describe('Dropdown components', function () { }) it('can render two items', function () { - const items = dropdownComponent.find('li'); - assert.equal(items.length, 2); - }); + const items = dropdownComponent.find('li') + assert.equal(items.length, 2) + }) - it('closes when item clicked', function() { - const items = dropdownComponent.find('li'); - const node = items.at(0); - node.simulate('click'); - assert.equal(node.props().closeMenu, closeMenu); - }); + it('closes when item clicked', function () { + const items = dropdownComponent.find('li') + const node = items.at(0) + node.simulate('click') + assert.equal(node.props().closeMenu, closeMenu) + }) - it('invokes click handler when item clicked', function() { - const items = dropdownComponent.find('li'); - const node = items.at(0); - node.simulate('click'); - assert.equal(onClick.calledOnce, true); - }); -}); + it('invokes click handler when item clicked', function () { + const items = dropdownComponent.find('li') + const node = items.at(0) + node.simulate('click') + assert.equal(onClick.calledOnce, true) + }) +}) diff --git a/test/unit/test-utils.js b/test/unit/test-utils.js new file mode 100644 index 000000000..7d0ae4d91 --- /dev/null +++ b/test/unit/test-utils.js @@ -0,0 +1,17 @@ +const assert = require('assert') + +module.exports = { + assertRejects, +} + +// assert.rejects added in node v10 +async function assertRejects (asyncFn, regExp) { + let f = () => {} + try { + await asyncFn() + } catch (error) { + f = () => { throw error } + } finally { + assert.throws(f, regExp) + } +} diff --git a/ui/app/actions.js b/ui/app/actions.js index a9372d6f3..41fc3c504 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -2,6 +2,12 @@ const abi = require('human-standard-token-abi') const pify = require('pify') const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url') const { getTokenAddressFromTokenObject } = require('./util') +const { + calcGasTotal, + calcTokenBalance, + estimateGas, + estimateGasPriceFromRecentBlocks, +} = require('./components/send_/send.utils') const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../i18n-helper') const log = require('loglevel') @@ -155,8 +161,6 @@ var actions = { updateTransactionParams, UPDATE_TRANSACTION_PARAMS: 'UPDATE_TRANSACTION_PARAMS', // send screen - estimateGas, - getGasPrice, UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT', UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE', UPDATE_GAS_TOTAL: 'UPDATE_GAS_TOTAL', @@ -169,19 +173,27 @@ var actions = { UPDATE_MAX_MODE: 'UPDATE_MAX_MODE', UPDATE_SEND: 'UPDATE_SEND', CLEAR_SEND: 'CLEAR_SEND', - updateGasLimit, - updateGasPrice, - updateGasTotal, + OPEN_FROM_DROPDOWN: 'OPEN_FROM_DROPDOWN', + CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN', + GAS_LOADING_STARTED: 'GAS_LOADING_STARTED', + GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED', + setGasLimit, + setGasPrice, + updateGasData, + setGasTotal, + setSendTokenBalance, updateSendTokenBalance, updateSendFrom, updateSendTo, updateSendAmount, updateSendMemo, - updateSendErrors, setMaxModeTo, updateSend, + updateSendErrors, clearSend, setSelectedAddress, + gasLoadingStarted, + gasLoadingFinished, // app messages confirmSeedWords: confirmSeedWords, showAccountDetail: showAccountDetail, @@ -550,10 +562,12 @@ function importNewAccount (strategy, args) { } dispatch(actions.hideLoadingIndication()) dispatch(actions.updateMetamaskState(newState)) - dispatch({ - type: actions.SHOW_ACCOUNT_DETAIL, - value: newState.selectedAddress, - }) + if (newState.selectedAddress) { + dispatch({ + type: actions.SHOW_ACCOUNT_DETAIL, + value: newState.selectedAddress, + }) + } return newState } } @@ -701,60 +715,111 @@ function signTx (txData) { } } -function estimateGas (params = {}) { - return (dispatch) => { - return new Promise((resolve, reject) => { - global.ethQuery.estimateGas(params, (err, data) => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - dispatch(actions.hideWarning()) - dispatch(actions.updateGasLimit(data)) - return resolve(data) - }) - }) +function setGasLimit (gasLimit) { + return { + type: actions.UPDATE_GAS_LIMIT, + value: gasLimit, } } -function updateGasLimit (gasLimit) { +function setGasPrice (gasPrice) { return { - type: actions.UPDATE_GAS_LIMIT, - value: gasLimit, + type: actions.UPDATE_GAS_PRICE, + value: gasPrice, + } +} + +function setGasTotal (gasTotal) { + return { + type: actions.UPDATE_GAS_TOTAL, + value: gasTotal, } } -function getGasPrice () { +function updateGasData ({ + blockGasLimit, + recentBlocks, + selectedAddress, + selectedToken, + to, + value, +}) { return (dispatch) => { - return new Promise((resolve, reject) => { - global.ethQuery.gasPrice((err, data) => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - dispatch(actions.hideWarning()) - dispatch(actions.updateGasPrice(data)) - return resolve(data) - }) + dispatch(actions.gasLoadingStarted()) + const estimatedGasPrice = estimateGasPriceFromRecentBlocks(recentBlocks) + return Promise.all([ + Promise.resolve(estimatedGasPrice), + estimateGas({ + estimateGasMethod: background.estimateGas, + blockGasLimit, + selectedAddress, + selectedToken, + to, + value, + gasPrice: estimatedGasPrice, + }), + ]) + .then(([gasPrice, gas]) => { + dispatch(actions.setGasPrice(gasPrice)) + dispatch(actions.setGasLimit(gas)) + return calcGasTotal(gas, gasPrice) + }) + .then((gasEstimate) => { + dispatch(actions.setGasTotal(gasEstimate)) + dispatch(updateSendErrors({ gasLoadingError: null })) + dispatch(actions.gasLoadingFinished()) + }) + .catch(err => { + log.error(err) + dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' })) + dispatch(actions.gasLoadingFinished()) }) } } -function updateGasPrice (gasPrice) { +function gasLoadingStarted () { return { - type: actions.UPDATE_GAS_PRICE, - value: gasPrice, + type: actions.GAS_LOADING_STARTED, } } -function updateGasTotal (gasTotal) { +function gasLoadingFinished () { return { - type: actions.UPDATE_GAS_TOTAL, - value: gasTotal, + type: actions.GAS_LOADING_FINISHED, } } -function updateSendTokenBalance (tokenBalance) { +function updateSendTokenBalance ({ + selectedToken, + tokenContract, + address, +}) { + return (dispatch) => { + const tokenBalancePromise = tokenContract + ? tokenContract.balanceOf(address) + : Promise.resolve() + return tokenBalancePromise + .then(usersToken => { + if (usersToken) { + const newTokenBalance = calcTokenBalance({ selectedToken, usersToken }) + dispatch(setSendTokenBalance(newTokenBalance.toString(10))) + } + }) + .catch(err => { + log.error(err) + updateSendErrors({ tokenBalance: 'tokenBalanceError' }) + }) + } +} + +function updateSendErrors (errorObject) { + return { + type: actions.UPDATE_SEND_ERRORS, + value: errorObject, + } +} + +function setSendTokenBalance (tokenBalance) { return { type: actions.UPDATE_SEND_TOKEN_BALANCE, value: tokenBalance, @@ -789,13 +854,6 @@ function updateSendMemo (memo) { } } -function updateSendErrors (error) { - return { - type: actions.UPDATE_SEND_ERRORS, - value: error, - } -} - function setMaxModeTo (bool) { return { type: actions.UPDATE_MAX_MODE, diff --git a/ui/app/app.js b/ui/app/app.js index 0e8b907df..d0e48a368 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -11,7 +11,7 @@ const log = require('loglevel') // init const InitializeScreen = require('../../mascara/src/app/first-time').default // accounts -const SendTransactionScreen2 = require('./components/send/send-v2-container') +const SendTransactionScreen = require('./components/send_/send.container') const ConfirmTxScreen = require('./conf-tx') // slideout menu @@ -77,7 +77,7 @@ class App extends Component { h(Authenticated, { path: SETTINGS_ROUTE, component: Settings }), h(Authenticated, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), h(Authenticated, { path: `${CONFIRM_TRANSACTION_ROUTE}/:id?`, component: ConfirmTxScreen }), - h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), + h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), h(Authenticated, { path: CONFIRM_ADD_TOKEN_ROUTE, exact, component: ConfirmAddTokenPage }), h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }), @@ -99,7 +99,7 @@ class App extends Component { } = this.props const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? - this.getConnectingLabel() : null + this.getConnectingLabel(loadingMessage) : null log.debug('Main ui render function') return ( @@ -210,7 +210,10 @@ class App extends Component { } } - getConnectingLabel = function () { + getConnectingLabel = function (loadingMessage) { + if (loadingMessage) { + return loadingMessage + } const { provider } = this.props const providerName = provider.type @@ -311,7 +314,7 @@ function mapStateToProps (state) { noActiveNotices, seedWords, unapprovedTxs, - lastUnreadNotice, + nextUnreadNotice, lostAccounts, unapprovedMsgCount, unapprovedPersonalMsgCount, @@ -345,7 +348,7 @@ function mapStateToProps (state) { network: state.metamask.network, provider: state.metamask.provider, forgottenPassword: state.appState.forgottenPassword, - lastUnreadNotice, + nextUnreadNotice, lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 7638995ea..f34631ca8 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -135,11 +135,12 @@ AccountMenu.prototype.renderAccounts = function () { showAccountDetail, } = this.props - return Object.keys(identities).map((key, index) => { - const identity = identities[key] + const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), []) + return accountOrder.map((address) => { + const identity = identities[address] const isSelected = identity.address === selectedAddress - const balanceValue = accounts[key] ? accounts[key].balance : '' + const balanceValue = accounts[address] ? accounts[address].balance : '' const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...' const simpleAddress = identity.address.substring(2).toLowerCase() diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js deleted file mode 100644 index ece3eb43d..000000000 --- a/ui/app/components/currency-input.js +++ /dev/null @@ -1,113 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -module.exports = CurrencyInput - -inherits(CurrencyInput, Component) -function CurrencyInput (props) { - Component.call(this) - - const sanitizedValue = sanitizeValue(props.value) - - this.state = { - value: sanitizedValue, - emptyState: false, - focused: false, - } -} - -function removeNonDigits (str) { - return str.match(/\d|$/g).join('') -} - -// Removes characters that are not digits, then removes leading zeros -function sanitizeInteger (val) { - return String(parseInt(removeNonDigits(val) || '0', 10)) -} - -function sanitizeDecimal (val) { - return removeNonDigits(val) -} - -// Take a single string param and returns a non-negative integer or float as a string. -// Breaks the input into three parts: the integer, the decimal point, and the decimal/fractional part. -// Removes leading zeros from the integer, and non-digits from the integer and decimal -// The integer is returned as '0' in cases where it would be empty. A decimal point is -// included in the returned string if one is included in the param -// Examples: -// sanitizeValue('0') -> '0' -// sanitizeValue('a') -> '0' -// sanitizeValue('010.') -> '10.' -// sanitizeValue('0.005') -> '0.005' -// sanitizeValue('22.200') -> '22.200' -// sanitizeValue('.200') -> '0.200' -// sanitizeValue('a.b.1.c,89.123') -> '0.189123' -function sanitizeValue (value) { - let [ , integer, point, decimal] = (/([^.]*)([.]?)([^.]*)/).exec(value) - - integer = sanitizeInteger(integer) || '0' - decimal = sanitizeDecimal(decimal) - - return `${integer}${point}${decimal}` -} - -CurrencyInput.prototype.handleChange = function (newValue) { - const { onInputChange } = this.props - const { value } = this.state - - let parsedValue = newValue - const newValueLastIndex = newValue.length - 1 - - if (value === '0' && newValue[newValueLastIndex] === '0') { - parsedValue = parsedValue.slice(0, newValueLastIndex) - } - const sanitizedValue = sanitizeValue(parsedValue) - this.setState({ - value: sanitizedValue, - emptyState: newValue === '' && sanitizedValue === '0', - }) - onInputChange(sanitizedValue) -} - -// If state.value === props.value plus a decimal point, or at least one -// zero or a decimal point and at least one zero, then this returns state.value -// after it is sanitized with getValueParts -CurrencyInput.prototype.getValueToRender = function () { - const { value } = this.props - const { value: stateValue } = this.state - - const trailingStateString = (new RegExp(`^${value}(.+)`)).exec(stateValue) - const trailingDecimalAndZeroes = trailingStateString && (/^[.0]0*/).test(trailingStateString[1]) - - return sanitizeValue(trailingDecimalAndZeroes - ? stateValue - : value) -} - -CurrencyInput.prototype.render = function () { - const { - className, - placeholder, - readOnly, - inputRef, - type, - } = this.props - const { emptyState, focused } = this.state - - const inputSizeMultiplier = readOnly ? 1 : 1.2 - - const valueToRender = this.getValueToRender() - return h('input', { - className, - type, - value: emptyState ? '' : valueToRender, - placeholder: focused ? '' : placeholder, - size: valueToRender.length * inputSizeMultiplier, - readOnly, - onFocus: () => this.setState({ focused: true, emptyState: valueToRender === '0' }), - onBlur: () => this.setState({ focused: false, emptyState: false }), - onChange: e => this.handleChange(e.target.value), - ref: inputRef, - }) -} diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index e3529041b..cd8f76ed5 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -8,15 +8,19 @@ const GasModalCard = require('./gas-modal-card') const ethUtil = require('ethereumjs-util') +import { + updateSendErrors, +} from '../../ducks/send.duck' + const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, MIN_GAS_PRICE_GWEI, -} = require('../send/send-constants') +} = require('../send_/send.constants') const { isBalanceSufficient, -} = require('../send/send-utils') +} = require('../send_/send.utils') const { conversionUtil, @@ -29,6 +33,7 @@ const { const { getGasPrice, getGasLimit, + getGasIsLoading, getForceGasMin, conversionRateSelector, getSendAmount, @@ -47,6 +52,7 @@ function mapStateToProps (state) { return { gasPrice: getGasPrice(state), gasLimit: getGasLimit(state), + gasIsLoading: getGasIsLoading(state), forceGasMin: getForceGasMin(state), conversionRate, amount: getSendAmount(state), @@ -61,15 +67,15 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { hideModal: () => dispatch(actions.hideModal()), - updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), - updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), - updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), + setGasPrice: newGasPrice => dispatch(actions.setGasPrice(newGasPrice)), + setGasLimit: newGasLimit => dispatch(actions.setGasLimit(newGasLimit)), + setGasTotal: newGasTotal => dispatch(actions.setGasTotal(newGasTotal)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } -function getOriginalState (props) { +function getFreshState (props) { const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC @@ -93,7 +99,11 @@ inherits(CustomizeGasModal, Component) function CustomizeGasModal (props) { Component.call(this) - this.state = getOriginalState(props) + const originalState = getFreshState(props) + this.state = { + ...originalState, + originalState, + } } CustomizeGasModal.contextTypes = { @@ -102,13 +112,43 @@ CustomizeGasModal.contextTypes = { module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) +CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) { + const currentState = getFreshState(this.props) + const { + gasPrice: currentGasPrice, + gasLimit: currentGasLimit, + } = currentState + const newState = getFreshState(nextProps) + const { + gasPrice: newGasPrice, + gasLimit: newGasLimit, + gasTotal: newGasTotal, + } = newState + const gasPriceChanged = currentGasPrice !== newGasPrice + const gasLimitChanged = currentGasLimit !== newGasLimit + + if (gasPriceChanged) { + this.setState({ + gasPrice: newGasPrice, + gasTotal: newGasTotal, + priceSigZeros: '', + priceSigDec: '', + }) + } + if (gasLimitChanged) { + this.setState({ gasLimit: newGasLimit, gasTotal: newGasTotal }) + } + if (gasLimitChanged || gasPriceChanged) { + this.validate({ gasLimit: newGasLimit, gasTotal: newGasTotal }) + } +} CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { const { - updateGasPrice, - updateGasLimit, + setGasPrice, + setGasLimit, hideModal, - updateGasTotal, + setGasTotal, maxModeOn, selectedToken, balance, @@ -125,15 +165,15 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateSendAmount(maxAmount) } - updateGasPrice(ethUtil.addHexPrefix(gasPrice)) - updateGasLimit(ethUtil.addHexPrefix(gasLimit)) - updateGasTotal(ethUtil.addHexPrefix(gasTotal)) + setGasPrice(ethUtil.addHexPrefix(gasPrice)) + setGasLimit(ethUtil.addHexPrefix(gasLimit)) + setGasTotal(ethUtil.addHexPrefix(gasTotal)) updateSendErrors({ insufficientFunds: false }) hideModal() } CustomizeGasModal.prototype.revert = function () { - this.setState(getOriginalState(this.props)) + this.setState(this.state.originalState) } CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { @@ -229,7 +269,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { } CustomizeGasModal.prototype.render = function () { - const { hideModal, forceGasMin } = this.props + const { hideModal, forceGasMin, gasIsLoading } = this.props const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state let convertedGasPrice = conversionUtil(gasPrice, { @@ -262,7 +302,7 @@ CustomizeGasModal.prototype.render = function () { toNumericBase: 'dec', }) - return h('div.send-v2__customize-gas', {}, [ + return !gasIsLoading && h('div.send-v2__customize-gas', {}, [ h('div.send-v2__customize-gas__content', { }, [ h('div.send-v2__customize-gas__header', {}, [ @@ -284,6 +324,7 @@ CustomizeGasModal.prototype.render = function () { onChange: value => this.convertAndSetGasPrice(value), title: this.context.t('gasPrice'), copy: this.context.t('gasPriceCalculation'), + gasIsLoading, }), h(GasModalCard, { @@ -293,6 +334,7 @@ CustomizeGasModal.prototype.render = function () { onChange: value => this.convertAndSetGasLimit(value), title: this.context.t('gasLimit'), copy: this.context.t('gasLimitCalculation'), + gasIsLoading, }), ]), diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js index a3d41af90..a7a908d3b 100644 --- a/ui/app/components/dropdowns/account-dropdown-mini.js +++ b/ui/app/components/dropdowns/account-dropdown-mini.js @@ -1,7 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const AccountListItem = require('../send/account-list-item') +const AccountListItem = require('../send_/account-list-item/account-list-item.component').default module.exports = AccountDropdownMini diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index b70d0b893..5a794c7c1 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -4,14 +4,21 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') - +const genAccountLink = require('etherscan-link').createAccountLink +const copyToClipboard = require('copy-to-clipboard') +const { Menu, Item, CloseArea } = require('./components/menu') TokenMenuDropdown.contextTypes = { t: PropTypes.func, } -module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) +module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenMenuDropdown) +function mapStateToProps (state) { + return { + network: state.metamask.network, + } +} function mapDispatchToProps (dispatch) { return { @@ -37,22 +44,34 @@ TokenMenuDropdown.prototype.onClose = function (e) { TokenMenuDropdown.prototype.render = function () { const { showHideTokenConfirmationModal } = this.props - return h('div.token-menu-dropdown', {}, [ - h('div.token-menu-dropdown__close-area', { + return h(Menu, { className: 'token-menu-dropdown', isShowing: true }, [ + h(CloseArea, { onClick: this.onClose, }), - h('div.token-menu-dropdown__container', {}, [ - h('div.token-menu-dropdown__options', {}, [ - - h('div.token-menu-dropdown__option', { - onClick: (e) => { - e.stopPropagation() - showHideTokenConfirmationModal(this.props.token) - this.props.onClose() - }, - }, this.context.t('hideToken')), - - ]), - ]), + h(Item, { + onClick: (e) => { + e.stopPropagation() + showHideTokenConfirmationModal(this.props.token) + this.props.onClose() + }, + text: this.context.t('hideToken'), + }), + h(Item, { + onClick: (e) => { + e.stopPropagation() + copyToClipboard(this.props.token.address) + this.props.onClose() + }, + text: this.context.t('copyContractAddress'), + }), + h(Item, { + onClick: (e) => { + e.stopPropagation() + const url = genAccountLink(this.props.token.address, this.props.network) + global.platform.openWindow({ url }) + this.props.onClose() + }, + text: this.context.t('viewOnEtherscan'), + }), ]) } diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index aff4b6ef6..292dcdde6 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -12,6 +12,7 @@ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete') const log = require('loglevel') +const { isValidENSAddress } = require('../util') EnsInput.contextTypes = { t: PropTypes.func, @@ -25,31 +26,34 @@ function EnsInput () { Component.call(this) } -EnsInput.prototype.render = function () { - const props = this.props - const opts = extend(props, { - list: 'addresses', - onChange: (recipient) => { - const network = this.props.network - const networkHasEnsSupport = getNetworkEnsSupport(network) +EnsInput.prototype.onChange = function (recipient) { + const network = this.props.network + const networkHasEnsSupport = getNetworkEnsSupport(network) - props.onChange(recipient) + this.props.onChange({ toAddress: recipient }) - if (!networkHasEnsSupport) return + if (!networkHasEnsSupport) return - if (recipient.match(ensRE) === null) { - return this.setState({ - loadingEns: false, - ensResolution: null, - ensFailure: null, - }) - } + if (recipient.match(ensRE) === null) { + return this.setState({ + loadingEns: false, + ensResolution: null, + ensFailure: null, + toError: null, + }) + } - this.setState({ - loadingEns: true, - }) - this.checkName(recipient) - }, + this.setState({ + loadingEns: true, + }) + this.checkName(recipient) +} + +EnsInput.prototype.render = function () { + const props = this.props + const opts = extend(props, { + list: 'addresses', + onChange: this.onChange.bind(this), }) return h('div', { style: { width: '100%', position: 'relative' }, @@ -85,17 +89,27 @@ EnsInput.prototype.lookupEnsName = function (recipient) { nickname: recipient.trim(), hoverText: address + '\n' + this.context.t('clickCopy'), ensFailure: false, + toError: null, }) } }) .catch((reason) => { - log.error(reason) - return this.setState({ + const setStateObj = { loadingEns: false, - ensResolution: ZERO_ADDRESS, + ensResolution: recipient, ensFailure: true, - hoverText: reason.message, - }) + toError: null, + } + if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') { + setStateObj.hoverText = this.context.t('ensNameNotFound') + setStateObj.toError = 'ensNameNotFound' + setStateObj.ensFailure = false + } else { + log.error(reason) + setStateObj.hoverText = reason.message + } + + return this.setState(setStateObj) }) } @@ -105,9 +119,14 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { // If an address is sent without a nickname, meaning not from ENS or from // the user's own accounts, a default of a one-space string is used. const nickname = state.nickname || ' ' + if (prevProps.network !== this.props.network) { + const provider = global.ethereumProvider + this.ens = new ENS({ provider, network: this.props.network }) + this.onChange(ensResolution) + } if (prevState && ensResolution && this.props.onChange && ensResolution !== prevState.ensResolution) { - this.props.onChange(ensResolution, nickname) + this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError }) } } @@ -124,7 +143,9 @@ EnsInput.prototype.ensIcon = function (recipient) { } EnsInput.prototype.ensIconContents = function (recipient) { - const { loadingEns, ensFailure, ensResolution } = this.state || { ensResolution: ZERO_ADDRESS} + const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } + + if (toError) return if (loadingEns) { return h('img', { diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index dce9b0449..424048745 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () { key: 'identicon-' + address, style: { display: 'flex', + flexShrink: 0, alignItems: 'center', justifyContent: 'center', height: diameter, diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss index e69acff63..351640f6e 100644 --- a/ui/app/components/index.scss +++ b/ui/app/components/index.scss @@ -1,5 +1,7 @@ @import './export-text-container/index'; +@import './selected-account/index'; + @import './info-box/index'; @import './pages/index'; diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 5600e35ee..59c6842ef 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,7 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const CurrencyInput = require('./currency-input') const { addCurrencies, conversionGTE, @@ -23,12 +22,16 @@ function isValidInput (text) { return re.test(text) } +function removeLeadingZeroes (str) { + return str.replace(/^0*(?=\d)/, '') +} + InputNumber.prototype.setValue = function (newValue) { + newValue = removeLeadingZeroes(newValue) if (newValue && !isValidInput(newValue)) return const { fixed, min = -1, max = Infinity, onChange } = this.props newValue = fixed ? newValue.toFixed(4) : newValue - const newValueGreaterThanMin = conversionGTE( { value: newValue || '0', fromNumericBase: 'dec' }, { value: min, fromNumericBase: 'hex' }, @@ -48,26 +51,27 @@ InputNumber.prototype.setValue = function (newValue) { } InputNumber.prototype.render = function () { - const { unitLabel, step = 1, placeholder, value = 0 } = this.props + const { unitLabel, step = 1, placeholder, value } = this.props return h('div.customize-gas-input-wrapper', {}, [ - h(CurrencyInput, { + h('input', { className: 'customize-gas-input', value, placeholder, type: 'number', - onInputChange: newValue => { - this.setValue(newValue) + onChange: e => { + this.setValue(e.target.value) }, + min: 0, }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ h('i.fa.fa-angle-up', { - onClick: () => this.setValue(addCurrencies(value, step)), + onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })), }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, - onClick: () => this.setValue(subtractCurrencies(value, step)), + onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })), }), ]), ]) diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 5681a3cad..edced8725 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -9,7 +9,7 @@ const { getSelectedAccount } = require('../../selectors') function mapStateToProps (state) { return { selectedAccount: getSelectedAccount(state), - identity: state.appState.modal.modalState.identity, + identity: state.appState.modal.modalState.props.identity, } } diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 72e9c84eb..1518fa9a0 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -9,7 +9,7 @@ const Identicon = require('../identicon') function mapStateToProps (state) { return { network: state.metamask.network, - token: state.appState.modal.modalState.token, + token: state.appState.modal.modalState.props.token, } } diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js index 24af5a0de..242c7b89d 100644 --- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js +++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js @@ -8,7 +8,7 @@ const AccountModalContainer = require('./account-modal-container') function mapStateToProps (state) { return { - Qr: state.appState.modal.modalState.Qr, + Qr: state.appState.modal.modalState.props.Qr, } } diff --git a/ui/app/components/page-container/index.js b/ui/app/components/page-container/index.js new file mode 100644 index 000000000..415870b37 --- /dev/null +++ b/ui/app/components/page-container/index.js @@ -0,0 +1 @@ +export { default } from './page-container.component' diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/page-container/page-container-content.component.js new file mode 100644 index 000000000..a1d6988cc --- /dev/null +++ b/ui/app/components/page-container/page-container-content.component.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerContent extends Component { + + static propTypes = { + children: PropTypes.node.isRequired, + }; + + render () { + return ( +
+ {this.props.children} +
+ ) + } + +} diff --git a/ui/app/components/page-container/page-container-footer/index.js b/ui/app/components/page-container/page-container-footer/index.js new file mode 100644 index 000000000..7825c4520 --- /dev/null +++ b/ui/app/components/page-container/page-container-footer/index.js @@ -0,0 +1 @@ +export { default } from './page-container-footer.component' diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js new file mode 100644 index 000000000..0458ae78a --- /dev/null +++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Button from '../../button' + +export default class PageContainerFooter extends Component { + + static propTypes = { + onCancel: PropTypes.func, + cancelText: PropTypes.string, + onSubmit: PropTypes.func, + submitText: PropTypes.string, + disabled: PropTypes.bool, + } + + static contextTypes = { + t: PropTypes.func, + } + + render () { + const { + onCancel, + cancelText, + onSubmit, + submitText, + disabled, + } = this.props + + return ( +
+ + + + + +
+ ) + } + +} diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/page-container/page-container-header.component.js b/ui/app/components/page-container/page-container-header.component.js new file mode 100644 index 000000000..5c9d63221 --- /dev/null +++ b/ui/app/components/page-container/page-container-header.component.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerHeader extends Component { + + static propTypes = { + title: PropTypes.string, + subtitle: PropTypes.string, + onClose: PropTypes.func, + }; + + render () { + const { title, subtitle, onClose } = this.props + + return ( +
+ +
+ {title} +
+ +
+ {subtitle} +
+ +
onClose()} + /> + +
+ ) + } + +} diff --git a/ui/app/components/page-container/page-container-header/index.js b/ui/app/components/page-container/page-container-header/index.js new file mode 100644 index 000000000..b194af057 --- /dev/null +++ b/ui/app/components/page-container/page-container-header/index.js @@ -0,0 +1 @@ +export { default } from './page-container-header.component' diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js new file mode 100644 index 000000000..28882edce --- /dev/null +++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerHeader extends Component { + + static propTypes = { + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + onClose: PropTypes.func, + showBackButton: PropTypes.bool, + onBackButtonClick: PropTypes.func, + backButtonStyles: PropTypes.object, + backButtonString: PropTypes.string, + }; + + renderHeaderRow () { + const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props + + return showBackButton && ( +
+ + { backButtonString || 'Back' } + +
+ ) + } + + render () { + const { title, subtitle, onClose } = this.props + + return ( +
+ + { this.renderHeaderRow() } + +
+ {title} +
+ +
+ {subtitle} +
+ +
onClose()} + /> + +
+ ) + } + +} diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js new file mode 100644 index 000000000..9bfb99ade --- /dev/null +++ b/ui/app/components/page-container/page-container.component.js @@ -0,0 +1,72 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +import PageContainerHeader from './page-container-header' +import PageContainerFooter from './page-container-footer' + +export default class PageContainer extends Component { + + static propTypes = { + // PageContainerHeader props + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + onClose: PropTypes.func, + showBackButton: PropTypes.bool, + onBackButtonClick: PropTypes.func, + backButtonStyles: PropTypes.object, + backButtonString: PropTypes.string, + // Content props + ContentComponent: PropTypes.func, + contentComponentProps: PropTypes.object, + // PageContainerFooter props + onCancel: PropTypes.func, + cancelText: PropTypes.string, + onSubmit: PropTypes.func, + submitText: PropTypes.string, + disabled: PropTypes.bool, + }; + + render () { + const { + title, + subtitle, + onClose, + showBackButton, + onBackButtonClick, + backButtonStyles, + backButtonString, + ContentComponent, + contentComponentProps, + onCancel, + cancelText, + onSubmit, + submitText, + disabled, + } = this.props + + return ( +
+ +
+ +
+ +
+ ) + } + +} diff --git a/ui/app/components/page-container/tests/page-container.component.test.js b/ui/app/components/page-container/tests/page-container.component.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js index 1f4b37b53..bcb93d401 100644 --- a/ui/app/components/pages/add-token/add-token.component.js +++ b/ui/app/components/pages/add-token/add-token.component.js @@ -231,7 +231,7 @@ class AddToken extends Component {
this.handleCustomAddressChange(e.target.value)} @@ -241,7 +241,7 @@ class AddToken extends Component { /> this.handleCustomSymbolChange(e.target.value)} @@ -252,7 +252,7 @@ class AddToken extends Component { /> this.handleCustomDecimalsChange(e.target.value)} diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js index abd599b26..1611f817b 100644 --- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js +++ b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js @@ -15,7 +15,7 @@ export default class TokenListPlaceholder extends Component {
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js index 52d3dcde9..e2e973af9 100644 --- a/ui/app/components/pages/create-account/import-account/index.js +++ b/ui/app/components/pages/create-account/import-account/index.js @@ -46,7 +46,7 @@ AccountImportSubview.prototype.render = function () { }, onClick: () => { global.platform.openWindow({ - url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', + url: 'https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI', }) }, }, this.context.t('here')), diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index 0164417ec..c9d14be5f 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -82,18 +82,19 @@ class JsonImportSubview extends Component { } createNewKeychain () { + const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress } = this.props const state = this.state if (!state) { const message = this.context.t('validFileImport') - return this.props.displayWarning(message) + return displayWarning(message) } const { fileContents } = state if (!fileContents) { const message = this.context.t('needImportFile') - return this.props.displayWarning(message) + return displayWarning(message) } const passwordInput = document.getElementById('json-password-box') @@ -101,12 +102,19 @@ class JsonImportSubview extends Component { if (!password) { const message = this.context.t('needImportPassword') - return this.props.displayWarning(message) + return displayWarning(message) } - this.props.importNewJsonAccount([ fileContents, password ]) - // JS runtime requires caught rejections but failures are handled by Redux - .catch() + importNewJsonAccount([ fileContents, password ]) + .then(({ selectedAddress }) => { + if (selectedAddress) { + history.push(DEFAULT_ROUTE) + } else { + displayWarning('Error importing account.') + setSelectedAddress(firstAddress) + } + }) + .catch(err => err && displayWarning(err.message || err)) } } @@ -114,14 +122,17 @@ JsonImportSubview.propTypes = { error: PropTypes.string, goHome: PropTypes.func, displayWarning: PropTypes.func, + firstAddress: PropTypes.string, importNewJsonAccount: PropTypes.func, history: PropTypes.object, + setSelectedAddress: PropTypes.func, t: PropTypes.func, } const mapStateToProps = state => { return { error: state.appState.warning, + firstAddress: Object.keys(state.metamask.accounts)[0], } } @@ -130,6 +141,7 @@ const mapDispatchToProps = dispatch => { goHome: () => dispatch(actions.goHome()), displayWarning: warning => dispatch(actions.displayWarning(warning)), importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)), + setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)), } } diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index e55a47a3c..c38c39206 100644 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -21,6 +21,7 @@ module.exports = compose( function mapStateToProps (state) { return { error: state.appState.warning, + firstAddress: Object.keys(state.metamask.accounts)[0], } } @@ -29,7 +30,8 @@ function mapDispatchToProps (dispatch) { importNewAccount: (strategy, [ privateKey ]) => { return dispatch(actions.importNewAccount(strategy, [ privateKey ])) }, - displayWarning: () => dispatch(actions.displayWarning(null)), + displayWarning: (message) => dispatch(actions.displayWarning(message || null)), + setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)), } } @@ -40,7 +42,7 @@ function PrivateKeyImportView () { } PrivateKeyImportView.prototype.render = function () { - const { error } = this.props + const { error, displayWarning } = this.props return ( h('div.new-account-import-form__private-key', [ @@ -60,7 +62,10 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__buttons', {}, [ h('button.btn-default.btn--large.new-account-create-form__button', { - onClick: () => this.props.history.push(DEFAULT_ROUTE), + onClick: () => { + displayWarning(null) + this.props.history.push(DEFAULT_ROUTE) + }, }, [ this.context.t('cancel'), ]), @@ -88,10 +93,16 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { PrivateKeyImportView.prototype.createNewKeychain = function () { const input = document.getElementById('private-key-box') const privateKey = input.value - const { importNewAccount, history } = this.props + const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props importNewAccount('Private Key', [ privateKey ]) - // JS runtime requires caught rejections but failures are handled by Redux - .catch() - .then(() => history.push(DEFAULT_ROUTE)) + .then(({ selectedAddress }) => { + if (selectedAddress) { + history.push(DEFAULT_ROUTE) + } else { + displayWarning('Error importing account.') + setSelectedAddress(firstAddress) + } + }) + .catch(err => err && displayWarning(err.message || err)) } diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js index 475261253..5681e43a9 100644 --- a/ui/app/components/pages/create-account/index.js +++ b/ui/app/components/pages/create-account/index.js @@ -22,7 +22,9 @@ class CreateAccountPage extends Component { }), }), onClick: () => history.push(NEW_ACCOUNT_ROUTE), - }, 'Create'), + }, [ + this.context.t('create'), + ]), h('div.new-account__tabs__tab', { className: classnames('new-account__tabs__tab', { @@ -31,14 +33,16 @@ class CreateAccountPage extends Component { }), }), onClick: () => history.push(IMPORT_ACCOUNT_ROUTE), - }, 'Import'), + }, [ + this.context.t('import'), + ]), ]) } render () { return h('div.new-account', {}, [ h('div.new-account__header', [ - h('div.new-account__title', 'New Account'), + h('div.new-account__title', this.context.t('newAccount')), this.renderTabs(), ]), h('div.new-account__form', [ @@ -62,6 +66,11 @@ class CreateAccountPage extends Component { CreateAccountPage.propTypes = { location: PropTypes.object, history: PropTypes.object, + t: PropTypes.func, +} + +CreateAccountPage.contextTypes = { + t: PropTypes.func, } const mapStateToProps = state => ({ diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js index 9110f8202..c53413d3b 100644 --- a/ui/app/components/pages/home.js +++ b/ui/app/components/pages/home.js @@ -86,9 +86,9 @@ class Home extends Component { // if (!props.noActiveNotices) { // log.debug('rendering notice screen for unread notices.') // return h(NoticeScreen, { - // notice: props.lastUnreadNotice, + // notice: props.nextUnreadNotice, // key: 'NoticeScreen', - // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // onConfirm: () => props.dispatch(actions.markNoticeRead(props.nextUnreadNotice)), // }) // } else if (props.lostAccounts && props.lostAccounts.length > 0) { // log.debug('rendering notice screen for lost accounts view.') @@ -279,7 +279,7 @@ function mapStateToProps (state) { noActiveNotices, seedWords, unapprovedTxs, - lastUnreadNotice, + nextUnreadNotice, lostAccounts, unapprovedMsgCount, unapprovedPersonalMsgCount, @@ -313,7 +313,7 @@ function mapStateToProps (state) { network: state.metamask.network, provider: state.metamask.provider, forgottenPassword: state.appState.forgottenPassword, - lastUnreadNotice, + nextUnreadNotice, lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js index 2329a9147..a9077b98b 100644 --- a/ui/app/components/pages/notice.js +++ b/ui/app/components/pages/notice.js @@ -154,11 +154,11 @@ class Notice extends Component { const mapStateToProps = state => { const { metamask } = state - const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask + const { noActiveNotices, nextUnreadNotice, lostAccounts } = metamask return { noActiveNotices, - lastUnreadNotice, + nextUnreadNotice, lostAccounts, } } @@ -171,21 +171,21 @@ Notice.propTypes = { const mapDispatchToProps = dispatch => { return { - markNoticeRead: lastUnreadNotice => dispatch(actions.markNoticeRead(lastUnreadNotice)), + markNoticeRead: nextUnreadNotice => dispatch(actions.markNoticeRead(nextUnreadNotice)), markAccountsFound: () => dispatch(actions.markAccountsFound()), } } const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { noActiveNotices, lastUnreadNotice, lostAccounts } = stateProps + const { noActiveNotices, nextUnreadNotice, lostAccounts } = stateProps const { markNoticeRead, markAccountsFound } = dispatchProps let notice let onConfirm if (!noActiveNotices) { - notice = lastUnreadNotice - onConfirm = () => markNoticeRead(lastUnreadNotice) + notice = nextUnreadNotice + onConfirm = () => markNoticeRead(nextUnreadNotice) } else if (lostAccounts && lostAccounts.length > 0) { notice = generateLostAccountsNotice(lostAccounts) onConfirm = () => markAccountsFound() diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js index 384ae4b41..aee17e0e8 100644 --- a/ui/app/components/pages/settings/index.js +++ b/ui/app/components/pages/settings/index.js @@ -14,8 +14,8 @@ class Config extends Component { return h('div.settings__tabs', [ h(TabBar, { tabs: [ - { content: 'Settings', key: SETTINGS_ROUTE }, - { content: 'Info', key: INFO_ROUTE }, + { content: this.context.t('settings'), key: SETTINGS_ROUTE }, + { content: this.context.t('info'), key: INFO_ROUTE }, ], isActive: key => matchPath(location.pathname, { path: key, exact: true }), onSelect: key => history.push(key), @@ -54,6 +54,11 @@ class Config extends Component { Config.propTypes = { location: PropTypes.object, history: PropTypes.object, + t: PropTypes.func, +} + +Config.contextTypes = { + t: PropTypes.func, } module.exports = Config diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js index 8bc3897da..a1d3f9181 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.component.js +++ b/ui/app/components/pages/unlock-page/unlock-page.component.js @@ -120,7 +120,7 @@ class UnlockPage extends Component { > this.handleInputChange(event)} diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index aa68a9eb0..af3a14f57 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -11,7 +11,7 @@ const { conversionUtil } = require('../../conversion-util') const SenderToRecipient = require('../sender-to-recipient') const NetworkDisplay = require('../network-display') -const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +const { MIN_GAS_PRICE_HEX } = require('../send_/send.constants') class ConfirmDeployContract extends Component { constructor (props) { diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 5ad35c269..22b2670d8 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -17,22 +17,26 @@ const { multiplyCurrencies, } = require('../../conversion-util') const { - getGasTotal, + calcGasTotal, isBalanceSufficient, -} = require('../send/send-utils') -const GasFeeDisplay = require('../send/gas-fee-display-v2') +} = require('../send_/send.utils') +const GasFeeDisplay = require('../send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component').default const SenderToRecipient = require('../sender-to-recipient') const NetworkDisplay = require('../network-display') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') -const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +const { MIN_GAS_PRICE_HEX } = require('../send_/send.constants') const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') const { ENVIRONMENT_TYPE_POPUP, ENVIRONMENT_TYPE_NOTIFICATION, } = require('../../../../app/scripts/lib/enums') +import { + updateSendErrors, +} from '../../ducks/send.duck' + ConfirmSendEther.contextTypes = { t: PropTypes.func, } @@ -109,7 +113,7 @@ function mapDispatchToProps (dispatch) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } @@ -145,7 +149,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { if (shouldUpdateBalanceSendErrors) { const balanceIsSufficient = this.isBalanceSufficient(txMeta) updateSendErrors({ - insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + insufficientFunds: balanceIsSufficient ? false : 'insufficientFunds', }) } @@ -153,7 +157,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { if (shouldUpdateSimulationSendError) { updateSendErrors({ - simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + simulationFails: !txMeta.simulationFails ? false : 'transactionError', }) } } @@ -585,9 +589,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: 'insufficientFunds' }) } else { - updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) + updateSendErrors({ invalidGasParams: 'invalidGasParams' }) this.setState({ submitting: false }) } } @@ -612,7 +616,7 @@ ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) { value: amount, }, } = txMeta - const gasTotal = getGasTotal(gas, gasPrice) + const gasTotal = calcGasTotal(gas, gasPrice) return isBalanceSufficient({ amount, @@ -643,7 +647,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: sendGasPrice, gasLimit: sendGasLimit } = props.send const { lastGasPrice, txParams: { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index ddaa13d22..535347cee 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -11,7 +11,7 @@ abiDecoder.addABI(tokenAbi) const actions = require('../../actions') const clone = require('clone') const Identicon = require('../identicon') -const GasFeeDisplay = require('../send/gas-fee-display-v2.js') +const GasFeeDisplay = require('../send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js').default const NetworkDisplay = require('../network-display') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN @@ -21,9 +21,9 @@ const { addCurrencies, } = require('../../conversion-util') const { - getGasTotal, + calcGasTotal, isBalanceSufficient, -} = require('../send/send-utils') +} = require('../send_/send.utils') const { calcTokenAmount, } = require('../../token-util') @@ -31,7 +31,7 @@ const classnames = require('classnames') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') -const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +const { MIN_GAS_PRICE_HEX } = require('../send_/send.constants') const { getTokenExchangeRate, @@ -40,6 +40,10 @@ const { } = require('../../selectors') const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') +import { + updateSendErrors, +} from '../../ducks/send.duck' + const { ENVIRONMENT_TYPE_POPUP, ENVIRONMENT_TYPE_NOTIFICATION, @@ -109,7 +113,7 @@ function mapDispatchToProps (dispatch, ownProps) { to, amount: tokenAmountInHex, errors: { to: null, amount: null }, - editingTransactionId: id, + editingTransactionId: id && id.toString(), token: ownProps.token, })) dispatch(actions.showSendTokenPage()) @@ -147,7 +151,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, - updateSendErrors: error => dispatch(actions.updateSendErrors(error)), + updateSendErrors: error => dispatch(updateSendErrors(error)), } } @@ -589,9 +593,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: 'insufficientFunds' }) } else { - updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) + updateSendErrors({ invalidGasParams: 'invalidGasParams' }) this.setState({ submitting: false }) } } @@ -607,7 +611,7 @@ ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) { gasPrice, }, } = txMeta - const gasTotal = getGasTotal(gas, gasPrice) + const gasTotal = calcGasTotal(gas, gasPrice) return isBalanceSufficient({ amount: '0', @@ -647,7 +651,7 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: sendGasPrice, gasLimit: sendGasLimit } = props.send const { lastGasPrice, txParams: { diff --git a/ui/app/components/selected-account/index.js b/ui/app/components/selected-account/index.js new file mode 100644 index 000000000..eb342181f --- /dev/null +++ b/ui/app/components/selected-account/index.js @@ -0,0 +1,2 @@ +import SelectedAccount from './selected-account.container' +module.exports = SelectedAccount diff --git a/ui/app/components/selected-account/index.scss b/ui/app/components/selected-account/index.scss new file mode 100644 index 000000000..5339a228b --- /dev/null +++ b/ui/app/components/selected-account/index.scss @@ -0,0 +1,38 @@ +.selected-account { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + + &__name { + max-width: 200px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-align: center; + } + + &__address { + font-size: .75rem; + color: $silver-chalice; + } + + &__clickable { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 5px 15px; + border-radius: 10px; + cursor: pointer; + + &:hover { + background-color: #e8e6e8; + } + + &:active { + background-color: #d9d7da; + } + } +} diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js new file mode 100644 index 000000000..3386a4196 --- /dev/null +++ b/ui/app/components/selected-account/selected-account.component.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import copyToClipboard from 'copy-to-clipboard' + +const Tooltip = require('../tooltip-v2.js') + +const addressStripper = (address = '') => { + if (address.length < 4) { + return address + } + + return `${address.slice(0, 4)}...${address.slice(-4)}` +} + +class SelectedAccount extends Component { + state = { + copied: false, + } + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + selectedAddress: PropTypes.string, + selectedIdentity: PropTypes.object, + } + + render () { + const { t } = this.context + const { selectedAddress, selectedIdentity } = this.props + + return ( +
+ +
{ + this.setState({ copied: true }) + setTimeout(() => this.setState({ copied: false }), 3000) + copyToClipboard(selectedAddress) + }} + > +
+ { selectedIdentity.name } +
+
+ { addressStripper(selectedAddress) } +
+
+ +
+ ) + } +} + +export default SelectedAccount diff --git a/ui/app/components/selected-account/selected-account.container.js b/ui/app/components/selected-account/selected-account.container.js new file mode 100644 index 000000000..f9e061d15 --- /dev/null +++ b/ui/app/components/selected-account/selected-account.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import SelectedAccount from './selected-account.component' + +const selectors = require('../../selectors') + +const mapStateToProps = state => { + return { + selectedAddress: selectors.getSelectedAddress(state), + selectedIdentity: selectors.getSelectedIdentity(state), + } +} + +export default connect(mapStateToProps)(SelectedAccount) diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js deleted file mode 100644 index b5e604a6e..000000000 --- a/ui/app/components/send/account-list-item.js +++ /dev/null @@ -1,74 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const { checksumAddress } = require('../../util') -const Identicon = require('../identicon') -const CurrencyDisplay = require('./currency-display') -const { conversionRateSelector, getCurrentCurrency } = require('../../selectors') - -inherits(AccountListItem, Component) -function AccountListItem () { - Component.call(this) -} - -function mapStateToProps (state) { - return { - conversionRate: conversionRateSelector(state), - currentCurrency: getCurrentCurrency(state), - } -} - -module.exports = connect(mapStateToProps)(AccountListItem) - -AccountListItem.prototype.render = function () { - const { - className, - account, - handleClick, - icon = null, - conversionRate, - currentCurrency, - displayBalance = true, - displayAddress = false, - } = this.props - - const { name, address, balance } = account || {} - - return h('div.account-list-item', { - className, - onClick: () => handleClick({ name, address, balance }), - }, [ - - h('div.account-list-item__top-row', {}, [ - - h( - Identicon, - { - address, - diameter: 18, - className: 'account-list-item__identicon', - }, - ), - - h('div.account-list-item__account-name', {}, name || address), - - icon && h('div.account-list-item__icon', [icon]), - - ]), - - displayAddress && name && h('div.account-list-item__account-address', checksumAddress(address)), - - displayBalance && h(CurrencyDisplay, { - primaryCurrency: 'ETH', - convertedCurrency: currentCurrency, - value: balance, - conversionRate, - readOnly: true, - className: 'account-list-item__account-balances', - primaryBalanceClassName: 'account-list-item__account-primary-balance', - convertedBalanceClassName: 'account-list-item__account-secondary-balance', - }, name), - - ]) -} diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 90fb2b66c..1cf55ce1a 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -1,10 +1,11 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') +const { removeLeadingZeroes } = require('../send_/send.utils') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') +const ethUtil = require('ethereumjs-util') module.exports = CurrencyDisplay @@ -21,36 +22,52 @@ function toHexWei (value) { }) } +CurrencyDisplay.prototype.componentWillMount = function () { + this.setState({ + valueToRender: this.getValueToRender(this.props), + }) +} + +CurrencyDisplay.prototype.componentWillReceiveProps = function (nextProps) { + const currentValueToRender = this.getValueToRender(this.props) + const newValueToRender = this.getValueToRender(nextProps) + if (currentValueToRender !== newValueToRender) { + this.setState({ + valueToRender: newValueToRender, + }) + } +} + CurrencyDisplay.prototype.getAmount = function (value) { const { selectedToken } = this.props const { decimals } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) - const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'}) + const sendAmount = multiplyCurrencies(value || '0', multiplier, {toNumericBase: 'hex'}) return selectedToken ? sendAmount : toHexWei(value) } -CurrencyDisplay.prototype.getValueToRender = function () { - const { selectedToken, conversionRate, value } = this.props - +CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value, readOnly }) { + if (value === '0x0') return readOnly ? '0' : '' const { decimals, symbol } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) return selectedToken - ? conversionUtil(value, { + ? conversionUtil(ethUtil.addHexPrefix(value), { fromNumericBase: 'hex', + toNumericBase: 'dec', toCurrency: symbol, conversionRate: multiplier, invertConversionRate: true, }) - : conversionUtil(value, { + : conversionUtil(ethUtil.addHexPrefix(value), { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', - numberOfDecimals: 6, + numberOfDecimals: 9, conversionRate, }) } @@ -76,6 +93,18 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu : convertedValue } +CurrencyDisplay.prototype.handleChange = function (newVal) { + this.setState({ valueToRender: removeLeadingZeroes(newVal) }) + this.props.onChange(this.getAmount(newVal)) +} + +CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { + const valueString = String(valueToRender) + const valueLength = valueString.length || 1 + const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0 + return (valueLength + decimalPointDeficit + 0.75) + 'ch' +} + CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', @@ -85,10 +114,11 @@ CurrencyDisplay.prototype.render = function () { convertedCurrency, readOnly = false, inError = false, - handleChange, + onBlur, + step, } = this.props + const { valueToRender } = this.state - const valueToRender = this.getValueToRender() const convertedValueToRender = this.getConvertedValueToRender(valueToRender) return h('div', { @@ -96,24 +126,31 @@ CurrencyDisplay.prototype.render = function () { style: { borderColor: inError ? 'red' : null, }, - onClick: () => this.currencyInput && this.currencyInput.focus(), + onClick: () => { + this.currencyInput && this.currencyInput.focus() + }, }, [ h('div.currency-display__primary-row', [ h('div.currency-display__input-wrapper', [ - h(readOnly ? 'input' : CurrencyInput, { + h('input', { className: primaryBalanceClassName, value: `${valueToRender}`, placeholder: '0', + type: 'number', readOnly, ...(!readOnly ? { - onInputChange: newValue => { - handleChange(this.getAmount(newValue)) - }, - inputRef: input => { this.currencyInput = input }, + onChange: e => this.handleChange(e.target.value), + onBlur: () => onBlur(this.getAmount(valueToRender)), } : {}), + ref: input => { this.currencyInput = input }, + style: { + width: this.getInputWidth(valueToRender, readOnly), + }, + min: 0, + step, }), h('span.currency-display__currency-symbol', primaryCurrency), diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js deleted file mode 100644 index 0686fbe73..000000000 --- a/ui/app/components/send/from-dropdown.js +++ /dev/null @@ -1,72 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const AccountListItem = require('./account-list-item') - -module.exports = FromDropdown - -inherits(FromDropdown, Component) -function FromDropdown () { - Component.call(this) -} - -FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) { - const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) - - return currentAccount.address === selectedAccount.address - ? listItemIcon - : null -} - -FromDropdown.prototype.renderDropdown = function () { - const { - accounts, - selectedAccount, - closeDropdown, - onSelect, - } = this.props - - return h('div', {}, [ - - h('div.send-v2__from-dropdown__close-area', { - onClick: closeDropdown, - }), - - h('div.send-v2__from-dropdown__list', {}, [ - - ...accounts.map(account => h(AccountListItem, { - className: 'account-list-item__dropdown', - account, - handleClick: () => { - onSelect(account) - closeDropdown() - }, - icon: this.getListItemIcon(account, selectedAccount), - })), - - ]), - - ]) -} - -FromDropdown.prototype.render = function () { - const { - selectedAccount, - openDropdown, - dropdownOpen, - } = this.props - - return h('div.send-v2__from-dropdown', {}, [ - - h(AccountListItem, { - account: selectedAccount, - handleClick: openDropdown, - icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }), - }), - - dropdownOpen && this.renderDropdown(), - - ]) - -} - diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js deleted file mode 100644 index 1423aa84d..000000000 --- a/ui/app/components/send/gas-fee-display-v2.js +++ /dev/null @@ -1,53 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const CurrencyDisplay = require('./currency-display') -const connect = require('react-redux').connect - -GasFeeDisplay.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect()(GasFeeDisplay) - - -inherits(GasFeeDisplay, Component) -function GasFeeDisplay () { - Component.call(this) -} - -GasFeeDisplay.prototype.render = function () { - const { - conversionRate, - gasTotal, - onClick, - primaryCurrency = 'ETH', - convertedCurrency, - gasLoadingError, - } = this.props - - return h('div.send-v2__gas-fee-display', [ - - gasTotal - ? h(CurrencyDisplay, { - primaryCurrency, - convertedCurrency, - value: gasTotal, - conversionRate, - convertedPrefix: '$', - readOnly: true, - }) - : gasLoadingError - ? h('div.currency-display.currency-display--message', this.context.t('setGasPrice')) - : h('div.currency-display', this.context.t('loading')), - - h('button.sliders-icon-container', { - onClick, - disabled: !gasTotal && !gasLoadingError, - }, [ - h('i.fa.fa-sliders.sliders-icon'), - ]), - - ]) -} diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js deleted file mode 100644 index 62cdc1cad..000000000 --- a/ui/app/components/send/gas-tooltip.js +++ /dev/null @@ -1,106 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const InputNumber = require('../input-number.js') -const connect = require('react-redux').connect - -GasTooltip.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect()(GasTooltip) - - -inherits(GasTooltip, Component) -function GasTooltip () { - Component.call(this) - this.state = { - gasLimit: 0, - gasPrice: 0, - } - - this.updateGasPrice = this.updateGasPrice.bind(this) - this.updateGasLimit = this.updateGasLimit.bind(this) - this.onClose = this.onClose.bind(this) -} - -GasTooltip.prototype.componentWillMount = function () { - const { gasPrice = 0, gasLimit = 0} = this.props - - this.setState({ - gasPrice: parseInt(gasPrice, 16) / 1000000000, - gasLimit: parseInt(gasLimit, 16), - }) -} - -GasTooltip.prototype.updateGasPrice = function (newPrice) { - const { onFeeChange } = this.props - const { gasLimit } = this.state - - this.setState({ gasPrice: newPrice }) - onFeeChange({ - gasLimit: gasLimit.toString(16), - gasPrice: (newPrice * 1000000000).toString(16), - }) -} - -GasTooltip.prototype.updateGasLimit = function (newLimit) { - const { onFeeChange } = this.props - const { gasPrice } = this.state - - this.setState({ gasLimit: newLimit }) - onFeeChange({ - gasLimit: newLimit.toString(16), - gasPrice: (gasPrice * 1000000000).toString(16), - }) -} - -GasTooltip.prototype.onClose = function (e) { - e.stopPropagation() - this.props.onClose() -} - -GasTooltip.prototype.render = function () { - const { gasPrice, gasLimit } = this.state - - return h('div.gas-tooltip', {}, [ - h('div.gas-tooltip-close-area', { - onClick: this.onClose, - }), - h('div.customize-gas-tooltip-container', {}, [ - h('div.customize-gas-tooltip', {}, [ - h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']), - h('div.gas-tooltip-input-label', {}, [ - h('span.gas-tooltip-label', {}, ['Gas Price']), - h('i.fa.fa-info-circle'), - ]), - h(InputNumber, { - unitLabel: 'GWEI', - step: 1, - min: 0, - placeholder: '0', - value: gasPrice, - onChange: (newPrice) => this.updateGasPrice(newPrice), - }), - h('div.gas-tooltip-input-label', { - style: { - 'marginTop': '81px', - }, - }, [ - h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]), - h('i.fa.fa-info-circle'), - ]), - h(InputNumber, { - unitLabel: 'UNITS', - step: 1, - min: 0, - placeholder: '0', - value: gasLimit, - onChange: (newLimit) => this.updateGasLimit(newLimit), - }), - ]), - h('div.gas-tooltip-arrow', {}), - ]), - ]) -} diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js deleted file mode 100644 index f4bb24bf8..000000000 --- a/ui/app/components/send/memo-textarea.js +++ /dev/null @@ -1,33 +0,0 @@ -// const Component = require('react').Component -// const h = require('react-hyperscript') -// const inherits = require('util').inherits -// const Identicon = require('../identicon') - -// module.exports = MemoTextArea - -// inherits(MemoTextArea, Component) -// function MemoTextArea () { -// Component.call(this) -// } - -// MemoTextArea.prototype.render = function () { -// const { memo, identities, onChange } = this.props - -// return h('div.send-v2__memo-text-area', [ - -// h('textarea.send-v2__memo-text-area__input', { -// placeholder: 'Optional', -// value: memo, -// onChange, -// // onBlur: () => { -// // this.setErrorsFor('memo') -// // }, -// onFocus: event => { -// // this.clearErrorsFor('memo') -// }, -// }), - -// ]) - -// } - diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js deleted file mode 100644 index 71bfb2668..000000000 --- a/ui/app/components/send/send-utils.js +++ /dev/null @@ -1,78 +0,0 @@ -const { - addCurrencies, - conversionUtil, - conversionGTE, - multiplyCurrencies, -} = require('../../conversion-util') -const { - calcTokenAmount, -} = require('../../token-util') - -function isBalanceSufficient ({ - amount = '0x0', - gasTotal = '0x0', - balance, - primaryCurrency, - amountConversionRate, - conversionRate, -}) { - const totalAmount = addCurrencies(amount, gasTotal, { - aBase: 16, - bBase: 16, - toNumericBase: 'hex', - }) - - const balanceIsSufficient = conversionGTE( - { - value: balance, - fromNumericBase: 'hex', - fromCurrency: primaryCurrency, - conversionRate, - }, - { - value: totalAmount, - fromNumericBase: 'hex', - conversionRate: amountConversionRate || conversionRate, - fromCurrency: primaryCurrency, - }, - ) - - return balanceIsSufficient -} - -function isTokenBalanceSufficient ({ - amount = '0x0', - tokenBalance, - decimals, -}) { - const amountInDec = conversionUtil(amount, { - fromNumericBase: 'hex', - }) - - const tokenBalanceIsSufficient = conversionGTE( - { - value: tokenBalance, - fromNumericBase: 'dec', - }, - { - value: calcTokenAmount(amountInDec, decimals), - fromNumericBase: 'dec', - }, - ) - - return tokenBalanceIsSufficient -} - -function getGasTotal (gasLimit, gasPrice) { - return multiplyCurrencies(gasLimit, gasPrice, { - toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 16, - }) -} - -module.exports = { - getGasTotal, - isBalanceSufficient, - isTokenBalanceSufficient, -} diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js deleted file mode 100644 index adfc91240..000000000 --- a/ui/app/components/send/send-v2-container.js +++ /dev/null @@ -1,89 +0,0 @@ -const connect = require('react-redux').connect -const actions = require('../../actions') -const abi = require('ethereumjs-abi') -const SendEther = require('../../send-v2') -const { withRouter } = require('react-router-dom') -const { compose } = require('recompose') - -const { - accountsWithSendEtherInfoSelector, - getCurrentAccountWithSendEtherInfo, - conversionRateSelector, - getSelectedToken, - getSelectedAddress, - getAddressBook, - getSendFrom, - getCurrentCurrency, - getSelectedTokenToFiatRate, - getSelectedTokenContract, -} = require('../../selectors') - -module.exports = compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(SendEther) - -function mapStateToProps (state) { - const fromAccounts = accountsWithSendEtherInfoSelector(state) - const selectedAddress = getSelectedAddress(state) - const selectedToken = getSelectedToken(state) - const conversionRate = conversionRateSelector(state) - - let data - let primaryCurrency - let tokenToFiatRate - if (selectedToken) { - data = Array.prototype.map.call( - abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']), - x => ('00' + x.toString(16)).slice(-2) - ).join('') - - primaryCurrency = selectedToken.symbol - - tokenToFiatRate = getSelectedTokenToFiatRate(state) - } - - return { - ...state.metamask.send, - from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state), - fromAccounts, - toAccounts: [...fromAccounts, ...getAddressBook(state)], - conversionRate, - selectedToken, - primaryCurrency, - convertedCurrency: getCurrentCurrency(state), - data, - selectedAddress, - amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate, - tokenContract: getSelectedTokenContract(state), - unapprovedTxs: state.metamask.unapprovedTxs, - network: state.metamask.network, - } -} - -function mapDispatchToProps (dispatch) { - return { - showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })), - estimateGas: params => dispatch(actions.estimateGas(params)), - getGasPrice: () => dispatch(actions.getGasPrice()), - signTokenTx: (tokenAddress, toAddress, amount, txData) => ( - dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData)) - ), - signTx: txParams => dispatch(actions.signTx(txParams)), - updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)), - updateTx: txData => dispatch(actions.updateTransaction(txData)), - setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)), - addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)), - updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)), - updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), - updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), - updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)), - updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)), - updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)), - updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), - updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)), - updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)), - clearSend: () => dispatch(actions.clearSend()), - setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)), - } -} diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 5ea17f9a2..df74ef194 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -2,7 +2,7 @@ const Component = require('react').Component const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const AccountListItem = require('./account-list-item') +const AccountListItem = require('../send_/account-list-item/account-list-item.component').default const connect = require('react-redux').connect ToAutoComplete.contextTypes = { diff --git a/ui/app/components/send_/README.md b/ui/app/components/send_/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/account-list-item/account-list-item-README.md b/ui/app/components/send_/account-list-item/account-list-item-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/account-list-item/account-list-item.component.js b/ui/app/components/send_/account-list-item/account-list-item.component.js new file mode 100644 index 000000000..b8407d147 --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.component.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { checksumAddress } from '../../../util' +import Identicon from '../../identicon' +import CurrencyDisplay from '../../send/currency-display' + +export default class AccountListItem extends Component { + + static propTypes = { + account: PropTypes.object, + className: PropTypes.string, + conversionRate: PropTypes.number, + currentCurrency: PropTypes.string, + displayAddress: PropTypes.bool, + displayBalance: PropTypes.bool, + handleClick: PropTypes.func, + icon: PropTypes.node, + }; + + render () { + const { + account, + className, + conversionRate, + currentCurrency, + displayAddress = false, + displayBalance = true, + handleClick, + icon = null, + } = this.props + + const { name, address, balance } = account || {} + + return (
handleClick({ name, address, balance })} + > + +
+ + +
{ name || address }
+ + {icon &&
{ icon }
} + +
+ + {displayAddress && name &&
+ { checksumAddress(address) } +
} + + {displayBalance && } + +
) + } +} + +AccountListItem.contextTypes = { + t: PropTypes.func, +} + diff --git a/ui/app/components/send_/account-list-item/account-list-item.container.js b/ui/app/components/send_/account-list-item/account-list-item.container.js new file mode 100644 index 000000000..4b4519288 --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +import { + getConversionRate, + getCurrentCurrency, +} from '../send.selectors.js' +import AccountListItem from './account-list-item.component' + +export default connect(mapStateToProps)(AccountListItem) + +function mapStateToProps (state) { + return { + conversionRate: getConversionRate(state), + currentCurrency: getCurrentCurrency(state), + } +} diff --git a/ui/app/components/send_/account-list-item/account-list-item.scss b/ui/app/components/send_/account-list-item/account-list-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/account-list-item/index.js b/ui/app/components/send_/account-list-item/index.js new file mode 100644 index 000000000..907485cf7 --- /dev/null +++ b/ui/app/components/send_/account-list-item/index.js @@ -0,0 +1 @@ +export { default } from './account-list-item.container' diff --git a/ui/app/components/send_/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/send_/account-list-item/tests/account-list-item-component.test.js new file mode 100644 index 000000000..bb7f3776c --- /dev/null +++ b/ui/app/components/send_/account-list-item/tests/account-list-item-component.test.js @@ -0,0 +1,138 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import proxyquire from 'proxyquire' +import Identicon from '../../../identicon' +import CurrencyDisplay from '../../../send/currency-display' + +const utilsMethodStubs = { + checksumAddress: sinon.stub().returns('mockCheckSumAddress'), +} + +const AccountListItem = proxyquire('../account-list-item.component.js', { + '../../../util': utilsMethodStubs, +}).default + + +const propsMethodSpies = { + handleClick: sinon.spy(), +} + +describe('AccountListItem Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(} + />, { context: { t: str => str + '_t' } }) + }) + + afterEach(() => { + propsMethodSpies.handleClick.resetHistory() + }) + + describe('render', () => { + it('should render a div with the passed className', () => { + assert.equal(wrapper.find('.mockClassName').length, 1) + assert(wrapper.find('.mockClassName').is('div')) + assert(wrapper.find('.mockClassName').hasClass('account-list-item')) + }) + + it('should call handleClick with the expected props when the root div is clicked', () => { + const { onClick } = wrapper.find('.mockClassName').props() + assert.equal(propsMethodSpies.handleClick.callCount, 0) + onClick() + assert.equal(propsMethodSpies.handleClick.callCount, 1) + assert.deepEqual( + propsMethodSpies.handleClick.getCall(0).args, + [{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }] + ) + }) + + it('should have a top row div', () => { + assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1) + assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div')) + }) + + it('should have an identicon, name and icon in the top row', () => { + const topRow = wrapper.find('.mockClassName > .account-list-item__top-row') + assert.equal(topRow.find(Identicon).length, 1) + assert.equal(topRow.find('.account-list-item__account-name').length, 1) + assert.equal(topRow.find('.account-list-item__icon').length, 1) + }) + + it('should show the account name if it exists', () => { + const topRow = wrapper.find('.mockClassName > .account-list-item__top-row') + assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName') + }) + + it('should show the account address if there is no name', () => { + wrapper.setProps({ account: { address: 'addressButNoName' } }) + const topRow = wrapper.find('.mockClassName > .account-list-item__top-row') + assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName') + }) + + it('should render the passed icon', () => { + const topRow = wrapper.find('.mockClassName > .account-list-item__top-row') + assert(topRow.find('.account-list-item__icon').childAt(0).is('i')) + assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon')) + }) + + it('should not render an icon if none is passed', () => { + wrapper.setProps({ icon: null }) + const topRow = wrapper.find('.mockClassName > .account-list-item__top-row') + assert.equal(topRow.find('.account-list-item__icon').length, 0) + }) + + it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => { + wrapper.setProps({ displayAddress: true }) + assert.equal(wrapper.find('.account-list-item__account-address').length, 1) + assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress') + assert.deepEqual( + utilsMethodStubs.checksumAddress.getCall(0).args, + ['mockAddress'] + ) + }) + + it('should not render the account address as a checksumAddress if displayAddress is false', () => { + wrapper.setProps({ displayAddress: false }) + assert.equal(wrapper.find('.account-list-item__account-address').length, 0) + }) + + it('should not render the account address as a checksumAddress if name is not provided', () => { + wrapper.setProps({ account: { address: 'someAddressButNoName' } }) + assert.equal(wrapper.find('.account-list-item__account-address').length, 0) + }) + + it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => { + wrapper.setProps({ displayBalance: true }) + assert.equal(wrapper.find(CurrencyDisplay).length, 1) + assert.deepEqual( + wrapper.find(CurrencyDisplay).props(), + { + className: 'account-list-item__account-balances', + conversionRate: 4, + convertedBalanceClassName: 'account-list-item__account-secondary-balance', + convertedCurrency: 'mockCurrentyCurrency', + primaryBalanceClassName: 'account-list-item__account-primary-balance', + primaryCurrency: 'ETH', + readOnly: true, + value: 'mockBalance', + } + ) + }) + + it('should not render a CurrencyDisplay if displayBalance is false', () => { + wrapper.setProps({ displayBalance: false }) + assert.equal(wrapper.find(CurrencyDisplay).length, 0) + }) + }) +}) diff --git a/ui/app/components/send_/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/send_/account-list-item/tests/account-list-item-container.test.js new file mode 100644 index 000000000..af0859117 --- /dev/null +++ b/ui/app/components/send_/account-list-item/tests/account-list-item-container.test.js @@ -0,0 +1,32 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +let mapStateToProps + +proxyquire('../account-list-item.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + return () => ({}) + }, + }, + '../send.selectors.js': { + getConversionRate: (s) => `mockConversionRate:${s}`, + getCurrentCurrency: (s) => `mockCurrentCurrency:${s}`, + }, +}) + +describe('account-list-item container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + conversionRate: 'mockConversionRate:mockState', + currentCurrency: 'mockCurrentCurrency:mockState', + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/index.js b/ui/app/components/send_/index.js new file mode 100644 index 000000000..b5114babc --- /dev/null +++ b/ui/app/components/send_/index.js @@ -0,0 +1 @@ +export { default } from './send.container' diff --git a/ui/app/components/send_/send-content/index.js b/ui/app/components/send_/send-content/index.js new file mode 100644 index 000000000..891c17e6a --- /dev/null +++ b/ui/app/components/send_/send-content/index.js @@ -0,0 +1 @@ +export { default } from './send-content.component' diff --git a/ui/app/components/send_/send-content/send-amount-row/README.md b/ui/app/components/send_/send-content/send-amount-row/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js new file mode 100644 index 000000000..bdf12b738 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class AmountMaxButton extends Component { + + static propTypes = { + balance: PropTypes.string, + gasTotal: PropTypes.string, + maxModeOn: PropTypes.bool, + selectedToken: PropTypes.object, + setAmountToMax: PropTypes.func, + setMaxModeTo: PropTypes.func, + tokenBalance: PropTypes.string, + }; + + setMaxAmount () { + const { + balance, + gasTotal, + selectedToken, + setAmountToMax, + tokenBalance, + } = this.props + + setAmountToMax({ + balance, + gasTotal, + selectedToken, + tokenBalance, + }) + } + + render () { + const { setMaxModeTo, maxModeOn } = this.props + + return ( +
{ + event.preventDefault() + setMaxModeTo(true) + this.setMaxAmount() + }} + > + {!maxModeOn ? this.context.t('max') : ''} +
+ ) + } + +} + +AmountMaxButton.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js new file mode 100644 index 000000000..2d2ec42f7 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux' +import { + getGasTotal, + getSelectedToken, + getSendFromBalance, + getTokenBalance, +} from '../../../send.selectors.js' +import { getMaxModeOn } from './amount-max-button.selectors.js' +import { calcMaxAmount } from './amount-max-button.utils.js' +import { + updateSendAmount, + setMaxModeTo, +} from '../../../../../actions' +import AmountMaxButton from './amount-max-button.component' +import { + updateSendErrors, +} from '../../../../../ducks/send.duck' + +export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton) + +function mapStateToProps (state) { + + return { + balance: getSendFromBalance(state), + gasTotal: getGasTotal(state), + maxModeOn: getMaxModeOn(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + setAmountToMax: maxAmountDataObject => { + dispatch(updateSendErrors({ amount: null })) + dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject))) + }, + setMaxModeTo: bool => dispatch(setMaxModeTo(bool)), + } +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js new file mode 100644 index 000000000..69fec1994 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + getMaxModeOn, +} + +module.exports = selectors + +function getMaxModeOn (state) { + return state.metamask.send.maxModeOn +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js new file mode 100644 index 000000000..b490a7fd7 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js @@ -0,0 +1,22 @@ +const { + multiplyCurrencies, + subtractCurrencies, +} = require('../../../../../conversion-util') +const ethUtil = require('ethereumjs-util') + +function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) { + const { decimals } = selectedToken || {} + const multiplier = Math.pow(10, Number(decimals || 0)) + + return selectedToken + ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'}) + : subtractCurrencies( + ethUtil.addHexPrefix(balance), + ethUtil.addHexPrefix(gasTotal), + { toNumericBase: 'hex' } + ) +} + +module.exports = { + calcMaxAmount, +} diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js new file mode 100644 index 000000000..ee8271494 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js @@ -0,0 +1 @@ +export { default } from './amount-max-button.container' diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js new file mode 100644 index 000000000..86a05ff21 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js @@ -0,0 +1,90 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import AmountMaxButton from '../amount-max-button.component.js' + +const propsMethodSpies = { + setAmountToMax: sinon.spy(), + setMaxModeTo: sinon.spy(), +} + +const MOCK_EVENT = { preventDefault: () => {} } + +sinon.spy(AmountMaxButton.prototype, 'setMaxAmount') + +describe('AmountMaxButton Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.setAmountToMax.resetHistory() + propsMethodSpies.setMaxModeTo.resetHistory() + AmountMaxButton.prototype.setMaxAmount.resetHistory() + }) + + describe('setMaxAmount', () => { + + it('should call setAmountToMax with the correct params', () => { + assert.equal(propsMethodSpies.setAmountToMax.callCount, 0) + instance.setMaxAmount() + assert.equal(propsMethodSpies.setAmountToMax.callCount, 1) + assert.deepEqual( + propsMethodSpies.setAmountToMax.getCall(0).args, + [{ + balance: 'mockBalance', + gasTotal: 'mockGasTotal', + selectedToken: { address: 'mockTokenAddress' }, + tokenBalance: 'mockTokenBalance', + }] + ) + }) + + }) + + describe('render', () => { + it('should render a div with a send-v2__amount-max class', () => { + assert.equal(wrapper.find('.send-v2__amount-max').length, 1) + assert(wrapper.find('.send-v2__amount-max').is('div')) + }) + + it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => { + const { + onClick, + } = wrapper.find('.send-v2__amount-max').props() + + assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 0) + assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0) + onClick(MOCK_EVENT) + assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 1) + assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1) + assert.deepEqual( + propsMethodSpies.setMaxModeTo.getCall(0).args, + [true] + ) + }) + + it('should not render text when maxModeOn is true', () => { + wrapper.setProps({ maxModeOn: true }) + assert.equal(wrapper.find('.send-v2__amount-max').text(), '') + }) + + it('should render the expected text when maxModeOn is false', () => { + wrapper.setProps({ maxModeOn: false }) + assert.equal(wrapper.find('.send-v2__amount-max').text(), 'max_t') + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js new file mode 100644 index 000000000..2cc00d6d6 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js @@ -0,0 +1,91 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + setMaxModeTo: sinon.spy(), + updateSendAmount: sinon.spy(), +} +const duckActionSpies = { + updateSendErrors: sinon.spy(), +} + +proxyquire('../amount-max-button.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../../send.selectors.js': { + getGasTotal: (s) => `mockGasTotal:${s}`, + getSelectedToken: (s) => `mockSelectedToken:${s}`, + getSendFromBalance: (s) => `mockBalance:${s}`, + getTokenBalance: (s) => `mockTokenBalance:${s}`, + }, + './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` }, + './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 }, + '../../../../../actions': actionSpies, + '../../../../../ducks/send.duck': duckActionSpies, +}) + +describe('amount-max-button container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + balance: 'mockBalance:mockState', + gasTotal: 'mockGasTotal:mockState', + maxModeOn: 'mockMaxModeOn:mockState', + selectedToken: 'mockSelectedToken:mockState', + tokenBalance: 'mockTokenBalance:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('setAmountToMax()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' }) + assert(dispatchSpy.calledTwice) + assert(duckActionSpies.updateSendErrors.calledOnce) + assert.deepEqual( + duckActionSpies.updateSendErrors.getCall(0).args[0], + { amount: null } + ) + assert(actionSpies.updateSendAmount.calledOnce) + assert.equal( + actionSpies.updateSendAmount.getCall(0).args[0], + 12 + ) + }) + }) + + describe('setMaxModeTo()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.setMaxModeTo('mockVal') + assert(dispatchSpy.calledOnce) + assert.equal( + actionSpies.setMaxModeTo.getCall(0).args[0], + 'mockVal' + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js new file mode 100644 index 000000000..655fe1969 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js @@ -0,0 +1,22 @@ +import assert from 'assert' +import { + getMaxModeOn, +} from '../amount-max-button.selectors.js' + +describe('amount-max-button selectors', () => { + + describe('getMaxModeOn()', () => { + it('should', () => { + const state = { + metamask: { + send: { + maxModeOn: null, + }, + }, + } + + assert.equal(getMaxModeOn(state), null) + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js new file mode 100644 index 000000000..816df6a12 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js @@ -0,0 +1,27 @@ +import assert from 'assert' +import { + calcMaxAmount, +} from '../amount-max-button.utils.js' + +describe('amount-max-button utils', () => { + + describe('calcMaxAmount()', () => { + it('should calculate the correct amount when no selectedToken defined', () => { + assert.deepEqual(calcMaxAmount({ + balance: 'ffffff', + gasTotal: 'ff', + selectedToken: false, + }), 'ffff00') + }) + + it('should calculate the correct amount when a selectedToken is defined', () => { + assert.deepEqual(calcMaxAmount({ + selectedToken: { + decimals: 10, + }, + tokenBalance: 100, + }), 'e8d4a51000') + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/index.js b/ui/app/components/send_/send-content/send-amount-row/index.js new file mode 100644 index 000000000..abc6852fe --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/index.js @@ -0,0 +1 @@ +export { default } from './send-amount-row.container' diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js new file mode 100644 index 000000000..196538c11 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js @@ -0,0 +1,109 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/' +import AmountMaxButton from './amount-max-button/' +import CurrencyDisplay from '../../../send/currency-display' + +export default class SendAmountRow extends Component { + + static propTypes = { + amount: PropTypes.string, + amountConversionRate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + balance: PropTypes.string, + conversionRate: PropTypes.number, + convertedCurrency: PropTypes.string, + gasTotal: PropTypes.string, + inError: PropTypes.bool, + primaryCurrency: PropTypes.string, + selectedToken: PropTypes.object, + setMaxModeTo: PropTypes.func, + tokenBalance: PropTypes.string, + updateSendAmount: PropTypes.func, + updateSendAmountError: PropTypes.func, + updateGas: PropTypes.func, + } + + validateAmount (amount) { + const { + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + updateSendAmountError, + } = this.props + + updateSendAmountError({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + }) + } + + updateAmount (amount) { + const { updateSendAmount, setMaxModeTo } = this.props + + setMaxModeTo(false) + updateSendAmount(amount) + } + + updateGas (amount) { + const { selectedToken, updateGas } = this.props + + if (selectedToken) { + updateGas({ amount }) + } + } + + render () { + const { + amount, + amountConversionRate, + convertedCurrency, + gasTotal, + inError, + primaryCurrency, + selectedToken, + } = this.props + + return ( + + {!inError && gasTotal && } + { + this.updateGas(newAmount) + this.updateAmount(newAmount) + }} + onChange={newAmount => this.validateAmount(newAmount)} + inError={inError} + primaryCurrency={primaryCurrency || 'ETH'} + selectedToken={selectedToken} + value={amount} + step="any" + /> + + ) + } + +} + +SendAmountRow.contextTypes = { + t: PropTypes.func, +} + diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js new file mode 100644 index 000000000..b816d948f --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js @@ -0,0 +1,51 @@ +import { connect } from 'react-redux' +import { + getAmountConversionRate, + getConversionRate, + getCurrentCurrency, + getGasTotal, + getPrimaryCurrency, + getSelectedToken, + getSendAmount, + getSendFromBalance, + getTokenBalance, +} from '../../send.selectors' +import { + sendAmountIsInError, +} from './send-amount-row.selectors' +import { getAmountErrorObject } from '../../send.utils' +import { + setMaxModeTo, + updateSendAmount, +} from '../../../../actions' +import { + updateSendErrors, +} from '../../../../ducks/send.duck' +import SendAmountRow from './send-amount-row.component' + +export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow) + +function mapStateToProps (state) { + return { + amount: getSendAmount(state), + amountConversionRate: getAmountConversionRate(state), + balance: getSendFromBalance(state), + conversionRate: getConversionRate(state), + convertedCurrency: getCurrentCurrency(state), + gasTotal: getGasTotal(state), + inError: sendAmountIsInError(state), + primaryCurrency: getPrimaryCurrency(state), + selectedToken: getSelectedToken(state), + tokenBalance: getTokenBalance(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + setMaxModeTo: bool => dispatch(setMaxModeTo(bool)), + updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)), + updateSendAmountError: (amountDataObject) => { + dispatch(updateSendErrors(getAmountErrorObject(amountDataObject))) + }, + } +} diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.scss b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js new file mode 100644 index 000000000..fb08c7ed7 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + sendAmountIsInError, +} + +module.exports = selectors + +function sendAmountIsInError (state) { + return Boolean(state.send.errors.amount) +} diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js new file mode 100644 index 000000000..579e18585 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js @@ -0,0 +1,173 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import SendAmountRow from '../send-amount-row.component.js' + +import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' +import AmountMaxButton from '../amount-max-button/amount-max-button.container' +import CurrencyDisplay from '../../../../send/currency-display' + +const propsMethodSpies = { + setMaxModeTo: sinon.spy(), + updateSendAmount: sinon.spy(), + updateSendAmountError: sinon.spy(), + updateGas: sinon.spy(), +} + +sinon.spy(SendAmountRow.prototype, 'updateAmount') +sinon.spy(SendAmountRow.prototype, 'validateAmount') +sinon.spy(SendAmountRow.prototype, 'updateGas') + +describe('SendAmountRow Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.setMaxModeTo.resetHistory() + propsMethodSpies.updateSendAmount.resetHistory() + propsMethodSpies.updateSendAmountError.resetHistory() + SendAmountRow.prototype.validateAmount.resetHistory() + SendAmountRow.prototype.updateAmount.resetHistory() + }) + + describe('validateAmount', () => { + + it('should call updateSendAmountError with the correct params', () => { + assert.equal(propsMethodSpies.updateSendAmountError.callCount, 0) + instance.validateAmount('someAmount') + assert.equal(propsMethodSpies.updateSendAmountError.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendAmountError.getCall(0).args, + [{ + amount: 'someAmount', + amountConversionRate: 'mockAmountConversionRate', + balance: 'mockBalance', + conversionRate: 7, + gasTotal: 'mockGasTotal', + primaryCurrency: 'mockPrimaryCurrency', + selectedToken: { address: 'mockTokenAddress' }, + tokenBalance: 'mockTokenBalance', + }] + ) + }) + + }) + + describe('updateAmount', () => { + + it('should call setMaxModeTo', () => { + assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0) + instance.updateAmount('someAmount') + assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1) + assert.deepEqual( + propsMethodSpies.setMaxModeTo.getCall(0).args, + [false] + ) + }) + + it('should call updateSendAmount', () => { + assert.equal(propsMethodSpies.updateSendAmount.callCount, 0) + instance.updateAmount('someAmount') + assert.equal(propsMethodSpies.updateSendAmount.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendAmount.getCall(0).args, + ['someAmount'] + ) + }) + + }) + + describe('render', () => { + it('should render a SendRowWrapper component', () => { + assert.equal(wrapper.find(SendRowWrapper).length, 1) + }) + + it('should pass the correct props to SendRowWrapper', () => { + const { + errorType, + label, + showError, + } = wrapper.find(SendRowWrapper).props() + + assert.equal(errorType, 'amount') + + assert.equal(label, 'amount_t:') + + assert.equal(showError, false) + }) + + it('should render an AmountMaxButton as the first child of the SendRowWrapper', () => { + assert(wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton)) + }) + + it('should render a CurrencyDisplay as the second child of the SendRowWrapper', () => { + assert(wrapper.find(SendRowWrapper).childAt(1).is(CurrencyDisplay)) + }) + + it('should render the CurrencyDisplay with the correct props', () => { + const { + conversionRate, + convertedCurrency, + onBlur, + onChange, + inError, + primaryCurrency, + selectedToken, + value, + } = wrapper.find(SendRowWrapper).childAt(1).props() + assert.equal(conversionRate, 'mockAmountConversionRate') + assert.equal(convertedCurrency, 'mockConvertedCurrency') + assert.equal(inError, false) + assert.equal(primaryCurrency, 'mockPrimaryCurrency') + assert.deepEqual(selectedToken, { address: 'mockTokenAddress' }) + assert.equal(value, 'mockAmount') + assert.equal(SendAmountRow.prototype.updateGas.callCount, 0) + assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0) + onBlur('mockNewAmount') + assert.equal(SendAmountRow.prototype.updateGas.callCount, 1) + assert.deepEqual( + SendAmountRow.prototype.updateGas.getCall(0).args, + ['mockNewAmount'] + ) + assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1) + assert.deepEqual( + SendAmountRow.prototype.updateAmount.getCall(0).args, + ['mockNewAmount'] + ) + assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0) + onChange('mockNewAmount') + assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1) + assert.deepEqual( + SendAmountRow.prototype.validateAmount.getCall(0).args, + ['mockNewAmount'] + ) + }) + + it('should pass the default primaryCurrency to the CurrencyDisplay if primaryCurrency is falsy', () => { + wrapper.setProps({ primaryCurrency: null }) + const { primaryCurrency } = wrapper.find(SendRowWrapper).childAt(1).props() + assert.equal(primaryCurrency, 'ETH') + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js new file mode 100644 index 000000000..94d9918a7 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js @@ -0,0 +1,109 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + setMaxModeTo: sinon.spy(), + updateSendAmount: sinon.spy(), +} +const duckActionSpies = { + updateSendErrors: sinon.spy(), +} + +proxyquire('../send-amount-row.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors': { + getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`, + getConversionRate: (s) => `mockConversionRate:${s}`, + getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`, + getGasTotal: (s) => `mockGasTotal:${s}`, + getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`, + getSelectedToken: (s) => `mockSelectedToken:${s}`, + getSendAmount: (s) => `mockAmount:${s}`, + getSendFromBalance: (s) => `mockBalance:${s}`, + getTokenBalance: (s) => `mockTokenBalance:${s}`, + }, + './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` }, + '../../send.utils': { getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }) }, + '../../../../actions': actionSpies, + '../../../../ducks/send.duck': duckActionSpies, +}) + +describe('send-amount-row container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + amount: 'mockAmount:mockState', + amountConversionRate: 'mockAmountConversionRate:mockState', + balance: 'mockBalance:mockState', + conversionRate: 'mockConversionRate:mockState', + convertedCurrency: 'mockConvertedCurrency:mockState', + gasTotal: 'mockGasTotal:mockState', + inError: 'mockInError:mockState', + primaryCurrency: 'mockPrimaryCurrency:mockState', + selectedToken: 'mockSelectedToken:mockState', + tokenBalance: 'mockTokenBalance:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('setMaxModeTo()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.setMaxModeTo('mockBool') + assert(dispatchSpy.calledOnce) + assert(actionSpies.setMaxModeTo.calledOnce) + assert.equal( + actionSpies.setMaxModeTo.getCall(0).args[0], + 'mockBool' + ) + }) + }) + + describe('updateSendAmount()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendAmount('mockAmount') + assert(dispatchSpy.calledOnce) + assert(actionSpies.updateSendAmount.calledOnce) + assert.equal( + actionSpies.updateSendAmount.getCall(0).args[0], + 'mockAmount' + ) + }) + }) + + describe('updateSendAmountError()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendAmountError({ some: 'data' }) + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.updateSendErrors.calledOnce) + assert.deepEqual( + duckActionSpies.updateSendErrors.getCall(0).args[0], + { some: 'data', mockChange: true } + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-selectors.test.js new file mode 100644 index 000000000..4672cb8a7 --- /dev/null +++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-selectors.test.js @@ -0,0 +1,34 @@ +import assert from 'assert' +import { + sendAmountIsInError, +} from '../send-amount-row.selectors.js' + +describe('send-amount-row selectors', () => { + + describe('sendAmountIsInError()', () => { + it('should return true if send.errors.amount is truthy', () => { + const state = { + send: { + errors: { + amount: 'abc', + }, + }, + } + + assert.equal(sendAmountIsInError(state), true) + }) + + it('should return false if send.errors.amount is falsy', () => { + const state = { + send: { + errors: { + amount: null, + }, + }, + } + + assert.equal(sendAmountIsInError(state), false) + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-content-README.md b/ui/app/components/send_/send-content/send-content-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-content.component.js b/ui/app/components/send_/send-content/send-content.component.js new file mode 100644 index 000000000..adc114c0e --- /dev/null +++ b/ui/app/components/send_/send-content/send-content.component.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerContent from '../../page-container/page-container-content.component' +import SendAmountRow from './send-amount-row/' +import SendFromRow from './send-from-row/' +import SendGasRow from './send-gas-row/' +import SendToRow from './send-to-row/' + +export default class SendContent extends Component { + + static propTypes = { + updateGas: PropTypes.func, + }; + + render () { + return ( + +
+ + this.props.updateGas(updateData)} /> + this.props.updateGas(updateData)} /> + +
+ + ) + } + +} diff --git a/ui/app/components/send_/send-content/send-content.scss b/ui/app/components/send_/send-content/send-content.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-dropdown-list/index.js b/ui/app/components/send_/send-content/send-dropdown-list/index.js new file mode 100644 index 000000000..04af6536c --- /dev/null +++ b/ui/app/components/send_/send-content/send-dropdown-list/index.js @@ -0,0 +1 @@ +export { default } from './send-dropdown-list.component' diff --git a/ui/app/components/send_/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/components/send_/send-content/send-dropdown-list/send-dropdown-list.component.js new file mode 100644 index 000000000..5c7174ecf --- /dev/null +++ b/ui/app/components/send_/send-content/send-dropdown-list/send-dropdown-list.component.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import AccountListItem from '../../account-list-item/' + +export default class SendDropdownList extends Component { + + static propTypes = { + accounts: PropTypes.array, + closeDropdown: PropTypes.func, + onSelect: PropTypes.func, + activeAddress: PropTypes.string, + }; + + getListItemIcon (accountAddress, activeAddress) { + return accountAddress === activeAddress + ? + : null + } + + render () { + const { + accounts, + closeDropdown, + onSelect, + activeAddress, + } = this.props + + return (
+
closeDropdown()} + /> +
+ {accounts.map((account, index) => { + onSelect(account) + closeDropdown() + }} + icon={this.getListItemIcon(account.address, activeAddress)} + key={`send-dropdown-account-#${index}`} + />)} +
+
) + } + +} + +SendDropdownList.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/components/send_/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js new file mode 100644 index 000000000..b92dd4dfe --- /dev/null +++ b/ui/app/components/send_/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js @@ -0,0 +1,105 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import SendDropdownList from '../send-dropdown-list.component.js' + +import AccountListItem from '../../../account-list-item/account-list-item.container' + +const propsMethodSpies = { + closeDropdown: sinon.spy(), + onSelect: sinon.spy(), +} + +sinon.spy(SendDropdownList.prototype, 'getListItemIcon') + +describe('SendDropdownList Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + }) + + afterEach(() => { + propsMethodSpies.closeDropdown.resetHistory() + propsMethodSpies.onSelect.resetHistory() + SendDropdownList.prototype.getListItemIcon.resetHistory() + }) + + describe('getListItemIcon', () => { + it('should return check icon if the passed addresses are the same', () => { + assert.deepEqual( + wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount0'), + + ) + }) + + it('should return null if the passed addresses are different', () => { + assert.equal( + wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount1'), + null + ) + }) + }) + + describe('render', () => { + it('should render a single div with two children', () => { + assert(wrapper.is('div')) + assert.equal(wrapper.children().length, 2) + }) + + it('should render the children with the correct classes', () => { + assert(wrapper.childAt(0).hasClass('send-v2__from-dropdown__close-area')) + assert(wrapper.childAt(1).hasClass('send-v2__from-dropdown__list')) + }) + + it('should call closeDropdown onClick of the send-v2__from-dropdown__close-area', () => { + assert.equal(propsMethodSpies.closeDropdown.callCount, 0) + wrapper.childAt(0).props().onClick() + assert.equal(propsMethodSpies.closeDropdown.callCount, 1) + }) + + it('should render an AccountListItem for each item in accounts', () => { + assert.equal(wrapper.childAt(1).children().length, 3) + assert(wrapper.childAt(1).children().every(AccountListItem)) + }) + + it('should pass the correct props to the AccountListItem', () => { + wrapper.childAt(1).children().forEach((accountListItem, index) => { + const { + account, + className, + handleClick, + } = accountListItem.props() + assert.deepEqual(account, { address: 'mockAccount' + index }) + assert.equal(className, 'account-list-item__dropdown') + assert.equal(propsMethodSpies.onSelect.callCount, 0) + handleClick() + assert.equal(propsMethodSpies.onSelect.callCount, 1) + assert.deepEqual(propsMethodSpies.onSelect.getCall(0).args[0], { address: 'mockAccount' + index }) + propsMethodSpies.onSelect.resetHistory() + propsMethodSpies.closeDropdown.resetHistory() + assert.equal(propsMethodSpies.closeDropdown.callCount, 0) + handleClick() + assert.equal(propsMethodSpies.closeDropdown.callCount, 1) + propsMethodSpies.onSelect.resetHistory() + propsMethodSpies.closeDropdown.resetHistory() + }) + }) + + it('should call this.getListItemIcon for each AccountListItem', () => { + assert.equal(SendDropdownList.prototype.getListItemIcon.callCount, 3) + const getListItemIconCalls = SendDropdownList.prototype.getListItemIcon.getCalls() + assert(getListItemIconCalls.every(({ args }, index) => args[0] === 'mockAccount' + index)) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown-README.md b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js new file mode 100644 index 000000000..418766cd9 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import AccountListItem from '../../../account-list-item/' +import SendDropdownList from '../../send-dropdown-list/' + +export default class FromDropdown extends Component { + + static propTypes = { + accounts: PropTypes.array, + closeDropdown: PropTypes.func, + dropdownOpen: PropTypes.bool, + onSelect: PropTypes.func, + openDropdown: PropTypes.func, + selectedAccount: PropTypes.object, + }; + + render () { + const { + accounts, + closeDropdown, + dropdownOpen, + openDropdown, + selectedAccount, + onSelect, + } = this.props + + return
+ } + /> + {dropdownOpen && } +
+ } + +} + +FromDropdown.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.scss b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js new file mode 100644 index 000000000..2314ef4e3 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js @@ -0,0 +1 @@ +export { default } from './from-dropdown.component' diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js new file mode 100644 index 000000000..84fcb281e --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js @@ -0,0 +1,88 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import FromDropdown from '../from-dropdown.component.js' + +import AccountListItem from '../../../../account-list-item/account-list-item.container' +import SendDropdownList from '../../../send-dropdown-list/send-dropdown-list.component' + +const propsMethodSpies = { + closeDropdown: sinon.spy(), + openDropdown: sinon.spy(), + onSelect: sinon.spy(), +} + +describe('FromDropdown Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + }) + + afterEach(() => { + propsMethodSpies.closeDropdown.resetHistory() + propsMethodSpies.openDropdown.resetHistory() + propsMethodSpies.onSelect.resetHistory() + }) + + describe('render', () => { + it('should render a div with a .send-v2__from-dropdown class', () => { + assert.equal(wrapper.find('.send-v2__from-dropdown').length, 1) + }) + + it('should render an AccountListItem as the first child of the .send-v2__from-dropdown div', () => { + assert(wrapper.find('.send-v2__from-dropdown').childAt(0).is(AccountListItem)) + }) + + it('should pass the correct props to AccountListItem', () => { + const { + account, + handleClick, + icon, + } = wrapper.find('.send-v2__from-dropdown').childAt(0).props() + assert.deepEqual(account, { address: 'mockAddress' }) + assert.deepEqual( + icon, + + ) + assert.equal(propsMethodSpies.openDropdown.callCount, 0) + handleClick() + assert.equal(propsMethodSpies.openDropdown.callCount, 1) + }) + + it('should not render a SendDropdownList when dropdownOpen is false', () => { + assert.equal(wrapper.find(SendDropdownList).length, 0) + }) + + it('should render a SendDropdownList when dropdownOpen is true', () => { + wrapper.setProps({ dropdownOpen: true }) + assert(wrapper.find(SendDropdownList).length, 1) + }) + + it('should pass the correct props to the SendDropdownList]', () => { + wrapper.setProps({ dropdownOpen: true }) + const { + accounts, + closeDropdown, + onSelect, + activeAddress, + } = wrapper.find(SendDropdownList).props() + assert.deepEqual(accounts, ['mockAccount']) + assert.equal(activeAddress, 'mockAddress') + assert.equal(propsMethodSpies.closeDropdown.callCount, 0) + closeDropdown() + assert.equal(propsMethodSpies.closeDropdown.callCount, 1) + assert.equal(propsMethodSpies.onSelect.callCount, 0) + onSelect() + assert.equal(propsMethodSpies.onSelect.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-from-row/index.js b/ui/app/components/send_/send-content/send-from-row/index.js new file mode 100644 index 000000000..0a79726b2 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/index.js @@ -0,0 +1 @@ +export { default } from './send-from-row.container' diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row-README.md b/ui/app/components/send_/send-content/send-from-row/send-from-row-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js new file mode 100644 index 000000000..a580aef96 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/' +import FromDropdown from './from-dropdown/' + +export default class SendFromRow extends Component { + + static propTypes = { + closeFromDropdown: PropTypes.func, + conversionRate: PropTypes.number, + from: PropTypes.object, + fromAccounts: PropTypes.array, + fromDropdownOpen: PropTypes.bool, + openFromDropdown: PropTypes.func, + tokenContract: PropTypes.object, + updateSendFrom: PropTypes.func, + setSendTokenBalance: PropTypes.func, + }; + + async handleFromChange (newFrom) { + const { + updateSendFrom, + tokenContract, + setSendTokenBalance, + } = this.props + + if (tokenContract) { + const usersToken = await tokenContract.balanceOf(newFrom.address) + setSendTokenBalance(usersToken) + } + updateSendFrom(newFrom) + } + + render () { + const { + closeFromDropdown, + conversionRate, + from, + fromAccounts, + fromDropdownOpen, + openFromDropdown, + } = this.props + + return ( + + closeFromDropdown()} + conversionRate={conversionRate} + dropdownOpen={fromDropdownOpen} + onSelect={newFrom => this.handleFromChange(newFrom)} + openDropdown={() => openFromDropdown()} + selectedAccount={from} + /> + + ) + } + +} + +SendFromRow.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js new file mode 100644 index 000000000..33cb63b43 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js @@ -0,0 +1,46 @@ +import { connect } from 'react-redux' +import { + accountsWithSendEtherInfoSelector, + getConversionRate, + getSelectedTokenContract, + getSendFromObject, +} from '../../send.selectors.js' +import { + getFromDropdownOpen, +} from './send-from-row.selectors.js' +import { calcTokenBalance } from '../../send.utils.js' +import { + updateSendFrom, + setSendTokenBalance, +} from '../../../../actions' +import { + closeFromDropdown, + openFromDropdown, +} from '../../../../ducks/send.duck' +import SendFromRow from './send-from-row.component' + +export default connect(mapStateToProps, mapDispatchToProps)(SendFromRow) + +function mapStateToProps (state) { + return { + conversionRate: getConversionRate(state), + from: getSendFromObject(state), + fromAccounts: accountsWithSendEtherInfoSelector(state), + fromDropdownOpen: getFromDropdownOpen(state), + tokenContract: getSelectedTokenContract(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + closeFromDropdown: () => dispatch(closeFromDropdown()), + openFromDropdown: () => dispatch(openFromDropdown()), + updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)), + setSendTokenBalance: (usersToken, selectedToken) => { + if (!usersToken) return + + const tokenBalance = calcTokenBalance({ usersToken, selectedToken }) + dispatch(setSendTokenBalance(tokenBalance)) + }, + } +} diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.selectors.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.selectors.js new file mode 100644 index 000000000..03ef4806b --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + getFromDropdownOpen, +} + +module.exports = selectors + +function getFromDropdownOpen (state) { + return state.send.fromDropdownOpen +} diff --git a/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js new file mode 100644 index 000000000..9ba8d1739 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js @@ -0,0 +1,121 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import SendFromRow from '../send-from-row.component.js' + +import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' +import FromDropdown from '../from-dropdown/from-dropdown.component' + +const propsMethodSpies = { + closeFromDropdown: sinon.spy(), + openFromDropdown: sinon.spy(), + updateSendFrom: sinon.spy(), + setSendTokenBalance: sinon.spy(), +} + +sinon.spy(SendFromRow.prototype, 'handleFromChange') + +describe('SendFromRow Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.closeFromDropdown.resetHistory() + propsMethodSpies.openFromDropdown.resetHistory() + propsMethodSpies.updateSendFrom.resetHistory() + propsMethodSpies.setSendTokenBalance.resetHistory() + SendFromRow.prototype.handleFromChange.resetHistory() + }) + + describe('handleFromChange', () => { + + it('should call updateSendFrom', () => { + assert.equal(propsMethodSpies.updateSendFrom.callCount, 0) + instance.handleFromChange('mockFrom') + assert.equal(propsMethodSpies.updateSendFrom.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendFrom.getCall(0).args, + ['mockFrom'] + ) + }) + + it('should call tokenContract.balanceOf and setSendTokenBalance if tokenContract is defined', async () => { + wrapper.setProps({ + tokenContract: { + balanceOf: () => new Promise((resolve) => resolve('mockUsersToken')), + }, + }) + assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 0) + await instance.handleFromChange('mockFrom') + assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 1) + assert.deepEqual( + propsMethodSpies.setSendTokenBalance.getCall(0).args, + ['mockUsersToken'] + ) + }) + + }) + + describe('render', () => { + it('should render a SendRowWrapper component', () => { + assert.equal(wrapper.find(SendRowWrapper).length, 1) + }) + + it('should pass the correct props to SendRowWrapper', () => { + const { + label, + } = wrapper.find(SendRowWrapper).props() + + assert.equal(label, 'from_t:') + }) + + it('should render an FromDropdown as a child of the SendRowWrapper', () => { + assert(wrapper.find(SendRowWrapper).childAt(0).is(FromDropdown)) + }) + + it('should render the FromDropdown with the correct props', () => { + const { + accounts, + closeDropdown, + conversionRate, + dropdownOpen, + onSelect, + openDropdown, + selectedAccount, + } = wrapper.find(SendRowWrapper).childAt(0).props() + assert.deepEqual(accounts, ['mockAccount']) + assert.equal(dropdownOpen, false) + assert.equal(conversionRate, 15) + assert.deepEqual(selectedAccount, { address: 'mockAddress' }) + assert.equal(propsMethodSpies.closeFromDropdown.callCount, 0) + closeDropdown() + assert.equal(propsMethodSpies.closeFromDropdown.callCount, 1) + assert.equal(propsMethodSpies.openFromDropdown.callCount, 0) + openDropdown() + assert.equal(propsMethodSpies.openFromDropdown.callCount, 1) + assert.equal(SendFromRow.prototype.handleFromChange.callCount, 0) + onSelect('mockNewFrom') + assert.equal(SendFromRow.prototype.handleFromChange.callCount, 1) + assert.deepEqual( + SendFromRow.prototype.handleFromChange.getCall(0).args, + ['mockNewFrom'] + ) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-container.test.js new file mode 100644 index 000000000..e080b2fe3 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-container.test.js @@ -0,0 +1,110 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + updateSendFrom: sinon.spy(), + setSendTokenBalance: sinon.spy(), +} +const duckActionSpies = { + closeFromDropdown: sinon.spy(), + openFromDropdown: sinon.spy(), +} + +proxyquire('../send-from-row.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors.js': { + accountsWithSendEtherInfoSelector: (s) => `mockFromAccounts:${s}`, + getConversionRate: (s) => `mockConversionRate:${s}`, + getSelectedTokenContract: (s) => `mockTokenContract:${s}`, + getSendFromObject: (s) => `mockFrom:${s}`, + }, + './send-from-row.selectors.js': { getFromDropdownOpen: (s) => `mockFromDropdownOpen:${s}` }, + '../../send.utils.js': { calcTokenBalance: ({ usersToken, selectedToken }) => usersToken + selectedToken }, + '../../../../actions': actionSpies, + '../../../../ducks/send.duck': duckActionSpies, +}) + +describe('send-from-row container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + conversionRate: 'mockConversionRate:mockState', + from: 'mockFrom:mockState', + fromAccounts: 'mockFromAccounts:mockState', + fromDropdownOpen: 'mockFromDropdownOpen:mockState', + tokenContract: 'mockTokenContract:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('closeFromDropdown()', () => { + it('should dispatch a closeFromDropdown action', () => { + mapDispatchToPropsObject.closeFromDropdown() + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.closeFromDropdown.calledOnce) + assert.equal( + duckActionSpies.closeFromDropdown.getCall(0).args[0], + undefined + ) + }) + }) + + describe('openFromDropdown()', () => { + it('should dispatch a openFromDropdown action', () => { + mapDispatchToPropsObject.openFromDropdown() + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.openFromDropdown.calledOnce) + assert.equal( + duckActionSpies.openFromDropdown.getCall(0).args[0], + undefined + ) + }) + }) + + describe('updateSendFrom()', () => { + it('should dispatch an updateSendFrom action', () => { + mapDispatchToPropsObject.updateSendFrom('mockFrom') + assert(dispatchSpy.calledOnce) + assert.equal( + actionSpies.updateSendFrom.getCall(0).args[0], + 'mockFrom' + ) + }) + }) + + describe('setSendTokenBalance()', () => { + it('should dispatch an setSendTokenBalance action', () => { + mapDispatchToPropsObject.setSendTokenBalance('mockUsersToken', 'mockSelectedToken') + assert(dispatchSpy.calledOnce) + assert.equal( + actionSpies.setSendTokenBalance.getCall(0).args[0], + 'mockUsersTokenmockSelectedToken' + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-selectors.test.js new file mode 100644 index 000000000..ecb57bbc3 --- /dev/null +++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-selectors.test.js @@ -0,0 +1,20 @@ +import assert from 'assert' +import { + getFromDropdownOpen, +} from '../send-from-row.selectors.js' + +describe('send-from-row selectors', () => { + + describe('getFromDropdownOpen()', () => { + it('should get send.fromDropdownOpen', () => { + const state = { + send: { + fromDropdownOpen: null, + }, + } + + assert.equal(getFromDropdownOpen(state), null) + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-gas-row/README.md b/ui/app/components/send_/send-content/send-gas-row/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js new file mode 100644 index 000000000..c8d619be5 --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js @@ -0,0 +1,61 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import CurrencyDisplay from '../../../../send/currency-display' + + +export default class GasFeeDisplay extends Component { + + static propTypes = { + conversionRate: PropTypes.number, + primaryCurrency: PropTypes.string, + convertedCurrency: PropTypes.string, + gasLoadingError: PropTypes.bool, + gasTotal: PropTypes.string, + onClick: PropTypes.func, + }; + + render () { + const { + conversionRate, + gasTotal, + onClick, + primaryCurrency = 'ETH', + convertedCurrency, + gasLoadingError, + } = this.props + + return ( +
+ {gasTotal + ? + : gasLoadingError + ?
+ {this.context.t('setGasPrice')} +
+ :
+ {this.context.t('loading')} +
+ } + +
+ ) + } +} + +GasFeeDisplay.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js new file mode 100644 index 000000000..dba0edb7b --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js @@ -0,0 +1 @@ +export { default } from './gas-fee-display.component' diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js new file mode 100644 index 000000000..7cbe8d0df --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js @@ -0,0 +1,55 @@ +import React from 'react' +import assert from 'assert' +import {shallow} from 'enzyme' +import GasFeeDisplay from '../gas-fee-display.component' +import CurrencyDisplay from '../../../../../send/currency-display' +import sinon from 'sinon' + + +const propsMethodSpies = { + showCustomizeGasModal: sinon.spy(), +} + +describe('SendGasRow Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, {context: {t: str => str + '_t'}}) + }) + + afterEach(() => { + propsMethodSpies.showCustomizeGasModal.resetHistory() + }) + + describe('render', () => { + it('should render a CurrencyDisplay component', () => { + assert.equal(wrapper.find(CurrencyDisplay).length, 1) + }) + + it('should render the CurrencyDisplay with the correct props', () => { + const { + conversionRate, + convertedCurrency, + value, + } = wrapper.find(CurrencyDisplay).props() + assert.equal(conversionRate, 20) + assert.equal(convertedCurrency, 'mockConvertedCurrency') + assert.equal(value, 'mockGasTotal') + }) + + it('should render the Button with the correct props', () => { + const { + onClick, + } = wrapper.find('button').props() + assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0) + onClick() + assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-gas-row/index.js b/ui/app/components/send_/send-content/send-gas-row/index.js new file mode 100644 index 000000000..3c7ff1d5f --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/index.js @@ -0,0 +1 @@ +export { default } from './send-gas-row.container' diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js new file mode 100644 index 000000000..17cea3d4e --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/' +import GasFeeDisplay from './gas-fee-display/gas-fee-display.component' + +export default class SendGasRow extends Component { + + static propTypes = { + conversionRate: PropTypes.number, + convertedCurrency: PropTypes.string, + gasLoadingError: PropTypes.bool, + gasTotal: PropTypes.string, + showCustomizeGasModal: PropTypes.func, + }; + + render () { + const { + conversionRate, + convertedCurrency, + gasLoadingError, + gasTotal, + showCustomizeGasModal, + } = this.props + + return ( + + showCustomizeGasModal()} + /> + + ) + } + +} + +SendGasRow.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js new file mode 100644 index 000000000..6e6fbc8a8 --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js @@ -0,0 +1,26 @@ +import { connect } from 'react-redux' +import { + getConversionRate, + getCurrentCurrency, + getGasTotal, +} from '../../send.selectors.js' +import { sendGasIsInError } from './send-gas-row.selectors.js' +import { showModal } from '../../../../actions' +import SendGasRow from './send-gas-row.component' + +export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow) + +function mapStateToProps (state) { + return { + conversionRate: getConversionRate(state), + convertedCurrency: getCurrentCurrency(state), + gasTotal: getGasTotal(state), + gasLoadingError: sendGasIsInError(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS' })), + } +} diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.scss b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js new file mode 100644 index 000000000..d069ae8c6 --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js @@ -0,0 +1,9 @@ +const selectors = { + sendGasIsInError, +} + +module.exports = selectors + +function sendGasIsInError (state) { + return state.send.errors.gasLoading +} diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js new file mode 100644 index 000000000..db37f18be --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js @@ -0,0 +1,65 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import SendGasRow from '../send-gas-row.component.js' + +import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' +import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component' + +const propsMethodSpies = { + showCustomizeGasModal: sinon.spy(), +} + +describe('SendGasRow Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + }) + + afterEach(() => { + propsMethodSpies.showCustomizeGasModal.resetHistory() + }) + + describe('render', () => { + it('should render a SendRowWrapper component', () => { + assert.equal(wrapper.find(SendRowWrapper).length, 1) + }) + + it('should pass the correct props to SendRowWrapper', () => { + const { + label, + } = wrapper.find(SendRowWrapper).props() + + assert.equal(label, 'gasFee_t:') + }) + + it('should render a GasFeeDisplay as a child of the SendRowWrapper', () => { + assert(wrapper.find(SendRowWrapper).childAt(0).is(GasFeeDisplay)) + }) + + it('should render the GasFeeDisplay with the correct props', () => { + const { + conversionRate, + convertedCurrency, + gasLoadingError, + gasTotal, + onClick, + } = wrapper.find(SendRowWrapper).childAt(0).props() + assert.equal(conversionRate, 20) + assert.equal(convertedCurrency, 'mockConvertedCurrency') + assert.equal(gasLoadingError, false) + assert.equal(gasTotal, 'mockGasTotal') + assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0) + onClick() + assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js new file mode 100644 index 000000000..e928c8aba --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js @@ -0,0 +1,66 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + showModal: sinon.spy(), +} + +proxyquire('../send-gas-row.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors.js': { + getConversionRate: (s) => `mockConversionRate:${s}`, + getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`, + getGasTotal: (s) => `mockGasTotal:${s}`, + }, + './send-gas-row.selectors.js': { sendGasIsInError: (s) => `mockGasLoadingError:${s}` }, + '../../../../actions': actionSpies, +}) + +describe('send-gas-row container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + conversionRate: 'mockConversionRate:mockState', + convertedCurrency: 'mockConvertedCurrency:mockState', + gasTotal: 'mockGasTotal:mockState', + gasLoadingError: 'mockGasLoadingError:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('showCustomizeGasModal()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.showCustomizeGasModal() + assert(dispatchSpy.calledOnce) + assert.deepEqual( + actionSpies.showModal.getCall(0).args[0], + { name: 'CUSTOMIZE_GAS' } + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js new file mode 100644 index 000000000..a5196334e --- /dev/null +++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js @@ -0,0 +1,22 @@ +import assert from 'assert' +import { + sendGasIsInError, +} from '../send-gas-row.selectors.js' + +describe('send-gas-row selectors', () => { + + describe('sendGasIsInError()', () => { + it('should return send.errors.gasLoading', () => { + const state = { + send: { + errors: { + gasLoading: 'abc', + }, + }, + } + + assert.equal(sendGasIsInError(state), 'abc') + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-row-wrapper/index.js b/ui/app/components/send_/send-content/send-row-wrapper/index.js new file mode 100644 index 000000000..d17545dcc --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/index.js @@ -0,0 +1 @@ +export { default } from './send-row-wrapper.component' diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js new file mode 100644 index 000000000..c00617f83 --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js @@ -0,0 +1 @@ +export { default } from './send-row-error-message.container' diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js new file mode 100644 index 000000000..0d314208b --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class SendRowErrorMessage extends Component { + + static propTypes = { + errors: PropTypes.object, + errorType: PropTypes.string, + }; + + render () { + const { errors, errorType } = this.props + + const errorMessage = errors[errorType] + + return ( + errorMessage + ?
{this.context.t(errorMessage)}
+ : null + ) + } + +} + +SendRowErrorMessage.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js new file mode 100644 index 000000000..59622047f --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux' +import { getSendErrors } from '../../../send.selectors' +import SendRowErrorMessage from './send-row-error-message.component' + +export default connect(mapStateToProps)(SendRowErrorMessage) + +function mapStateToProps (state, ownProps) { + return { + errors: getSendErrors(state), + errorType: ownProps.errorType, + } +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js new file mode 100644 index 000000000..2304a43d2 --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js @@ -0,0 +1,28 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import SendRowErrorMessage from '../send-row-error-message.component.js' + +describe('SendRowErrorMessage Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + }) + + describe('render', () => { + it('should render null if the passed errors do not contain an error of errorType', () => { + assert.equal(wrapper.find('.send-v2__error').length, 0) + assert.equal(wrapper.html(), null) + }) + + it('should render an error message if the passed errors contain an error of errorType', () => { + wrapper.setProps({ errors: { error1: 'abc', error2: 'def', error3: 'xyz' } }) + assert.equal(wrapper.find('.send-v2__error').length, 1) + assert.equal(wrapper.find('.send-v2__error').text(), 'xyz_t') + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js new file mode 100644 index 000000000..eecff165d --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js @@ -0,0 +1,28 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +let mapStateToProps + +proxyquire('../send-row-error-message.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + return () => ({}) + }, + }, + '../../../send.selectors': { getSendErrors: (s) => `mockErrors:${s}` }, +}) + +describe('send-row-error-message container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState', { errorType: 'someType' }), { + errors: 'mockErrors:mockState', + errorType: 'someType' }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js new file mode 100644 index 000000000..f484bd8d9 --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowErrorMessage from './send-row-error-message/' + +export default class SendRowWrapper extends Component { + + static propTypes = { + children: PropTypes.node, + errorType: PropTypes.string, + label: PropTypes.string, + showError: PropTypes.bool, + }; + + render () { + const { + children, + errorType = '', + label, + showError = false, + } = this.props + + const formField = Array.isArray(children) ? children[1] || children[0] : children + const customLabelContent = children.length > 1 ? children[0] : null + + return ( +
+
+ {label} + {showError && } + {customLabelContent} +
+
+ {formField} +
+
+ ) + } + +} + +SendRowWrapper.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js new file mode 100644 index 000000000..30280e1d0 --- /dev/null +++ b/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js @@ -0,0 +1,79 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import SendRowWrapper from '../send-row-wrapper.component.js' + +import SendRowErrorMessage from '../send-row-error-message/send-row-error-message.container' + +describe('SendContent Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow( + Mock Form Field + ) + }) + + describe('render', () => { + it('should render a div with a send-v2__form-row class', () => { + assert.equal(wrapper.find('div.send-v2__form-row').length, 1) + }) + + it('should render two children of the root div, with send-v2_form label and field classes', () => { + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').length, 1) + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').length, 1) + }) + + it('should render the label as a child of the send-v2__form-label', () => { + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(0).text(), 'mockLabel') + }) + + it('should render its first child as a child of the send-v2__form-field', () => { + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field') + }) + + it('should not render a SendRowErrorMessage if showError is false', () => { + assert.equal(wrapper.find(SendRowErrorMessage).length, 0) + }) + + it('should render a SendRowErrorMessage with and errorType props if showError is true', () => { + wrapper.setProps({showError: true}) + assert.equal(wrapper.find(SendRowErrorMessage).length, 1) + + const expectedSendRowErrorMessage = wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1) + assert(expectedSendRowErrorMessage.is(SendRowErrorMessage)) + assert.deepEqual( + expectedSendRowErrorMessage.props(), + { errorType: 'mockErrorType' } + ) + }) + + it('should render its second child as a child of the send-v2__form-field, if it has two children', () => { + wrapper = shallow( + Mock Custom Label Content + Mock Form Field + ) + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field') + }) + + it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => { + wrapper = shallow( + Mock Custom Label Content + Mock Form Field + ) + assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content') + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-to-row/index.js b/ui/app/components/send_/send-content/send-to-row/index.js new file mode 100644 index 000000000..121f15148 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/index.js @@ -0,0 +1 @@ +export { default } from './send-to-row.container' diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row-README.md b/ui/app/components/send_/send-content/send-to-row/send-to-row-README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js new file mode 100644 index 000000000..1c2ecdf9c --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper/' +import EnsInput from '../../../ens-input' +import { getToErrorObject } from './send-to-row.utils.js' + +export default class SendToRow extends Component { + + static propTypes = { + closeToDropdown: PropTypes.func, + inError: PropTypes.bool, + network: PropTypes.string, + openToDropdown: PropTypes.func, + to: PropTypes.string, + toAccounts: PropTypes.array, + toDropdownOpen: PropTypes.bool, + updateGas: PropTypes.func, + updateSendTo: PropTypes.func, + updateSendToError: PropTypes.func, + }; + + handleToChange (to, nickname = '', toError) { + const { updateSendTo, updateSendToError, updateGas } = this.props + const toErrorObject = getToErrorObject(to, toError) + updateSendTo(to, nickname) + updateSendToError(toErrorObject) + if (toErrorObject.to === null) { + updateGas({ to }) + } + } + + render () { + const { + closeToDropdown, + inError, + network, + openToDropdown, + to, + toAccounts, + toDropdownOpen, + } = this.props + + return ( + + closeToDropdown()} + dropdownOpen={toDropdownOpen} + inError={inError} + name={'address'} + network={network} + onChange={({ toAddress, nickname, toError }) => this.handleToChange(toAddress, nickname, toError)} + openDropdown={() => openToDropdown()} + placeholder={this.context.t('recipientAddress')} + to={to} + /> + + ) + } + +} + +SendToRow.contextTypes = { + t: PropTypes.func, +} + diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js new file mode 100644 index 000000000..1c9c9d518 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js @@ -0,0 +1,42 @@ +import { connect } from 'react-redux' +import { + getCurrentNetwork, + getSendTo, + getSendToAccounts, +} from '../../send.selectors.js' +import { + getToDropdownOpen, + sendToIsInError, +} from './send-to-row.selectors.js' +import { + updateSendTo, +} from '../../../../actions' +import { + updateSendErrors, + openToDropdown, + closeToDropdown, +} from '../../../../ducks/send.duck' +import SendToRow from './send-to-row.component' + +export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) + +function mapStateToProps (state) { + return { + inError: sendToIsInError(state), + network: getCurrentNetwork(state), + to: getSendTo(state), + toAccounts: getSendToAccounts(state), + toDropdownOpen: getToDropdownOpen(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + closeToDropdown: () => dispatch(closeToDropdown()), + openToDropdown: () => dispatch(openToDropdown()), + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), + updateSendToError: (toErrorObject) => { + dispatch(updateSendErrors(toErrorObject)) + }, + } +} diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js new file mode 100644 index 000000000..8919014be --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js @@ -0,0 +1,14 @@ +const selectors = { + getToDropdownOpen, + sendToIsInError, +} + +module.exports = selectors + +function getToDropdownOpen (state) { + return state.send.toDropdownOpen +} + +function sendToIsInError (state) { + return Boolean(state.send.errors.to) +} diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js new file mode 100644 index 000000000..6b90a9f09 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js @@ -0,0 +1,19 @@ +const { + REQUIRED_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, +} = require('../../send.constants') +const { isValidAddress } = require('../../../../util') + +function getToErrorObject (to, toError = null) { + if (!to) { + toError = REQUIRED_ERROR + } else if (!isValidAddress(to) && !toError) { + toError = INVALID_RECIPIENT_ADDRESS_ERROR + } + + return { to: toError } +} + +module.exports = { + getToErrorObject, +} diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js new file mode 100644 index 000000000..781371004 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js @@ -0,0 +1,149 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import proxyquire from 'proxyquire' + +const SendToRow = proxyquire('../send-to-row.component.js', { + './send-to-row.utils.js': { + getToErrorObject: (to, toError) => ({ + to: to === false ? null : `mockToErrorObject:${to}${toError}`, + }), + }, +}).default + +import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' +import EnsInput from '../../../../ens-input' + +const propsMethodSpies = { + closeToDropdown: sinon.spy(), + openToDropdown: sinon.spy(), + updateGas: sinon.spy(), + updateSendTo: sinon.spy(), + updateSendToError: sinon.spy(), +} + +sinon.spy(SendToRow.prototype, 'handleToChange') + +describe('SendToRow Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.closeToDropdown.resetHistory() + propsMethodSpies.openToDropdown.resetHistory() + propsMethodSpies.updateSendTo.resetHistory() + propsMethodSpies.updateSendToError.resetHistory() + SendToRow.prototype.handleToChange.resetHistory() + }) + + describe('handleToChange', () => { + + it('should call updateSendTo', () => { + assert.equal(propsMethodSpies.updateSendTo.callCount, 0) + instance.handleToChange('mockTo2', 'mockNickname') + assert.equal(propsMethodSpies.updateSendTo.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendTo.getCall(0).args, + ['mockTo2', 'mockNickname'] + ) + }) + + it('should call updateSendToError', () => { + assert.equal(propsMethodSpies.updateSendToError.callCount, 0) + instance.handleToChange('mockTo2', '', 'mockToError') + assert.equal(propsMethodSpies.updateSendToError.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendToError.getCall(0).args, + [{ to: 'mockToErrorObject:mockTo2mockToError' }] + ) + }) + + it('should not call updateGas if there is a to error', () => { + assert.equal(propsMethodSpies.updateGas.callCount, 0) + instance.handleToChange('mockTo2') + assert.equal(propsMethodSpies.updateGas.callCount, 0) + }) + + it('should call updateGas if there is no to error', () => { + assert.equal(propsMethodSpies.updateGas.callCount, 0) + instance.handleToChange(false) + assert.equal(propsMethodSpies.updateGas.callCount, 1) + }) + }) + + describe('render', () => { + it('should render a SendRowWrapper component', () => { + assert.equal(wrapper.find(SendRowWrapper).length, 1) + }) + + it('should pass the correct props to SendRowWrapper', () => { + const { + errorType, + label, + showError, + } = wrapper.find(SendRowWrapper).props() + + assert.equal(errorType, 'to') + + assert.equal(label, 'to_t') + + assert.equal(showError, false) + }) + + it('should render an EnsInput as a child of the SendRowWrapper', () => { + assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput)) + }) + + it('should render the EnsInput with the correct props', () => { + const { + accounts, + closeDropdown, + dropdownOpen, + inError, + name, + network, + onChange, + openDropdown, + placeholder, + to, + } = wrapper.find(SendRowWrapper).childAt(0).props() + assert.deepEqual(accounts, ['mockAccount']) + assert.equal(dropdownOpen, false) + assert.equal(inError, false) + assert.equal(name, 'address') + assert.equal(network, 'mockNetwork') + assert.equal(placeholder, 'recipientAddress_t') + assert.equal(to, 'mockTo') + assert.equal(propsMethodSpies.closeToDropdown.callCount, 0) + closeDropdown() + assert.equal(propsMethodSpies.closeToDropdown.callCount, 1) + assert.equal(propsMethodSpies.openToDropdown.callCount, 0) + openDropdown() + assert.equal(propsMethodSpies.openToDropdown.callCount, 1) + assert.equal(SendToRow.prototype.handleToChange.callCount, 0) + onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError' }) + assert.equal(SendToRow.prototype.handleToChange.callCount, 1) + assert.deepEqual( + SendToRow.prototype.handleToChange.getCall(0).args, + ['mockNewTo', 'mockNewNickname', 'mockToError'] + ) + }) + }) +}) diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-container.test.js new file mode 100644 index 000000000..92355c00a --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-container.test.js @@ -0,0 +1,113 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + updateSendTo: sinon.spy(), +} +const duckActionSpies = { + closeToDropdown: sinon.spy(), + openToDropdown: sinon.spy(), + updateSendErrors: sinon.spy(), +} + +proxyquire('../send-to-row.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors.js': { + getCurrentNetwork: (s) => `mockNetwork:${s}`, + getSendTo: (s) => `mockTo:${s}`, + getSendToAccounts: (s) => `mockToAccounts:${s}`, + }, + './send-to-row.selectors.js': { + getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`, + sendToIsInError: (s) => `mockInError:${s}`, + }, + '../../../../actions': actionSpies, + '../../../../ducks/send.duck': duckActionSpies, +}) + +describe('send-to-row container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + inError: 'mockInError:mockState', + network: 'mockNetwork:mockState', + to: 'mockTo:mockState', + toAccounts: 'mockToAccounts:mockState', + toDropdownOpen: 'mockToDropdownOpen:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('closeToDropdown()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.closeToDropdown() + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.closeToDropdown.calledOnce) + assert.equal( + duckActionSpies.closeToDropdown.getCall(0).args[0], + undefined + ) + }) + }) + + describe('openToDropdown()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.openToDropdown() + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.openToDropdown.calledOnce) + assert.equal( + duckActionSpies.openToDropdown.getCall(0).args[0], + undefined + ) + }) + }) + + describe('updateSendTo()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname') + assert(dispatchSpy.calledOnce) + assert(actionSpies.updateSendTo.calledOnce) + assert.deepEqual( + actionSpies.updateSendTo.getCall(0).args, + ['mockTo', 'mockNickname'] + ) + }) + }) + + describe('updateSendToError()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendToError('mockToErrorObject') + assert(dispatchSpy.calledOnce) + assert(duckActionSpies.updateSendErrors.calledOnce) + assert.equal( + duckActionSpies.updateSendErrors.getCall(0).args[0], + 'mockToErrorObject' + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-selectors.test.js new file mode 100644 index 000000000..122ad3265 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-selectors.test.js @@ -0,0 +1,47 @@ +import assert from 'assert' +import { + getToDropdownOpen, + sendToIsInError, +} from '../send-to-row.selectors.js' + +describe('send-to-row selectors', () => { + + describe('getToDropdownOpen()', () => { + it('should return send.getToDropdownOpen', () => { + const state = { + send: { + toDropdownOpen: false, + }, + } + + assert.equal(getToDropdownOpen(state), false) + }) + }) + + describe('sendToIsInError()', () => { + it('should return true if send.errors.to is truthy', () => { + const state = { + send: { + errors: { + to: 'abc', + }, + }, + } + + assert.equal(sendToIsInError(state), true) + }) + + it('should return false if send.errors.to is falsy', () => { + const state = { + send: { + errors: { + to: null, + }, + }, + } + + assert.equal(sendToIsInError(state), false) + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js new file mode 100644 index 000000000..4d2447c32 --- /dev/null +++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js @@ -0,0 +1,51 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +import { + REQUIRED_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, +} from '../../../send.constants' + +const stubs = { + isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))), +} + +const toRowUtils = proxyquire('../send-to-row.utils.js', { + '../../../../util': { + isValidAddress: stubs.isValidAddress, + }, +}) +const { + getToErrorObject, +} = toRowUtils + +describe('send-to-row utils', () => { + + describe('getToErrorObject()', () => { + it('should return a required error if to is falsy', () => { + assert.deepEqual(getToErrorObject(null), { + to: REQUIRED_ERROR, + }) + }) + + it('should return an invalid recipient error if to is truthy but invalid', () => { + assert.deepEqual(getToErrorObject('mockInvalidTo'), { + to: INVALID_RECIPIENT_ADDRESS_ERROR, + }) + }) + + it('should return null if to is truthy and valid', () => { + assert.deepEqual(getToErrorObject('0xabc123'), { + to: null, + }) + }) + + it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => { + assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), { + to: 'someExplicitError', + }) + }) + }) + +}) diff --git a/ui/app/components/send_/send-content/tests/send-content-component.test.js b/ui/app/components/send_/send-content/tests/send-content-component.test.js new file mode 100644 index 000000000..d5bb6693c --- /dev/null +++ b/ui/app/components/send_/send-content/tests/send-content-component.test.js @@ -0,0 +1,38 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import SendContent from '../send-content.component.js' + +import PageContainerContent from '../../../page-container/page-container-content.component' +import SendAmountRow from '../send-amount-row/send-amount-row.container' +import SendFromRow from '../send-from-row/send-from-row.container' +import SendGasRow from '../send-gas-row/send-gas-row.container' +import SendToRow from '../send-to-row/send-to-row.container' + +describe('SendContent Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow() + }) + + describe('render', () => { + it('should render a PageContainerContent component', () => { + assert.equal(wrapper.find(PageContainerContent).length, 1) + }) + + it('should render a div with a .send-v2__form class as a child of PageContainerContent', () => { + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + PageContainerContentChild.is('div') + PageContainerContentChild.is('.send-v2__form') + }) + + it('should render the correct row components as grandchildren of the PageContainerContent component', () => { + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(0).is(SendFromRow)) + assert(PageContainerContentChild.childAt(1).is(SendToRow)) + assert(PageContainerContentChild.childAt(2).is(SendAmountRow)) + assert(PageContainerContentChild.childAt(3).is(SendGasRow)) + }) + }) +}) diff --git a/ui/app/components/send_/send-footer/README.md b/ui/app/components/send_/send-footer/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-footer/index.js b/ui/app/components/send_/send-footer/index.js new file mode 100644 index 000000000..58e91d622 --- /dev/null +++ b/ui/app/components/send_/send-footer/index.js @@ -0,0 +1 @@ +export { default } from './send-footer.container' diff --git a/ui/app/components/send_/send-footer/send-footer.component.js b/ui/app/components/send_/send-footer/send-footer.component.js new file mode 100644 index 000000000..6471ae1a3 --- /dev/null +++ b/ui/app/components/send_/send-footer/send-footer.component.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerFooter from '../../page-container/page-container-footer' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes' + +export default class SendFooter extends Component { + + static propTypes = { + addToAddressBookIfNew: PropTypes.func, + amount: PropTypes.string, + clearSend: PropTypes.func, + disabled: PropTypes.bool, + editingTransactionId: PropTypes.string, + errors: PropTypes.object, + from: PropTypes.object, + gasLimit: PropTypes.string, + gasPrice: PropTypes.string, + gasTotal: PropTypes.string, + history: PropTypes.object, + inError: PropTypes.bool, + selectedToken: PropTypes.object, + sign: PropTypes.func, + to: PropTypes.string, + toAccounts: PropTypes.array, + tokenBalance: PropTypes.string, + unapprovedTxs: PropTypes.object, + update: PropTypes.func, + }; + + onCancel () { + this.props.clearSend() + this.props.history.push(DEFAULT_ROUTE) + } + + onSubmit (event) { + event.preventDefault() + const { + addToAddressBookIfNew, + amount, + editingTransactionId, + from: {address: from}, + gasLimit: gas, + gasPrice, + selectedToken, + sign, + to, + unapprovedTxs, + // updateTx, + update, + toAccounts, + } = this.props + + // Should not be needed because submit should be disabled if there are errors. + // const noErrors = !amountError && toError === null + + // if (!noErrors) { + // return + // } + + // TODO: add nickname functionality + addToAddressBookIfNew(to, toAccounts) + + editingTransactionId + ? update({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) + : sign({ selectedToken, to, amount, from, gas, gasPrice }) + + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) + } + + formShouldBeDisabled () { + const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props + const missingTokenBalance = selectedToken && !tokenBalance + return inError || !gasTotal || missingTokenBalance || !to + } + + render () { + return ( + this.onCancel()} + onSubmit={e => this.onSubmit(e)} + disabled={this.formShouldBeDisabled()} + /> + ) + } + +} + +SendFooter.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-footer/send-footer.container.js b/ui/app/components/send_/send-footer/send-footer.container.js new file mode 100644 index 000000000..260ff40bc --- /dev/null +++ b/ui/app/components/send_/send-footer/send-footer.container.js @@ -0,0 +1,100 @@ +import { connect } from 'react-redux' +import ethUtil from 'ethereumjs-util' +import { + addToAddressBook, + clearSend, + signTokenTx, + signTx, + updateTransaction, +} from '../../../actions' +import SendFooter from './send-footer.component' +import { + getGasLimit, + getGasPrice, + getGasTotal, + getSelectedToken, + getSendAmount, + getSendEditingTransactionId, + getSendFromObject, + getSendTo, + getSendToAccounts, + getTokenBalance, + getUnapprovedTxs, +} from '../send.selectors' +import { + isSendFormInError, +} from './send-footer.selectors' +import { + addressIsNew, + constructTxParams, + constructUpdatedTx, +} from './send-footer.utils' + +export default connect(mapStateToProps, mapDispatchToProps)(SendFooter) + +function mapStateToProps (state) { + return { + amount: getSendAmount(state), + editingTransactionId: getSendEditingTransactionId(state), + from: getSendFromObject(state), + gasLimit: getGasLimit(state), + gasPrice: getGasPrice(state), + gasTotal: getGasTotal(state), + inError: isSendFormInError(state), + selectedToken: getSelectedToken(state), + to: getSendTo(state), + toAccounts: getSendToAccounts(state), + tokenBalance: getTokenBalance(state), + unapprovedTxs: getUnapprovedTxs(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + clearSend: () => dispatch(clearSend()), + sign: ({ selectedToken, to, amount, from, gas, gasPrice }) => { + const txParams = constructTxParams({ + amount, + from, + gas, + gasPrice, + selectedToken, + to, + }) + + selectedToken + ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams)) + : dispatch(signTx(txParams)) + }, + update: ({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) => { + const editingTx = constructUpdatedTx({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, + }) + + dispatch(updateTransaction(editingTx)) + }, + addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => { + const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress) + if (addressIsNew(toAccounts)) { + // TODO: nickname, i.e. addToAddressBook(recipient, nickname) + dispatch(addToAddressBook(hexPrefixedAddress, nickname)) + } + }, + } +} diff --git a/ui/app/components/send_/send-footer/send-footer.scss b/ui/app/components/send_/send-footer/send-footer.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-footer/send-footer.selectors.js b/ui/app/components/send_/send-footer/send-footer.selectors.js new file mode 100644 index 000000000..e20addfdc --- /dev/null +++ b/ui/app/components/send_/send-footer/send-footer.selectors.js @@ -0,0 +1,11 @@ +const { getSendErrors } = require('../send.selectors') + +const selectors = { + isSendFormInError, +} + +module.exports = selectors + +function isSendFormInError (state) { + return Object.values(getSendErrors(state)).some(n => n) +} diff --git a/ui/app/components/send_/send-footer/send-footer.utils.js b/ui/app/components/send_/send-footer/send-footer.utils.js new file mode 100644 index 000000000..875e7d948 --- /dev/null +++ b/ui/app/components/send_/send-footer/send-footer.utils.js @@ -0,0 +1,81 @@ +const ethAbi = require('ethereumjs-abi') +const ethUtil = require('ethereumjs-util') +const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../send.constants') + +function addHexPrefixToObjectValues (obj) { + return Object.keys(obj).reduce((newObj, key) => { + return { ...newObj, [key]: ethUtil.addHexPrefix(obj[key]) } + }, {}) +} + +function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice }) { + const txParams = { + from, + value: '0', + gas, + gasPrice, + } + + if (!selectedToken) { + txParams.value = amount + txParams.to = to + } + + const hexPrefixedTxParams = addHexPrefixToObjectValues(txParams) + + return hexPrefixedTxParams +} + +function constructUpdatedTx ({ + amount, + editingTransactionId, + from, + gas, + gasPrice, + selectedToken, + to, + unapprovedTxs, +}) { + const editingTx = { + ...unapprovedTxs[editingTransactionId], + txParams: addHexPrefixToObjectValues({ from, gas, gasPrice }), + } + + if (selectedToken) { + const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( + ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), + x => ('00' + x.toString(16)).slice(-2) + ).join('') + + Object.assign(editingTx.txParams, addHexPrefixToObjectValues({ + value: '0', + to: selectedToken.address, + data, + })) + } else { + const { data } = unapprovedTxs[editingTransactionId].txParams + + Object.assign(editingTx.txParams, addHexPrefixToObjectValues({ + value: amount, + to, + data, + })) + + if (typeof editingTx.txParams.data === 'undefined') { + delete editingTx.txParams.data + } + } + + return editingTx +} + +function addressIsNew (toAccounts, newAddress) { + return !toAccounts.find(({ address }) => newAddress === address) +} + +module.exports = { + addressIsNew, + constructTxParams, + constructUpdatedTx, + addHexPrefixToObjectValues, +} diff --git a/ui/app/components/send_/send-footer/tests/send-footer-component.test.js b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js new file mode 100644 index 000000000..e071fe54f --- /dev/null +++ b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js @@ -0,0 +1,227 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../routes' +import SendFooter from '../send-footer.component.js' + +import PageContainerFooter from '../../../page-container/page-container-footer' + +const propsMethodSpies = { + addToAddressBookIfNew: sinon.spy(), + clearSend: sinon.spy(), + sign: sinon.spy(), + update: sinon.spy(), +} +const historySpies = { + push: sinon.spy(), +} +const MOCK_EVENT = { preventDefault: () => {} } + +sinon.spy(SendFooter.prototype, 'onCancel') +sinon.spy(SendFooter.prototype, 'onSubmit') + +describe('SendFooter Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str } }) + }) + + afterEach(() => { + propsMethodSpies.clearSend.resetHistory() + propsMethodSpies.addToAddressBookIfNew.resetHistory() + propsMethodSpies.clearSend.resetHistory() + propsMethodSpies.sign.resetHistory() + propsMethodSpies.update.resetHistory() + historySpies.push.resetHistory() + SendFooter.prototype.onCancel.resetHistory() + SendFooter.prototype.onSubmit.resetHistory() + }) + + describe('onCancel', () => { + it('should call clearSend', () => { + assert.equal(propsMethodSpies.clearSend.callCount, 0) + wrapper.instance().onCancel() + assert.equal(propsMethodSpies.clearSend.callCount, 1) + }) + + it('should call history.push', () => { + assert.equal(historySpies.push.callCount, 0) + wrapper.instance().onCancel() + assert.equal(historySpies.push.callCount, 1) + assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE) + }) + }) + + + describe('formShouldBeDisabled()', () => { + const config = { + 'should return true if inError is truthy': { + inError: true, + expectedResult: true, + }, + 'should return true if gasTotal is falsy': { + inError: false, + gasTotal: false, + expectedResult: true, + }, + 'should return true if to is truthy': { + to: '0xsomevalidAddress', + inError: false, + gasTotal: false, + expectedResult: true, + }, + 'should return true if selectedToken is truthy and tokenBalance is falsy': { + selectedToken: true, + tokenBalance: null, + expectedResult: true, + }, + 'should return false if inError is false and all other params are truthy': { + inError: false, + gasTotal: '0x123', + selectedToken: true, + tokenBalance: 123, + expectedResult: false, + }, + } + Object.entries(config).map(([description, obj]) => { + it(description, () => { + wrapper.setProps(obj) + assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult) + }) + }) + }) + + describe('onSubmit', () => { + it('should call addToAddressBookIfNew with the correct params', () => { + wrapper.instance().onSubmit(MOCK_EVENT) + assert(propsMethodSpies.addToAddressBookIfNew.calledOnce) + assert.deepEqual( + propsMethodSpies.addToAddressBookIfNew.getCall(0).args, + ['mockTo', ['mockAccount']] + ) + }) + + it('should call props.update if editingTransactionId is truthy', () => { + wrapper.instance().onSubmit(MOCK_EVENT) + assert(propsMethodSpies.update.calledOnce) + assert.deepEqual( + propsMethodSpies.update.getCall(0).args[0], + { + amount: 'mockAmount', + editingTransactionId: 'mockEditingTransactionId', + from: 'mockAddress', + gas: 'mockGasLimit', + gasPrice: 'mockGasPrice', + selectedToken: { mockProp: 'mockSelectedTokenProp' }, + to: 'mockTo', + unapprovedTxs: ['mockTx'], + } + ) + }) + + it('should not call props.sign if editingTransactionId is truthy', () => { + assert.equal(propsMethodSpies.sign.callCount, 0) + }) + + it('should call props.sign if editingTransactionId is falsy', () => { + wrapper.setProps({ editingTransactionId: null }) + wrapper.instance().onSubmit(MOCK_EVENT) + assert(propsMethodSpies.sign.calledOnce) + assert.deepEqual( + propsMethodSpies.sign.getCall(0).args[0], + { + amount: 'mockAmount', + from: 'mockAddress', + gas: 'mockGasLimit', + gasPrice: 'mockGasPrice', + selectedToken: { mockProp: 'mockSelectedTokenProp' }, + to: 'mockTo', + } + ) + }) + + it('should not call props.update if editingTransactionId is falsy', () => { + assert.equal(propsMethodSpies.update.callCount, 0) + }) + + it('should call history.push', () => { + wrapper.instance().onSubmit(MOCK_EVENT) + assert.equal(historySpies.push.callCount, 1) + assert.equal(historySpies.push.getCall(0).args[0], CONFIRM_TRANSACTION_ROUTE) + }) + }) + + describe('render', () => { + beforeEach(() => { + sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn') + wrapper = shallow(, { context: { t: str => str } }) + }) + + afterEach(() => { + SendFooter.prototype.formShouldBeDisabled.restore() + }) + + it('should render a PageContainerFooter component', () => { + assert.equal(wrapper.find(PageContainerFooter).length, 1) + }) + + it('should pass the correct props to PageContainerFooter', () => { + const { + onCancel, + onSubmit, + disabled, + } = wrapper.find(PageContainerFooter).props() + assert.equal(disabled, 'formShouldBeDisabledReturn') + + assert.equal(SendFooter.prototype.onSubmit.callCount, 0) + onSubmit(MOCK_EVENT) + assert.equal(SendFooter.prototype.onSubmit.callCount, 1) + + assert.equal(SendFooter.prototype.onCancel.callCount, 0) + onCancel() + assert.equal(SendFooter.prototype.onCancel.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/send_/send-footer/tests/send-footer-container.test.js b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js new file mode 100644 index 000000000..39d6a7686 --- /dev/null +++ b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js @@ -0,0 +1,191 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + addToAddressBook: sinon.spy(), + clearSend: sinon.spy(), + signTokenTx: sinon.spy(), + signTx: sinon.spy(), + updateTransaction: sinon.spy(), +} +const utilsStubs = { + addressIsNew: sinon.stub().returns(true), + constructTxParams: sinon.stub().returns('mockConstructedTxParams'), + constructUpdatedTx: sinon.stub().returns('mockConstructedUpdatedTxParams'), +} + +proxyquire('../send-footer.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../../actions': actionSpies, + '../send.selectors': { + getGasLimit: (s) => `mockGasLimit:${s}`, + getGasPrice: (s) => `mockGasPrice:${s}`, + getGasTotal: (s) => `mockGasTotal:${s}`, + getSelectedToken: (s) => `mockSelectedToken:${s}`, + getSendAmount: (s) => `mockAmount:${s}`, + getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`, + getSendFromObject: (s) => `mockFromObject:${s}`, + getSendTo: (s) => `mockTo:${s}`, + getSendToAccounts: (s) => `mockToAccounts:${s}`, + getTokenBalance: (s) => `mockTokenBalance:${s}`, + getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`, + }, + './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` }, + './send-footer.utils': utilsStubs, +}) + +describe('send-footer container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + amount: 'mockAmount:mockState', + selectedToken: 'mockSelectedToken:mockState', + editingTransactionId: 'mockEditingTransactionId:mockState', + from: 'mockFromObject:mockState', + gasLimit: 'mockGasLimit:mockState', + gasPrice: 'mockGasPrice:mockState', + gasTotal: 'mockGasTotal:mockState', + inError: 'mockInError:mockState', + to: 'mockTo:mockState', + toAccounts: 'mockToAccounts:mockState', + tokenBalance: 'mockTokenBalance:mockState', + unapprovedTxs: 'mockUnapprovedTxs:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('clearSend()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.clearSend() + assert(dispatchSpy.calledOnce) + assert(actionSpies.clearSend.calledOnce) + }) + }) + + describe('sign()', () => { + it('should dispatch a signTokenTx action if selectedToken is defined', () => { + mapDispatchToPropsObject.sign({ + selectedToken: { + address: '0xabc', + }, + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + }) + assert(dispatchSpy.calledOnce) + assert.deepEqual( + utilsStubs.constructTxParams.getCall(0).args[0], + { + selectedToken: { + address: '0xabc', + }, + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + } + ) + assert.deepEqual( + actionSpies.signTokenTx.getCall(0).args, + [ '0xabc', 'mockTo', 'mockAmount', 'mockConstructedTxParams' ] + ) + }) + + it('should dispatch a sign action if selectedToken is not defined', () => { + utilsStubs.constructTxParams.resetHistory() + mapDispatchToPropsObject.sign({ + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + }) + assert(dispatchSpy.calledOnce) + assert.deepEqual( + utilsStubs.constructTxParams.getCall(0).args[0], + { + selectedToken: undefined, + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + } + ) + assert.deepEqual( + actionSpies.signTx.getCall(0).args, + [ 'mockConstructedTxParams' ] + ) + }) + }) + + describe('update()', () => { + it('should dispatch an updateTransaction action', () => { + mapDispatchToPropsObject.update({ + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + editingTransactionId: 'mockEditingTransactionId', + selectedToken: 'mockSelectedToken', + unapprovedTxs: 'mockUnapprovedTxs', + }) + assert(dispatchSpy.calledOnce) + assert.deepEqual( + utilsStubs.constructUpdatedTx.getCall(0).args[0], + { + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + editingTransactionId: 'mockEditingTransactionId', + selectedToken: 'mockSelectedToken', + unapprovedTxs: 'mockUnapprovedTxs', + } + ) + assert.equal(actionSpies.updateTransaction.getCall(0).args[0], 'mockConstructedUpdatedTxParams') + }) + }) + + describe('addToAddressBookIfNew()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.addToAddressBookIfNew('mockNewAddress', 'mockToAccounts', 'mockNickname') + assert(dispatchSpy.calledOnce) + assert.equal(utilsStubs.addressIsNew.getCall(0).args[0], 'mockToAccounts') + assert.deepEqual( + actionSpies.addToAddressBook.getCall(0).args, + [ '0xmockNewAddress', 'mockNickname' ] + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js new file mode 100644 index 000000000..8de032f57 --- /dev/null +++ b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js @@ -0,0 +1,24 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +const { + isSendFormInError, +} = proxyquire('../send-footer.selectors', { + '../send.selectors': { + getSendErrors: (mockState) => mockState.errors, + }, +}) + +describe('send-footer selectors', () => { + + describe('getTitleKey()', () => { + it('should return true if any of the values of the object returned by getSendErrors are truthy', () => { + assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true) + }) + + it('should return false if all of the values of the object returned by getSendErrors are falsy', () => { + assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false) + }) + }) + +}) diff --git a/ui/app/components/send_/send-footer/tests/send-footer-utils.test.js b/ui/app/components/send_/send-footer/tests/send-footer-utils.test.js new file mode 100644 index 000000000..2d3135995 --- /dev/null +++ b/ui/app/components/send_/send-footer/tests/send-footer-utils.test.js @@ -0,0 +1,210 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' +const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../../send.constants') + +const stubs = { + rawEncode: sinon.stub().callsFake((arr1, arr2) => { + return [ ...arr1, ...arr2 ] + }), +} + +const sendUtils = proxyquire('../send-footer.utils.js', { + 'ethereumjs-abi': { + rawEncode: stubs.rawEncode, + }, +}) +const { + addressIsNew, + constructTxParams, + constructUpdatedTx, + addHexPrefixToObjectValues, +} = sendUtils + +describe('send-footer utils', () => { + + describe('addHexPrefixToObjectValues()', () => { + it('should return a new object with the same properties with a 0x prefix', () => { + assert.deepEqual( + addHexPrefixToObjectValues({ + prop1: '0x123', + prop2: '456', + prop3: 'x', + }), + { + prop1: '0x123', + prop2: '0x456', + prop3: '0xx', + } + ) + }) + }) + + describe('addressIsNew()', () => { + it('should return false if the address exists in toAccounts', () => { + assert.equal( + addressIsNew([ + { address: '0xabc' }, + { address: '0xdef' }, + { address: '0xghi' }, + ], '0xdef'), + false + ) + }) + + it('should return true if the address does not exists in toAccounts', () => { + assert.equal( + addressIsNew([ + { address: '0xabc' }, + { address: '0xdef' }, + { address: '0xghi' }, + ], '0xxyz'), + true + ) + }) + }) + + describe('constructTxParams()', () => { + it('should return a new txParams object with value and to properties if there is no selectedToken', () => { + assert.deepEqual( + constructTxParams({ + selectedToken: false, + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + }), + { + to: '0xmockTo', + value: '0xmockAmount', + from: '0xmockFrom', + gas: '0xmockGas', + gasPrice: '0xmockGasPrice', + } + ) + }) + + it('should return a new txParams object without a to property and a 0 value if there is a selectedToken', () => { + assert.deepEqual( + constructTxParams({ + selectedToken: true, + to: 'mockTo', + amount: 'mockAmount', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + }), + { + value: '0x0', + from: '0xmockFrom', + gas: '0xmockGas', + gasPrice: '0xmockGasPrice', + } + ) + }) + }) + + describe('constructUpdatedTx()', () => { + it('should return a new object with an updated txParams', () => { + const result = constructUpdatedTx({ + amount: 'mockAmount', + editingTransactionId: '0x456', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + selectedToken: false, + to: 'mockTo', + unapprovedTxs: { + '0x123': {}, + '0x456': { + unapprovedTxParam: 'someOtherParam', + txParams: { + data: 'someData', + }, + }, + }, + }) + + assert.deepEqual(result, { + unapprovedTxParam: 'someOtherParam', + txParams: { + from: '0xmockFrom', + gas: '0xmockGas', + gasPrice: '0xmockGasPrice', + value: '0xmockAmount', + to: '0xmockTo', + data: '0xsomeData', + }, + }) + }) + + it('should not have data property if there is non in the original tx', () => { + const result = constructUpdatedTx({ + amount: 'mockAmount', + editingTransactionId: '0x456', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + selectedToken: false, + to: 'mockTo', + unapprovedTxs: { + '0x123': {}, + '0x456': { + unapprovedTxParam: 'someOtherParam', + txParams: { + from: 'oldFrom', + gas: 'oldGas', + gasPrice: 'oldGasPrice', + }, + }, + }, + }) + + assert.deepEqual(result, { + unapprovedTxParam: 'someOtherParam', + txParams: { + from: '0xmockFrom', + gas: '0xmockGas', + gasPrice: '0xmockGasPrice', + value: '0xmockAmount', + to: '0xmockTo', + }, + }) + }) + + it('should have token property values if selectedToken is truthy', () => { + const result = constructUpdatedTx({ + amount: 'mockAmount', + editingTransactionId: '0x456', + from: 'mockFrom', + gas: 'mockGas', + gasPrice: 'mockGasPrice', + selectedToken: { + address: 'mockTokenAddress', + }, + to: 'mockTo', + unapprovedTxs: { + '0x123': {}, + '0x456': { + unapprovedTxParam: 'someOtherParam', + txParams: {}, + }, + }, + }) + + assert.deepEqual(result, { + unapprovedTxParam: 'someOtherParam', + txParams: { + from: '0xmockFrom', + gas: '0xmockGas', + gasPrice: '0xmockGasPrice', + value: '0x0', + to: '0xmockTokenAddress', + data: `${TOKEN_TRANSFER_FUNCTION_SIGNATURE}ss56Tont`, + }, + }) + }) + }) + +}) diff --git a/ui/app/components/send_/send-header/README.md b/ui/app/components/send_/send-header/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-header/index.js b/ui/app/components/send_/send-header/index.js new file mode 100644 index 000000000..0b17f0b7d --- /dev/null +++ b/ui/app/components/send_/send-header/index.js @@ -0,0 +1 @@ +export { default } from './send-header.container' diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js new file mode 100644 index 000000000..5f6617fce --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerHeader from '../../page-container/page-container-header' +import { DEFAULT_ROUTE } from '../../../routes' + +export default class SendHeader extends Component { + + static propTypes = { + clearSend: PropTypes.func, + history: PropTypes.object, + titleKey: PropTypes.string, + subtitleParams: PropTypes.array, + }; + + onClose () { + this.props.clearSend() + this.props.history.push(DEFAULT_ROUTE) + } + + render () { + return ( + this.onClose()} + subtitle={this.context.t(...this.props.subtitleParams)} + title={this.context.t(this.props.titleKey)} + /> + ) + } + +} + +SendHeader.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js new file mode 100644 index 000000000..4bcd0d1b6 --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import { clearSend } from '../../../actions' +import SendHeader from './send-header.component' +import { getSubtitleParams, getTitleKey } from './send-header.selectors' + +export default connect(mapStateToProps, mapDispatchToProps)(SendHeader) + +function mapStateToProps (state) { + return { + titleKey: getTitleKey(state), + subtitleParams: getSubtitleParams(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + clearSend: () => dispatch(clearSend()), + } +} diff --git a/ui/app/components/send_/send-header/send-header.selectors.js b/ui/app/components/send_/send-header/send-header.selectors.js new file mode 100644 index 000000000..d7c9d3766 --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.selectors.js @@ -0,0 +1,37 @@ +const { + getSelectedToken, + getSendEditingTransactionId, +} = require('../send.selectors.js') + +const selectors = { + getTitleKey, + getSubtitleParams, +} + +module.exports = selectors + +function getTitleKey (state) { + const isEditing = Boolean(getSendEditingTransactionId(state)) + const isToken = Boolean(getSelectedToken(state)) + + if (isEditing) { + return 'edit' + } else if (isToken) { + return 'sendTokens' + } else { + return 'sendETH' + } +} + +function getSubtitleParams (state) { + const isEditing = Boolean(getSendEditingTransactionId(state)) + const token = getSelectedToken(state) + + if (isEditing) { + return [ 'editingTransaction' ] + } else if (token) { + return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] + } else { + return [ 'onlySendToEtherAddress' ] + } +} diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js new file mode 100644 index 000000000..930bfa387 --- /dev/null +++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js @@ -0,0 +1,70 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import { DEFAULT_ROUTE } from '../../../../routes' +import SendHeader from '../send-header.component.js' + +import PageContainerHeader from '../../../page-container/page-container-header' + +const propsMethodSpies = { + clearSend: sinon.spy(), +} +const historySpies = { + push: sinon.spy(), +} + +sinon.spy(SendHeader.prototype, 'onClose') + +describe('SendHeader Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) + }) + + afterEach(() => { + propsMethodSpies.clearSend.resetHistory() + historySpies.push.resetHistory() + SendHeader.prototype.onClose.resetHistory() + }) + + describe('onClose', () => { + it('should call clearSend', () => { + assert.equal(propsMethodSpies.clearSend.callCount, 0) + wrapper.instance().onClose() + assert.equal(propsMethodSpies.clearSend.callCount, 1) + }) + + it('should call history.push', () => { + assert.equal(historySpies.push.callCount, 0) + wrapper.instance().onClose() + assert.equal(historySpies.push.callCount, 1) + assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE) + }) + }) + + describe('render', () => { + it('should render a PageContainerHeader compenent', () => { + assert.equal(wrapper.find(PageContainerHeader).length, 1) + }) + + it('should pass the correct props to PageContainerHeader', () => { + const { + onClose, + subtitle, + title, + } = wrapper.find(PageContainerHeader).props() + assert.equal(subtitle, 'mockSubtitleKeymockVal') + assert.equal(title, 'mockTitleKey') + assert.equal(SendHeader.prototype.onClose.callCount, 0) + onClose() + assert.equal(SendHeader.prototype.onClose.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/send_/send-header/tests/send-header-container.test.js b/ui/app/components/send_/send-header/tests/send-header-container.test.js new file mode 100644 index 000000000..41a7e8a89 --- /dev/null +++ b/ui/app/components/send_/send-header/tests/send-header-container.test.js @@ -0,0 +1,59 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + clearSend: sinon.spy(), +} + +proxyquire('../send-header.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../../actions': actionSpies, + './send-header.selectors': { + getTitleKey: (s) => `mockTitleKey:${s}`, + getSubtitleParams: (s) => `mockSubtitleParams:${s}`, + }, +}) + +describe('send-header container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + titleKey: 'mockTitleKey:mockState', + subtitleParams: 'mockSubtitleParams:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('clearSend()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.clearSend() + assert(dispatchSpy.calledOnce) + assert(actionSpies.clearSend.calledOnce) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/send-header/tests/send-header-selectors.test.js b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js new file mode 100644 index 000000000..e0c6a3ab3 --- /dev/null +++ b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js @@ -0,0 +1,47 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +const { + getTitleKey, + getSubtitleParams, +} = proxyquire('../send-header.selectors', { + '../send.selectors': { + getSelectedToken: (mockState) => mockState.t, + getSendEditingTransactionId: (mockState) => mockState.e, + }, +}) + +describe('send-header selectors', () => { + + describe('getTitleKey()', () => { + it('should return the correct key when getSendEditingTransactionId is truthy', () => { + assert.equal(getTitleKey({ e: 1, t: true }), 'edit') + }) + + it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { + assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens') + }) + + it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { + assert.equal(getTitleKey({ e: null }), 'sendETH') + }) + }) + + describe('getSubtitleParams()', () => { + it('should return the correct params when getSendEditingTransactionId is truthy', () => { + assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ]) + }) + + it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { + assert.deepEqual( + getSubtitleParams({ e: null, t: { symbol: 'ABC' } }), + [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ] + ) + }) + + it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { + assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ]) + }) + }) + +}) diff --git a/ui/app/components/send_/send.component.js b/ui/app/components/send_/send.component.js new file mode 100644 index 000000000..219b362f2 --- /dev/null +++ b/ui/app/components/send_/send.component.js @@ -0,0 +1,162 @@ +import React from 'react' +import PropTypes from 'prop-types' +import PersistentForm from '../../../lib/persistent-form' +import { + getAmountErrorObject, + getToAddressForGasUpdate, + doesAmountErrorRequireUpdate, +} from './send.utils' + +import SendHeader from './send-header/' +import SendContent from './send-content/' +import SendFooter from './send-footer/' + +export default class SendTransactionScreen extends PersistentForm { + + static propTypes = { + amount: PropTypes.string, + amountConversionRate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + blockGasLimit: PropTypes.string, + conversionRate: PropTypes.number, + editingTransactionId: PropTypes.string, + from: PropTypes.object, + gasLimit: PropTypes.string, + gasPrice: PropTypes.string, + gasTotal: PropTypes.string, + history: PropTypes.object, + network: PropTypes.string, + primaryCurrency: PropTypes.string, + recentBlocks: PropTypes.array, + selectedAddress: PropTypes.string, + selectedToken: PropTypes.object, + tokenBalance: PropTypes.string, + tokenContract: PropTypes.object, + updateAndSetGasTotal: PropTypes.func, + updateSendErrors: PropTypes.func, + updateSendTokenBalance: PropTypes.func, + }; + + updateGas ({ to: updatedToAddress, amount: value } = {}) { + const { + amount, + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken = {}, + to: currentToAddress, + updateAndSetGasTotal, + } = this.props + + updateAndSetGasTotal({ + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken, + to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), + value: value || amount, + }) + } + + componentDidUpdate (prevProps) { + const { + amount, + amountConversionRate, + conversionRate, + from: { address, balance }, + gasTotal, + network, + primaryCurrency, + selectedToken, + tokenBalance, + updateSendErrors, + updateSendTokenBalance, + tokenContract, + } = this.props + + const { + from: { balance: prevBalance }, + gasTotal: prevGasTotal, + tokenBalance: prevTokenBalance, + network: prevNetwork, + } = prevProps + + const uninitialized = [prevBalance, prevGasTotal].every(n => n === null) + + const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({ + balance, + gasTotal, + prevBalance, + prevGasTotal, + prevTokenBalance, + selectedToken, + tokenBalance, + }) + + if (amountErrorRequiresUpdate) { + const amountErrorObject = getAmountErrorObject({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, + }) + updateSendErrors(amountErrorObject) + } + + if (!uninitialized) { + + if (network !== prevNetwork && network !== 'loading') { + updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + }) + this.updateGas() + } + } + } + + componentWillMount () { + const { + from: { address }, + selectedToken, + tokenContract, + updateSendTokenBalance, + } = this.props + updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + }) + this.updateGas() + } + + render () { + const { history } = this.props + + return ( +
+ + this.updateGas(updateData)}/> + +
+ ) + } + +} + +SendTransactionScreen.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send_/send.constants.js similarity index 53% rename from ui/app/components/send/send-constants.js rename to ui/app/components/send_/send.constants.js index 5d89c74aa..8acdf0641 100644 --- a/ui/app/components/send/send-constants.js +++ b/ui/app/components/send_/send.constants.js @@ -22,12 +22,36 @@ const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, { const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb' +const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds' +const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens' +const NEGATIVE_ETH_ERROR = 'negativeETH' +const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient' +const REQUIRED_ERROR = 'required' + +const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', { + fromDenomination: 'GWEI', + toDenomination: 'WEI', + fromNumericBase: 'hex', + toNumericBase: 'hex', +})) + +const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send. +const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers. + module.exports = { + INSUFFICIENT_FUNDS_ERROR, + INSUFFICIENT_TOKENS_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, + MIN_GAS_LIMIT_DEC, + MIN_GAS_LIMIT_HEX, + MIN_GAS_PRICE_DEC, MIN_GAS_PRICE_GWEI, MIN_GAS_PRICE_HEX, - MIN_GAS_PRICE_DEC, - MIN_GAS_LIMIT_HEX, - MIN_GAS_LIMIT_DEC, MIN_GAS_TOTAL, + NEGATIVE_ETH_ERROR, + ONE_GWEI_IN_WEI_HEX, + REQUIRED_ERROR, + SIMPLE_GAS_COST, TOKEN_TRANSFER_FUNCTION_SIGNATURE, + BASE_TOKEN_GAS_COST, } diff --git a/ui/app/components/send_/send.container.js b/ui/app/components/send_/send.container.js new file mode 100644 index 000000000..185653c5f --- /dev/null +++ b/ui/app/components/send_/send.container.js @@ -0,0 +1,91 @@ +import { connect } from 'react-redux' +import SendEther from './send.component' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import { + getAmountConversionRate, + getBlockGasLimit, + getConversionRate, + getCurrentNetwork, + getGasLimit, + getGasPrice, + getGasTotal, + getPrimaryCurrency, + getRecentBlocks, + getSelectedAddress, + getSelectedToken, + getSelectedTokenContract, + getSelectedTokenToFiatRate, + getSendAmount, + getSendEditingTransactionId, + getSendFromObject, + getSendTo, + getTokenBalance, +} from './send.selectors' +import { + updateSendTokenBalance, + updateGasData, + setGasTotal, +} from '../../actions' +import { + updateSendErrors, +} from '../../ducks/send.duck' +import { + calcGasTotal, +} from './send.utils.js' + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SendEther) + +function mapStateToProps (state) { + return { + amount: getSendAmount(state), + amountConversionRate: getAmountConversionRate(state), + blockGasLimit: getBlockGasLimit(state), + conversionRate: getConversionRate(state), + editingTransactionId: getSendEditingTransactionId(state), + from: getSendFromObject(state), + gasLimit: getGasLimit(state), + gasPrice: getGasPrice(state), + gasTotal: getGasTotal(state), + network: getCurrentNetwork(state), + primaryCurrency: getPrimaryCurrency(state), + recentBlocks: getRecentBlocks(state), + selectedAddress: getSelectedAddress(state), + selectedToken: getSelectedToken(state), + to: getSendTo(state), + tokenBalance: getTokenBalance(state), + tokenContract: getSelectedTokenContract(state), + tokenToFiatRate: getSelectedTokenToFiatRate(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + updateAndSetGasTotal: ({ + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken, + to, + value, + }) => { + !editingTransactionId + ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value })) + : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice))) + }, + updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => { + dispatch(updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + })) + }, + updateSendErrors: newError => dispatch(updateSendErrors(newError)), + } +} diff --git a/ui/app/components/send_/send.scss b/ui/app/components/send_/send.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send.selectors.js b/ui/app/components/send_/send.selectors.js new file mode 100644 index 000000000..f910f7caf --- /dev/null +++ b/ui/app/components/send_/send.selectors.js @@ -0,0 +1,279 @@ +const { valuesFor } = require('../../util') +const abi = require('human-standard-token-abi') +const { + multiplyCurrencies, +} = require('../../conversion-util') +const { + estimateGasPriceFromRecentBlocks, +} = require('./send.utils') + +const selectors = { + accountsWithSendEtherInfoSelector, + // autoAddToBetaUI, + getAddressBook, + getAmountConversionRate, + getBlockGasLimit, + getConversionRate, + getCurrentAccountWithSendEtherInfo, + getCurrentCurrency, + getCurrentNetwork, + getCurrentViewContext, + getForceGasMin, + getGasLimit, + getGasPrice, + getGasPriceFromRecentBlocks, + getGasTotal, + getPrimaryCurrency, + getRecentBlocks, + getSelectedAccount, + getSelectedAddress, + getSelectedIdentity, + getSelectedToken, + getSelectedTokenContract, + getSelectedTokenExchangeRate, + getSelectedTokenToFiatRate, + getSendAmount, + getSendEditingTransactionId, + getSendErrors, + getSendFrom, + getSendFromBalance, + getSendFromObject, + getSendMaxModeState, + getSendTo, + getSendToAccounts, + getTokenBalance, + getTokenExchangeRate, + getUnapprovedTxs, + transactionsSelector, +} + +module.exports = selectors + +function accountsWithSendEtherInfoSelector (state) { + const { + accounts, + identities, + } = state.metamask + + const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => { + return Object.assign({}, account, identities[key]) + }) + + return accountsWithSendEtherInfo +} + +// function autoAddToBetaUI (state) { +// const autoAddTransactionThreshold = 12 +// const autoAddAccountsThreshold = 2 +// const autoAddTokensThreshold = 1 + +// const numberOfTransactions = state.metamask.selectedAddressTxList.length +// const numberOfAccounts = Object.keys(state.metamask.accounts).length +// const numberOfTokensAdded = state.metamask.tokens.length + +// const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) && +// (numberOfAccounts > autoAddAccountsThreshold) && +// (numberOfTokensAdded > autoAddTokensThreshold) +// const userIsNotInBeta = !state.metamask.featureFlags.betaUI + +// return userIsNotInBeta && userPassesThreshold +// } + +function getAddressBook (state) { + return state.metamask.addressBook +} + +function getAmountConversionRate (state) { + return getSelectedToken(state) + ? getSelectedTokenToFiatRate(state) + : getConversionRate(state) +} + +function getBlockGasLimit (state) { + return state.metamask.currentBlockGasLimit +} + +function getConversionRate (state) { + return state.metamask.conversionRate +} + +function getCurrentAccountWithSendEtherInfo (state) { + const currentAddress = getSelectedAddress(state) + const accounts = accountsWithSendEtherInfoSelector(state) + + return accounts.find(({ address }) => address === currentAddress) +} + +function getCurrentCurrency (state) { + return state.metamask.currentCurrency +} + +function getCurrentNetwork (state) { + return state.metamask.network +} + +function getCurrentViewContext (state) { + const { currentView = {} } = state.appState + return currentView.context +} + +function getForceGasMin (state) { + return state.metamask.send.forceGasMin +} + +function getGasLimit (state) { + return state.metamask.send.gasLimit +} + +function getGasPrice (state) { + return state.metamask.send.gasPrice +} + +function getGasPriceFromRecentBlocks (state) { + return estimateGasPriceFromRecentBlocks(state.metamask.recentBlocks) +} + +function getGasTotal (state) { + return state.metamask.send.gasTotal +} + +function getPrimaryCurrency (state) { + const selectedToken = getSelectedToken(state) + return selectedToken && selectedToken.symbol +} + +function getRecentBlocks (state) { + return state.metamask.recentBlocks +} + +function getSelectedAccount (state) { + const accounts = state.metamask.accounts + const selectedAddress = getSelectedAddress(state) + + return accounts[selectedAddress] +} + +function getSelectedAddress (state) { + const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0] + + return selectedAddress +} + +function getSelectedIdentity (state) { + const selectedAddress = getSelectedAddress(state) + const identities = state.metamask.identities + + return identities[selectedAddress] +} + +function getSelectedToken (state) { + const tokens = state.metamask.tokens || [] + const selectedTokenAddress = state.metamask.selectedTokenAddress + const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0] + const sendToken = state.metamask.send.token + + return selectedToken || sendToken || null +} + +function getSelectedTokenContract (state) { + const selectedToken = getSelectedToken(state) + + return selectedToken + ? global.eth.contract(abi).at(selectedToken.address) + : null +} + +function getSelectedTokenExchangeRate (state) { + const tokenExchangeRates = state.metamask.tokenExchangeRates + const selectedToken = getSelectedToken(state) || {} + const { symbol = '' } = selectedToken + const pair = `${symbol.toLowerCase()}_eth` + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {} + + return tokenExchangeRate +} + +function getSelectedTokenToFiatRate (state) { + const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state) + const conversionRate = getConversionRate(state) + + const tokenToFiatRate = multiplyCurrencies( + conversionRate, + selectedTokenExchangeRate, + { toNumericBase: 'dec' } + ) + + return tokenToFiatRate +} + +function getSendAmount (state) { + return state.metamask.send.amount +} + +function getSendEditingTransactionId (state) { + return state.metamask.send.editingTransactionId +} + +function getSendErrors (state) { + return state.send.errors +} + +function getSendFrom (state) { + return state.metamask.send.from +} + +function getSendFromBalance (state) { + const from = getSendFrom(state) || getSelectedAccount(state) + return from.balance +} + +function getSendFromObject (state) { + return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state) +} + +function getSendMaxModeState (state) { + return state.metamask.send.maxModeOn +} + +function getSendTo (state) { + return state.metamask.send.to +} + +function getSendToAccounts (state) { + const fromAccounts = accountsWithSendEtherInfoSelector(state) + const addressBookAccounts = getAddressBook(state) + const allAccounts = [...fromAccounts, ...addressBookAccounts] + // TODO: figure out exactly what the below returns and put a descriptive variable name on it + return Object.entries(allAccounts).map(([key, account]) => account) +} + +function getTokenBalance (state) { + return state.metamask.send.tokenBalance +} + +function getTokenExchangeRate (state, tokenSymbol) { + const pair = `${tokenSymbol.toLowerCase()}_eth` + const tokenExchangeRates = state.metamask.tokenExchangeRates + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + + return tokenExchangeRate +} + +function getUnapprovedTxs (state) { + return state.metamask.unapprovedTxs +} + +function transactionsSelector (state) { + const { network, selectedTokenAddress } = state.metamask + const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs) + const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined + const transactions = state.metamask.selectedAddressTxList || [] + const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList) + + return selectedTokenAddress + ? txsToRender + .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress) + .sort((a, b) => b.time - a.time) + : txsToRender + .sort((a, b) => b.time - a.time) +} diff --git a/ui/app/components/send_/send.utils.js b/ui/app/components/send_/send.utils.js new file mode 100644 index 000000000..34275248f --- /dev/null +++ b/ui/app/components/send_/send.utils.js @@ -0,0 +1,283 @@ +const { + addCurrencies, + conversionUtil, + conversionGTE, + multiplyCurrencies, + conversionGreaterThan, + conversionLessThan, +} = require('../../conversion-util') +const { + calcTokenAmount, +} = require('../../token-util') +const { + BASE_TOKEN_GAS_COST, + INSUFFICIENT_FUNDS_ERROR, + INSUFFICIENT_TOKENS_ERROR, + NEGATIVE_ETH_ERROR, + ONE_GWEI_IN_WEI_HEX, + SIMPLE_GAS_COST, + TOKEN_TRANSFER_FUNCTION_SIGNATURE, +} = require('./send.constants') +const abi = require('ethereumjs-abi') +const ethUtil = require('ethereumjs-util') + +module.exports = { + addGasBuffer, + calcGasTotal, + calcTokenBalance, + doesAmountErrorRequireUpdate, + estimateGas, + estimateGasPriceFromRecentBlocks, + generateTokenTransferData, + getAmountErrorObject, + getToAddressForGasUpdate, + isBalanceSufficient, + isTokenBalanceSufficient, + removeLeadingZeroes, +} + +function calcGasTotal (gasLimit, gasPrice) { + return multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) +} + +function isBalanceSufficient ({ + amount = '0x0', + amountConversionRate = 0, + balance, + conversionRate, + gasTotal = '0x0', + primaryCurrency, +}) { + const totalAmount = addCurrencies(amount, gasTotal, { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }) + + const balanceIsSufficient = conversionGTE( + { + value: balance, + fromNumericBase: 'hex', + fromCurrency: primaryCurrency, + conversionRate, + }, + { + value: totalAmount, + fromNumericBase: 'hex', + conversionRate: Number(amountConversionRate) || conversionRate, + fromCurrency: primaryCurrency, + }, + ) + + return balanceIsSufficient +} + +function isTokenBalanceSufficient ({ + amount = '0x0', + tokenBalance, + decimals, +}) { + const amountInDec = conversionUtil(amount, { + fromNumericBase: 'hex', + }) + + const tokenBalanceIsSufficient = conversionGTE( + { + value: tokenBalance, + fromNumericBase: 'dec', + }, + { + value: calcTokenAmount(amountInDec, decimals), + fromNumericBase: 'dec', + }, + ) + + return tokenBalanceIsSufficient +} + +function getAmountErrorObject ({ + amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + selectedToken, + tokenBalance, +}) { + let insufficientFunds = false + if (gasTotal && conversionRate) { + insufficientFunds = !isBalanceSufficient({ + amount: selectedToken ? '0x0' : amount, + amountConversionRate, + balance, + conversionRate, + gasTotal, + primaryCurrency, + }) + } + + let inSufficientTokens = false + if (selectedToken && tokenBalance !== null) { + const { decimals } = selectedToken + inSufficientTokens = !isTokenBalanceSufficient({ + tokenBalance, + amount, + decimals, + }) + } + + const amountLessThanZero = conversionGreaterThan( + { value: 0, fromNumericBase: 'dec' }, + { value: amount, fromNumericBase: 'hex' }, + ) + + let amountError = null + + if (insufficientFunds) { + amountError = INSUFFICIENT_FUNDS_ERROR + } else if (inSufficientTokens) { + amountError = INSUFFICIENT_TOKENS_ERROR + } else if (amountLessThanZero) { + amountError = NEGATIVE_ETH_ERROR + } + + return { amount: amountError } +} + +function calcTokenBalance ({ selectedToken, usersToken }) { + const { decimals } = selectedToken || {} + return calcTokenAmount(usersToken.balance.toString(), decimals) + '' +} + +function doesAmountErrorRequireUpdate ({ + balance, + gasTotal, + prevBalance, + prevGasTotal, + prevTokenBalance, + selectedToken, + tokenBalance, +}) { + const balanceHasChanged = balance !== prevBalance + const gasTotalHasChange = gasTotal !== prevGasTotal + const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance + const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged + + return amountErrorRequiresUpdate +} + +async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to, value, gasPrice, estimateGasMethod }) { + const paramsForGasEstimate = { from: selectedAddress, value, gasPrice } + + if (selectedToken) { + paramsForGasEstimate.value = '0x0' + paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken }) + } + + // if recipient has no code, gas is 21k max: + if (!selectedToken) { + const code = Boolean(to) && await global.eth.getCode(to) + if (!code || code === '0x') { + return SIMPLE_GAS_COST + } + } else if (selectedToken && !to) { + return BASE_TOKEN_GAS_COST + } + + paramsForGasEstimate.to = selectedToken ? selectedToken.address : to + + // if not, fall back to block gasLimit + paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit, 0.95, { + multiplicandBase: 16, + multiplierBase: 10, + roundDown: '0', + toNumericBase: 'hex', + })) + // run tx + return new Promise((resolve, reject) => { + return estimateGasMethod(paramsForGasEstimate, (err, estimatedGas) => { + if (err) { + const simulationFailed = ( + err.message.includes('Transaction execution error.') || + err.message.includes('gas required exceeds allowance or always failing transaction') + ) + if (simulationFailed) { + const estimateWithBuffer = addGasBuffer(paramsForGasEstimate.gas, blockGasLimit, 1.5) + return resolve(ethUtil.addHexPrefix(estimateWithBuffer)) + } else { + return reject(err) + } + } + const estimateWithBuffer = addGasBuffer(estimatedGas.toString(16), blockGasLimit, 1.5) + return resolve(ethUtil.addHexPrefix(estimateWithBuffer)) + }) + }) +} + +function addGasBuffer (initialGasLimitHex, blockGasLimitHex, bufferMultiplier = 1.5) { + const upperGasLimit = multiplyCurrencies(blockGasLimitHex, 0.9, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 10, + numberOfDecimals: '0', + }) + const bufferedGasLimit = multiplyCurrencies(initialGasLimitHex, bufferMultiplier, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 10, + numberOfDecimals: '0', + }) + + // if initialGasLimit is above blockGasLimit, dont modify it + if (conversionGreaterThan( + { value: initialGasLimitHex, fromNumericBase: 'hex' }, + { value: upperGasLimit, fromNumericBase: 'hex' }, + )) return initialGasLimitHex + // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit + if (conversionLessThan( + { value: bufferedGasLimit, fromNumericBase: 'hex' }, + { value: upperGasLimit, fromNumericBase: 'hex' }, + )) return bufferedGasLimit + // otherwise use blockGasLimit + return upperGasLimit +} + +function generateTokenTransferData ({ toAddress = '0x0', amount = '0x0', selectedToken }) { + if (!selectedToken) return + return TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( + abi.rawEncode(['address', 'uint256'], [toAddress, ethUtil.addHexPrefix(amount)]), + x => ('00' + x.toString(16)).slice(-2) + ).join('') +} + +function estimateGasPriceFromRecentBlocks (recentBlocks) { + // Return 1 gwei if no blocks have been observed: + if (!recentBlocks || recentBlocks.length === 0) { + return ONE_GWEI_IN_WEI_HEX + } + + const lowestPrices = recentBlocks.map((block) => { + if (!block.gasPrices || block.gasPrices.length < 1) { + return ONE_GWEI_IN_WEI_HEX + } + return block.gasPrices.reduce((currentLowest, next) => { + return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest + }) + }) + .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1) + + return lowestPrices[Math.floor(lowestPrices.length / 2)] +} + +function getToAddressForGasUpdate (...addresses) { + return [...addresses, ''].find(str => str !== undefined && str !== null).toLowerCase() +} + +function removeLeadingZeroes (str) { + return str.replace(/^0*(?=\d)/, '') +} diff --git a/ui/app/components/send_/send.utils.test.js b/ui/app/components/send_/send.utils.test.js new file mode 100644 index 000000000..36f3a5c10 --- /dev/null +++ b/ui/app/components/send_/send.utils.test.js @@ -0,0 +1,30 @@ +import assert from 'assert' +import { removeLeadingZeroes } from './send.utils' + + +describe('send utils', () => { + describe('removeLeadingZeroes()', () => { + it('should remove leading zeroes from int when user types', () => { + assert.equal(removeLeadingZeroes('0'), '0') + assert.equal(removeLeadingZeroes('1'), '1') + assert.equal(removeLeadingZeroes('00'), '0') + assert.equal(removeLeadingZeroes('01'), '1') + }) + + it('should remove leading zeroes from int when user copy/paste', () => { + assert.equal(removeLeadingZeroes('001'), '1') + }) + + it('should remove leading zeroes from float when user types', () => { + assert.equal(removeLeadingZeroes('0.'), '0.') + assert.equal(removeLeadingZeroes('0.0'), '0.0') + assert.equal(removeLeadingZeroes('0.00'), '0.00') + assert.equal(removeLeadingZeroes('0.001'), '0.001') + assert.equal(removeLeadingZeroes('0.10'), '0.10') + }) + + it('should remove leading zeroes from float when user copy/paste', () => { + assert.equal(removeLeadingZeroes('00.1'), '0.1') + }) + }) +}) diff --git a/ui/app/components/send_/tests/send-component.test.js b/ui/app/components/send_/tests/send-component.test.js new file mode 100644 index 000000000..4ba9b226d --- /dev/null +++ b/ui/app/components/send_/tests/send-component.test.js @@ -0,0 +1,261 @@ +import React from 'react' +import assert from 'assert' +import proxyquire from 'proxyquire' +import { shallow } from 'enzyme' +import sinon from 'sinon' + +import SendHeader from '../send-header/send-header.container' +import SendContent from '../send-content/send-content.component' +import SendFooter from '../send-footer/send-footer.container' + +const propsMethodSpies = { + updateAndSetGasTotal: sinon.spy(), + updateSendErrors: sinon.spy(), + updateSendTokenBalance: sinon.spy(), +} +const utilsMethodStubs = { + getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }), + doesAmountErrorRequireUpdate: sinon.stub().callsFake(obj => obj.balance !== obj.prevBalance), +} + +const SendTransactionScreen = proxyquire('../send.component.js', { + './send.utils': utilsMethodStubs, +}).default + +sinon.spy(SendTransactionScreen.prototype, 'componentDidMount') +sinon.spy(SendTransactionScreen.prototype, 'updateGas') + +describe('Send Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow() + }) + + afterEach(() => { + SendTransactionScreen.prototype.componentDidMount.resetHistory() + SendTransactionScreen.prototype.updateGas.resetHistory() + utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory() + utilsMethodStubs.getAmountErrorObject.resetHistory() + propsMethodSpies.updateAndSetGasTotal.resetHistory() + propsMethodSpies.updateSendErrors.resetHistory() + propsMethodSpies.updateSendTokenBalance.resetHistory() + }) + + it('should call componentDidMount', () => { + assert(SendTransactionScreen.prototype.componentDidMount.calledOnce) + }) + + describe('componentWillMount', () => { + it('should call this.updateGas', () => { + SendTransactionScreen.prototype.updateGas.resetHistory() + propsMethodSpies.updateSendErrors.resetHistory() + assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0) + wrapper.instance().componentWillMount() + assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1) + }) + }) + + describe('componentDidUpdate', () => { + it('should call doesAmountErrorRequireUpdate with the expected params', () => { + utilsMethodStubs.getAmountErrorObject.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: '', + }, + }) + assert(utilsMethodStubs.doesAmountErrorRequireUpdate.calledOnce) + assert.deepEqual( + utilsMethodStubs.doesAmountErrorRequireUpdate.getCall(0).args[0], + { + balance: 'mockBalance', + gasTotal: 'mockGasTotal', + prevBalance: '', + prevGasTotal: undefined, + prevTokenBalance: undefined, + selectedToken: 'mockSelectedToken', + tokenBalance: 'mockTokenBalance', + } + ) + }) + + it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => { + utilsMethodStubs.getAmountErrorObject.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'mockBalance', + }, + }) + assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 0) + }) + + it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => { + utilsMethodStubs.getAmountErrorObject.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'balanceChanged', + }, + }) + assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 1) + assert.deepEqual( + utilsMethodStubs.getAmountErrorObject.getCall(0).args[0], + { + amount: 'mockAmount', + amountConversionRate: 'mockAmountConversionRate', + balance: 'mockBalance', + conversionRate: 10, + gasTotal: 'mockGasTotal', + primaryCurrency: 'mockPrimaryCurrency', + selectedToken: 'mockSelectedToken', + tokenBalance: 'mockTokenBalance', + } + ) + }) + + it('should call updateSendErrors with the expected params', () => { + propsMethodSpies.updateSendErrors.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'balanceChanged', + }, + }) + assert.equal(propsMethodSpies.updateSendErrors.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendErrors.getCall(0).args[0], + { amount: 'mockAmountError'} + ) + }) + + it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => { + SendTransactionScreen.prototype.updateGas.resetHistory() + propsMethodSpies.updateSendTokenBalance.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'balanceChanged', + }, + network: '3', + }) + assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0) + assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0) + }) + + it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => { + wrapper.setProps({ network: 'loading' }) + SendTransactionScreen.prototype.updateGas.resetHistory() + propsMethodSpies.updateSendTokenBalance.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'balanceChanged', + }, + network: '3', + }) + assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0) + assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0) + }) + + it('should call updateSendTokenBalance and this.updateGas with the correct params', () => { + SendTransactionScreen.prototype.updateGas.resetHistory() + propsMethodSpies.updateSendTokenBalance.resetHistory() + wrapper.instance().componentDidUpdate({ + from: { + balance: 'balanceChanged', + }, + network: '2', + }) + assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendTokenBalance.getCall(0).args[0], + { + selectedToken: 'mockSelectedToken', + tokenContract: 'mockTokenContract', + address: 'mockAddress', + } + ) + assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1) + assert.deepEqual( + SendTransactionScreen.prototype.updateGas.getCall(0).args, + [] + ) + }) + }) + + describe('updateGas', () => { + it('should call updateAndSetGasTotal with the correct params if no to prop is passed', () => { + propsMethodSpies.updateAndSetGasTotal.resetHistory() + wrapper.instance().updateGas() + assert.equal(propsMethodSpies.updateAndSetGasTotal.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0], + { + blockGasLimit: 'mockBlockGasLimit', + editingTransactionId: 'mockEditingTransactionId', + gasLimit: 'mockGasLimit', + gasPrice: 'mockGasPrice', + recentBlocks: ['mockBlock'], + selectedAddress: 'mockSelectedAddress', + selectedToken: 'mockSelectedToken', + to: '', + value: 'mockAmount', + } + ) + }) + + it('should call updateAndSetGasTotal with the correct params if a to prop is passed', () => { + propsMethodSpies.updateAndSetGasTotal.resetHistory() + wrapper.setProps({ to: 'someAddress' }) + wrapper.instance().updateGas() + assert.equal( + propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to, + 'someaddress', + ) + }) + + it('should call updateAndSetGasTotal with to set to lowercase if passed', () => { + propsMethodSpies.updateAndSetGasTotal.resetHistory() + wrapper.instance().updateGas({ to: '0xABC' }) + assert.equal(propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to, '0xabc') + }) + }) + + describe('render', () => { + it('should render a page-container class', () => { + assert.equal(wrapper.find('.page-container').length, 1) + }) + + it('should render SendHeader, SendContent and SendFooter', () => { + assert.equal(wrapper.find(SendHeader).length, 1) + assert.equal(wrapper.find(SendContent).length, 1) + assert.equal(wrapper.find(SendFooter).length, 1) + }) + + it('should pass the history prop to SendHeader and SendFooter', () => { + assert.deepEqual( + wrapper.find(SendFooter).props(), + { + history: { mockProp: 'history-abc' }, + } + ) + }) + }) +}) diff --git a/ui/app/components/send_/tests/send-container.test.js b/ui/app/components/send_/tests/send-container.test.js new file mode 100644 index 000000000..91484f4d8 --- /dev/null +++ b/ui/app/components/send_/tests/send-container.test.js @@ -0,0 +1,157 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + updateSendTokenBalance: sinon.spy(), + updateGasData: sinon.spy(), + setGasTotal: sinon.spy(), +} +const duckActionSpies = { + updateSendErrors: sinon.spy(), +} + +proxyquire('../send.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + 'react-router-dom': { withRouter: () => {} }, + 'recompose': { compose: (arg1, arg2) => () => arg2() }, + './send.selectors': { + getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`, + getBlockGasLimit: (s) => `mockBlockGasLimit:${s}`, + getConversionRate: (s) => `mockConversionRate:${s}`, + getCurrentNetwork: (s) => `mockNetwork:${s}`, + getGasLimit: (s) => `mockGasLimit:${s}`, + getGasPrice: (s) => `mockGasPrice:${s}`, + getGasTotal: (s) => `mockGasTotal:${s}`, + getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`, + getRecentBlocks: (s) => `mockRecentBlocks:${s}`, + getSelectedAddress: (s) => `mockSelectedAddress:${s}`, + getSelectedToken: (s) => `mockSelectedToken:${s}`, + getSelectedTokenContract: (s) => `mockTokenContract:${s}`, + getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`, + getSendAmount: (s) => `mockAmount:${s}`, + getSendTo: (s) => `mockTo:${s}`, + getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`, + getSendFromObject: (s) => `mockFrom:${s}`, + getTokenBalance: (s) => `mockTokenBalance:${s}`, + }, + '../../actions': actionSpies, + '../../ducks/send.duck': duckActionSpies, + './send.utils.js': { + calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice, + }, +}) + +describe('send container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + amount: 'mockAmount:mockState', + amountConversionRate: 'mockAmountConversionRate:mockState', + blockGasLimit: 'mockBlockGasLimit:mockState', + conversionRate: 'mockConversionRate:mockState', + editingTransactionId: 'mockEditingTransactionId:mockState', + from: 'mockFrom:mockState', + gasLimit: 'mockGasLimit:mockState', + gasPrice: 'mockGasPrice:mockState', + gasTotal: 'mockGasTotal:mockState', + network: 'mockNetwork:mockState', + primaryCurrency: 'mockPrimaryCurrency:mockState', + recentBlocks: 'mockRecentBlocks:mockState', + selectedAddress: 'mockSelectedAddress:mockState', + selectedToken: 'mockSelectedToken:mockState', + to: 'mockTo:mockState', + tokenBalance: 'mockTokenBalance:mockState', + tokenContract: 'mockTokenContract:mockState', + tokenToFiatRate: 'mockTokenToFiatRate:mockState', + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('updateAndSetGasTotal()', () => { + const mockProps = { + blockGasLimit: 'mockBlockGasLimit', + editingTransactionId: '0x2', + gasLimit: '0x3', + gasPrice: '0x4', + recentBlocks: ['mockBlock'], + selectedAddress: '0x4', + selectedToken: { address: '0x1' }, + to: 'mockTo', + value: 'mockValue', + } + + it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => { + mapDispatchToPropsObject.updateAndSetGasTotal(mockProps) + assert(dispatchSpy.calledOnce) + assert.equal( + actionSpies.setGasTotal.getCall(0).args[0], + '0x30x4' + ) + }) + + it('should dispatch an updateGasData action when editingTransactionId is falsy', () => { + const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value } = mockProps + mapDispatchToPropsObject.updateAndSetGasTotal( + Object.assign({}, mockProps, {editingTransactionId: false}) + ) + assert(dispatchSpy.calledOnce) + assert.deepEqual( + actionSpies.updateGasData.getCall(0).args[0], + { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value } + ) + }) + }) + + describe('updateSendTokenBalance()', () => { + const mockProps = { + address: '0x10', + tokenContract: '0x00a', + selectedToken: {address: '0x1'}, + } + + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendTokenBalance(Object.assign({}, mockProps)) + assert(dispatchSpy.calledOnce) + assert.deepEqual( + actionSpies.updateSendTokenBalance.getCall(0).args[0], + mockProps + ) + }) + }) + + describe('updateSendErrors()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendErrors('mockError') + assert(dispatchSpy.calledOnce) + assert.equal( + duckActionSpies.updateSendErrors.getCall(0).args[0], + 'mockError' + ) + }) + }) + + }) + +}) diff --git a/ui/app/components/send_/tests/send-selectors-test-data.js b/ui/app/components/send_/tests/send-selectors-test-data.js new file mode 100644 index 000000000..8f9c19314 --- /dev/null +++ b/ui/app/components/send_/tests/send-selectors-test-data.js @@ -0,0 +1,230 @@ +module.exports = { + 'metamask': { + 'isInitialized': true, + 'isUnlocked': true, + 'featureFlags': {'betaUI': true}, + 'rpcTarget': 'https://rawtestrpc.metamask.io/', + 'identities': { + '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': { + 'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + 'name': 'Send Account 1', + }, + '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': { + 'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + 'name': 'Send Account 2', + }, + '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': { + 'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + 'name': 'Send Account 3', + }, + '0xd85a4b6a394794842887b8284293d69163007bbb': { + 'address': '0xd85a4b6a394794842887b8284293d69163007bbb', + 'name': 'Send Account 4', + }, + }, + 'currentBlockGasLimit': '0x4c1878', + 'currentCurrency': 'USD', + 'conversionRate': 1200.88200327, + 'conversionDate': 1489013762, + 'noActiveNotices': true, + 'frequentRpcList': [], + 'network': '3', + 'accounts': { + '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': { + 'code': '0x', + 'balance': '0x47c9d71831c76efe', + 'nonce': '0x1b', + 'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + }, + '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': { + 'code': '0x', + 'balance': '0x37452b1315889f80', + 'nonce': '0xa', + 'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + }, + '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': { + 'code': '0x', + 'balance': '0x30c9d71831c76efe', + 'nonce': '0x1c', + 'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + }, + '0xd85a4b6a394794842887b8284293d69163007bbb': { + 'code': '0x', + 'balance': '0x0', + 'nonce': '0x0', + 'address': '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + }, + 'addressBook': [ + { + 'address': '0x06195827297c7a80a443b6894d3bdb8824b43896', + 'name': 'Address Book Account 1', + }, + ], + 'tokens': [ + { + 'address': '0x1a195821297c7a80a433b6894d3bdb8824b43896', + 'decimals': 18, + 'symbol': 'ABC', + }, + { + 'address': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + 'decimals': 4, + 'symbol': 'DEF', + }, + { + 'address': '0xa42084c8d1d9a2198631988579bb36b48433a72b', + 'decimals': 18, + 'symbol': 'GHI', + }, + ], + 'tokenExchangeRates': { + 'def_eth': { + rate: 2.0, + }, + 'ghi_eth': { + rate: 31.01, + }, + }, + 'transactions': {}, + 'selectedAddressTxList': [ + { + 'id': 'mockTokenTx1', + 'txParams': { + 'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + 'time': 1700000000000, + }, + { + 'id': 'mockTokenTx2', + 'txParams': { + 'to': '0xafaketokenaddress', + }, + 'time': 1600000000000, + }, + { + 'id': 'mockTokenTx3', + 'txParams': { + 'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + 'time': 1500000000000, + }, + { + 'id': 'mockEthTx1', + 'txParams': { + 'to': '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + 'time': 1400000000000, + }, + ], + 'selectedTokenAddress': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + 'unapprovedMsgs': { + '0xabc': { id: 'unapprovedMessage1', 'time': 1650000000000 }, + '0xdef': { id: 'unapprovedMessage2', 'time': 1550000000000 }, + '0xghi': { id: 'unapprovedMessage3', 'time': 1450000000000 }, + }, + 'unapprovedMsgCount': 0, + 'unapprovedPersonalMsgs': {}, + 'unapprovedPersonalMsgCount': 0, + 'keyringTypes': [ + 'Simple Key Pair', + 'HD Key Tree', + ], + 'keyrings': [ + { + 'type': 'HD Key Tree', + 'accounts': [ + 'fdea65c8e26263f6d9a1b5de9555d2931a33b825', + 'c5b8dbac4c1d3f152cdeb400e2313f309c410acb', + '2f8d4a878cfa04a6e60d46362f5644deab66572d', + ], + }, + { + 'type': 'Simple Key Pair', + 'accounts': [ + '0xd85a4b6a394794842887b8284293d69163007bbb', + ], + }, + ], + 'selectedAddress': '0xd85a4b6a394794842887b8284293d69163007bbb', + 'provider': { + 'type': 'testnet', + }, + 'shapeShiftTxList': [ + { id: 'shapeShiftTx1', 'time': 1675000000000 }, + { id: 'shapeShiftTx2', 'time': 1575000000000 }, + { id: 'shapeShiftTx3', 'time': 1475000000000 }, + ], + 'lostAccounts': [], + 'send': { + 'gasLimit': '0xFFFF', + 'gasPrice': '0xaa', + 'gasTotal': '0xb451dc41b578', + 'tokenBalance': 3434, + 'from': { + 'address': '0xabcdefg', + 'balance': '0x5f4e3d2c1', + }, + 'to': '0x987fedabc', + 'amount': '0x080', + 'memo': '', + 'errors': { + 'someError': null, + }, + 'maxModeOn': false, + 'editingTransactionId': 97531, + 'forceGasMin': true, + }, + 'unapprovedTxs': { + '4768706228115573': { + 'id': 4768706228115573, + 'time': 1487363153561, + 'status': 'unapproved', + 'gasMultiplier': 1, + 'metamaskNetworkId': '3', + 'txParams': { + 'from': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + 'to': '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761', + 'value': '0xde0b6b3a7640000', + 'metamaskId': 4768706228115573, + 'metamaskNetworkId': '3', + 'gas': '0x5209', + }, + 'gasLimitSpecified': false, + 'estimatedGas': '0x5209', + 'txFee': '17e0186e60800', + 'txValue': 'de0b6b3a7640000', + 'maxCost': 'de234b52e4a0800', + 'gasPrice': '4a817c800', + }, + }, + 'currentLocale': 'en', + recentBlocks: ['mockBlock1', 'mockBlock2', 'mockBlock3'], + }, + 'appState': { + 'menuOpen': false, + 'currentView': { + 'name': 'accountDetail', + 'detailView': null, + 'context': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + }, + 'accountDetail': { + 'subview': 'transactions', + }, + 'modal': { + 'modalState': {}, + 'previousModalState': {}, + }, + 'transForward': true, + 'isLoading': false, + 'warning': null, + 'scrollToBottom': false, + 'forgottenPassword': null, + }, + 'identities': {}, + 'send': { + 'fromDropdownOpen': false, + 'toDropdownOpen': false, + 'errors': { 'someError': null }, + }, +} diff --git a/ui/app/components/send_/tests/send-selectors.test.js b/ui/app/components/send_/tests/send-selectors.test.js new file mode 100644 index 000000000..218da656b --- /dev/null +++ b/ui/app/components/send_/tests/send-selectors.test.js @@ -0,0 +1,685 @@ +import assert from 'assert' +import sinon from 'sinon' +import selectors from '../send.selectors.js' +const { + accountsWithSendEtherInfoSelector, + // autoAddToBetaUI, + getAddressBook, + getBlockGasLimit, + getAmountConversionRate, + getConversionRate, + getCurrentAccountWithSendEtherInfo, + getCurrentCurrency, + getCurrentNetwork, + getCurrentViewContext, + getForceGasMin, + getGasLimit, + getGasPrice, + getGasTotal, + getPrimaryCurrency, + getRecentBlocks, + getSelectedAccount, + getSelectedAddress, + getSelectedIdentity, + getSelectedToken, + getSelectedTokenContract, + getSelectedTokenExchangeRate, + getSelectedTokenToFiatRate, + getSendAmount, + getSendEditingTransactionId, + getSendErrors, + getSendFrom, + getSendFromBalance, + getSendFromObject, + getSendMaxModeState, + getSendTo, + getSendToAccounts, + getTokenBalance, + getTokenExchangeRate, + getUnapprovedTxs, + transactionsSelector, +} = selectors +import mockState from './send-selectors-test-data' + +describe('send selectors', () => { + const tempGlobalEth = Object.assign({}, global.eth) + beforeEach(() => { + global.eth = { + contract: sinon.stub().returns({ + at: address => 'mockAt:' + address, + }), + } + }) + + afterEach(() => { + global.eth = tempGlobalEth + }) + + describe('accountsWithSendEtherInfoSelector()', () => { + it('should return an array of account objects with name info from identities', () => { + assert.deepEqual( + accountsWithSendEtherInfoSelector(mockState), + [ + { + code: '0x', + balance: '0x47c9d71831c76efe', + nonce: '0x1b', + address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + name: 'Send Account 1', + }, + { + code: '0x', + balance: '0x37452b1315889f80', + nonce: '0xa', + address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + name: 'Send Account 2', + }, + { + code: '0x', + balance: '0x30c9d71831c76efe', + nonce: '0x1c', + address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + name: 'Send Account 3', + }, + { + code: '0x', + balance: '0x0', + nonce: '0x0', + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + name: 'Send Account 4', + }, + ] + ) + }) + }) + + // describe('autoAddToBetaUI()', () => { + // it('should', () => { + // assert.deepEqual( + // autoAddToBetaUI(mockState), + + // ) + // }) + // }) + + describe('getAddressBook()', () => { + it('should return the address book', () => { + assert.deepEqual( + getAddressBook(mockState), + [ + { + address: '0x06195827297c7a80a443b6894d3bdb8824b43896', + name: 'Address Book Account 1', + }, + ], + ) + }) + }) + + describe('getAmountConversionRate()', () => { + it('should return the token conversion rate if a token is selected', () => { + assert.equal( + getAmountConversionRate(mockState), + 2401.76400654 + ) + }) + + it('should return the eth conversion rate if no token is selected', () => { + const editedMockState = { + metamask: Object.assign({}, mockState.metamask, { selectedTokenAddress: null }), + } + assert.equal( + getAmountConversionRate(editedMockState), + 1200.88200327 + ) + }) + }) + + describe('getBlockGasLimit', () => { + it('should return the current block gas limit', () => { + assert.deepEqual( + getBlockGasLimit(mockState), + '0x4c1878' + ) + }) + }) + + describe('getConversionRate()', () => { + it('should return the eth conversion rate', () => { + assert.deepEqual( + getConversionRate(mockState), + 1200.88200327 + ) + }) + }) + + describe('getCurrentAccountWithSendEtherInfo()', () => { + it('should return the currently selected account with identity info', () => { + assert.deepEqual( + getCurrentAccountWithSendEtherInfo(mockState), + { + code: '0x', + balance: '0x0', + nonce: '0x0', + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + name: 'Send Account 4', + } + ) + }) + }) + + describe('getCurrentCurrency()', () => { + it('should return the currently selected currency', () => { + assert.equal( + getCurrentCurrency(mockState), + 'USD' + ) + }) + }) + + describe('getCurrentNetwork()', () => { + it('should return the id of the currently selected network', () => { + assert.equal( + getCurrentNetwork(mockState), + '3' + ) + }) + }) + + describe('getCurrentViewContext()', () => { + it('should return the context of the current view', () => { + assert.equal( + getCurrentViewContext(mockState), + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc' + ) + }) + }) + + describe('getForceGasMin()', () => { + it('should get the send.forceGasMin property', () => { + assert.equal( + getForceGasMin(mockState), + true + ) + }) + }) + + describe('getGasLimit()', () => { + it('should return the send.gasLimit', () => { + assert.equal( + getGasLimit(mockState), + '0xFFFF' + ) + }) + }) + + describe('getGasPrice()', () => { + it('should return the send.gasPrice', () => { + assert.equal( + getGasPrice(mockState), + '0xaa' + ) + }) + }) + + describe('getGasTotal()', () => { + it('should return the send.gasTotal', () => { + assert.equal( + getGasTotal(mockState), + '0xb451dc41b578' + ) + }) + }) + + describe('getPrimaryCurrency()', () => { + it('should return the symbol of the selected token', () => { + assert.equal( + getPrimaryCurrency(mockState), + 'DEF' + ) + }) + }) + + describe('getRecentBlocks()', () => { + it('should return the recent blocks', () => { + assert.deepEqual( + getRecentBlocks(mockState), + ['mockBlock1', 'mockBlock2', 'mockBlock3'] + ) + }) + }) + + describe('getSelectedAccount()', () => { + it('should return the currently selected account', () => { + assert.deepEqual( + getSelectedAccount(mockState), + { + code: '0x', + balance: '0x0', + nonce: '0x0', + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + } + ) + }) + }) + + describe('getSelectedAddress()', () => { + it('should', () => { + assert.equal( + getSelectedAddress(mockState), + '0xd85a4b6a394794842887b8284293d69163007bbb' + ) + }) + }) + + describe('getSelectedIdentity()', () => { + it('should return the identity object of the currently selected address', () => { + assert.deepEqual( + getSelectedIdentity(mockState), + { + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + name: 'Send Account 4', + } + ) + }) + }) + + describe('getSelectedToken()', () => { + it('should return the currently selected token if selected', () => { + assert.deepEqual( + getSelectedToken(mockState), + { + address: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + decimals: 4, + symbol: 'DEF', + } + ) + }) + + it('should return the send token if none is currently selected, but a send token exists', () => { + const mockSendToken = { + address: '0x123456708414189a58339873ab429b6c47ab92d3', + decimals: 4, + symbol: 'JKL', + } + const editedMockState = { + metamask: Object.assign({}, mockState.metamask, { + selectedTokenAddress: null, + send: { + token: mockSendToken, + }, + }), + } + assert.deepEqual( + getSelectedToken(editedMockState), + Object.assign({}, mockSendToken) + ) + }) + }) + + describe('getSelectedTokenContract()', () => { + it('should return the contract at the selected token address', () => { + assert.equal( + getSelectedTokenContract(mockState), + 'mockAt:0x8d6b81208414189a58339873ab429b6c47ab92d3' + ) + }) + + it('should return null if no token is selected', () => { + const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false }) + assert.equal( + getSelectedTokenContract(Object.assign({}, mockState, { metamask: modifiedMetamaskState })), + null + ) + }) + }) + + describe('getSelectedTokenExchangeRate()', () => { + it('should return the exchange rate for the selected token', () => { + assert.equal( + getSelectedTokenExchangeRate(mockState), + 2.0 + ) + }) + }) + + describe('getSelectedTokenToFiatRate()', () => { + it('should return rate for converting the selected token to fiat', () => { + assert.equal( + getSelectedTokenToFiatRate(mockState), + 2401.76400654 + ) + }) + }) + + describe('getSendAmount()', () => { + it('should return the send.amount', () => { + assert.equal( + getSendAmount(mockState), + '0x080' + ) + }) + }) + + describe('getSendEditingTransactionId()', () => { + it('should return the send.editingTransactionId', () => { + assert.equal( + getSendEditingTransactionId(mockState), + 97531 + ) + }) + }) + + describe('getSendErrors()', () => { + it('should return the send.errors', () => { + assert.deepEqual( + getSendErrors(mockState), + { someError: null } + ) + }) + }) + + describe('getSendFrom()', () => { + it('should return the send.from', () => { + assert.deepEqual( + getSendFrom(mockState), + { + address: '0xabcdefg', + balance: '0x5f4e3d2c1', + } + ) + }) + }) + + describe('getSendFromBalance()', () => { + it('should get the send.from balance if it exists', () => { + assert.equal( + getSendFromBalance(mockState), + '0x5f4e3d2c1' + ) + }) + + it('should get the selected account balance if the send.from does not exist', () => { + const editedMockState = { + metamask: Object.assign({}, mockState.metamask, { + send: { + from: null, + }, + }), + } + assert.equal( + getSendFromBalance(editedMockState), + '0x0' + ) + }) + }) + + describe('getSendFromObject()', () => { + it('should return send.from if it exists', () => { + assert.deepEqual( + getSendFromObject(mockState), + { + address: '0xabcdefg', + balance: '0x5f4e3d2c1', + } + ) + }) + + it('should return the current account with send ether info if send.from does not exist', () => { + const editedMockState = { + metamask: Object.assign({}, mockState.metamask, { + send: { + from: null, + }, + }), + } + assert.deepEqual( + getSendFromObject(editedMockState), + { + code: '0x', + balance: '0x0', + nonce: '0x0', + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + name: 'Send Account 4', + } + ) + }) + }) + + describe('getSendMaxModeState()', () => { + it('should return send.maxModeOn', () => { + assert.equal( + getSendMaxModeState(mockState), + false + ) + }) + }) + + describe('getSendTo()', () => { + it('should return send.to', () => { + assert.equal( + getSendTo(mockState), + '0x987fedabc' + ) + }) + }) + + describe('getSendToAccounts()', () => { + it('should return an array including all the users accounts and the address book', () => { + assert.deepEqual( + getSendToAccounts(mockState), + [ + { + code: '0x', + balance: '0x47c9d71831c76efe', + nonce: '0x1b', + address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + name: 'Send Account 1', + }, + { + code: '0x', + balance: '0x37452b1315889f80', + nonce: '0xa', + address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + name: 'Send Account 2', + }, + { + code: '0x', + balance: '0x30c9d71831c76efe', + nonce: '0x1c', + address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + name: 'Send Account 3', + }, + { + code: '0x', + balance: '0x0', + nonce: '0x0', + address: '0xd85a4b6a394794842887b8284293d69163007bbb', + name: 'Send Account 4', + }, + { + address: '0x06195827297c7a80a443b6894d3bdb8824b43896', + name: 'Address Book Account 1', + }, + ] + ) + }) + }) + + describe('getTokenBalance()', () => { + it('should', () => { + assert.equal( + getTokenBalance(mockState), + 3434 + ) + }) + }) + + describe('getTokenExchangeRate()', () => { + it('should return the passed tokens exchange rates', () => { + assert.equal( + getTokenExchangeRate(mockState, 'GHI'), + 31.01 + ) + }) + }) + + describe('getUnapprovedTxs()', () => { + it('should return the unapproved txs', () => { + assert.deepEqual( + getUnapprovedTxs(mockState), + { + 4768706228115573: { + id: 4768706228115573, + time: 1487363153561, + status: 'unapproved', + gasMultiplier: 1, + metamaskNetworkId: '3', + txParams: { + from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + to: '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761', + value: '0xde0b6b3a7640000', + metamaskId: 4768706228115573, + metamaskNetworkId: '3', + gas: '0x5209', + }, + gasLimitSpecified: false, + estimatedGas: '0x5209', + txFee: '17e0186e60800', + txValue: 'de0b6b3a7640000', + maxCost: 'de234b52e4a0800', + gasPrice: '4a817c800', + }, + } + ) + }) + }) + + describe('transactionsSelector()', () => { + it('should return the selected addresses selected token transactions', () => { + assert.deepEqual( + transactionsSelector(mockState), + [ + { + id: 'mockTokenTx1', + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + time: 1700000000000, + }, + { + id: 'mockTokenTx3', + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + time: 1500000000000, + }, + ] + ) + }) + + it('should return all transactions if no token is selected', () => { + const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false }) + const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState }) + assert.deepEqual( + transactionsSelector(modifiedState), + [ + { + id: 'mockTokenTx1', + time: 1700000000000, + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + }, + { + id: 'unapprovedMessage1', + time: 1650000000000, + }, + { + id: 'mockTokenTx2', + time: 1600000000000, + txParams: { + to: '0xafaketokenaddress', + }, + }, + { + id: 'unapprovedMessage2', + time: 1550000000000, + }, + { + id: 'mockTokenTx3', + time: 1500000000000, + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + }, + { + id: 'unapprovedMessage3', + time: 1450000000000, + }, + { + id: 'mockEthTx1', + time: 1400000000000, + txParams: { + to: '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + }, + ] + ) + }) + + it('should return shapeshift transactions if current network is 1', () => { + const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false, network: '1' }) + const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState }) + assert.deepEqual( + transactionsSelector(modifiedState), + [ + { + id: 'mockTokenTx1', + time: 1700000000000, + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + }, + { id: 'shapeShiftTx1', 'time': 1675000000000 }, + { + id: 'unapprovedMessage1', + time: 1650000000000, + }, + { + id: 'mockTokenTx2', + time: 1600000000000, + txParams: { + to: '0xafaketokenaddress', + }, + }, + { id: 'shapeShiftTx2', 'time': 1575000000000 }, + { + id: 'unapprovedMessage2', + time: 1550000000000, + }, + { + id: 'mockTokenTx3', + time: 1500000000000, + txParams: { + to: '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + }, + { id: 'shapeShiftTx3', 'time': 1475000000000 }, + { + id: 'unapprovedMessage3', + time: 1450000000000, + }, + { + id: 'mockEthTx1', + time: 1400000000000, + txParams: { + to: '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + }, + ] + ) + }) + }) + +}) diff --git a/ui/app/components/send_/tests/send-utils.test.js b/ui/app/components/send_/tests/send-utils.test.js new file mode 100644 index 000000000..a518a64e9 --- /dev/null +++ b/ui/app/components/send_/tests/send-utils.test.js @@ -0,0 +1,442 @@ +import assert from 'assert' +import sinon from 'sinon' +import proxyquire from 'proxyquire' +import { + BASE_TOKEN_GAS_COST, + ONE_GWEI_IN_WEI_HEX, + SIMPLE_GAS_COST, +} from '../send.constants' +const { + addCurrencies, + subtractCurrencies, +} = require('../../../conversion-util') + +const { + INSUFFICIENT_FUNDS_ERROR, + INSUFFICIENT_TOKENS_ERROR, +} = require('../send.constants') + +const stubs = { + addCurrencies: sinon.stub().callsFake((a, b, obj) => a + b), + conversionUtil: sinon.stub().callsFake((val, obj) => parseInt(val, 16)), + conversionGTE: sinon.stub().callsFake((obj1, obj2) => obj1.value >= obj2.value), + multiplyCurrencies: sinon.stub().callsFake((a, b) => `${a}x${b}`), + calcTokenAmount: sinon.stub().callsFake((a, d) => 'calc:' + a + d), + rawEncode: sinon.stub().returns([16, 1100]), + conversionGreaterThan: sinon.stub().callsFake((obj1, obj2) => obj1.value > obj2.value), + conversionLessThan: sinon.stub().callsFake((obj1, obj2) => obj1.value < obj2.value), +} + +const sendUtils = proxyquire('../send.utils.js', { + '../../conversion-util': { + addCurrencies: stubs.addCurrencies, + conversionUtil: stubs.conversionUtil, + conversionGTE: stubs.conversionGTE, + multiplyCurrencies: stubs.multiplyCurrencies, + conversionGreaterThan: stubs.conversionGreaterThan, + conversionLessThan: stubs.conversionLessThan, + }, + '../../token-util': { calcTokenAmount: stubs.calcTokenAmount }, + 'ethereumjs-abi': { + rawEncode: stubs.rawEncode, + }, +}) + +const { + calcGasTotal, + estimateGas, + doesAmountErrorRequireUpdate, + estimateGasPriceFromRecentBlocks, + generateTokenTransferData, + getAmountErrorObject, + getToAddressForGasUpdate, + calcTokenBalance, + isBalanceSufficient, + isTokenBalanceSufficient, +} = sendUtils + +describe('send utils', () => { + + describe('calcGasTotal()', () => { + it('should call multiplyCurrencies with the correct params and return the multiplyCurrencies return', () => { + const result = calcGasTotal(12, 15) + assert.equal(result, '12x15') + const call_ = stubs.multiplyCurrencies.getCall(0).args + assert.deepEqual( + call_, + [12, 15, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + } ] + ) + }) + }) + + describe('doesAmountErrorRequireUpdate()', () => { + const config = { + 'should return true if balances are different': { + balance: 0, + prevBalance: 1, + expectedResult: true, + }, + 'should return true if gasTotals are different': { + gasTotal: 0, + prevGasTotal: 1, + expectedResult: true, + }, + 'should return true if token balances are different': { + tokenBalance: 0, + prevTokenBalance: 1, + selectedToken: 'someToken', + expectedResult: true, + }, + 'should return false if they are all the same': { + balance: 1, + prevBalance: 1, + gasTotal: 1, + prevGasTotal: 1, + tokenBalance: 1, + prevTokenBalance: 1, + selectedToken: 'someToken', + expectedResult: false, + }, + } + Object.entries(config).map(([description, obj]) => { + it(description, () => { + assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult) + }) + }) + + }) + + describe('generateTokenTransferData()', () => { + it('should return undefined if not passed a selected token', () => { + assert.equal(generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: false}), undefined) + }) + + it('should call abi.rawEncode with the correct params', () => { + stubs.rawEncode.resetHistory() + generateTokenTransferData({ toAddress: 'mockAddress', amount: 'ab', selectedToken: true}) + assert.deepEqual( + stubs.rawEncode.getCall(0).args, + [['address', 'uint256'], ['mockAddress', '0xab']] + ) + }) + + it('should return encoded token transfer data', () => { + assert.equal( + generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: true}), + '0xa9059cbb104c' + ) + }) + }) + + describe('getAmountErrorObject()', () => { + const config = { + 'should return insufficientFunds error if isBalanceSufficient returns false': { + amount: 15, + amountConversionRate: 2, + balance: 1, + conversionRate: 3, + gasTotal: 17, + primaryCurrency: 'ABC', + expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR }, + }, + 'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': { + amount: '0x10', + amountConversionRate: 2, + balance: 100, + conversionRate: 3, + decimals: 10, + gasTotal: 17, + primaryCurrency: 'ABC', + selectedToken: 'someToken', + tokenBalance: 123, + expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR }, + }, + } + Object.entries(config).map(([description, obj]) => { + it(description, () => { + assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult) + }) + }) + }) + + describe('calcTokenBalance()', () => { + it('should return the calculated token blance', () => { + assert.equal(calcTokenBalance({ + selectedToken: { + decimals: 11, + }, + usersToken: { + balance: 20, + }, + }), 'calc:2011') + }) + }) + + describe('isBalanceSufficient()', () => { + it('should correctly call addCurrencies and return the result of calling conversionGTE', () => { + stubs.conversionGTE.resetHistory() + const result = isBalanceSufficient({ + amount: 15, + amountConversionRate: 2, + balance: 100, + conversionRate: 3, + gasTotal: 17, + primaryCurrency: 'ABC', + }) + assert.deepEqual( + stubs.addCurrencies.getCall(0).args, + [ + 15, 17, { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }, + ] + ) + assert.deepEqual( + stubs.conversionGTE.getCall(0).args, + [ + { + value: 100, + fromNumericBase: 'hex', + fromCurrency: 'ABC', + conversionRate: 3, + }, + { + value: 32, + fromNumericBase: 'hex', + conversionRate: 2, + fromCurrency: 'ABC', + }, + ] + ) + + assert.equal(result, true) + }) + }) + + describe('isTokenBalanceSufficient()', () => { + it('should correctly call conversionUtil and return the result of calling conversionGTE', () => { + stubs.conversionGTE.resetHistory() + const result = isTokenBalanceSufficient({ + amount: '0x10', + tokenBalance: 123, + decimals: 10, + }) + assert.deepEqual( + stubs.conversionUtil.getCall(0).args, + [ + '0x10', { + fromNumericBase: 'hex', + }, + ] + ) + assert.deepEqual( + stubs.conversionGTE.getCall(0).args, + [ + { + value: 123, + fromNumericBase: 'dec', + }, + { + value: 'calc:1610', + fromNumericBase: 'dec', + }, + ] + ) + + assert.equal(result, false) + }) + }) + + describe('estimateGas', () => { + const baseMockParams = { + blockGasLimit: '0x64', + selectedAddress: 'mockAddress', + to: '0xisContract', + estimateGasMethod: sinon.stub().callsFake( + (data, cb) => cb( + data.to.match(/willFailBecauseOf:/) ? { message: data.to.match(/:(.+)$/)[1] } : null, + { toString: (n) => `0xabc${n}` } + ) + ), + } + const baseExpectedCall = { + from: 'mockAddress', + gas: '0x64x0.95', + to: '0xisContract', + } + + beforeEach(() => { + global.eth = { + getCode: sinon.stub().callsFake( + (address) => Promise.resolve(address.match(/isContract/) ? 'not-0x' : '0x') + ), + } + }) + + afterEach(() => { + baseMockParams.estimateGasMethod.resetHistory() + global.eth.getCode.resetHistory() + }) + + it('should call ethQuery.estimateGas with the expected params', async () => { + const result = await sendUtils.estimateGas(baseMockParams) + assert.equal(baseMockParams.estimateGasMethod.callCount, 1) + assert.deepEqual( + baseMockParams.estimateGasMethod.getCall(0).args[0], + Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall) + ) + assert.equal(result, '0xabc16') + }) + + it('should call ethQuery.estimateGas with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => { + const result = await estimateGas(Object.assign({}, baseMockParams, { blockGasLimit: '0xbcd' })) + assert.equal(baseMockParams.estimateGasMethod.callCount, 1) + assert.deepEqual( + baseMockParams.estimateGasMethod.getCall(0).args[0], + Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall, { gas: '0xbcdx0.95' }) + ) + assert.equal(result, '0xabc16x1.5') + }) + + it('should call ethQuery.estimateGas with a value of 0x0 and the expected data and to if passed a selectedToken', async () => { + const result = await estimateGas(Object.assign({ data: 'mockData', selectedToken: { address: 'mockAddress' } }, baseMockParams)) + assert.equal(baseMockParams.estimateGasMethod.callCount, 1) + assert.deepEqual( + baseMockParams.estimateGasMethod.getCall(0).args[0], + Object.assign({}, baseExpectedCall, { + gasPrice: undefined, + value: '0x0', + data: '0xa9059cbb104c', + to: 'mockAddress', + }) + ) + assert.equal(result, '0xabc16') + }) + + it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => { + assert.equal(baseMockParams.estimateGasMethod.callCount, 0) + const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' })) + assert.equal(result, SIMPLE_GAS_COST) + }) + + it(`should return ${SIMPLE_GAS_COST} if not passed a selectedToken or truthy to address`, async () => { + assert.equal(baseMockParams.estimateGasMethod.callCount, 0) + const result = await estimateGas(Object.assign({}, baseMockParams, { to: null })) + assert.equal(result, SIMPLE_GAS_COST) + }) + + it(`should not return ${SIMPLE_GAS_COST} if passed a selectedToken`, async () => { + assert.equal(baseMockParams.estimateGasMethod.callCount, 0) + const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123', selectedToken: { address: '' } })) + assert.notEqual(result, SIMPLE_GAS_COST) + }) + + it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => { + const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } })) + assert.equal(result, BASE_TOKEN_GAS_COST) + }) + + it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => { + const result = await estimateGas(Object.assign({}, baseMockParams, { + to: 'isContract willFailBecauseOf:Transaction execution error.', + })) + assert.equal(result, '0x64x0.95') + }) + + it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => { + const result = await estimateGas(Object.assign({}, baseMockParams, { + to: 'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.', + })) + assert.equal(result, '0x64x0.95') + }) + + it(`should reject other errors`, async () => { + try { + await estimateGas(Object.assign({}, baseMockParams, { + to: 'isContract willFailBecauseOf:some other error', + })) + } catch (err) { + assert.deepEqual(err, { message: 'some other error' }) + } + }) + }) + + describe('estimateGasPriceFromRecentBlocks', () => { + const ONE_GWEI_IN_WEI_HEX_PLUS_ONE = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }) + const ONE_GWEI_IN_WEI_HEX_PLUS_TWO = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x2', { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }) + const ONE_GWEI_IN_WEI_HEX_MINUS_ONE = subtractCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + }) + + it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is falsy`, () => { + assert.equal(estimateGasPriceFromRecentBlocks(), ONE_GWEI_IN_WEI_HEX) + }) + + it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is empty`, () => { + assert.equal(estimateGasPriceFromRecentBlocks([]), ONE_GWEI_IN_WEI_HEX) + }) + + it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has no gas prices`, () => { + const mockRecentBlocks = [ + { gasPrices: null }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] }, + ] + assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX) + }) + + it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has empty gas prices`, () => { + const mockRecentBlocks = [ + { gasPrices: [] }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] }, + ] + assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX) + }) + + it(`should return the middle value of all blocks lowest prices`, () => { + const mockRecentBlocks = [ + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_TWO ] }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] }, + { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] }, + ] + assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX_PLUS_ONE) + }) + + it(`should work if a block has multiple gas prices`, () => { + const mockRecentBlocks = [ + { gasPrices: [ '0x1', '0x2', '0x3', '0x4', '0x5' ] }, + { gasPrices: [ '0x101', '0x100', '0x103', '0x104', '0x102' ] }, + { gasPrices: [ '0x150', '0x50', '0x100', '0x200', '0x5' ] }, + ] + assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), '0x5') + }) + }) + + describe('getToAddressForGasUpdate()', () => { + it('should return empty string if all params are undefined or null', () => { + assert.equal(getToAddressForGasUpdate(undefined, null), '') + }) + + it('should return the first string that is not defined or null in lower case', () => { + assert.equal(getToAddressForGasUpdate('A', null), 'a') + assert.equal(getToAddressForGasUpdate(undefined, 'B'), 'b') + }) + }) +}) diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 93d2023b5..2c4ba40bf 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -181,7 +181,7 @@ ShapeshiftForm.prototype.render = function () { return h('div.shapeshift-form-wrapper', [ showQrCode ? this.renderQrCode() - : h('div.shapeshift-form', [ + : h('div.modal-shapeshift-form', [ h('div.shapeshift-form__selectors', [ h('div.shapeshift-form__selector', [ diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index ab780dcf4..bbb340fcf 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -178,7 +178,14 @@ SignatureRequest.prototype.renderBody = function () { rows = data } else if (type === 'eth_sign') { rows = [{ name: this.context.t('message'), value: data }] - notice = this.context.t('signNotice') + notice = [this.context.t('signNotice'), + h('span.request-signature__help-link', { + onClick: () => { + global.platform.openWindow({ + url: 'https://consensys.zendesk.com/hc/en-us/articles/360004427792', + }) + }, + }, this.context.t('learnMore'))] } return h('div.request-signature__body', {}, [ @@ -197,6 +204,9 @@ SignatureRequest.prototype.renderBody = function () { h('div.request-signature__rows', [ ...rows.map(({ name, value }) => { + if (typeof value === 'boolean') { + value = value.toString() + } return h('div.request-signature__row', [ h('div.request-signature__row-title', [`${name}:`]), h('div.request-signature__row-value', value), diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 1900ccec7..df3bd59bb 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () { return isLoading ? h('span', '') : h('span.token-balance', [ - h('span.token-balance__amount', string), + h('span.hide-text-overflow.token-balance__amount', string), !balanceOnly && h('span.token-balance__symbol', symbol), ]) } diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index c84117d84..4100d76a5 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -101,8 +101,8 @@ TokenCell.prototype.render = function () { h('div.token-list-item__balance-ellipsis', null, [ h('div.token-list-item__balance-wrapper', null, [ - h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`), - + h('div.token-list-item__token-balance', `${string || 0}`), + h('div.token-list-item__token-symbol', symbol), showFiat && h('div.token-list-item__fiat-amount', { style: {}, }, formattedFiat), diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index ef441ff73..9a2fb5311 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -208,8 +208,8 @@ TxListItem.prototype.showRetryButton = function () { const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] - const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce - && lastSubmittedTxWithCurrentNonce.id === transactionId + const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && + lastSubmittedTxWithCurrentNonce.id === transactionId return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 } diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 263f992c0..014497fcd 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -12,7 +12,7 @@ const { checksumAddress: toChecksumAddress } = require('../util') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') -const Identicon = require('./identicon') +const SelectedAccount = require('./selected-account') module.exports = compose( withRouter, @@ -103,7 +103,7 @@ TxView.prototype.renderButtons = function () { } TxView.prototype.render = function () { - const { selectedAddress, identity, network, isMascara } = this.props + const { isMascara } = this.props return h('div.tx-view.flex-column', { style: {}, @@ -111,10 +111,12 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { - justifyContent: 'space-between', + justifyContent: 'center', alignItems: 'center', flex: '0 0 auto', - margin: '10px', + marginBottom: '16px', + padding: '5px', + borderBottom: '1px solid #e5e5e5', }, }, [ @@ -127,23 +129,7 @@ TxView.prototype.render = function () { onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(), }), - h('.identicon-wrapper.select-none', { - style: { - marginLeft: '0.9em', - }, - }, [ - h(Identicon, { - diameter: 24, - address: selectedAddress, - network, - }), - ]), - - h('span.account-name', { - style: {}, - }, [ - identity.name, - ]), + h(SelectedAccount), !isMascara && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3b29dacac..da142fad8 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -36,7 +36,6 @@ function mapStateToProps (state) { tokens: state.metamask.tokens, keyrings: state.metamask.keyrings, selectedAddress: selectors.getSelectedAddress(state), - selectedIdentity: selectors.getSelectedIdentity(state), selectedAccount: selectors.getSelectedAccount(state), selectedTokenAddress: state.metamask.selectedTokenAddress, } @@ -99,21 +98,24 @@ WalletView.prototype.render = function () { const { responsiveDisplayClassname, selectedAddress, - selectedIdentity, keyrings, showAccountDetailModal, sidebarOpen, hideSidebar, history, + identities, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) const checksummedAddress = checksumAddress(selectedAddress) + if (!selectedAddress) { + throw new Error('selectedAddress should not be ' + String(selectedAddress)) + } + const keyring = keyrings.find((kr) => { - return kr.accounts.includes(selectedAddress) || - kr.accounts.includes(selectedIdentity.address) + return kr.accounts.includes(selectedAddress) }) const type = keyring.type @@ -145,7 +147,7 @@ WalletView.prototype.render = function () { h('span.account-name', { style: {}, }, [ - selectedIdentity.name, + identities[selectedAddress].name, ]), h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')), diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index d484ed16d..a7a226cc5 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -11,7 +11,8 @@ * @param {string} [options.fromNumericBase = 'hex' | 'dec' | 'BN'] The numeric basic of the passed value. * @param {string} [options.toNumericBase = 'hex' | 'dec' | 'BN'] The desired numeric basic of the result. * @param {string} [options.fromDenomination = 'WEI'] The denomination of the passed value -* @param {number} [options.numberOfDecimals] The desired number of in the result +* @param {string} [options.numberOfDecimals] The desired number of decimals in the result +* @param {string} [options.roundDown] The desired number of decimals to round down to * @param {number} [options.conversionRate] The rate to use to make the fromCurrency -> toCurrency conversion * @returns {(number | string | BN)} * @@ -38,6 +39,7 @@ const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000') // Individual Setters const convert = R.invoker(1, 'times') const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN) +const roundDown = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN) const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate) const decToBigNumberViaString = n => R.pipe(String, toBigNumber['dec']) @@ -104,6 +106,7 @@ const converter = R.pipe( whenPredSetWithPropAndSetter(fromAndToCurrencyPropsNotEqual, 'conversionRate', convert), whenPropApplySetterMap('toDenomination', toSpecifiedDenomination), whenPredSetWithPropAndSetter(R.prop('numberOfDecimals'), 'numberOfDecimals', round), + whenPredSetWithPropAndSetter(R.prop('roundDown'), 'roundDown', roundDown), whenPropApplySetterMap('toNumericBase', baseChange), R.view(R.lensProp('value')) ) @@ -137,7 +140,7 @@ const addCurrencies = (a, b, options = {}) => { bBase, ...conversionOptions } = options - const value = (new BigNumber(a, aBase)).add(b, bBase) + const value = (new BigNumber(a.toString(), aBase)).add(b.toString(), bBase) return converter({ value, @@ -187,6 +190,16 @@ const conversionGreaterThan = ( return firstValue.gt(secondValue) } +const conversionLessThan = ( + { ...firstProps }, + { ...secondProps }, +) => { + const firstValue = converter({ ...firstProps }) + const secondValue = converter({ ...secondProps }) + + return firstValue.lt(secondValue) +} + const conversionMax = ( { ...firstProps }, { ...secondProps }, @@ -226,6 +239,7 @@ module.exports = { addCurrencies, multiplyCurrencies, conversionGreaterThan, + conversionLessThan, conversionGTE, conversionLTE, conversionMax, diff --git a/ui/app/conversion-util.test.js b/ui/app/conversion-util.test.js new file mode 100644 index 000000000..368ce3bba --- /dev/null +++ b/ui/app/conversion-util.test.js @@ -0,0 +1,22 @@ +import assert from 'assert' +import {addCurrencies} from './conversion-util' + + +describe('conversion utils', () => { + describe('addCurrencies()', () => { + it('add whole numbers', () => { + const result = addCurrencies(3, 9) + assert.equal(result.toNumber(), 12) + }) + + it('add decimals', () => { + const result = addCurrencies(1.3, 1.9) + assert.equal(result.toNumber(), 3.2) + }) + + it('add repeating decimals', () => { + const result = addCurrencies(1 / 3, 1 / 9) + assert.equal(result.toNumber(), 0.4444444444444444) + }) + }) +}) diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 657760ab5..96fba890c 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -116,6 +116,10 @@ &__name { color: $white; font-size: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; } &__balance { diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 36d843c79..b1a74dce2 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,6 +1,5 @@ .currency-display { height: 54px; - width: 100%ß; border: 1px solid $alto; border-radius: 4px; background-color: $white; @@ -21,7 +20,7 @@ line-height: 22px; border: none; outline: 0 !important; - max-width: 100%; + max-width: 22ch; } &__primary-currency { @@ -47,10 +46,42 @@ &__input-wrapper { position: relative; display: flex; + flex: 1; + max-width: 100%; + + input[type="number"] { + -moz-appearance: textfield; + } + + input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + display: none; + } + + input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + display: none; + } } &__currency-symbol { margin-top: 1px; color: $scorpion; } -} \ No newline at end of file + + .react-numeric-input { + input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + display: none; + } + + input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + display: none; + } + } +} diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 69cde8a0f..eba93ecb4 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -6,6 +6,7 @@ justify-content: flex-start; align-items: center; flex: 0 0 auto; + padding-top: 16px; } @media screen and (min-width: $break-large) { @@ -26,25 +27,37 @@ @media screen and (max-width: $break-small) { flex-direction: column; flex: 0 0 auto; + max-width: 100%; } @media screen and (min-width: $break-large) { flex-direction: row; flex-grow: 3; + min-width: 0; } } .balance-display { .token-amount { color: $black; + max-width: 100%; + + .token-balance { + display: flex; + } } @media screen and (max-width: $break-small) { + max-width: 100%; text-align: center; .token-amount { font-size: 1.75rem; margin-top: 1rem; + + .token-balance { + flex-direction: column; + } } .fiat-amount { @@ -55,9 +68,10 @@ } @media screen and (min-width: $break-large) { - margin-left: .8em; + margin: 0 .8em; justify-content: flex-start; align-items: flex-start; + min-width: 0; .token-amount { font-size: 1.5rem; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 74658f656..42ef7ae0a 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -642,10 +642,31 @@ display: flex; flex-flow: column nowrap; flex: 1; + align-items: center; @media screen and (max-width: 575px) { height: 0; } + + .shapeshift-form-wrapper { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + flex: 1 0 auto; + + .shapeshift-form, .modal-shapeshift-form { + border-radius: 8px; + background-color: rgba(0, 0, 0, .05); + padding: 17px 15px; + margin-bottom: 10px; + + &__caret { + width: auto; + flex: 1; + } + } + } } &__logo { @@ -773,17 +794,15 @@ margin-top: 28px; flex: 1 0 auto; - .shapeshift-form { - width: auto; + .shapeshift-form, .modal-shapeshift-form { + border-radius: 8px; + background-color: rgba(0, 0, 0, .05); + padding: 17px 15px; &__caret { width: auto; flex: 1; } - - @media screen and (max-width: 575px) { - width: auto; - } } } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index bbe0ee661..667e45ba2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster; //Account and transaction details .account-and-transaction-details { display: flex; - flex: 1 0 auto; + flex: 1 1 auto; + min-width: 0; } // tx view .tx-view { - flex: 63.5 0 66.5%; + flex: 1 1 66.5%; background: $tx-view-bg; + min-width: 0; // No title on mobile @media screen and (max-width: 575px) { @@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster; } .token-balance__amount { - padding-right: 6px; + padding: 0 6px; } // first time diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index e6916c418..4707ff60e 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -183,6 +183,12 @@ padding: 6px 18px 15px; } + &__help-link { + cursor: pointer; + text-decoration: underline; + color: $curious-blue; + } + &__footer { width: 100%; display: flex; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index e8de317e3..4b706abce 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -14,10 +14,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( min-width: 0; &__token-balance { - font-size: 1.5rem; + margin-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + min-width: 0; + max-width: 100%; + } + + &__token-balance, &__token-symbol { + font-size: 1.5rem; + flex: 0 0 auto; @media #{$wallet-balance-breakpoint-range} { font-size: 95%; @@ -66,19 +73,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &__balance-wrapper { - flex: 1 1 auto; + flex: 1; + flex-flow: row wrap; + display: flex; min-width: 0; } } .token-menu-dropdown { - height: 55px; width: 80%; - border-radius: 4px; - background-color: rgba(0, 0, 0, .82); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); position: absolute; - top: 60px; + top: 52px; right: 25px; z-index: 2000; diff --git a/ui/app/ducks/send.duck.js b/ui/app/ducks/send.duck.js new file mode 100644 index 000000000..055cc05c1 --- /dev/null +++ b/ui/app/ducks/send.duck.js @@ -0,0 +1,72 @@ +import extend from 'xtend' + +// Actions +const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN' +const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN' +const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN' +const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN' +const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS' + +// TODO: determine if this approach to initState is consistent with conventional ducks pattern +const initState = { + fromDropdownOpen: false, + toDropdownOpen: false, + errors: {}, +} + +// Reducer +export default function reducer ({ send: sendState = initState }, action = {}) { + const newState = extend({}, sendState) + + switch (action.type) { + case OPEN_FROM_DROPDOWN: + return extend(newState, { + fromDropdownOpen: true, + }) + case CLOSE_FROM_DROPDOWN: + return extend(newState, { + fromDropdownOpen: false, + }) + case OPEN_TO_DROPDOWN: + return extend(newState, { + toDropdownOpen: true, + }) + case CLOSE_TO_DROPDOWN: + return extend(newState, { + toDropdownOpen: false, + }) + case UPDATE_SEND_ERRORS: + return extend(newState, { + errors: { + ...newState.errors, + ...action.value, + }, + }) + default: + return newState + } +} + +// Action Creators +export function openFromDropdown () { + return { type: OPEN_FROM_DROPDOWN } +} + +export function closeFromDropdown () { + return { type: CLOSE_FROM_DROPDOWN } +} + +export function openToDropdown () { + return { type: OPEN_TO_DROPDOWN } +} + +export function closeToDropdown () { + return { type: CLOSE_TO_DROPDOWN } +} + +export function updateSendErrors (errorObject) { + return { + type: UPDATE_SEND_ERRORS, + value: errorObject, + } +} diff --git a/ui/app/ducks/tests/send-duck.test.js b/ui/app/ducks/tests/send-duck.test.js new file mode 100644 index 000000000..c06cf55d2 --- /dev/null +++ b/ui/app/ducks/tests/send-duck.test.js @@ -0,0 +1,145 @@ +import assert from 'assert' + +import SendReducer, { + openFromDropdown, + closeFromDropdown, + openToDropdown, + closeToDropdown, + updateSendErrors, +} from '../send.duck.js' + +describe('Send Duck', () => { + const mockState = { + send: { + mockProp: 123, + }, + } + const initState = { + fromDropdownOpen: false, + toDropdownOpen: false, + errors: {}, + } + const OPEN_FROM_DROPDOWN = 'metamask/send/OPEN_FROM_DROPDOWN' + const CLOSE_FROM_DROPDOWN = 'metamask/send/CLOSE_FROM_DROPDOWN' + const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN' + const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN' + const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS' + + describe('SendReducer()', () => { + it('should initialize state', () => { + assert.deepEqual( + SendReducer({}), + initState + ) + }) + + it('should return state unchanged if it does not match a dispatched actions type', () => { + assert.deepEqual( + SendReducer(mockState, { + type: 'someOtherAction', + value: 'someValue', + }), + Object.assign({}, mockState.send) + ) + }) + + it('should set fromDropdownOpen to true when receiving a OPEN_FROM_DROPDOWN action', () => { + assert.deepEqual( + SendReducer(mockState, { + type: OPEN_FROM_DROPDOWN, + }), + Object.assign({fromDropdownOpen: true}, mockState.send) + ) + }) + + it('should return a new object (and not just modify the existing state object)', () => { + assert.deepEqual(SendReducer(mockState), mockState.send) + assert.notEqual(SendReducer(mockState), mockState.send) + }) + + it('should set fromDropdownOpen to false when receiving a CLOSE_FROM_DROPDOWN action', () => { + assert.deepEqual( + SendReducer(mockState, { + type: CLOSE_FROM_DROPDOWN, + }), + Object.assign({fromDropdownOpen: false}, mockState.send) + ) + }) + + it('should set toDropdownOpen to true when receiving a OPEN_TO_DROPDOWN action', () => { + assert.deepEqual( + SendReducer(mockState, { + type: OPEN_TO_DROPDOWN, + }), + Object.assign({toDropdownOpen: true}, mockState.send) + ) + }) + + it('should set toDropdownOpen to false when receiving a CLOSE_TO_DROPDOWN action', () => { + assert.deepEqual( + SendReducer(mockState, { + type: CLOSE_TO_DROPDOWN, + }), + Object.assign({toDropdownOpen: false}, mockState.send) + ) + }) + + it('should extend send.errors with the value of a UPDATE_SEND_ERRORS action', () => { + const modifiedMockState = Object.assign({}, mockState, { + send: { + errors: { + someError: false, + }, + }, + }) + assert.deepEqual( + SendReducer(modifiedMockState, { + type: UPDATE_SEND_ERRORS, + value: { someOtherError: true }, + }), + Object.assign({}, modifiedMockState.send, { + errors: { + someError: false, + someOtherError: true, + }, + }) + ) + }) + }) + + describe('openFromDropdown', () => { + assert.deepEqual( + openFromDropdown(), + { type: OPEN_FROM_DROPDOWN } + ) + }) + + describe('closeFromDropdown', () => { + assert.deepEqual( + closeFromDropdown(), + { type: CLOSE_FROM_DROPDOWN } + ) + }) + + describe('openToDropdown', () => { + assert.deepEqual( + openToDropdown(), + { type: OPEN_TO_DROPDOWN } + ) + }) + + describe('closeToDropdown', () => { + assert.deepEqual( + closeToDropdown(), + { type: CLOSE_TO_DROPDOWN } + ) + }) + + describe('updateSendErrors', () => { + assert.deepEqual( + updateSendErrors('mockErrorObject'), + { type: UPDATE_SEND_ERRORS, value: 'mockErrorObject' } + ) + }) + +}) diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js index 4ef618018..2856e0ed6 100644 --- a/ui/app/i18n-provider.js +++ b/ui/app/i18n-provider.js @@ -6,14 +6,14 @@ const { compose } = require('recompose') const t = require('../i18n-helper').getMessage class I18nProvider extends Component { - getChildContext() { + getChildContext () { const { localeMessages } = this.props return { t: t.bind(null, localeMessages), } } - render() { + render () { return this.props.children } } diff --git a/ui/app/main-container.js b/ui/app/main-container.js index c9b05db3b..b49a52363 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -20,7 +20,7 @@ MainContainer.prototype.render = function () { // - pass resulting h() to MainContainer // - error checking in separate func // - router in separate func - let contents = { + const contents = { component: AccountAndTransactionDetails, key: 'account-detail', style: {}, diff --git a/ui/app/metamask-connect.js b/ui/app/metamask-connect.js index 8da594635..81fa7e403 100644 --- a/ui/app/metamask-connect.js +++ b/ui/app/metamask-connect.js @@ -24,4 +24,4 @@ const _higherOrderMapStateToProps = (mapStateToProps) => { } } -module.exports = metamaskConnect \ No newline at end of file +module.exports = metamaskConnect diff --git a/ui/app/reducers.js b/ui/app/reducers.js index f155b2bf3..0b158a778 100644 --- a/ui/app/reducers.js +++ b/ui/app/reducers.js @@ -4,10 +4,10 @@ const copyToClipboard = require('copy-to-clipboard') // // Sub-Reducers take in the complete state and return their sub-state // -const reduceIdentities = require('./reducers/identities') const reduceMetamask = require('./reducers/metamask') const reduceApp = require('./reducers/app') const reduceLocale = require('./reducers/locale') +const reduceSend = require('./ducks/send.duck').default window.METAMASK_CACHED_LOG_STATE = null @@ -21,12 +21,6 @@ function rootReducer (state, action) { return action.value } - // - // Identities - // - - state.identities = reduceIdentities(state, action) - // // MetaMask // @@ -45,6 +39,12 @@ function rootReducer (state, action) { state.localeMessages = reduceLocale(state, action) + // + // Send + // + + state.send = reduceSend(state, action) + window.METAMASK_CACHED_LOG_STATE = state return state } diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 4e9d0848c..f453812b9 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -62,6 +62,7 @@ function reduceApp (state, action) { warning: null, buyView: {}, isMouseUser: false, + gasIsLoading: false, }, state.appState) switch (action.type) { @@ -675,6 +676,16 @@ function reduceApp (state, action) { isMouseUser: action.value, }) + case actions.GAS_LOADING_STARTED: + return extend(appState, { + gasIsLoading: true, + }) + + case actions.GAS_LOADING_FINISHED: + return extend(appState, { + gasIsLoading: false, + }) + default: return appState } diff --git a/ui/app/reducers/identities.js b/ui/app/reducers/identities.js deleted file mode 100644 index 341a404e7..000000000 --- a/ui/app/reducers/identities.js +++ /dev/null @@ -1,15 +0,0 @@ -const extend = require('xtend') - -module.exports = reduceIdentities - -function reduceIdentities (state, action) { - // clone + defaults - var idState = extend({ - - }, state.identities) - - switch (action.type) { - default: - return idState - } -} diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 732fa6dea..6c8ac9ed7 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -21,7 +21,7 @@ function reduceMetamask (state, action) { identities: {}, unapprovedTxs: {}, noActiveNotices: true, - lastUnreadNotice: undefined, + nextUnreadNotice: undefined, frequentRpcList: [], addressBook: [], selectedTokenAddress: null, @@ -65,7 +65,7 @@ function reduceMetamask (state, action) { case actions.SHOW_NOTICE: return extend(metamaskState, { noActiveNotices: false, - lastUnreadNotice: action.value, + nextUnreadNotice: action.value, }) case actions.CLEAR_NOTICES: @@ -255,17 +255,6 @@ function reduceMetamask (state, action) { }, }) - case actions.UPDATE_SEND_ERRORS: - return extend(metamaskState, { - send: { - ...metamaskState.send, - errors: { - ...metamaskState.send.errors, - ...action.value, - }, - }, - }) - case actions.UPDATE_MAX_MODE: return extend(metamaskState, { send: { diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 60cc264da..cf0affe9c 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -16,6 +16,7 @@ const selectors = { transactionsSelector, accountsWithSendEtherInfoSelector, getCurrentAccountWithSendEtherInfo, + getGasIsLoading, getGasPrice, getGasLimit, getForceGasMin, @@ -117,6 +118,10 @@ function transactionsSelector (state) { .sort((a, b) => b.time - a.time) } +function getGasIsLoading (state) { + return state.appState.gasIsLoading +} + function getGasPrice (state) { return state.metamask.send.gasPrice } @@ -185,4 +190,4 @@ function autoAddToBetaUI (state) { function getCurrentViewContext (state) { const { currentView = {} } = state.appState return currentView.context -} \ No newline at end of file +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js deleted file mode 100644 index 4fbe8ff11..000000000 --- a/ui/app/send-v2.js +++ /dev/null @@ -1,646 +0,0 @@ -const { inherits } = require('util') -const PropTypes = require('prop-types') -const PersistentForm = require('../lib/persistent-form') -const h = require('react-hyperscript') - -const ethAbi = require('ethereumjs-abi') -const ethUtil = require('ethereumjs-util') - -const FromDropdown = require('./components/send/from-dropdown') -const EnsInput = require('./components/ens-input') -const CurrencyDisplay = require('./components/send/currency-display') -const MemoTextArea = require('./components/send/memo-textarea') -const GasFeeDisplay = require('./components/send/gas-fee-display-v2') - -const { - TOKEN_TRANSFER_FUNCTION_SIGNATURE, -} = require('./components/send/send-constants') - -const { - multiplyCurrencies, - conversionGreaterThan, - subtractCurrencies, -} = require('./conversion-util') -const { - calcTokenAmount, -} = require('./token-util') -const { - isBalanceSufficient, - isTokenBalanceSufficient, - getGasTotal, -} = require('./components/send/send-utils') -const { isValidAddress } = require('./util') -const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes') -const Button = require('./components/button') - -SendTransactionScreen.contextTypes = { - t: PropTypes.func, -} - -module.exports = SendTransactionScreen - -inherits(SendTransactionScreen, PersistentForm) -function SendTransactionScreen () { - PersistentForm.call(this) - - this.state = { - fromDropdownOpen: false, - toDropdownOpen: false, - errors: { - to: null, - amount: null, - }, - gasLoadingError: false, - } - - this.handleToChange = this.handleToChange.bind(this) - this.handleAmountChange = this.handleAmountChange.bind(this) - this.validateAmount = this.validateAmount.bind(this) -} - -const getParamsForGasEstimate = function (selectedAddress, symbol, data) { - const estimatedGasParams = { - from: selectedAddress, - gas: '746a528800', - } - - if (symbol) { - Object.assign(estimatedGasParams, { value: '0x0' }) - } - - if (data) { - Object.assign(estimatedGasParams, { data }) - } - - return estimatedGasParams -} - -SendTransactionScreen.prototype.updateSendTokenBalance = function (usersToken) { - if (!usersToken) return - - const { - selectedToken = {}, - updateSendTokenBalance, - } = this.props - const { decimals } = selectedToken || {} - const tokenBalance = calcTokenAmount(usersToken.balance.toString(), decimals) - - updateSendTokenBalance(tokenBalance) -} - -SendTransactionScreen.prototype.componentWillMount = function () { - this.updateGas() -} - -SendTransactionScreen.prototype.updateGas = function () { - const { - selectedToken = {}, - getGasPrice, - estimateGas, - selectedAddress, - data, - updateGasTotal, - from, - tokenContract, - editingTransactionId, - gasPrice, - gasLimit, - } = this.props - - const { symbol } = selectedToken || {} - - const tokenBalancePromise = tokenContract - ? tokenContract.balanceOf(from.address) - : Promise.resolve() - tokenBalancePromise - .then(usersToken => this.updateSendTokenBalance(usersToken)) - - if (!editingTransactionId) { - const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data) - - Promise - .all([ - getGasPrice(), - estimateGas(estimateGasParams), - ]) - .then(([gasPrice, gas]) => { - const newGasTotal = getGasTotal(gas, gasPrice) - updateGasTotal(newGasTotal) - this.setState({ gasLoadingError: false }) - }) - .catch(err => { - this.setState({ gasLoadingError: true }) - }) - } else { - const newGasTotal = getGasTotal(gasLimit, gasPrice) - updateGasTotal(newGasTotal) - } -} - -SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { - const { - from: { balance }, - gasTotal, - tokenBalance, - amount, - selectedToken, - network, - } = this.props - - const { - from: { balance: prevBalance }, - gasTotal: prevGasTotal, - tokenBalance: prevTokenBalance, - network: prevNetwork, - } = prevProps - - const uninitialized = [prevBalance, prevGasTotal].every(n => n === null) - - const balanceHasChanged = balance !== prevBalance - const gasTotalHasChange = gasTotal !== prevGasTotal - const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance - const amountValidationChange = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged - - if (!uninitialized) { - if (amountValidationChange) { - this.validateAmount(amount) - } - - if (network !== prevNetwork && network !== 'loading') { - this.updateGas() - } - } -} - -SendTransactionScreen.prototype.renderHeader = function () { - const { selectedToken, clearSend, history } = this.props - - return h('div.page-container__header', [ - - h('div.page-container__title', selectedToken ? this.context.t('sendTokens') : this.context.t('sendETH')), - - h('div.page-container__subtitle', this.context.t('onlySendToEtherAddress')), - - h('div.page-container__header-close', { - onClick: () => { - clearSend() - history.push(DEFAULT_ROUTE) - }, - }), - - ]) -} - -SendTransactionScreen.prototype.renderErrorMessage = function (errorType) { - const { errors } = this.props - const errorMessage = errors[errorType] - - return errorMessage - ? h('div.send-v2__error', [ errorMessage ]) - : null -} - -SendTransactionScreen.prototype.handleFromChange = async function (newFrom) { - const { - updateSendFrom, - tokenContract, - } = this.props - - if (tokenContract) { - const usersToken = await tokenContract.balanceOf(newFrom.address) - this.updateSendTokenBalance(usersToken) - } - updateSendFrom(newFrom) -} - -SendTransactionScreen.prototype.renderFromRow = function () { - const { - from, - fromAccounts, - conversionRate, - } = this.props - - const { fromDropdownOpen } = this.state - - return h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'From:'), - - h('div.send-v2__form-field', [ - h(FromDropdown, { - dropdownOpen: fromDropdownOpen, - accounts: fromAccounts, - selectedAccount: from, - onSelect: newFrom => this.handleFromChange(newFrom), - openDropdown: () => this.setState({ fromDropdownOpen: true }), - closeDropdown: () => this.setState({ fromDropdownOpen: false }), - conversionRate, - }), - ]), - - ]) -} - -SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') { - const { - updateSendTo, - updateSendErrors, - } = this.props - let toError = null - - if (!to) { - toError = this.context.t('required') - } else if (!isValidAddress(to)) { - toError = this.context.t('invalidAddressRecipient') - } - - updateSendTo(to, nickname) - updateSendErrors({ to: toError }) -} - -SendTransactionScreen.prototype.renderToRow = function () { - const { toAccounts, errors, to, network } = this.props - - const { toDropdownOpen } = this.state - - return h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', [ - - this.context.t('to'), - - this.renderErrorMessage(this.context.t('to')), - - ]), - - h('div.send-v2__form-field', [ - h(EnsInput, { - name: 'address', - placeholder: 'Recipient Address', - network, - to, - accounts: Object.entries(toAccounts).map(([key, account]) => account), - dropdownOpen: toDropdownOpen, - openDropdown: () => this.setState({ toDropdownOpen: true }), - closeDropdown: () => this.setState({ toDropdownOpen: false }), - onChange: this.handleToChange, - inError: Boolean(errors.to), - }), - ]), - - ]) -} - -SendTransactionScreen.prototype.handleAmountChange = function (value) { - const amount = value - const { updateSendAmount, setMaxModeTo } = this.props - - setMaxModeTo(false) - this.validateAmount(amount) - updateSendAmount(amount) -} - -SendTransactionScreen.prototype.setAmountToMax = function () { - const { - from: { balance }, - updateSendAmount, - updateSendErrors, - tokenBalance, - selectedToken, - gasTotal, - } = this.props - const { decimals } = selectedToken || {} - const multiplier = Math.pow(10, Number(decimals || 0)) - - const maxAmount = selectedToken - ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'}) - : subtractCurrencies( - ethUtil.addHexPrefix(balance), - ethUtil.addHexPrefix(gasTotal), - { toNumericBase: 'hex' } - ) - - updateSendErrors({ amount: null }) - - updateSendAmount(maxAmount) -} - -SendTransactionScreen.prototype.validateAmount = function (value) { - const { - from: { balance }, - updateSendErrors, - amountConversionRate, - conversionRate, - primaryCurrency, - selectedToken, - gasTotal, - tokenBalance, - } = this.props - const { decimals } = selectedToken || {} - const amount = value - - let amountError = null - - let sufficientBalance = true - - if (gasTotal) { - sufficientBalance = isBalanceSufficient({ - amount: selectedToken ? '0x0' : amount, - gasTotal, - balance, - primaryCurrency, - amountConversionRate, - conversionRate, - }) - } - - const verifyTokenBalance = selectedToken && tokenBalance !== null - let sufficientTokens - if (verifyTokenBalance) { - sufficientTokens = isTokenBalanceSufficient({ - tokenBalance, - amount, - decimals, - }) - } - - const amountLessThanZero = conversionGreaterThan( - { value: 0, fromNumericBase: 'dec' }, - { value: amount, fromNumericBase: 'hex' }, - ) - - if (conversionRate && !sufficientBalance) { - amountError = this.context.t('insufficientFunds') - } else if (verifyTokenBalance && !sufficientTokens) { - amountError = this.context.t('insufficientTokens') - } else if (amountLessThanZero) { - amountError = this.context.t('negativeETH') - } - - updateSendErrors({ amount: amountError }) -} - -SendTransactionScreen.prototype.renderAmountRow = function () { - const { - selectedToken, - primaryCurrency = 'ETH', - convertedCurrency, - amountConversionRate, - errors, - amount, - setMaxModeTo, - maxModeOn, - gasTotal, - } = this.props - - return h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', [ - 'Amount:', - this.renderErrorMessage('amount'), - !errors.amount && gasTotal && h('div.send-v2__amount-max', { - onClick: (event) => { - event.preventDefault() - setMaxModeTo(true) - this.setAmountToMax() - }, - }, [ !maxModeOn ? this.context.t('max') : '' ]), - ]), - - h('div.send-v2__form-field', [ - h(CurrencyDisplay, { - inError: Boolean(errors.amount), - primaryCurrency, - convertedCurrency, - selectedToken, - value: amount || '0x0', - conversionRate: amountConversionRate, - handleChange: this.handleAmountChange, - }), - ]), - - ]) -} - -SendTransactionScreen.prototype.renderGasRow = function () { - const { - conversionRate, - convertedCurrency, - showCustomizeGasModal, - gasTotal, - } = this.props - const { gasLoadingError } = this.state - - return h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', this.context.t('gasFee')), - - h('div.send-v2__form-field', [ - - h(GasFeeDisplay, { - gasTotal, - conversionRate, - convertedCurrency, - onClick: showCustomizeGasModal, - gasLoadingError, - }), - - ]), - - ]) -} - -SendTransactionScreen.prototype.renderMemoRow = function () { - const { updateSendMemo, memo } = this.props - - return h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'Transaction Memo:'), - - h('div.send-v2__form-field', [ - h(MemoTextArea, { - memo, - onChange: (event) => updateSendMemo(event.target.value), - }), - ]), - - ]) -} - -SendTransactionScreen.prototype.renderForm = function () { - return h('.page-container__content', {}, [ - h('.send-v2__form', [ - this.renderFromRow(), - - this.renderToRow(), - - this.renderAmountRow(), - - this.renderGasRow(), - - // this.renderMemoRow(), - - ]), - ]) -} - -SendTransactionScreen.prototype.renderFooter = function () { - const { - clearSend, - gasTotal, - tokenBalance, - selectedToken, - errors: { amount: amountError, to: toError }, - history, - } = this.props - - const missingTokenBalance = selectedToken && (tokenBalance === null || tokenBalance === undefined) - const noErrors = !amountError && toError === null - - return h('div.page-container__footer', [ - h(Button, { - type: 'default', - large: true, - className: 'page-container__footer-button', - onClick: () => { - clearSend() - history.push(DEFAULT_ROUTE) - }, - }, this.context.t('cancel')), - h(Button, { - type: 'primary', - large: true, - className: 'page-container__footer-button', - disabled: !noErrors || !gasTotal || missingTokenBalance, - onClick: event => this.onSubmit(event), - }, this.context.t('next')), - ]) -} - -SendTransactionScreen.prototype.render = function () { - return ( - - h('div.page-container', [ - - this.renderHeader(), - - this.renderForm(), - - this.renderFooter(), - ]) - - ) -} - -SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') { - const { toAccounts, addToAddressBook } = this.props - if (!toAccounts.find(({ address }) => newAddress === address)) { - // TODO: nickname, i.e. addToAddressBook(recipient, nickname) - addToAddressBook(newAddress, nickname) - } -} - -SendTransactionScreen.prototype.getEditedTx = function () { - const { - from: {address: from}, - to, - amount, - gasLimit: gas, - gasPrice, - selectedToken, - editingTransactionId, - unapprovedTxs, - } = this.props - - const editingTx = { - ...unapprovedTxs[editingTransactionId], - txParams: { - from: ethUtil.addHexPrefix(from), - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), - }, - } - - if (selectedToken) { - const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( - ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), - x => ('00' + x.toString(16)).slice(-2) - ).join('') - - Object.assign(editingTx.txParams, { - value: ethUtil.addHexPrefix('0'), - to: ethUtil.addHexPrefix(selectedToken.address), - data, - }) - } else { - const { data } = unapprovedTxs[editingTransactionId].txParams - - Object.assign(editingTx.txParams, { - value: ethUtil.addHexPrefix(amount), - to: ethUtil.addHexPrefix(to), - data, - }) - - if (typeof editingTx.txParams.data === 'undefined') { - delete editingTx.txParams.data - } - } - - return editingTx -} - -SendTransactionScreen.prototype.onSubmit = function (event) { - event.preventDefault() - const { - from: {address: from}, - to: _to, - amount, - gasLimit: gas, - gasPrice, - signTokenTx, - signTx, - updateTx, - selectedToken, - editingTransactionId, - toNickname, - errors: { amount: amountError, to: toError }, - } = this.props - - const noErrors = !amountError && toError === null - - if (!noErrors) { - return - } - - const to = ethUtil.addHexPrefix(_to) - - this.addToAddressBookIfNew(to, toNickname) - - if (editingTransactionId) { - const editedTx = this.getEditedTx() - updateTx(editedTx) - } else { - - const txParams = { - from, - value: '0', - gas, - gasPrice, - } - - if (!selectedToken) { - txParams.value = amount - txParams.to = to - } - - Object.keys(txParams).forEach(key => { - txParams[key] = ethUtil.addHexPrefix(txParams[key]) - }) - - selectedToken - ? signTokenTx(selectedToken.address, to, amount, txParams) - : signTx(txParams) - } - - this.props.history.push(CONFIRM_TRANSACTION_ROUTE) -} diff --git a/ui/app/token-util.js b/ui/app/token-util.js index 8c5b37d7b..cd6a47dbc 100644 --- a/ui/app/token-util.js +++ b/ui/app/token-util.js @@ -20,7 +20,7 @@ async function getSymbolAndDecimals (tokenAddress, existingTokens = []) { if (existingToken) { return existingToken } - + let result = [] try { const token = util.getContractAtAddress(tokenAddress) diff --git a/ui/app/util.js b/ui/app/util.js index 8e9390dfb..8c85c5926 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -36,6 +36,7 @@ module.exports = { miniAddressSummary: miniAddressSummary, isAllOneCase: isAllOneCase, isValidAddress: isValidAddress, + isValidENSAddress, numericBalance: numericBalance, parseBalance: parseBalance, formatBalance: formatBalance, @@ -87,6 +88,10 @@ function isValidAddress (address) { return (isAllOneCase(prefixed) && ethUtil.isValidAddress(prefixed)) || ethUtil.isValidChecksumAddress(prefixed) } +function isValidENSAddress (address) { + return address.match(/^.{7,}\.(eth|test)$/) +} + function isInvalidChecksumAddress (address) { var prefixed = ethUtil.addHexPrefix(address) if (address === '0x0000000000000000000000000000000000000000') return false @@ -291,7 +296,7 @@ function getTokenAddressFromTokenObject (token) { /** * Safely checksumms a potentially-null address - * + * * @param {String} [address] - address to checksum * @returns {String} - checksummed address */ diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index 2fa244d9f..63512cd50 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -14,6 +14,11 @@ class WelcomeScreen extends Component { closeWelcomeScreen: PropTypes.func.isRequired, welcomeScreenSeen: PropTypes.bool, history: PropTypes.object, + t: PropTypes.func, + } + + static contextTypes = { + t: PropTypes.func, } constructor (props) { @@ -45,16 +50,15 @@ class WelcomeScreen extends Component { height: '225', }), - h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta'), + h('div.welcome-screen__info__header', this.context.t('welcomeBeta')), - h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'), + h('div.welcome-screen__info__copy', this.context.t('metamaskDescription')), - h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens, - and serves as your bridge to decentralized applications.`), + h('div.welcome-screen__info__copy', this.context.t('holdEther')), h('button.welcome-screen__button', { onClick: this.initiateAccountCreation, - }, 'Continue'), + }, this.context.t('continue')), ]),