diff options
| author | Dan Finlay <542863+danfinlay@users.noreply.github.com> | 2019-04-25 03:25:39 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-04-25 03:25:39 +0800 |
| commit | 87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a (patch) | |
| tree | 2230335f440e36c23f47e0794e94cf6b0b312024 | |
| parent | 8c98e89e617b594d4f0ee54a8437e30201688090 (diff) | |
| parent | 6a60562d6649d88f24bd849b325871bb256a0001 (diff) | |
| download | tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar.gz tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar.bz2 tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar.lz tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar.xz tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.tar.zst tangerine-wallet-browser-87d5be9081fd3ab3bfb4ae67d5cab4b8a8304a8a.zip | |
Merge pull request #6484 from MetaMask/develop
Update master branch with develop (v6.4.0)
233 files changed, 2002 insertions, 648 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 69ca119ba..ed70624e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,32 @@ ## Current Develop Branch +## 6.4.0 Wed Apr 17 2019 + +- [#6445](https://github.com/MetaMask/metamask-extension/pull/6445): * Move send to pages/
+- [#6470](https://github.com/MetaMask/metamask-extension/pull/6470): update publishing.md with dev diagram +- [#6403](https://github.com/MetaMask/metamask-extension/pull/6403): Update to eth-method-registry@1.2.0 +- [#6468](https://github.com/MetaMask/metamask-extension/pull/6468): Fix switcher height when Custom RPC is selected or loading +- [#6459](https://github.com/MetaMask/metamask-extension/pull/6459): feature: add Goerli support +- [#6444](https://github.com/MetaMask/metamask-extension/pull/6444): Fixes #6321 & #6421 - Add Localhost 8545 for network dropdown names +- [#6454](https://github.com/MetaMask/metamask-extension/pull/6454): Bump eth-contract-metadata +- [#6448](https://github.com/MetaMask/metamask-extension/pull/6448): Remove unneeded array cloning in getSendToAccounts selector +- [#6056](https://github.com/MetaMask/metamask-extension/pull/6056): repeated getSelectedAddress() func send.selectors.js removed +- [#6422](https://github.com/MetaMask/metamask-extension/pull/6422): Added Chrome limited site access solution doc +- [#6424](https://github.com/MetaMask/metamask-extension/pull/6424): feature: switch token pricing to CoinGecko API +- [#6428](https://github.com/MetaMask/metamask-extension/pull/6428): Don't inject web3 on sharefile.com +- [#6417](https://github.com/MetaMask/metamask-extension/pull/6417): Metrics updates +- [#6420](https://github.com/MetaMask/metamask-extension/pull/6420): Fix links to MetamaskInpageProvider in porting_to_new_environment.md +- [#6362](https://github.com/MetaMask/metamask-extension/pull/6362): Remove broken image walkthrough from metamaskbot comment +- [#6401](https://github.com/MetaMask/metamask-extension/pull/6401): metamask-controller - use improved provider-as-middleware utility +- [#6406](https://github.com/MetaMask/metamask-extension/pull/6406): remove user actions controller +- [#6399](https://github.com/MetaMask/metamask-extension/pull/6399): doc - publishing - typo fix +- [#6396](https://github.com/MetaMask/metamask-extension/pull/6396): pin eth-contract-metadata to last commit hash +- [#6397](https://github.com/MetaMask/metamask-extension/pull/6397): Change coinbase to wyre +- [#6395](https://github.com/MetaMask/metamask-extension/pull/6395): bump ledger and trezor keyring +- [#6389](https://github.com/MetaMask/metamask-extension/pull/6389): Fix display of gas chart on Ethereum networks +- [#6382](https://github.com/MetaMask/metamask-extension/pull/6382): Remove NoticeController + ## 6.3.2 Mon Apr 8 2019 - [#6389](https://github.com/MetaMask/metamask-extension/pull/6389): Fix display of gas chart on ethereum networks @@ -21,7 +47,7 @@ - [#6302](https://github.com/MetaMask/metamask-extension/pull/6302): Replaces the coinbase link in the deposit modal with one for wyre - [#6307](https://github.com/MetaMask/metamask-extension/pull/6307): Centre the notification in the current window - [#6312](https://github.com/MetaMask/metamask-extension/pull/6312): Fixes popups not showing when screen size is odd -- [#6326](https://github.com/MetaMask/metamask-extension/pull/6326): Fix oversized loading overlay on gas customization modal. +- [#6326](https://github.com/MetaMask/metamask-extension/pull/6326): Fix oversized loading overlay on gas customization modal. - [#6330](https://github.com/MetaMask/metamask-extension/pull/6330): Stop reloading dapps on network change allowing dapps to decide if it should refresh or not - [#6332](https://github.com/MetaMask/metamask-extension/pull/6332): Enable mobile sync - [#6333](https://github.com/MetaMask/metamask-extension/pull/6333): Redesign of the settings screen diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 154925d1a..184507cbb 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -139,6 +139,9 @@ "approved": { "message": "Approved" }, + "asset": { + "message": "Asset" + }, "attemptingConnect": { "message": "Attempting to connect to blockchain." }, @@ -308,6 +311,12 @@ "connectingToRinkeby": { "message": "Connecting to Rinkeby Test Network" }, + "connectingToLocalhost": { + "message": "Connecting to Localhost 8545" + }, + "connectingToGoerli": { + "message": "Connecting to Goerli Test Network" + }, "connectingToUnknown": { "message": "Connecting to Unknown Network" }, @@ -1226,6 +1235,9 @@ "ropsten": { "message": "Ropsten Test Network" }, + "goerli": { + "message": "Goerli Test Network" + }, "rpc": { "message": "Custom RPC" }, @@ -1342,6 +1354,9 @@ "selectAnAccountHelp": { "message": "Select the account to view in MetaMask" }, + "selectAnAsset": { + "message": "Select an Asset" + }, "selectAHigherGasFee": { "message": "Select a higher gas fee to accelerate the processing of your transaction.*" }, diff --git a/app/manifest.json b/app/manifest.json index 5e464dc2f..3dc815c51 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -1,7 +1,7 @@ { "name": "__MSG_appName__", "short_name": "__MSG_appName__", - "version": "6.3.2", + "version": "6.4.0", "manifest_version": 2, "author": "https://metamask.io", "description": "__MSG_appDescription__", diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index 68b6117e5..2325cecdd 100644 --- a/app/scripts/contentscript.js +++ b/app/scripts/contentscript.js @@ -275,6 +275,7 @@ function blacklistedDomainCheck () { 'harbourair.com', 'ani.gamer.com.tw', 'blueskybooking.com', + 'sharefile.com', ] const currentUrl = window.location.href let currentRegex diff --git a/app/scripts/controllers/network/createInfuraClient.js b/app/scripts/controllers/network/createInfuraClient.js index 884b94db3..70b332867 100644 --- a/app/scripts/controllers/network/createInfuraClient.js +++ b/app/scripts/controllers/network/createInfuraClient.js @@ -49,6 +49,10 @@ function createNetworkAndChainIdMiddleware ({ network }) { netId = '42' chainId = '0x2a' break + case 'goerli': + netId = '5' + chainId = '0x05' + break default: throw new Error(`createInfuraClient - unknown network "${network}"`) } diff --git a/app/scripts/controllers/network/enums.js b/app/scripts/controllers/network/enums.js index 3190eb37c..2f7025392 100644 --- a/app/scripts/controllers/network/enums.js +++ b/app/scripts/controllers/network/enums.js @@ -3,16 +3,19 @@ const RINKEBY = 'rinkeby' const KOVAN = 'kovan' const MAINNET = 'mainnet' const LOCALHOST = 'localhost' +const GOERLI = 'goerli' const MAINNET_CODE = 1 const ROPSTEN_CODE = 3 const RINKEYBY_CODE = 4 const KOVAN_CODE = 42 +const GOERLI_CODE = 5 const ROPSTEN_DISPLAY_NAME = 'Ropsten' const RINKEBY_DISPLAY_NAME = 'Rinkeby' const KOVAN_DISPLAY_NAME = 'Kovan' const MAINNET_DISPLAY_NAME = 'Main Ethereum Network' +const GOERLI_DISPLAY_NAME = 'Goerli' module.exports = { ROPSTEN, @@ -20,12 +23,15 @@ module.exports = { KOVAN, MAINNET, LOCALHOST, + GOERLI, MAINNET_CODE, ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, + GOERLI_CODE, ROPSTEN_DISPLAY_NAME, RINKEBY_DISPLAY_NAME, KOVAN_DISPLAY_NAME, MAINNET_DISPLAY_NAME, + GOERLI_DISPLAY_NAME, } diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js index 47432c1e2..c00ac7e6a 100644 --- a/app/scripts/controllers/network/network.js +++ b/app/scripts/controllers/network/network.js @@ -20,8 +20,9 @@ const { KOVAN, MAINNET, LOCALHOST, + GOERLI, } = require('./enums') -const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET] +const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI] const env = process.env.METAMASK_ENV const METAMASK_DEBUG = process.env.METAMASK_DEBUG @@ -140,10 +141,10 @@ module.exports = class NetworkController extends EventEmitter { this.providerConfig = providerConfig } - async setProviderType (type) { + async setProviderType (type, rpcTarget = '', ticker = 'ETH', nickname = '') { 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 } + const providerConfig = { type, rpcTarget, ticker, nickname } this.providerConfig = providerConfig } diff --git a/app/scripts/controllers/network/util.js b/app/scripts/controllers/network/util.js index 261dae721..b0afccd7e 100644 --- a/app/scripts/controllers/network/util.js +++ b/app/scripts/controllers/network/util.js @@ -3,13 +3,16 @@ const { RINKEBY, KOVAN, MAINNET, + GOERLI, ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, + GOERLI_CODE, ROPSTEN_DISPLAY_NAME, RINKEBY_DISPLAY_NAME, KOVAN_DISPLAY_NAME, MAINNET_DISPLAY_NAME, + GOERLI_DISPLAY_NAME, } = require('./enums') const networkToNameMap = { @@ -17,9 +20,11 @@ const networkToNameMap = { [RINKEBY]: RINKEBY_DISPLAY_NAME, [KOVAN]: KOVAN_DISPLAY_NAME, [MAINNET]: MAINNET_DISPLAY_NAME, + [GOERLI]: GOERLI_DISPLAY_NAME, [ROPSTEN_CODE]: ROPSTEN_DISPLAY_NAME, [RINKEYBY_CODE]: RINKEBY_DISPLAY_NAME, [KOVAN_CODE]: KOVAN_DISPLAY_NAME, + [GOERLI_CODE]: GOERLI_DISPLAY_NAME, } const getNetworkDisplayName = key => networkToNameMap[key] diff --git a/app/scripts/controllers/recent-blocks.js b/app/scripts/controllers/recent-blocks.js index 982ad2aa4..a2b5d1bae 100644 --- a/app/scripts/controllers/recent-blocks.js +++ b/app/scripts/controllers/recent-blocks.js @@ -8,8 +8,9 @@ const { RINKEBY, KOVAN, MAINNET, + GOERLI, } = require('./network/enums') -const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET] +const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI] class RecentBlocksController { diff --git a/app/scripts/controllers/token-rates.js b/app/scripts/controllers/token-rates.js index 867d36433..4e396bb59 100644 --- a/app/scripts/controllers/token-rates.js +++ b/app/scripts/controllers/token-rates.js @@ -28,16 +28,16 @@ class TokenRatesController { async updateExchangeRates () { if (!this.isActive) { return } const contractExchangeRates = {} - const nativeCurrency = this.currency ? this.currency.getState().nativeCurrency.toUpperCase() : 'ETH' - const pairs = this._tokens.map(token => `pairs[]=${token.address}/${nativeCurrency}`) - const query = pairs.join('&') + const nativeCurrency = this.currency ? this.currency.getState().nativeCurrency.toLowerCase() : 'eth' + const pairs = this._tokens.map(token => token.address).join(',') + const query = `contract_addresses=${pairs}&vs_currencies=${nativeCurrency}` if (this._tokens.length > 0) { try { - const response = await fetch(`https://exchanges.balanc3.net/pie?${query}&autoConversion=false`) - const { prices = [] } = await response.json() - prices.forEach(({ pair, price }) => { - const address = pair.split('/')[0] - contractExchangeRates[normalizeAddress(address)] = typeof price === 'number' ? price : 0 + const response = await fetch(`https://api.coingecko.com/api/v3/simple/token_price/ethereum?${query}`) + const prices = await response.json() + this._tokens.forEach(token => { + const price = prices[token.address.toLowerCase()] + contractExchangeRates[normalizeAddress(token.address)] = price ? price[nativeCurrency] : 0 }) } catch (error) { log.warn(`MetaMask - TokenRatesController exchange rate fetch failed.`, error) diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js index 68394d1ae..71cfb875c 100644 --- a/app/scripts/inpage.js +++ b/app/scripts/inpage.js @@ -218,6 +218,12 @@ inpageProvider.publicConfigStore.subscribe(function (state) { web3.eth.defaultAccount = state.selectedAddress }) +inpageProvider.publicConfigStore.subscribe(function (state) { + if (state.onboardingcomplete) { + window.postMessage('onboardingcomplete', '*') + } +}) + // need to make sure we aren't affected by overlapping namespaces // and that we dont affect the app with our namespace // mostly a fix for web3's BigNumber if AMD's "define" is defined... diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js index fbe6c6c9e..5cae83a9f 100644 --- a/app/scripts/lib/buy-eth-url.js +++ b/app/scripts/lib/buy-eth-url.js @@ -28,6 +28,8 @@ function getBuyEthUrl ({ network, amount, address, service }) { return 'https://www.rinkeby.io/' case 'kovan-faucet': return 'https://github.com/kovan-testnet/faucet' + case 'goerli-faucet': + return 'https://goerli-faucet.slock.it/' } throw new Error(`Unknown cryptocurrency exchange or faucet: "${service}"`) } @@ -42,6 +44,8 @@ function getDefaultServiceForNetwork (network) { return 'rinkeby-faucet' case '42': return 'kovan-faucet' + case '5': + return 'goerli-faucet' } throw new Error(`No default cryptocurrency exchange or faucet for networkId: "${network}"`) } diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index d2a55acaa..0506e3116 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -320,6 +320,7 @@ module.exports = class MetamaskController extends EventEmitter { const result = { selectedAddress: memState.isUnlocked ? memState.selectedAddress : undefined, networkVersion: memState.network, + onboardingcomplete: memState.completedOnboarding, } return result } diff --git a/development/states/navigate-txs.json b/development/states/navigate-txs.json index 23255abed..584a754f0 100644 --- a/development/states/navigate-txs.json +++ b/development/states/navigate-txs.json @@ -230,7 +230,8 @@ "kovan": "ok", "mainnet": "ok", "rinkeby": "ok", - "ropsten": "ok" + "ropsten": "ok", + "goerli": "ok" }, "lostAccounts": [] }, @@ -320,4 +321,4 @@ "toSmartContract": false, "fetchingData": false } -}
\ No newline at end of file +} diff --git a/development/states/pending-tx.json b/development/states/pending-tx.json index b4a6565fa..28c1751bd 100644 --- a/development/states/pending-tx.json +++ b/development/states/pending-tx.json @@ -704,7 +704,8 @@ "mainnet": "ok", "ropsten": "ok", "kovan": "ok", - "rinkeby": "ok" + "rinkeby": "ok", + "goerli": "ok" }, "shapeShiftTxList": [], "lostAccounts": [] @@ -735,4 +736,4 @@ "os": "mac" }, "browser": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" -}
\ No newline at end of file +} diff --git a/docs/limited_site_access.md b/docs/limited_site_access.md new file mode 100644 index 000000000..f703d5c7e --- /dev/null +++ b/docs/limited_site_access.md @@ -0,0 +1,5 @@ +# Google Chrome/Brave Limited Site Access for Extensions + +Problem: MetaMask doesn't work with limited site access enabled under Chrome's extensions. + +Solution: In addition to the site you wish to whitelist, you must add 'api.infura.io' as another domain, so the MetaMask extension is authorized to make RPC calls to Infura. diff --git a/docs/porting_to_new_environment.md b/docs/porting_to_new_environment.md index d901f2b78..f7a2ac8b7 100644 --- a/docs/porting_to_new_environment.md +++ b/docs/porting_to_new_environment.md @@ -10,7 +10,7 @@ The `metamask-background` describes the file at `app/scripts/background.js`, whi When a new site is visited, the WebExtension creates a new `ContentScript` in that page's context, which can be seen at `app/scripts/contentscript.js`. This script represents a per-page setup process, which creates the per-page `web3` api, connects it to the background script via the Port API (wrapped in a [stream abstraction](https://github.com/substack/stream-handbook)), and injected into the DOM before anything loads. -The most confusing part about porting MetaMask to a new platform is the way we provide the Web3 API over a series of streams between contexts. Once you understand how we create the [InpageProvider](../app/scripts/lib/inpage-provider.js) in the [inpage.js script](../app/scripts/inpage.js), you will be able to understand how the [port-stream](../app/scripts/lib/port-stream.js) is just a thin wrapper around the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), and a similar stream API can be wrapped around any communication channel to communicate with the `MetaMaskController` via its `setupUntrustedCommunication(stream, domain)` method. +The most confusing part about porting MetaMask to a new platform is the way we provide the Web3 API over a series of streams between contexts. Once you understand how we create the [MetamaskInpageProvider](https://github.com/MetaMask/metamask-inpage-provider/blob/master/index.js) in the [inpage.js script](../app/scripts/inpage.js), you will be able to understand how the [port-stream](../app/scripts/lib/port-stream.js) is just a thin wrapper around the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), and a similar stream API can be wrapped around any communication channel to communicate with the `MetaMaskController` via its `setupUntrustedCommunication(stream, domain)` method. ### The MetaMask Controller @@ -89,7 +89,7 @@ MetaMask has two kinds of [duplex stream APIs](https://github.com/substack/strea If you are making a MetaMask-powered browser for a new platform, one of the trickiest tasks will be injecting the Web3 API into websites that are visited. On WebExtensions, we actually have to pipe data through a total of three JS contexts just to let sites talk to our background process (site -> contentscript -> background). -To see how we do that, you can refer to the [inpage script](https://github.com/MetaMask/metamask-extension/blob/master/app/scripts/inpage.js) that we inject into every website. There you can see it creates a multiplex stream to the background, and uses it to initialize what we call the [inpage-provider](https://github.com/MetaMask/metamask-extension/blob/master/app/scripts/lib/inpage-provider.js), which you can see stubs a few methods out, but mostly just passes calls to `sendAsync` through the stream it's passed! That's really all the magic that's needed to create a web3-like API in a remote context, once you have a stream to MetaMask available. +To see how we do that, you can refer to the [inpage script](https://github.com/MetaMask/metamask-extension/blob/master/app/scripts/inpage.js) that we inject into every website. There you can see it creates a multiplex stream to the background, and uses it to initialize what we call the [MetamaskInpageProvider](https://github.com/MetaMask/metamask-inpage-provider/blob/master/index.js), which you can see stubs a few methods out, but mostly just passes calls to `sendAsync` through the stream it's passed! That's really all the magic that's needed to create a web3-like API in a remote context, once you have a stream to MetaMask available. In `inpage.js` you can see we create a `PortStream`, that's just a class we use to wrap WebExtension ports as streams, so we can reuse our favorite stream abstraction over the more irregular API surface of the WebExtension. In a new platform, you will probably need to construct this stream differently. The key is that you need to construct a stream that talks from the site context to the background. Once you have that set up, it works like magic! diff --git a/docs/publishing.md b/docs/publishing.md index 1668afe1e..392e20955 100644 --- a/docs/publishing.md +++ b/docs/publishing.md @@ -2,6 +2,13 @@ When publishing a new version of MetaMask, we follow this procedure: +## Overview + +The below diagram outlines our process for design, development, and release. Building MetaMask is a community affair, and many steps of the process invite participation from external contributors as indicated. All QA, code review, and release of new versions is done by members of the core MetaMask team. + +<img width="664" alt="mm-dev-process" src="https://user-images.githubusercontent.com/1016190/56308059-36906000-60fb-11e9-8e61-6655bca0c54f.png"> + + ## Preparation We try to ensure certain criteria are met before deploying: diff --git a/package-lock.json b/package-lock.json index 11eab5718..902dbe004 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9759,8 +9759,8 @@ } }, "eth-contract-metadata": { - "version": "github:MetaMask/eth-contract-metadata#92e7d1442c7585bfd24e50a0fda78df11dedadfe", - "from": "github:MetaMask/eth-contract-metadata#92e7d1442c7585bfd24e50a0fda78df11dedadfe" + "version": "github:MetaMask/eth-contract-metadata#41a14e8004bdd37eaba5af5f2bb1fc4f4ff7063f", + "from": "github:MetaMask/eth-contract-metadata#41a14e8004bdd37eaba5af5f2bb1fc4f4ff7063f" }, "eth-ens-namehash": { "version": "2.0.8", @@ -9806,6 +9806,31 @@ "requires": { "bn.js": "^4.11.8", "ethereumjs-util": "^6.0.0" + }, + "dependencies": { + "ethereumjs-util": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz", + "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==", + "requires": { + "bn.js": "^4.11.0", + "create-hash": "^1.1.2", + "ethjs-util": "0.1.6", + "keccak": "^1.0.2", + "rlp": "^2.0.0", + "safe-buffer": "^5.1.1", + "secp256k1": "^3.0.1" + } + } + } + }, + "ethjs-util": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz", + "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==", + "requires": { + "is-hex-prefixed": "1.0.0", + "strip-hex-prefix": "1.0.0" } } } @@ -9814,8 +9839,7 @@ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#2863c40e0982acfc0b7163f0285d4c56427c7799", "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "requires": { - "bn.js": "^4.11.8", - "ethereumjs-util": "^6.0.0" + "bn.js": "^4.11.8" } }, "ethereumjs-util": { @@ -9896,6 +9920,31 @@ "requires": { "bn.js": "^4.11.8", "ethereumjs-util": "^6.0.0" + }, + "dependencies": { + "ethereumjs-util": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz", + "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==", + "requires": { + "bn.js": "^4.11.0", + "create-hash": "^1.1.2", + "ethjs-util": "0.1.6", + "keccak": "^1.0.2", + "rlp": "^2.0.0", + "safe-buffer": "^5.1.1", + "secp256k1": "^3.0.1" + } + } + } + }, + "ethjs-util": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz", + "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==", + "requires": { + "is-hex-prefixed": "1.0.0", + "strip-hex-prefix": "1.0.0" } } } @@ -9904,8 +9953,7 @@ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#d84a96796079c8595a0c78accd1e7709f2277215", "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "requires": { - "bn.js": "^4.11.8", - "ethereumjs-util": "^6.0.0" + "bn.js": "^4.11.8" } }, "ethereumjs-util": { @@ -10076,6 +10124,33 @@ "requires": { "bn.js": "^4.11.8", "ethereumjs-util": "^6.0.0" + }, + "dependencies": { + "ethereumjs-util": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz", + "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==", + "dev": true, + "requires": { + "bn.js": "^4.11.0", + "create-hash": "^1.1.2", + "ethjs-util": "0.1.6", + "keccak": "^1.0.2", + "rlp": "^2.0.0", + "safe-buffer": "^5.1.1", + "secp256k1": "^3.0.1" + } + } + } + }, + "ethjs-util": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz", + "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==", + "dev": true, + "requires": { + "is-hex-prefixed": "1.0.0", + "strip-hex-prefix": "1.0.0" } } } @@ -10084,14 +10159,14 @@ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#2863c40e0982acfc0b7163f0285d4c56427c7799", "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "requires": { - "bn.js": "^4.11.8", - "ethereumjs-util": "^6.0.0" + "bn.js": "^4.11.8" } }, "ethereumjs-util": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz", "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==", + "dev": true, "requires": { "bn.js": "^4.11.0", "create-hash": "^1.1.2", @@ -10192,8 +10267,7 @@ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#d84a96796079c8595a0c78accd1e7709f2277215", "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "requires": { - "bn.js": "^4.11.8", - "ethereumjs-util": "^6.0.0" + "bn.js": "^4.11.8" } }, "ethereumjs-util": { @@ -10324,9 +10398,9 @@ } }, "eth-method-registry": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/eth-method-registry/-/eth-method-registry-1.0.0.tgz", - "integrity": "sha1-8Ij3Wdad6f3BK3EEm83GiKMoOLY=", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/eth-method-registry/-/eth-method-registry-1.2.0.tgz", + "integrity": "sha512-m+nphH4kOxz5KTvQ+BeIKVggxAul1sp4Ev09lfxRXIEHM1t/6NQEtaErL5ddTDFXXFVtTiW8uC9edTVUTnBZNg==", "requires": { "ethjs": "^0.3.0" }, @@ -10502,8 +10576,7 @@ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#d84a96796079c8595a0c78accd1e7709f2277215", "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "requires": { - "bn.js": "^4.11.8", - "ethereumjs-util": "^6.0.0" + "bn.js": "^4.11.8" } }, "ethereumjs-util": { diff --git a/package.json b/package.json index 884c77387..2a02954d2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "test:integration:build": "gulp build:scss", "test:e2e:drizzle:beta": "SELENIUM_BROWSER=chrome test/e2e/beta/run-drizzle.sh", "test:e2e:chrome": "SELENIUM_BROWSER=chrome test/e2e/beta/run-all.sh", + "test:web3:chrome": "SELENIUM_BROWSER=chrome test/e2e/beta/run-web3.sh", + "test:web3:firefox": "SELENIUM_BROWSER=firefox test/e2e/beta/run-web3.sh", "test:e2e:firefox": "SELENIUM_BROWSER=firefox test/e2e/beta/run-all.sh", "test:screens": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:screens:run'", "test:screens:run": "node test/screens/new-ui.js", @@ -82,14 +84,14 @@ "ensnare": "^1.0.0", "eth-bin-to-ops": "^1.0.1", "eth-block-tracker": "^4.1.0", - "eth-contract-metadata": "github:MetaMask/eth-contract-metadata#92e7d1442c7585bfd24e50a0fda78df11dedadfe", + "eth-contract-metadata": "github:MetaMask/eth-contract-metadata#41a14e8004bdd37eaba5af5f2bb1fc4f4ff7063f", "eth-ens-namehash": "^2.0.8", "eth-hd-keyring": "^1.2.2", "eth-json-rpc-filters": "^3.0.1", "eth-json-rpc-infura": "^3.0.0", "eth-keyring-controller": "^3.3.1", "eth-ledger-bridge-keyring": "^0.2.0", - "eth-method-registry": "^1.0.0", + "eth-method-registry": "^1.2.0", "eth-phishing-detect": "^1.1.4", "eth-query": "^2.1.2", "eth-sig-util": "^2.0.2", diff --git a/test/data/v17-long-history.json b/test/data/v17-long-history.json index a33d425f8..cccb1ef96 100644 --- a/test/data/v17-long-history.json +++ b/test/data/v17-long-history.json @@ -54,7 +54,8 @@ "mainnet": "degraded", "ropsten": "ok", "kovan": "ok", - "rinkeby": "ok" + "rinkeby": "ok", + "goerli": "ok" } }, "BlacklistController": { @@ -3050,4 +3051,4 @@ ] } } -}
\ No newline at end of file +} diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js index b1ed8536e..9ef560556 100644 --- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js +++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js @@ -123,7 +123,7 @@ describe('MetaMask', function () { }) it('clicks the "I agree" option on the metametrics opt-in screen', async () => { - const optOutButton = await findElement(driver, By.css('.btn-confirm')) + const optOutButton = await findElement(driver, By.css('.btn-primary')) optOutButton.click() await delay(largeDelayMs) }) diff --git a/test/e2e/beta/run-web3.sh b/test/e2e/beta/run-web3.sh new file mode 100755 index 000000000..9f77060de --- /dev/null +++ b/test/e2e/beta/run-web3.sh @@ -0,0 +1,9 @@ +#!/usr/bin/env bash + +set -e +set -u +set -o pipefail + +export PATH="$PATH:./node_modules/.bin" + +shell-parallel -s 'static-server test/web3 --port 8080' -x 'sleep 5 && mocha test/e2e/beta/web3.spec'
\ No newline at end of file diff --git a/test/e2e/beta/web3.spec.js b/test/e2e/beta/web3.spec.js new file mode 100644 index 000000000..b3962c821 --- /dev/null +++ b/test/e2e/beta/web3.spec.js @@ -0,0 +1,365 @@ +const path = require('path') +const assert = require('assert') +const webdriver = require('selenium-webdriver') +const { By } = webdriver +const { + delay, + buildChromeWebDriver, + buildFirefoxWebdriver, + installWebExt, + getExtensionIdChrome, + getExtensionIdFirefox, +} = require('../func') +const { + checkBrowserForConsoleErrors, + closeAllWindowHandlesExcept, + findElement, + findElements, + openNewPage, + switchToWindowWithTitle, + verboseReportOnFailure, + waitUntilXWindowHandles, +} = require('./helpers') +const fetchMockResponses = require('./fetch-mocks.js') + + +describe('Using MetaMask with an existing account', function () { + let extensionId + let driver + + const testSeedPhrase = 'forum vessel pink push lonely enact gentle tail admit parrot grunt dress' + const regularDelayMs = 1000 + const largeDelayMs = regularDelayMs * 2 + + const button = async (x) => { + const buttoncheck = x + await buttoncheck.click() + await delay(largeDelayMs) + const [results] = await findElements(driver, By.css('#results')) + const resulttext = await results.getText() + var parsedData = JSON.parse(resulttext) + + return (parsedData) + + } + + this.timeout(0) + this.bail(true) + + before(async function () { + let extensionUrl + switch (process.env.SELENIUM_BROWSER) { + case 'chrome': { + const extensionPath = path.resolve('dist/chrome') + driver = buildChromeWebDriver(extensionPath) + extensionId = await getExtensionIdChrome(driver) + await delay(regularDelayMs) + extensionUrl = `chrome-extension://${extensionId}/home.html` + break + } + case 'firefox': { + const extensionPath = path.resolve('dist/firefox') + driver = buildFirefoxWebdriver() + await installWebExt(driver, extensionPath) + await delay(regularDelayMs) + extensionId = await getExtensionIdFirefox(driver) + extensionUrl = `moz-extension://${extensionId}/home.html` + break + } + } + // Depending on the state of the application built into the above directory (extPath) and the value of + // METAMASK_DEBUG we will see different post-install behaviour and possibly some extra windows. Here we + // are closing any extraneous windows to reset us to a single window before continuing. + const [tab1] = await driver.getAllWindowHandles() + await closeAllWindowHandlesExcept(driver, [tab1]) + await driver.switchTo().window(tab1) + await driver.get(extensionUrl) + }) + + beforeEach(async function () { + await driver.executeScript( + 'window.origFetch = window.fetch.bind(window);' + + 'window.fetch = ' + + '(...args) => { ' + + 'if (args[0] === "https://ethgasstation.info/json/ethgasAPI.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasBasic + '\')) }); } else if ' + + '(args[0] === "https://ethgasstation.info/json/predictTable.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } else if ' + + '(args[0].match(/chromeextensionmm/)) { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.metametrics + '\')) }); } else if ' + + '(args[0] === "https://dev.blockscale.net/api/gasexpress.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.gasExpress + '\')) }); } ' + + 'return window.origFetch(...args); };' + + 'function cancelInfuraRequest(requestDetails) {' + + 'console.log("Canceling: " + requestDetails.url);' + + 'return {' + + 'cancel: true' + + '};' + + ' }' + + 'window.chrome && window.chrome.webRequest && window.chrome.webRequest.onBeforeRequest.addListener(' + + 'cancelInfuraRequest,' + + '{urls: ["https://*.infura.io/*"]},' + + '["blocking"]' + + ');' + ) + }) + + afterEach(async function () { + if (process.env.SELENIUM_BROWSER === 'chrome') { + const errors = await checkBrowserForConsoleErrors(driver) + if (errors.length) { + const errorReports = errors.map(err => err.message) + const errorMessage = `Errors found in browser console:\n${errorReports.join('\n')}` + console.error(new Error(errorMessage)) + } + } + if (this.currentTest.state === 'failed') { + await verboseReportOnFailure(driver, this.currentTest) + } + }) + + after(async function () { + await driver.quit() + }) + + describe('First time flow starting from an existing seed phrase', () => { + it('clicks the continue button on the welcome screen', async () => { + await findElement(driver, By.css('.welcome-page__header')) + const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button')) + welcomeScreenBtn.click() + await delay(largeDelayMs) + }) + + it('clicks the "Import Wallet" option', async () => { + const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Import Wallet')]`)) + customRpcButton.click() + await delay(largeDelayMs) + }) + + it('clicks the "No thanks" option on the metametrics opt-in screen', async () => { + const optOutButton = await findElement(driver, By.css('.btn-default')) + optOutButton.click() + await delay(largeDelayMs) + }) + + it('imports a seed phrase', async () => { + const [seedTextArea] = await findElements(driver, By.css('textarea.first-time-flow__textarea')) + await seedTextArea.sendKeys(testSeedPhrase) + await delay(regularDelayMs) + + const [password] = await findElements(driver, By.id('password')) + await password.sendKeys('correct horse battery staple') + const [confirmPassword] = await findElements(driver, By.id('confirm-password')) + confirmPassword.sendKeys('correct horse battery staple') + + const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox')) + await tosCheckBox.click() + + const [importButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`)) + await importButton.click() + await delay(regularDelayMs) + }) + + it('clicks through the success screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`)) + const doneButton = await findElement(driver, By.css('button.first-time-flow__button')) + await doneButton.click() + await delay(regularDelayMs) + }) + }) + + + describe('opens dapp', () => { + + it('switches to mainnet', async () => { + const networkDropdown = await findElement(driver, By.css('.network-name')) + await networkDropdown.click() + await delay(regularDelayMs) + + const [mainnet] = await findElements(driver, By.xpath(`//span[contains(text(), 'Main Ethereum Network')]`)) + await mainnet.click() + await delay(largeDelayMs * 2) + }) + + it('', async () => { + await openNewPage(driver, 'http://127.0.0.1:8080/') + await delay(regularDelayMs) + + await waitUntilXWindowHandles(driver, 3) + const windowHandles = await driver.getAllWindowHandles() + + const extension = windowHandles[0] + const popup = await switchToWindowWithTitle(driver, 'MetaMask Notification', windowHandles) + const dapp = windowHandles.find(handle => handle !== extension && handle !== popup) + + await delay(regularDelayMs) + const approveButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Connect')]`)) + await approveButton.click() + + await driver.switchTo().window(dapp) + await delay(regularDelayMs) + + + }) + }) + + describe('testing web3 methods', async () => { + + + it('testing hexa methods', async () => { + + + var List = await driver.findElements(By.className('hexaNumberMethods')) + + for (let i = 0; i < List.length; i++) { + try { + + var parsedData = await button(List[i]) + console.log(parsedData) + var result = parseInt(parsedData.result, 16) + + assert.equal((typeof result === 'number'), true) + await delay(regularDelayMs) + } catch (err) { + console.log(err) + assert(false) + + } + } + }) + + it('testing booleanMethods', async () => { + + var List = await driver.findElements(By.className('booleanMethods')) + + for (let i = 0; i < List.length; i++) { + try { + + var parsedData = await button(List[i]) + console.log(parsedData) + var result = parsedData.result + + assert.equal(result, false) + await delay(regularDelayMs) + } catch (err) { + console.log(err) + assert(false) + + + } + } + + }) + + it('testing transactionMethods', async () => { + + var List = await driver.findElements(By.className('transactionMethods')) + + for (let i = 0; i < List.length; i++) { + try { + + var parsedData = await button(List[i]) + + console.log(parsedData.result.blockHash) + + var result = [] + result.push(parseInt(parsedData.result.blockHash, 16)) + result.push(parseInt(parsedData.result.blockNumber, 16)) + result.push(parseInt(parsedData.result.gas, 16)) + result.push(parseInt(parsedData.result.gasPrice, 16)) + result.push(parseInt(parsedData.result.hash, 16)) + result.push(parseInt(parsedData.result.input, 16)) + result.push(parseInt(parsedData.result.nonce, 16)) + result.push(parseInt(parsedData.result.r, 16)) + result.push(parseInt(parsedData.result.s, 16)) + result.push(parseInt(parsedData.result.v, 16)) + result.push(parseInt(parsedData.result.to, 16)) + result.push(parseInt(parsedData.result.value, 16)) + + + result.forEach((value) => { + assert.equal((typeof value === 'number'), true) + }) + + + } catch (err) { + + console.log(err) + assert(false) + + + } + } + + }) + + it('testing blockMethods', async () => { + + var List = await driver.findElements(By.className('blockMethods')) + + for (let i = 0; i < List.length; i++) { + try { + + var parsedData = await button(List[i]) + console.log(JSON.stringify(parsedData) + i) + + console.log(parsedData.result.parentHash) + + var result = parseInt(parsedData.result.parentHash, 16) + + assert.equal((typeof result === 'number'), true) + await delay(regularDelayMs) + } catch (err) { + + console.log(err) + assert(false) + + + } + } + }) + + it('testing methods', async () => { + + var List = await driver.findElements(By.className('methods')) + var parsedData + var result + + for (let i = 0; i < List.length; i++) { + try { + + if (i === 2) { + + parsedData = await button(List[i]) + console.log(parsedData.result.blockHash) + + result = parseInt(parsedData.result.blockHash, 16) + + assert.equal((typeof result === 'number' || (result === 0)), true) + await delay(regularDelayMs) + } else { + parsedData = await button(List[i]) + console.log(parsedData.result) + + result = parseInt(parsedData.result, 16) + + assert.equal((typeof result === 'number' || (result === 0)), true) + await delay(regularDelayMs) + } + + + } catch (err) { + + console.log(err) + assert(false) + + + } + } + }) + + + }) + + + }) diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js index e4540c4f2..c3b0dfcff 100644 --- a/test/integration/lib/confirm-sig-requests.js +++ b/test/integration/lib/confirm-sig-requests.js @@ -44,7 +44,7 @@ async function runConfirmSigRequestsTest (assert, done) { let confirmSigRowValue = await queryAsync($, '.request-signature__row-value') assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') - let confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large') + let confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large') confirmSigSignButton[0].click() await timeout(1000) confirmSigHeadline = await queryAsync($, '.request-signature__headline') @@ -53,7 +53,7 @@ async function runConfirmSigRequestsTest (assert, done) { confirmSigRowValue = await queryAsync($, '.request-signature__row-value') assert.ok(confirmSigRowValue[0].textContent.match(/^#\sTerms\sof\sUse/)) - confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large') + confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large') confirmSigSignButton[0].click() await timeout(1000) confirmSigHeadline = await queryAsync($, '.request-signature__headline') @@ -63,7 +63,7 @@ async function runConfirmSigRequestsTest (assert, done) { assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!') assert.equal(confirmSigRowValue[1].textContent, '1337') - confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large') + confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large') confirmSigSignButton[0].click() await timeout(2000) diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index d7003f4cc..6a58611d1 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -43,16 +43,13 @@ async function runSendFlowTest (assert, done) { selectState.val('send new ui') reactTriggerChange(selectState[0]) - const sendScreenButton = await queryAsync($, 'button.btn-primary.transaction-view-balance__button') + const sendScreenButton = await queryAsync($, 'button.btn-secondary.transaction-view-balance__button') assert.ok(sendScreenButton[1], 'send screen button present') sendScreenButton[1].click() const sendTitle = await queryAsync($, '.page-container__title') assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct') - const sendCopy = await queryAsync($, '.page-container__subtitle') - assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy') - const sendFromField = await queryAsync($, '.send-v2__form-field') assert.ok(sendFromField[0], 'send screen has a from field') @@ -72,7 +69,7 @@ async function runSendFlowTest (assert, done) { const sendToAccountAddress = sendToFieldInput.val() assert.equal(sendToAccountAddress, '0x2f8D4a878cFA04A6E60D46362f5644DeAb66572D', 'send to dropdown selects the correct address') - const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)') + const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(3)') sendAmountField.find('.unit-input')[0].click() const sendAmountFieldInput = await findAsync(sendAmountField, '.unit-input__input') @@ -88,7 +85,7 @@ async function runSendFlowTest (assert, done) { errorMessage = $('.send-v2__error') assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected') - const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button') + const sendButton = await queryAsync($, 'button.btn-secondary.btn--large.page-container__footer-button') assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') sendButton[0].click() await timeout() @@ -115,14 +112,14 @@ async function runSendFlowTest (assert, done) { sendToFieldInputInEdit[0].focus() sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb') - const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)') + const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(3)') sendAmountFieldInEdit.find('.unit-input')[0].click() const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('.unit-input__input') sendAmountFieldInputInEdit.val('1.0') reactTriggerChange(sendAmountFieldInputInEdit[0]) - const sendButtonInEdit = await queryAsync($, '.btn-primary.btn--large.page-container__footer-button') + const sendButtonInEdit = await queryAsync($, '.btn-secondary.btn--large.page-container__footer-button') assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') selectState.val('send new ui') diff --git a/test/unit/app/controllers/infura-controller-test.js b/test/unit/app/controllers/infura-controller-test.js index 7bd95dd4b..316f80378 100644 --- a/test/unit/app/controllers/infura-controller-test.js +++ b/test/unit/app/controllers/infura-controller-test.js @@ -4,7 +4,7 @@ const InfuraController = require('../../../../app/scripts/controllers/infura') describe('infura-controller', function () { let infuraController, sandbox, networkStatus - const response = {'mainnet': 'degraded', 'ropsten': 'ok', 'kovan': 'ok', 'rinkeby': 'down'} + const response = {'mainnet': 'degraded', 'ropsten': 'ok', 'kovan': 'ok', 'rinkeby': 'down', 'goerli': 'ok'} before(async function () { infuraController = new InfuraController() @@ -58,5 +58,15 @@ describe('infura-controller', function () { assert.equal(networkStatus.rinkeby, 'down') }) }) + + describe('Goerli', function () { + it('should have Goerli', function () { + assert.equal(Object.keys(networkStatus)[4], 'goerli') + }) + + it('should have a value for Goerli status', function () { + assert.equal(networkStatus.goerli, 'ok') + }) + }) }) }) diff --git a/test/unit/app/controllers/network-contoller-test.js b/test/unit/app/controllers/network-contoller-test.js index 7959e6cc1..32f7b337d 100644 --- a/test/unit/app/controllers/network-contoller-test.js +++ b/test/unit/app/controllers/network-contoller-test.js @@ -92,6 +92,9 @@ describe('Network utils', () => { }, { input: 'mainnet', expected: 'Main Ethereum Network', + }, { + input: 'goerli', + expected: 'Goerli', }, ] diff --git a/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js b/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js index cb413545f..d3e47c67e 100644 --- a/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js +++ b/test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js @@ -4,6 +4,7 @@ const { ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, + GOERLI_CODE, } = require('../../../../../app/scripts/controllers/network/enums') const KeyringController = require('eth-keyring-controller') @@ -27,14 +28,14 @@ describe('Recipient Blacklist Checker', function () { describe('#checkAccount', function () { it('does not fail on test networks', function () { let callCount = 0 - const networks = [ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE] + const networks = [ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, GOERLI_CODE] for (const networkId in networks) { publicAccounts.forEach((account) => { recipientBlackListChecker.checkAccount(networkId, account) callCount++ }) } - assert.equal(callCount, 30) + assert.equal(callCount, 40) }) it('fails on mainnet', function () { diff --git a/test/unit/ui/etherscan-prefix-for-network.spec.js b/test/unit/ui/etherscan-prefix-for-network.spec.js index f0aeb8306..45e6e563d 100644 --- a/test/unit/ui/etherscan-prefix-for-network.spec.js +++ b/test/unit/ui/etherscan-prefix-for-network.spec.js @@ -23,4 +23,8 @@ describe('Etherscan Network Prefix', () => { assert.equal(etherscanNetworkPrefix(42), 'kovan.') }) + it('returs goerli as prefix for networkId of 5', () => { + assert.equal(etherscanNetworkPrefix(5), 'goerli.') + }) + }) diff --git a/test/web3/index.html b/test/web3/index.html new file mode 100644 index 000000000..cbc43290c --- /dev/null +++ b/test/web3/index.html @@ -0,0 +1,105 @@ +<html> + <head> + <title>Web3 Test Dapp</title> + </head> + <body> + <div style="display: flex; flex-flow: column;"> + <div style="display: flex; font-size: 1.25rem;">hexaNumberMethods</div> + <div style="display: flex;"> + <button id="eth_blockNumber" class="hexaNumberMethods">eth_blockNumber</button> + + <button id="eth_gasPrice" class="hexaNumberMethods">eth_gasPrice</button> + <button id="eth_newBlockFilter" class="hexaNumberMethods">eth_newBlockFilter</button> + <button id="eth_newPendingTransactionFilter" class="hexaNumberMethods"> + eth_newPendingTransactionFilter + </button> + <button id="eth_getUncleCountByBlockHash" class="hexaNumberMethods"> + eth_getUncleCountByBlockHash + </button> + <button id="eth_getBlockTransactionCountByHash" class="hexaNumberMethods"> + getBlockTransactionCountByHash + </button> + </div> + <div style="display: flex ;"> + <button id="eth_getTransactionCount" class="hexaNumberMethods">eth_getTransactionCount</button> + <button id="eth_getBalance" class="hexaNumberMethods">eth_getBalance</button> + <button id="eth_estimateGas" class="hexaNumberMethods">eth_estimateGas</button> + </div> + <div style="display: flex ;"> + + <button id="eth_getUncleCountByBlockNumber" class="hexaNumberMethods"> + eth_getUncleCountByBlockNumber + </button> + <button id='eth_getBlockTransactionCountByNumber' class="hexaNumberMethods"> + eth_getBlockTransactionCountByNumber + </button> + <button id="eth_protocolVersion" class="hexaNumberMethods">eth_protocolVersion</button> + + <button id="eth_getCode" class="hexaNumberMethods">eth_getCode</button> + </div> + </div> + <div style="display: flex; flex-flow: column;"> + <div style="display: flex; font-size: 1.25rem;">booleanMethods</div> + <div style="display: flex ;"> + <button id="eth_uninstallFilter" class = 'booleanMethods'>eth_uninstallFilter</button> + <button id="eth_mining" class = 'booleanMethods'>eth_mining</button> + <button id="eth_syncing" class = 'booleanMethods'>eth_syncing</button> + </div> + </div> + <div style="display: flex; flex-flow: column;"> + <div style="display: flex; font-size: 1.25rem;" >transactionMethods</div> + <div style="display: flex ;"> + <button id="eth_getTransactionByHash" class='transactionMethods'>eth_getTransactionByHash</button> + <button id="eth_getTransactionByBlockHashAndIndex" class = 'transactionMethods'> + eth_getTransactionByBlockHashAndIndex + </button> + <button id="eth_getTransactionByBlockNumberAndIndex" class="transactionMethods"> + eth_getTransactionByBlockNumberAndIndex + </button> + + + </div> + </div> + + <div style="display: flex; flex-flow: column;"> + <div style="display: flex; font-size: 1.25rem;">blockMethods</div> + + <div style="display: flex ;"> + + + <button id="eth_getUncleByBlockHashAndIndex" class="blockMethods"> + eth_getUncleByBlockHashAndIndex + </button> + <button id="eth_getBlockByHash" class="blockMethods">eth_getBlockByHash</button> + </div> + <div style="display: flex ;"> + <button id="eth_getBlockByNumber" class="blockMethods">eth_getBlockByNumber</button> + + + </div> + </div> + + <div style="display: flex; flex-flow: column;"> + <div style="display: flex; font-size: 1.25rem;">Methods</div> + <div style="display: flex ;"> + <button id="eth_call" class = 'methods'>eth_call</button> + <button id="eth_getStorageAt" class="methods">eth_getStorageAt</button> + <button id="eth_getTransactionReceipt" class="methods"> + eth_getTransactionReceipt + </button> + + </div> + </div> + <div style="display: flex; flex-flow: column;"> + <div id='results'></div> + </div> + + + + + </div> + <script src="schema.js"></script> + <script src="web3.js"></script> + + </body> +</html> diff --git a/test/web3/schema.js b/test/web3/schema.js new file mode 100644 index 000000000..61977f140 --- /dev/null +++ b/test/web3/schema.js @@ -0,0 +1,209 @@ +/* eslint no-unused-vars: 0 */ + +var params = { + // diffrent params used in the methods + param: [], + blockHashParams: '0xb3b20624f8f0f86eb50dd04688409e5cea4bd02d700bf6e79e9384d47d6a5a35', + filterParams: ['0xfe704947a3cd3ca12541458a4321c869'], + transactionHashParams: [ + '0xbb3a336e3f823ec18197f1e13ee875700f08f03e2cab75f0d0b118dabb44cba0', + ], + blockHashAndIndexParams: [ + '0xb3b20624f8f0f86eb50dd04688409e5cea4bd02d700bf6e79e9384d47d6a5a35', + '0x0', + ], + uncleByBlockNumberAndIndexParams: ['0x29c', '0x0'], + blockParameterParams: '0x5bad55', + data: '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675', + addressParams: '0xc94770007dda54cF92009BFF0dE90c06F603a09f', + getStorageAtParams: [ + '0x295a70b2de5e3953354a6a8344e616ed314d7251', + '0x6661e9d6d8b923d5bbaab1b96e1dd51ff6ea2a93520fdc9eb75d059238b8c5e9', + '0x65a8db', + ], + getCodeParams: ['0x06012c8cf97bead5deae237070f9587f8e7a266d', '0x65a8db'], + estimateTransaction: { + from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155', + to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567', + gas: '0x76c0', + gasPrice: '0x9184e72a000', + value: '0x9184e72a', + data: '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675', + }, + filterGetLogs: [{'blockHash': '0x7c5a35e9cb3e8ae0e221ab470abae9d446c3a5626ce6689fc777dcffcab52c70', 'topics': ['0x241ea03ca20251805084d27d4440371c34a0b85ff108f6bb5611248f73818b80']}], + block: { + __required: [], + number: 'Q', + hash: 'D32', + parentHash: 'D32', + nonce: 'D', + sha3Uncles: 'D', + logsBloom: 'D', + transactionsRoot: 'D', + stateRoot: 'D', + receiptsRoot: 'D', + miner: 'D', + difficulty: 'Q', + totalDifficulty: 'Q', + extraData: 'D', + size: 'Q', + gasLimit: 'Q', + gasUsed: 'Q', + timestamp: 'Q', + transactions: ['DATA|Transaction'], + uncles: ['D'], + }, + transaction: { + __required: [], + hash: 'D32', + nonce: 'Q', + blockHash: 'D32', + blockNumber: 'Q', + transactionIndex: 'Q', + from: 'D20', + to: 'D20', + value: 'Q', + gasPrice: 'Q', + gas: 'Q', + input: 'D', + }, + receipt: { + __required: [], + transactionHash: 'D32', + transactionIndex: 'Q', + blockHash: 'D32', + blockNumber: 'Q', + cumulativeGasUsed: 'Q', + gasUsed: 'Q', + contractAddress: 'D20', + logs: ['FilterChange'], + }, + + filterChange: { + __required: [], + removed: 'B', + logIndex: 'Q', + transactionIndex: 'Q', + transactionHash: 'D32', + blockHash: 'D32', + blockNumber: 'Q', + address: 'D20', + data: 'Array|DATA', + topics: ['D'], + }, +} + +var methods = { + hexaNumberMethods: { + // these are the methods which have output in the form of hexa decimal numbers + eth_blockNumber: ['eth_blockNumber', params.param, 'Q'], + eth_gasPrice: ['eth_gasPrice', params.param, 'Q'], + eth_newBlockFilter: ['eth_newBlockFilter', params.param, 'Q'], + eth_newPendingTransactionFilter: [ + 'eth_newPendingTransactionFilter', + params.param, + 'Q', + ], + eth_getUncleCountByBlockHash: [ + 'eth_getUncleCountByBlockHash', + [params.blockHashParams], + 'Q', + 1, + ], + eth_getBlockTransactionCountByHash: [ + 'eth_getBlockTransactionCountByHash', + [params.blockHashParams], + 'Q', + 1, + ], + eth_getTransactionCount: [ + 'eth_getTransactionCount', + [params.addressParams, params.blockParameterParams], + 'Q', + 1, + 2, + ], + eth_getBalance: ['eth_getBalance', [params.addressParams, 'latest'], 'Q', 1, 2], + eth_estimateGas: ['eth_estimateGas', [params.estimateTransaction], 'Q', 1], + eth_getUncleCountByBlockNumber: [ + 'eth_getUncleCountByBlockNumber', + [params.blockParameterParams], + 'Q', + 1, + ], + eth_getBlockTransactionCountByNumber: [ + 'eth_getBlockTransactionCountByNumber', + ['latest'], + 'Q', + 1, + ], + eth_protocolVersion: ['eth_protocolVersion', params.param, 'S'], + eth_getCode: ['eth_getCode', params.getCodeParams, 'D', 1, 2], + }, + booleanMethods: { + // these are the methods which have output in the form of boolean + eth_uninstallFilter: ['eth_uninstallFilter', params.filterParams, 'B', 1], + eth_mining: ['eth_mining', params.param, 'B'], + eth_syncing: ['eth_syncing', params.param, 'B|EthSyncing'], + }, + transactionMethods: { + // these are the methods which have output in the form of transaction object + eth_getTransactionByHash: [ + 'eth_getTransactionByHash', + params.transactionHashParams, + params.transaction, + 1, + ], + eth_getTransactionByBlockHashAndIndex: [ + 'eth_getTransactionByBlockHashAndIndex', + params.blockHashAndIndexParams, + params.transaction, + 2, + ], + eth_getTransactionByBlockNumberAndIndex: [ + 'eth_getTransactionByBlockNumberAndIndex', + [params.blockParameterParams, '0x0'], + params.transaction, + 2, + ], + + }, + blockMethods: { + // these are the methods which have output in the form of a block + + eth_getUncleByBlockNumberAndIndex: [ + 'eth_getUncleByBlockNumberAndIndex', + params.uncleByBlockNumberAndIndexParams, + params.block, + 2, + ], + eth_getBlockByHash: [ + 'eth_getBlockByHash', + [params.params, false], + params.block, + 2, + ], + eth_getBlockByNumber: [ + 'eth_getBlockByNumber', + [params.blockParameterParams, false], + params.block, + 2, + ], + }, + + methods: { + // these are the methods which have output in the form of bytes data + + eth_call: ['eth_call', [params.estimateTransaction, 'latest'], 'D', 1, 2], + eth_getStorageAt: ['eth_getStorageAt', params.getStorageAtParams, 'D', 2, 2], + eth_getTransactionReceipt: [ + 'eth_getTransactionReceipt', + params.transactionHashParams, + params.receipt, + 1, + ], + + }, + +} + diff --git a/test/web3/web3.js b/test/web3/web3.js new file mode 100644 index 000000000..5c2de078d --- /dev/null +++ b/test/web3/web3.js @@ -0,0 +1,34 @@ +/* eslint no-undef: 0 */ + +var json = methods + +web3.currentProvider.enable().then(() => { + + Object.keys(json).forEach(methodGroupKey => { + + console.log(methodGroupKey) + const methodGroup = json[methodGroupKey] + console.log(methodGroup) + Object.keys(methodGroup).forEach(methodKey => { + + const methodButton = document.getElementById(methodKey) + methodButton.addEventListener('click', function (event) { + + window.ethereum.sendAsync({ + method: methodKey, + params: methodGroup[methodKey][1], + }, function (err, result) { + if (err) { + console.log(err) + console.log(methodKey) + } else { + document.getElementById('results').innerHTML = JSON.stringify(result) + } + }) + }) + + }) + + }) + }) + diff --git a/ui/app/components/app/add-token-button/index.scss b/ui/app/components/app/add-token-button/index.scss index 39f404716..c4350a2d3 100644 --- a/ui/app/components/app/add-token-button/index.scss +++ b/ui/app/components/app/add-token-button/index.scss @@ -17,10 +17,7 @@ } &__button { - font-size: 0.75rem; + @extend %small-link; margin: 1rem; - text-transform: uppercase; - color: $curious-blue; - cursor: pointer; } } diff --git a/ui/app/components/app/coinbase-form.js b/ui/app/components/app/coinbase-form.js deleted file mode 100644 index 24d287604..000000000 --- a/ui/app/components/app/coinbase-form.js +++ /dev/null @@ -1,69 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../store/actions') - -CoinbaseForm.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps)(CoinbaseForm) - - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - } -} - -inherits(CoinbaseForm, Component) - -function CoinbaseForm () { - Component.call(this) -} - -CoinbaseForm.prototype.render = function () { - var props = this.props - - return h('.flex-column', { - style: { - marginTop: '35px', - padding: '25px', - width: '100%', - }, - }, [ - h('.flex-row', { - style: { - justifyContent: 'space-around', - margin: '33px', - marginTop: '0px', - }, - }, [ - h('button.btn-green', { - onClick: this.toCoinbase.bind(this), - }, this.context.t('continueToCoinbase')), - - h('button.btn-red', { - onClick: () => props.dispatch(actions.goHome()), - }, this.context.t('cancel')), - ]), - ]) -} - -CoinbaseForm.prototype.toCoinbase = function () { - const props = this.props - const address = props.buyView.buyAddress - props.dispatch(actions.buyEth({ network: '1', address, amount: 0 })) -} - -CoinbaseForm.prototype.renderLoading = function () { - return h('img', { - style: { - width: '27px', - marginRight: '-27px', - }, - src: 'images/loading.svg', - }) -} diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js index dca77bb00..1f9436810 100644 --- a/ui/app/components/app/customize-gas-modal/index.js +++ b/ui/app/components/app/customize-gas-modal/index.js @@ -18,11 +18,11 @@ const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, MIN_GAS_PRICE_GWEI, -} = require('../send/send.constants') +} = require('../../../pages/send/send.constants') const { isBalanceSufficient, -} = require('../send/send.utils') +} = require('../../../pages/send/send.utils') const { conversionUtil, @@ -47,7 +47,7 @@ const { const { getGasPrice, getGasLimit, -} = require('../send/send.selectors') +} = require('../../../pages/send/send.selectors') function mapStateToProps (state) { const selectedToken = getSelectedToken(state) @@ -382,7 +382,7 @@ CustomizeGasModal.prototype.render = function () { onClick: this.props.hideModal, }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', className: 'send-v2__customize-gas__save', onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), disabled: error, diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js index 3d9037a06..dbe3f1bc8 100644 --- a/ui/app/components/app/dropdowns/network-dropdown.js +++ b/ui/app/components/app/dropdowns/network-dropdown.js @@ -207,6 +207,28 @@ NetworkDropdown.prototype.render = function () { h( DropdownMenuItem, { + key: 'goerli', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => this.handleClick('goerli'), + style: dropdownMenuItemStyle, + }, + [ + providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + h(NetworkDropdownIcon, { + backgroundColor: '#3099f2', // $dodger-blue + isSelected: providerType === 'goerli', + }), + h('span.network-name-item', { + style: { + color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', + }, + }, this.context.t('goerli')), + ] + ), + + h( + DropdownMenuItem, + { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => this.handleClick('localhost'), @@ -285,6 +307,10 @@ NetworkDropdown.prototype.getNetworkName = function () { name = this.context.t('kovan') } else if (providerName === 'rinkeby') { name = this.context.t('rinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('localhost') + } else if (providerName === 'goerli') { + name = this.context.t('goerli') } else { name = provider.nickname || this.context.t('unknownNetwork') } diff --git a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js index 91e7899a7..4a81b973f 100644 --- a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js +++ b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js @@ -62,7 +62,7 @@ describe('Network Dropdown', () => { }) it('renders 7 DropDownMenuItems ', () => { - assert.equal(wrapper.find(DropdownMenuItem).length, 7) + assert.equal(wrapper.find(DropdownMenuItem).length, 8) }) it('checks background color for first NetworkDropdownIcon', () => { @@ -82,15 +82,19 @@ describe('Network Dropdown', () => { }) it('checks background color for fifth NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b') + assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('backgroundColor'), '#3099f2') // Goerli Blue + }) + + it('checks background color for sixth NetworkDropdownIcon', () => { + assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b') }) it('checks dropdown for frequestRPCList from state ', () => { - assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545') + assert.equal(wrapper.find(DropdownMenuItem).at(6).text(), '✓http://localhost:7545') }) - it('checks background color for sixth NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b') + it('checks background color for seventh NetworkDropdownIcon', () => { + assert.equal(wrapper.find(NetworkDropdownIcon).at(6).prop('innerBorder'), '1px solid #9b9b9b') }) }) diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js index 274058a1b..424c5061e 100644 --- a/ui/app/components/app/ens-input.js +++ b/ui/app/components/app/ens-input.js @@ -10,7 +10,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect -const ToAutoComplete = require('./send/to-autocomplete').default +const ToAutoComplete = require('../../pages/send/to-autocomplete').default const log = require('loglevel') const { isValidENSAddress } = require('../../helpers/utils/util') diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index d541056f4..0e7e30347 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -63,7 +63,7 @@ import { import { calcGasTotal, isBalanceSufficient, -} from '../../send/send.utils' +} from '../../../../pages/send/send.utils' import { addHexPrefix } from 'ethereumjs-util' import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils' diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss index cb2f3ecf1..92b4aba42 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss @@ -65,6 +65,7 @@ .gas-price-button-group--small { display: flex; justify-content: stretch; + height: 54px; @media screen and (max-width: $break-small) { max-width: 260px; @@ -80,10 +81,14 @@ &__label { font-weight: 500; + line-height: 16px; + padding-bottom: 4px; } &__primary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -92,6 +97,8 @@ &__secondary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -99,19 +106,13 @@ } &__loading-container { - height: 78px; + height: 54px; } .button-group__button, .button-group__button--active { - height: 78px; background: white; color: $scorpion; - padding-top: 9px; - padding-left: 8.5px; - - @media screen and (max-width: $break-small) { - padding-left: 4px; - } + padding: 0 4px; div { display: flex; diff --git a/ui/app/components/app/loading-network-screen/loading-network-screen.component.js b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js index 348a997c8..97b16d08f 100644 --- a/ui/app/components/app/loading-network-screen/loading-network-screen.component.js +++ b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js @@ -45,6 +45,10 @@ export default class LoadingNetworkScreen extends PureComponent { name = this.context.t('connectingToKovan') } else if (providerName === 'rinkeby') { name = this.context.t('connectingToRinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('connectingToLocalhost') + } else if (providerName === 'goerli') { + name = this.context.t('connectingToGoerli') } else { name = this.context.t('connectingTo', [providerId]) } diff --git a/ui/app/components/app/modal/modal.component.js b/ui/app/components/app/modal/modal.component.js index 49e131b3c..44b180ac8 100644 --- a/ui/app/components/app/modal/modal.component.js +++ b/ui/app/components/app/modal/modal.component.js @@ -20,7 +20,7 @@ export default class Modal extends PureComponent { } static defaultProps = { - submitType: 'primary', + submitType: 'secondary', cancelType: 'default', } diff --git a/ui/app/components/app/modal/tests/modal.component.test.js b/ui/app/components/app/modal/tests/modal.component.test.js index a13d7c06a..5922177a6 100644 --- a/ui/app/components/app/modal/tests/modal.component.test.js +++ b/ui/app/components/app/modal/tests/modal.component.test.js @@ -12,7 +12,7 @@ describe('Modal Component', () => { assert.equal(wrapper.find('.modal-container').length, 1) const buttons = wrapper.find(Button) assert.equal(buttons.length, 1) - assert.equal(buttons.at(0).props().type, 'primary') + assert.equal(buttons.at(0).props().type, 'secondary') }) it('should render a modal with a cancel and a submit button', () => { @@ -38,7 +38,7 @@ describe('Modal Component', () => { cancelButton.simulate('click') assert.equal(handleCancel.callCount, 1) - assert.equal(submitButton.props().type, 'primary') + assert.equal(submitButton.props().type, 'secondary') assert.equal(submitButton.props().children, 'Submit') assert.equal(handleSubmit.callCount, 0) submitButton.simulate('click') diff --git a/ui/app/components/app/modals/account-details-modal.js b/ui/app/components/app/modals/account-details-modal.js index 94ed04df9..1b1ca6b8e 100644 --- a/ui/app/components/app/modals/account-details-modal.js +++ b/ui/app/components/app/modals/account-details-modal.js @@ -84,7 +84,7 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), h(Button, { - type: 'primary', + type: 'secondary', className: 'account-modal__button', onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, this.context.t('etherscanView')), @@ -92,7 +92,7 @@ AccountDetailsModal.prototype.render = function () { // Holding on redesign for Export Private Key functionality exportPrivateKeyFeatureEnabled ? h(Button, { - type: 'primary', + type: 'secondary', className: 'account-modal__button', onClick: () => showExportPrivateKeyModal(), }, this.context.t('exportPrivateKey')) : null, diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js index 5db5c79e7..387da2f79 100644 --- a/ui/app/components/app/modals/customize-gas/customize-gas.component.js +++ b/ui/app/components/app/modals/customize-gas/customize-gas.component.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' import GasModalCard from '../../customize-gas-modal/gas-modal-card' -import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' +import { MIN_GAS_PRICE_GWEI } from '../../../../pages/send/send.constants' import Button from '../../../ui/button' import { @@ -128,7 +128,7 @@ export default class CustomizeGas extends Component { { t('cancel') } </Button> <Button - type="primary" + type="secondary" className="customize-gas__save" onClick={() => { metricsEvent({ diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js index 6f622a17c..8f7ef792c 100644 --- a/ui/app/components/app/modals/deposit-ether-modal.js +++ b/ui/app/components/app/modals/deposit-ether-modal.js @@ -119,7 +119,7 @@ DepositEtherModal.prototype.renderRow = function ({ !hideButton && h('div.deposit-ether-modal__buy-row__button', [ h(Button, { - type: 'primary', + type: 'secondary', className: 'deposit-ether-modal__deposit-button', large: true, onClick: onButtonClick, @@ -133,7 +133,7 @@ DepositEtherModal.prototype.render = function () { const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props const { buyingWithShapeshift } = this.state - const isTestNetwork = ['3', '4', '42'].find(n => n === network) + const isTestNetwork = ['3', '4', '5', '42'].find(n => n === network) const networkName = getNetworkDisplayName(network) return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ diff --git a/ui/app/components/app/modals/edit-account-name-modal.js b/ui/app/components/app/modals/edit-account-name-modal.js index 41a9862e9..aa21765c4 100644 --- a/ui/app/components/app/modals/edit-account-name-modal.js +++ b/ui/app/components/app/modals/edit-account-name-modal.js @@ -66,7 +66,7 @@ EditAccountNameModal.prototype.render = function () { value: this.state.inputText, }, []), - h('button.btn-clear.edit-account-name-modal-save-button.allcaps', { + h('button.button.btn-secondary.edit-account-name-modal-save-button.allcaps', { onClick: () => { if (this.state.inputText.length !== 0) { setAccountLabel(identity.address, this.state.inputText) diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js index 639887d4c..70987330a 100644 --- a/ui/app/components/app/modals/export-private-key-modal.js +++ b/ui/app/components/app/modals/export-private-key-modal.js @@ -110,14 +110,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, (privateKey ? ( h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'export-private-key__button', onClick: () => hideModal(), }, this.context.t('done')) ) : ( h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'export-private-key__button', onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address), diff --git a/ui/app/components/app/modals/hide-token-confirmation-modal.js b/ui/app/components/app/modals/hide-token-confirmation-modal.js index 8a9a48fd2..e2b098923 100644 --- a/ui/app/components/app/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/app/modals/hide-token-confirmation-modal.js @@ -67,12 +67,12 @@ HideTokenConfirmationModal.prototype.render = function () { ]), h('div.hide-token-confirmation__buttons', {}, [ - h('button.btn-cancel.hide-token-confirmation__button.allcaps', { + h('button.btn-default.hide-token-confirmation__button.btn--large', { onClick: () => hideModal(), }, [ this.context.t('cancel'), ]), - h('button.btn-clear.hide-token-confirmation__button.allcaps', { + h('button.btn-secondary.hide-token-confirmation__button.btn--large', { onClick: () => hideToken(address), }, [ this.context.t('hide'), diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js index 2d73b2cfa..b8503ec1a 100644 --- a/ui/app/components/app/modals/notification-modal.js +++ b/ui/app/components/app/modals/notification-modal.js @@ -37,11 +37,11 @@ class NotificationModal extends Component { showButtons && h('div.notification-modal__buttons', [ - showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', { + showCancelButton && h('div.btn-default.notification-modal__buttons__btn', { onClick: hideModal, }, 'Cancel'), - showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', { + showConfirmButton && h('div.button.btn-secondary.notification-modal__buttons__btn', { onClick: () => { onConfirm() hideModal() diff --git a/ui/app/components/app/network-display/index.scss b/ui/app/components/app/network-display/index.scss index e9f2f2057..d70786d20 100644 --- a/ui/app/components/app/network-display/index.scss +++ b/ui/app/components/app/network-display/index.scss @@ -26,6 +26,10 @@ &--rinkeby { background-color: lighten($tulip-tree, 35%); } + + &--goerli { + background-color: lighten($dodger-blue, 35%); + } } &__name { @@ -53,5 +57,9 @@ &--rinkeby { background-color: $tulip-tree; } + + &--goerli { + background-color: $dodger-blue; + } } } diff --git a/ui/app/components/app/network-display/network-display.component.js b/ui/app/components/app/network-display/network-display.component.js index 1142e8606..9ef5341b0 100644 --- a/ui/app/components/app/network-display/network-display.component.js +++ b/ui/app/components/app/network-display/network-display.component.js @@ -6,12 +6,14 @@ import { ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, + GOERLI_CODE, } from '../../../../../app/scripts/controllers/network/enums' const networkToClassHash = { [MAINNET_CODE]: 'mainnet', [ROPSTEN_CODE]: 'ropsten', [RINKEYBY_CODE]: 'rinkeby', + [GOERLI_CODE]: 'goerli', [KOVAN_CODE]: 'kovan', } diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index e18404f42..783fb36df 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -50,6 +50,9 @@ Network.prototype.render = function () { } else if (providerName === 'rinkeby') { hoverText = context.t('rinkeby') iconName = 'rinkeby-test-network' + } else if (providerName === 'goerli') { + hoverText = context.t('goerli') + iconName = 'goerli-test-network' } else { hoverText = providerId iconName = 'private-network' @@ -63,6 +66,7 @@ Network.prototype.render = function () { 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3, 'kovan-test-network': providerName === 'kovan', 'rinkeby-test-network': providerName === 'rinkeby', + 'goerli-test-network': providerName === 'goerli', }), title: hoverText, onClick: (event) => { @@ -113,33 +117,34 @@ Network.prototype.render = function () { h('.network-name', context.t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) + case 'goerli-test-network': + return h('.network-indicator', [ + h(NetworkDropdownIcon, { + backgroundColor: '#3099f2', // $dodger-blue + nonSelectBackgroundColor: '#ecb23e', + loading: networkNumber === 'loading', + }), + h('.network-name', context.t('goerli')), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), + ]) default: return h('.network-indicator', [ networkNumber === 'loading' - ? h('span.pointer.network-indicator', { - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - }, + ? h('span.pointer.network-loading-spinner', { onClick: (event) => this.props.onClick(event), }, [ h('img', { title: context.t('attemptingConnect'), - style: { - width: '27px', - }, src: 'images/loading.svg', }), ]) : h('i.fa.fa-question-circle.fa-lg', { style: { - margin: '10px', color: 'rgb(125, 128, 130)', }, }), - h('.network-name', providerNick || context.t('privateNetwork')), + h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) } diff --git a/ui/app/components/app/shapeshift-form.js b/ui/app/components/app/shapeshift-form.js index 11459fd5e..34a6f3acd 100644 --- a/ui/app/components/app/shapeshift-form.js +++ b/ui/app/components/app/shapeshift-form.js @@ -245,7 +245,7 @@ ShapeshiftForm.prototype.render = function () { ]), !depositAddress && h(Button, { - type: 'primary', + type: 'secondary', large: true, className: `${btnClass} shapeshift-form__shapeshift-buy-btn`, disabled: !token, diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index e47791b67..fa237f1d1 100644 --- a/ui/app/components/app/signature-request.js +++ b/ui/app/components/app/signature-request.js @@ -311,7 +311,7 @@ SignatureRequest.prototype.renderFooter = function () { }, }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'request-signature__footer__sign-button', onClick: event => { diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js index de8a3bbba..a8fb8c246 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js @@ -15,7 +15,7 @@ import { setCustomGasLimit, } from '../../../ducks/gas/gas.duck' import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors' -import { isBalanceSufficient } from '../send/send.utils' +import { isBalanceSufficient } from '../../../pages/send/send.utils' const mapStateToProps = (state, ownProps) => { const { metamask: { knownMethodData, accounts } } = state diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js index 8559e2233..3f6abbb00 100644 --- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js +++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js @@ -87,7 +87,7 @@ export default class TransactionViewBalance extends PureComponent { { !selectedToken && ( <Button - type="primary" + type="secondary" className="transaction-view-balance__button" onClick={() => { metricsEvent({ @@ -105,14 +105,14 @@ export default class TransactionViewBalance extends PureComponent { ) } <Button - type="primary" + type="secondary" className="transaction-view-balance__button" onClick={() => { metricsEvent({ eventOpts: { category: 'Navigation', action: 'Home', - name: 'Clicked Send', + name: selectedToken ? 'Clicked Send: Token' : 'Clicked Send: Eth', }, }) history.push(SEND_ROUTE) diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js index cec8228b1..b8bae5421 100644 --- a/ui/app/components/app/wallet-view.js +++ b/ui/app/components/app/wallet-view.js @@ -190,7 +190,7 @@ WalletView.prototype.render = function () { identities[selectedAddress].name, ]), - h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')), + h('button.btn-secondary.wallet-view__details-button', this.context.t('details')), ]), ]), diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js index 8abe1ab18..d9627e31b 100644 --- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js +++ b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import AccountListItem from '../../app/send/account-list-item/account-list-item.component' +import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component' export default class AccountDropdownMini extends PureComponent { static propTypes = { diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js index bc74ceb3c..9691f38aa 100644 --- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js +++ b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import AccountDropdownMini from '../account-dropdown-mini.component' -import AccountListItem from '../../../app/send/account-list-item/account-list-item.component' +import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component' describe('AccountDropdownMini', () => { it('should render an account with an icon', () => { diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js index 5d19219b4..39e81317c 100644 --- a/ui/app/components/ui/button/button.component.js +++ b/ui/app/components/ui/button/button.component.js @@ -5,7 +5,7 @@ import classnames from 'classnames' const CLASSNAME_DEFAULT = 'btn-default' const CLASSNAME_PRIMARY = 'btn-primary' const CLASSNAME_SECONDARY = 'btn-secondary' -const CLASSNAME_CONFIRM = 'btn-confirm' +const CLASSNAME_CONFIRM = 'btn-primary' const CLASSNAME_RAISED = 'btn-raised' const CLASSNAME_LARGE = 'btn--large' const CLASSNAME_FIRST_TIME = 'btn--first-time' @@ -14,6 +14,11 @@ const typeHash = { default: CLASSNAME_DEFAULT, primary: CLASSNAME_PRIMARY, secondary: CLASSNAME_SECONDARY, + warning: 'btn-warning', + danger: 'btn-danger', + 'danger-primary': 'btn-danger-primary', + link: 'btn-link', + // TODO: Legacy button type to be deprecated confirm: CLASSNAME_CONFIRM, raised: CLASSNAME_RAISED, 'first-time': CLASSNAME_FIRST_TIME, @@ -38,7 +43,7 @@ export default class Button extends Component { <button className={classnames( 'button', - typeHash[type], + typeHash[type] || CLASSNAME_DEFAULT, large && CLASSNAME_LARGE, className )} diff --git a/ui/app/components/ui/button/button.stories.js b/ui/app/components/ui/button/button.stories.js index 667824a47..9df53439d 100644 --- a/ui/app/components/ui/button/button.stories.js +++ b/ui/app/components/ui/button/button.stories.js @@ -2,57 +2,70 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import Button from '.' -import { text } from '@storybook/addon-knobs/react' +import { text, boolean } from '@storybook/addon-knobs/react' +// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')} storiesOf('Button', module) - .add('primary', () => + .add('Button - Primary', () => <Button onClick={action('clicked')} type="primary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> ) - .add('secondary', () => + .add('Button - Secondary', () => <Button onClick={action('clicked')} type="secondary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> ) - .add('default', () => ( + .add('Button - Default', () => <Button onClick={action('clicked')} type="default" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large primary', () => ( + ) + .add('Button - Warning', () => <Button onClick={action('clicked')} - type="primary" - large + type="warning" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large secondary', () => ( + ) + .add('Button - Danger', () => <Button onClick={action('clicked')} - type="secondary" - large + type="danger" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large default', () => ( + ) + .add('Button - Danger Primary', () => <Button onClick={action('clicked')} - type="default" - large + type="danger-primary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) + ) + .add('Button - Link', () => + <Button + onClick={action('clicked')} + type="link" + disabled={boolean('disabled', false)} + > + {text('text', 'Click me')} + </Button> + ) diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss new file mode 100644 index 000000000..0fc87415b --- /dev/null +++ b/ui/app/components/ui/button/buttons.scss @@ -0,0 +1,244 @@ +/* + Buttons + */ + +$hover-secondary: #B0D7F2; +$hover-default: #B3B3B3; +$hover-confirm: #0372C3; +$hover-red: #FEB6BF; +$hover-red-primary: #C72837; +$hover-orange: #FFD3B5; + +%button { + @include h6; + + font-weight: 500; + font-family: Roboto, Arial; + line-height: 1.25rem; + padding: .75rem 1rem; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 6px; + width: 100%; + outline: none; + transition: border-color .3s ease, background-color .3s ease; + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +%link { + @include h4; + + color: $Blue-500; + line-height: 1.25rem; + cursor: pointer; + background-color: transparent; + + &:hover { + color: $Blue-400; + } + + &:active { + color: $Blue-600; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: 1; + pointer-events: none; + color: $hover-secondary; + } +} + +%small-link { + @extend %link; + @include h6; +} + +.button { + @extend %button; +} + +.btn-secondary { + color: $Blue-500; + border: 2px solid $hover-secondary; + + &:hover { + border-color: $Blue-500; + } + + &:active { + background: $Blue-000; + border-color: $Blue-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-secondary; + } +} + +.btn-warning { + color: $Orange-500; + border: 2px solid $hover-orange; + + &:hover { + border-color: $Orange-500; + } + + &:active { + background: $Orange-000; + border-color: $Orange-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-orange; + } +} + +.btn-danger { + color: $Red-500; + border: 2px solid $hover-red; + + &:hover { + border-color: $Red-500; + } + + &:active { + background: $Red-000; + border-color: $Red-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-red; + } +} + +.btn-danger-primary { + color: $white; + border: 2px solid $Red-500; + background-color: $Red-500; + + &:hover { + border-color: $hover-red-primary; + background-color: $hover-red-primary; + } + + &:active { + background: $Red-600; + border-color: $Red-600; + } + + &--disabled, + &[disabled] { + opacity: 1; + border-color: $hover-red; + background-color: $hover-red; + } +} + +.btn-default { + color: $Grey-500; + border: 2px solid $hover-default; + + &:hover { + border-color: $Grey-500; + } + + &:active { + background: #FBFBFC; + border-color: $Grey-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-default; + } +} + +.btn-primary { + color: $white; + border: 2px solid $Blue-500; + background-color: $Blue-500; + + &:hover { + border-color: $hover-confirm; + background-color: $hover-confirm; + } + + &:active { + background: $Blue-600; + border-color: $Blue-600; + } + + &--disabled, + &[disabled] { + border-color: $hover-secondary; + background-color: $hover-secondary; + } +} + +.btn-link { + @extend %link; +} + +.btn--large { + min-height: 54px; +} + +/** + All Buttons styles are deviations from design guide + */ + +.btn-raised { + color: $curious-blue; + background-color: $white; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + padding: 6px; + height: initial; + min-height: initial; + width: initial; + min-width: initial; +} + +.btn--first-time { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + color: $white; + font-size: 1.25rem; + font-weight: 500; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, .9); + border-radius: 0; +} + +button[disabled], +input[type="submit"][disabled] { + cursor: not-allowed; + opacity: .5; +} + +button.primary { + padding: 8px 12px; + background: #f7861c; + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: $white; + font-size: 1.1em; + font-family: Roboto; + text-transform: uppercase; +} diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss index b71a3cb9d..003c5a0e2 100644 --- a/ui/app/components/ui/page-container/index.scss +++ b/ui/app/components/ui/page-container/index.scss @@ -55,11 +55,6 @@ border-top: 1px solid $geyser; flex: 0 0 auto; - .btn-default, - .btn-confirm { - font-size: 1rem; - } - header { display: flex; flex-flow: row; @@ -86,9 +81,6 @@ } &__footer-button { - height: 55px; - font-size: 1rem; - text-transform: uppercase; margin-right: 16px; &:last-of-type { diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js index 85b16cefe..4ef203521 100644 --- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js +++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js @@ -45,7 +45,7 @@ export default class PageContainerFooter extends Component { </Button>} <Button - type={submitButtonType || 'primary'} + type={submitButtonType || 'secondary'} large className="page-container__footer-button" disabled={disabled} diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index e4075d225..adc4a3531 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -7,7 +7,7 @@ border-radius: 4px; background-color: #fff; color: #4d4d4d; - font-size: 1rem; + font-size: 16px; padding: 8px 10px; position: relative; @@ -29,6 +29,8 @@ &__inputs { flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; } &__input { @@ -38,15 +40,20 @@ border: none; outline: 0 !important; max-width: 22ch; + height: 16px; + line-height: 18px; } &__input-container { display: flex; - align-items: center; + align-items: flex-start; + padding-bottom: 4px; } &__suffix { margin-left: 3px; + font-size: 1rem; + line-height: 1rem; } &--error { diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js index 7b414f177..c5f8350a6 100644 --- a/ui/app/components/ui/unit-input/unit-input.component.js +++ b/ui/app/components/ui/unit-input/unit-input.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { removeLeadingZeroes } from '../../app/send/send.utils' +import { removeLeadingZeroes } from '../../../pages/send/send.utils' /** * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss deleted file mode 100644 index 3e99d0ac6..000000000 --- a/ui/app/css/itcss/components/buttons.scss +++ /dev/null @@ -1,230 +0,0 @@ -/* - Buttons - */ - -.button { - min-height: 44px; - background: $white; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - border-radius: 4px; - font-size: 14px; - font-weight: 400; - transition: border-color .3s ease; - padding: 0 16px; - min-width: 140px; - width: 100%; - text-transform: uppercase; - outline: none; - font-family: Roboto; - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-primary { - color: $curious-blue; - border: 2px solid $spindle; - - &:active { - background: $zumthor; - border-color: $curious-blue; - } - - &:hover { - border-color: $curious-blue; - } -} - -.btn-secondary { - color: $monzo; - border: 2px solid lighten($monzo, 40%); - - &:active { - background: lighten($monzo, 55%); - border-color: $monzo; - } - - &:hover { - border-color: $monzo; - } -} - -.btn-default { - color: $scorpion; - border: 2px solid $dusty-gray; - - &:active { - background: $gallery; - border-color: $dusty-gray; - } - - &:hover { - border-color: $scorpion; - } -} - -.btn-confirm { - color: $white; - border: 2px solid $curious-blue; - background-color: $curious-blue; -} - -.btn-raised { - color: $curious-blue; - background-color: $white; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); - padding: 6px; - height: initial; - min-height: initial; - width: initial; - min-width: initial; -} - -.btn--first-time { - height: 54px; - width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); - color: $white; - font-size: 1.25rem; - font-weight: 500; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); - border-radius: 0; -} - -.btn--large { - min-height: 54px; -} - -.btn-green { - background-color: #02c9b1; // TODO: reusable color in colors.css -} - -.btn-clear { - background: $white; - text-align: center; - padding: .8rem 1rem; - color: $curious-blue; - border: 2px solid $spindle; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - - &:hover { - border-color: $curious-blue; - } - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-cancel { - background: $white; - text-align: center; - padding: .9rem 1rem; - color: $scorpion; - border: 2px solid $dusty-gray; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - width: 100%; - - &:hover { - border-color: $scorpion; - } -} - -// No longer used in flat design, remove when modal buttons done -// div.wallet-btn { -// border: 1px solid rgb(91, 93, 103); -// border-radius: 2px; -// height: 30px; -// width: 75px; -// font-size: 0.8em; -// text-align: center; -// line-height: 25px; -// } - -// .btn-red { -// background: rgba(254, 35, 17, 1); -// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); -// } - -button[disabled], -input[type="submit"][disabled] { - cursor: not-allowed; - opacity: .5; - // background: rgba(197, 197, 197, 1); - // box-shadow: 0 3px 6px rgba(197, 197, 197, .36); -} - -// button.spaced { -// margin: 2px; -// } - -// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { -// transform: scale(1.1); -// } -// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { -// transform: scale(0.95); -// } - -button.primary { - padding: 8px 12px; - background: #f7861c; - box-shadow: 0 3px 6px rgba(247, 134, 28, .36); - color: $white; - font-size: 1.1em; - font-family: Roboto; - text-transform: uppercase; -} - -.btn-light { - padding: 8px 12px; - // background: #FFFFFF; // $bg-white - box-shadow: 0 3px 6px rgba(247, 134, 28, .36); - color: #585d67; // TODO: make reusable light button color - font-size: 1.1em; - font-family: Roboto; - text-transform: uppercase; - text-align: center; - line-height: 20px; - border-radius: 2px; - border: 1px solid #979797; // #TODO: make reusable light border color - opacity: .5; -} - -// TODO: cleanup: not used anywhere -button.btn-thin { - border: 1px solid; - border-color: #4d4d4d; - color: #4d4d4d; - background: rgb(255, 174, 41); - border-radius: 4px; - min-width: 200px; - margin: 12px 0; - padding: 6px; - font-size: 13px; -} - -.btn-tertiary { - border: 1px solid transparent; - border-radius: 2px; - background-color: transparent; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index f2f37bfa3..3d426a33c 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,4 +1,4 @@ -@import './buttons.scss'; +@import '../../../components/ui/button/buttons'; @import './footer.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 42ef7ae0a..9c0a5cf61 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -538,6 +538,8 @@ } &__button { + @include paragraph; + @extend %button; width: 141px; margin: 0 5px; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c828a2b26..2c6ca2522 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -29,6 +29,10 @@ &.rinkeby-test-network .menu-icon-circle div { background-color: rgba(235, 179, 63, .7) !important; } + + &.goerli-test-network .menu-icon-circle div { + background-color: rgba(48, 153, 242, .7) !important; + } } .dropdown-menu-item { @@ -48,6 +52,11 @@ font-size: 12px; padding: 0 4px; } + + .fa-question-circle { + margin: 0 4px 0 6px; + font-size: 1rem; + } } .network-name { @@ -165,5 +174,22 @@ } .network-caret { - margin: 0 8px 2px; + margin: 0 8px; +} + +.network-loading-spinner { + display: flex; + flex-flow: row nowrap; + align-items: center; + position: relative; + height: 16px; + width: 16px; + margin-left: 5px; + + img { + height: 26px; + position: absolute; + top: -5px; + left: -6px; + } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 07ab04613..927640f0b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -549,7 +549,7 @@ } &__form-row { - margin: 14.5px 18px 0px; + margin: 8px 18px 0px; position: relative; display: flex; flex-flow: row; @@ -592,8 +592,8 @@ flex: 0 0 auto; } - &__from-dropdown { - height: 73px; + &__from-dropdown, + &__asset-dropdown { width: 100%; border: 1px solid $alto; border-radius: 4px; @@ -628,6 +628,112 @@ } } + &__from-dropdown { + height: 73px; + } + + &__asset-dropdown { + height: 54px; + border: none; + + &__asset { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 0 8px; + cursor: pointer; + + &:hover { + background-color: rgba($alto, 0.2); + } + } + + &__asset-icon { + .identicon { + border: 1px solid $alto; + } + } + + &__asset-data { + display: flex; + flex-flow: column nowrap; + margin-left: 8px; + } + + &__symbol { + font-size: 16px; + margin-bottom: 2px; + } + + &__name { + display: flex; + flex-flow: row nowrap; + font-size: 12px; + + &__label { + margin-right: .25rem; + } + } + + &__close-area { + z-index: 2000; + } + + &__list { + z-index: 2050; + position: absolute; + height: 220px; + width: 100%; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + top: 65px; + left: 0; + box-sizing: content-box; + overflow-y: scroll; + margin-top: 0; + padding: 4px 0; + + .send-v2__asset-dropdown__asset { + padding: 8px; + } + } + + &__input-wrapper { + border: 1px solid $alto; + border-radius: 4px; + height: 100%; + + &--opened { + position: relative; + z-index: 2050; + } + + .send-v2__asset-dropdown__asset { + height: 100%; + &:hover { + background-color: $white; + } + } + } + + &__input { + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: none; + border-radius: 4px; + background-color: $white; + color: $tundora; + padding: 10px; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + } + } + &__to-autocomplete { position: relative; diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index d8e62c97a..8b282aa1e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -18,6 +18,7 @@ body { height: 100%; margin: 0; padding: 0; + font-size: 16px; @media screen and (max-width: $break-small) { overflow-y: overlay; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 18c444c8a..93107a106 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -403,3 +403,40 @@ font-weight: 400; font-style: normal; } + +@mixin fontScale($weight: 400, $size: 1rem) { + font-weight: $weight; + font-size: $size; +} + +@mixin h1($weight: 400, $size: 2.5rem){ + @include fontScale($weight, $size); +} + +@mixin h2($weight: 400, $size: 2rem){ + @include fontScale($weight, $size); +} + +@mixin h3($weight: 400, $size: 1.5rem){ + @include fontScale($weight, $size); +} + +@mixin h4($weight: 400, $size: 1.125rem){ + @include fontScale($weight, $size); +} + +@mixin h5($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} + +@mixin h6($weight: 400, $size: .875rem){ + @include fontScale($weight, $size); +} + +@mixin h7($weight: 400, $size: .75rem){ + @include fontScale($weight, $size); +} + +@mixin paragraph($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 89bd8b96a..f7003b1f4 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #2f9ae0; +$curious-blue: #037DD6; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -93,3 +93,19 @@ $break-large: 576px; $primary-font-type: Roboto; +$Blue-000: #eaf6ff; +$Blue-400: #1098fc; +$Blue-500: #037DD6; +$Blue-600: #0260a4; + +$Grey-000: #f2f3f4; +$Grey-500: #6A737D; + +$Red-000: #fcf2f3; +$Red-500: #D73A49; +$Red-600: #b92534; + +$Orange-000: #fef5ef; +$Orange-500: #F66A0A; + + diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js index 47c767d68..3ca487c1f 100644 --- a/ui/app/ducks/metamask/metamask.js +++ b/ui/app/ducks/metamask/metamask.js @@ -154,9 +154,26 @@ function reduceMetamask (state, action) { return newState case actions.SET_SELECTED_TOKEN: - return extend(metamaskState, { + newState = extend(metamaskState, { selectedTokenAddress: action.value, }) + const newSend = extend(metamaskState.send) + + if (metamaskState.send.editingTransactionId && !action.value) { + delete newSend.token + const unapprovedTx = newState.unapprovedTxs[newSend.editingTransactionId] || {} + const txParams = unapprovedTx.txParams || {} + newState.unapprovedTxs = extend(newState.unapprovedTxs, { + [newSend.editingTransactionId]: extend(unapprovedTx, { + txParams: extend(txParams, { data: '' }), + }), + }) + newSend.tokenBalance = null + newSend.balance = '0' + } + + newState.send = newSend + return newState case actions.SET_ACCOUNT_LABEL: const account = action.value.account diff --git a/ui/app/helpers/constants/common.js b/ui/app/helpers/constants/common.js index 58fae5e5f..a0d6e65b3 100644 --- a/ui/app/helpers/constants/common.js +++ b/ui/app/helpers/constants/common.js @@ -10,4 +10,5 @@ export const NETWORK_TYPES = { MAINNET: 'mainnet', RINKEBY: 'rinkeby', ROPSTEN: 'ropsten', + GOERLI: 'goerli', } diff --git a/ui/app/helpers/utils/metametrics.util.js b/ui/app/helpers/utils/metametrics.util.js index 01984bd5e..5ae3e8937 100644 --- a/ui/app/helpers/utils/metametrics.util.js +++ b/ui/app/helpers/utils/metametrics.util.js @@ -23,6 +23,7 @@ const METAMETRICS_CUSTOM_ERROR_FIELD = 'errorField' const METAMETRICS_CUSTOM_ERROR_MESSAGE = 'errorMessage' const METAMETRICS_CUSTOM_RPC_NETWORK_ID = 'networkId' const METAMETRICS_CUSTOM_RPC_CHAIN_ID = 'chainId' +const METAMETRICS_CUSTOM_GAS_CHANGED = 'gasChanged' const METAMETRICS_CUSTOM_NETWORK = 'network' const METAMETRICS_CUSTOM_ENVIRONMENT_TYPE = 'environmentType' @@ -43,6 +44,7 @@ const customVariableNameIdMap = { [METAMETRICS_CUSTOM_RPC_CHAIN_ID]: 2, [METAMETRICS_CUSTOM_ERROR_FIELD]: 1, [METAMETRICS_CUSTOM_ERROR_MESSAGE]: 2, + [METAMETRICS_CUSTOM_GAS_CHANGED]: 1, } const customDimensionsNameIdMap = { diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js index cb6c9536c..8d96b1487 100644 --- a/ui/app/helpers/utils/transactions.util.js +++ b/ui/app/helpers/utils/transactions.util.js @@ -30,6 +30,21 @@ export function getTokenData (data = '') { return abiDecoder.decodeMethod(data) } +async function getMethodFrom4Byte (fourBytePrefix) { + const fourByteResponse = (await fetch(`https://www.4byte.directory/api/v1/signatures/?hex_signature=${fourBytePrefix}`, { + referrerPolicy: 'no-referrer-when-downgrade', + body: null, + method: 'GET', + mode: 'cors', + })).json() + + if (fourByteResponse.count === 1) { + return fourByteResponse.results[0].text_signature + } else { + return null + } +} + const registry = new MethodRegistry({ provider: global.ethereumProvider }) /** @@ -43,7 +58,16 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider }) const fourBytePrefix = prefixedData.slice(0, 10) try { - const sig = await registry.lookup(fourBytePrefix) + const fourByteSig = getMethodFrom4Byte(fourBytePrefix).catch((e) => { + log.error(e) + return null + }) + + let sig = await registry.lookup(fourBytePrefix) + + if (!sig) { + sig = await fourByteSig + } if (!sig) { return {} @@ -57,8 +81,8 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider }) } } catch (error) { log.error(error) - const contractData = getTokenData(data) - const { name } = contractData || {} + const tokenData = getTokenData(data) + const { name } = tokenData || {} return { name } } diff --git a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss index cc495dfb0..a363c77c5 100644 --- a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss +++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss @@ -18,6 +18,7 @@ } &__link { - color: $curious-blue; + @extend %link; + margin-top: .5rem; } } diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js index 7edb8f541..9a118a815 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -103,7 +103,7 @@ export default class ConfirmAddSuggestedToken extends Component { { this.context.t('cancel') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js index a90fe148f..cc73b2ea7 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js @@ -18,7 +18,7 @@ const mapStateToProps = ({ metamask }) => { const mapDispatchToProps = dispatch => { return { - addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)), + addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, Number(decimals), image)), removeSuggestedTokens: () => dispatch(removeSuggestedTokens()), } } diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js index c0ec624ac..f0a19e8d9 100644 --- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js @@ -96,7 +96,7 @@ export default class ConfirmAddToken extends Component { { this.context.t('back') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js index 9bc0daab9..c90ccc917 100644 --- a/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js +++ b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js @@ -56,7 +56,7 @@ export default class ConfirmDeployContract extends Component { render () { return ( <ConfirmTransactionBase - action={this.context.t('contractDeployment')} + actionKey={'contractDeployment'} dataComponent={this.renderData()} /> ) diff --git a/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js index 8daad675e..68280f624 100644 --- a/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js +++ b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js @@ -30,7 +30,7 @@ export default class ConfirmSendEther extends Component { return ( <ConfirmTransactionBase - action={this.context.t('confirm')} + actionKey={'confirm'} hideData={hideData} onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)} /> diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js index 9e749322f..be819b5f0 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums' import { getEnvironmentType } from '../../../../app/scripts/lib/util' import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container' -import { isBalanceSufficient } from '../../components/app/send/send.utils' +import { isBalanceSufficient } from '../send/send.utils' import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes' import { INSUFFICIENT_FUNDS_ERROR_KEY, @@ -64,7 +64,7 @@ export default class ConfirmTransactionBase extends Component { updateGasAndCalculate: PropTypes.func, customGas: PropTypes.object, // Component props - action: PropTypes.string, + actionKey: PropTypes.string, contentComponent: PropTypes.node, dataComponent: PropTypes.node, detailsComponent: PropTypes.node, @@ -159,7 +159,7 @@ export default class ConfirmTransactionBase extends Component { } handleEditGas () { - const { onEditGas, showCustomizeGasModal, action, txData: { origin }, methodData = {} } = this.props + const { onEditGas, showCustomizeGasModal, actionKey, txData: { origin }, methodData = {} } = this.props this.context.metricsEvent({ eventOpts: { @@ -169,7 +169,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -292,7 +292,7 @@ export default class ConfirmTransactionBase extends Component { } handleEdit () { - const { txData, tokenData, tokenProps, onEdit, action, txData: { origin }, methodData = {} } = this.props + const { txData, tokenData, tokenProps, onEdit, actionKey, txData: { origin }, methodData = {} } = this.props this.context.metricsEvent({ eventOpts: { @@ -302,7 +302,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -331,7 +331,7 @@ export default class ConfirmTransactionBase extends Component { handleCancel () { const { metricsEvent } = this.context - const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, action, txData: { origin }, methodData = {} } = this.props + const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, actionKey, txData: { origin }, methodData = {} } = this.props if (onCancel) { metricsEvent({ @@ -342,7 +342,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -358,7 +358,7 @@ export default class ConfirmTransactionBase extends Component { handleSubmit () { const { metricsEvent } = this.context - const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, action, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props + const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, actionKey, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props const { submitting } = this.state if (submitting) { @@ -377,7 +377,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -517,7 +517,7 @@ export default class ConfirmTransactionBase extends Component { valid: propsValid = true, errorMessage, errorKey: propsErrorKey, - action, + actionKey, title, subtitle, hideSubtitle, @@ -543,7 +543,7 @@ export default class ConfirmTransactionBase extends Component { toName={toName} toAddress={toAddress} showEdit={onEdit && !isTxReprice} - action={action || getMethodName(name) || this.context.t('contractInteraction')} + action={actionKey && this.context.t(actionKey) || getMethodName(name) || this.context.t('contractInteraction')} title={title} titleComponent={this.renderTitleComponent()} subtitle={subtitle} diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js index 83543f1a4..2b087f5cc 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -14,9 +14,9 @@ import { GAS_LIMIT_TOO_LOW_ERROR_KEY, } from '../../helpers/constants/error-keys' import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util' -import { isBalanceSufficient, calcGasTotal } from '../../components/app/send/send.utils' +import { isBalanceSufficient, calcGasTotal } from '../send/send.utils' import { conversionGreaterThan } from '../../helpers/utils/conversion-util' -import { MIN_GAS_LIMIT_DEC } from '../../components/app/send/send.constants' +import { MIN_GAS_LIMIT_DEC } from '../send/send.constants' import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util' import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors' diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index 617fb8833..a521c7eaf 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -152,7 +152,7 @@ class AccountList extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'new-account-connect-form__button unlock', disabled, diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js index 7e9dee970..f5a83e6cf 100644 --- a/ui/app/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js @@ -46,7 +46,7 @@ class ConnectScreen extends Component { this.renderConnectToTrezorButton(), ]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'hw-connect__connect-btn', onClick: this.connect, diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js index 17bef763c..ad430ba58 100644 --- a/ui/app/pages/create-account/import-account/json.js +++ b/ui/app/pages/create-account/import-account/json.js @@ -61,7 +61,7 @@ class JsonImportSubview extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js index 450614e87..0cdf25ce9 100644 --- a/ui/app/pages/create-account/import-account/private-key.js +++ b/ui/app/pages/create-account/import-account/private-key.js @@ -75,7 +75,7 @@ PrivateKeyImportView.prototype.render = function () { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/new-account.js b/ui/app/pages/create-account/new-account.js index 316fbe6f1..d19e6bc38 100644 --- a/ui/app/pages/create-account/new-account.js +++ b/ui/app/pages/create-account/new-account.js @@ -47,7 +47,7 @@ class NewAccountCreateForm extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => { diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 433dad6e2..5092d277e 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -36,6 +36,20 @@ export default class ImportWithSeedPhrase extends PureComponent { .join(' ') } + componentWillMount () { + window.onbeforeunload = () => this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Close window on import screen', + }, + customVariables: { + errorLabel: 'Seed Phrase Error', + errorMessage: this.state.seedPhraseError, + }, + }) + } + handleSeedPhraseChange (seedPhrase) { let seedPhraseError = '' @@ -172,6 +186,10 @@ export default class ImportWithSeedPhrase extends PureComponent { action: 'Import Seed Phrase', name: 'Go Back from Onboarding Import', }, + customVariables: { + errorLabel: 'Seed Phrase Error', + errorMessage: seedPhraseError, + }, }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} @@ -243,7 +261,7 @@ export default class ImportWithSeedPhrase extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleImport} diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js index c040cff88..de073af2f 100644 --- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -211,7 +211,7 @@ export default class NewAccount extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleCreate} diff --git a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js index 3434d117a..590cf0303 100644 --- a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -34,7 +34,7 @@ export default class UniqueImageScreen extends PureComponent { { t('protectYourKeysMessage2') } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={() => { this.context.metricsEvent({ diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index c4292331b..83b0e7fc6 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -71,7 +71,7 @@ export default class EndOfFlowScreen extends PureComponent { </a>. </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={async () => { await completeOnboarding() diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 19c668278..ffaff9acf 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -149,7 +149,7 @@ export default class MetaMetricsOptIn extends Component { }) }} submitText={'I agree'} - submitButtonType={'confirm'} + submitButtonType={'primary'} disabled={false} /> <div className="metametrics-opt-in__bottom-text"> diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 59b4f73a6..f3bfc3171 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -142,7 +142,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleSubmit} disabled={!this.isValid()} diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index ee352d74e..4e9948a0e 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -130,7 +130,7 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleNext} disabled={!isShowingSeedPhrase} diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index b25a15514..5af29a505 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -95,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleCreate} > diff --git a/ui/app/pages/first-time-flow/welcome/welcome.component.js b/ui/app/pages/first-time-flow/welcome/welcome.component.js index 3b8d6eb17..c720d2572 100644 --- a/ui/app/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/pages/first-time-flow/welcome/welcome.component.js @@ -56,7 +56,7 @@ export default class Welcome extends PureComponent { <div>{ t('happyToSeeYou') }</div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleContinue} > diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js index 7508654dc..d0a5d7b47 100644 --- a/ui/app/pages/home/home.container.js +++ b/ui/app/pages/home/home.container.js @@ -3,7 +3,7 @@ import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction' - +`` const mapStateToProps = state => { const { metamask, appState } = state const { diff --git a/ui/app/pages/keychains/reveal-seed.js b/ui/app/pages/keychains/reveal-seed.js index edc9db5a0..e83e3fd98 100644 --- a/ui/app/pages/keychains/reveal-seed.js +++ b/ui/app/pages/keychains/reveal-seed.js @@ -116,7 +116,7 @@ class RevealSeedPage extends Component { onClick: () => this.props.history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'page-container__footer-button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index 0938ad103..00a514534 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -315,7 +315,7 @@ class MobileSyncPage extends Component { }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js index e06d88c90..e38a6d6ce 100644 --- a/ui/app/pages/routes/index.js +++ b/ui/app/pages/routes/index.js @@ -10,7 +10,7 @@ import { getMetaMaskAccounts, getNetworkIdentifier } from '../../selectors/selec // init import FirstTimeFlow from '../first-time-flow' // accounts -const SendTransactionScreen = require('../../components/app/send/send.container') +const SendTransactionScreen = require('../send/send.container') const ConfirmTransaction = require('../confirm-transaction') // slideout menu @@ -267,6 +267,10 @@ class Routes extends Component { name = this.context.t('connectingToKovan') } else if (providerName === 'rinkeby') { name = this.context.t('connectingToRinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('connectingToLocalhost') + } else if (providerName === 'goerli') { + name = this.context.t('connectingToGoerli') } else { name = this.context.t('connectingTo', [providerId]) } @@ -288,6 +292,10 @@ class Routes extends Component { name = this.context.t('kovan') } else if (providerName === 'rinkeby') { name = this.context.t('rinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('localhost') + } else if (providerName === 'goerli') { + name = this.context.t('goerli') } else { name = this.context.t('unknownNetwork') } diff --git a/ui/app/components/app/send/README.md b/ui/app/pages/send/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/README.md +++ b/ui/app/pages/send/README.md diff --git a/ui/app/components/app/send/account-list-item/account-list-item-README.md b/ui/app/pages/send/account-list-item/account-list-item-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item-README.md +++ b/ui/app/pages/send/account-list-item/account-list-item-README.md diff --git a/ui/app/components/app/send/account-list-item/account-list-item.component.js b/ui/app/pages/send/account-list-item/account-list-item.component.js index 18e77b4f9..e6cca39b9 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item.component.js +++ b/ui/app/pages/send/account-list-item/account-list-item.component.js @@ -1,11 +1,11 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { checksumAddress } from '../../../../helpers/utils/util' -import Identicon from '../../../ui/identicon' -import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display' -import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common' -import Tooltip from '../../../ui/tooltip-v2' +import { checksumAddress } from '../../../helpers/utils/util' +import Identicon from '../../../components/ui/identicon' +import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display' +import { PRIMARY, SECONDARY } from '../../../helpers/constants/common' +import Tooltip from '../../../components/ui/tooltip-v2' export default class AccountListItem extends Component { diff --git a/ui/app/components/app/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js index bc9a60f49..21f800306 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item.container.js +++ b/ui/app/pages/send/account-list-item/account-list-item.container.js @@ -8,7 +8,7 @@ import { getIsMainnet, isBalanceCached, preferencesSelector, -} from '../../../../selectors/selectors' +} from '../../../selectors/selectors' import AccountListItem from './account-list-item.component' export default connect(mapStateToProps)(AccountListItem) diff --git a/ui/app/components/app/send/account-list-item/index.js b/ui/app/pages/send/account-list-item/index.js index 907485cf7..907485cf7 100644 --- a/ui/app/components/app/send/account-list-item/index.js +++ b/ui/app/pages/send/account-list-item/index.js diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js index 5df9f77d6..bec88402d 100644 --- a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js +++ b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js @@ -3,15 +3,15 @@ import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' import proxyquire from 'proxyquire' -import Identicon from '../../../../ui/identicon' -import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display' +import Identicon from '../../../../components/ui/identicon' +import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display' const utilsMethodStubs = { checksumAddress: sinon.stub().returns('mockCheckSumAddress'), } const AccountListItem = proxyquire('../account-list-item.component.js', { - '../../../../helpers/utils/util': utilsMethodStubs, + '../../../helpers/utils/util': utilsMethodStubs, }).default diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js index 19a9a02d0..33f932daf 100644 --- a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js +++ b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js @@ -15,7 +15,7 @@ proxyquire('../account-list-item.container.js', { getCurrentCurrency: () => `mockCurrentCurrency`, getNativeCurrency: () => `mockNativeCurrency`, }, - '../../../../selectors/selectors': { + '../../../selectors/selectors': { isBalanceCached: () => `mockBalanceIsCached`, preferencesSelector: ({ showFiatInTestnets }) => ({ showFiatInTestnets, diff --git a/ui/app/components/app/send/index.js b/ui/app/pages/send/index.js index b5114babc..b5114babc 100644 --- a/ui/app/components/app/send/index.js +++ b/ui/app/pages/send/index.js diff --git a/ui/app/components/app/send/send-content/index.js b/ui/app/pages/send/send-content/index.js index 891c17e6a..891c17e6a 100644 --- a/ui/app/components/app/send/send-content/index.js +++ b/ui/app/pages/send/send-content/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/README.md b/ui/app/pages/send/send-content/send-amount-row/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/README.md +++ b/ui/app/pages/send/send-content/send-amount-row/README.md diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index f17137c1e..f17137c1e 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js index 16c5a0db5..cd48a105f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js @@ -10,11 +10,11 @@ import { calcMaxAmount } from './amount-max-button.utils.js' import { updateSendAmount, setMaxModeTo, -} from '../../../../../../store/actions' +} from '../../../../../store/actions' import AmountMaxButton from './amount-max-button.component' import { updateSendErrors, -} from '../../../../../../ducks/send/send.duck' +} from '../../../../../ducks/send/send.duck' export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton) diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js index 69fec1994..69fec1994 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js index f4c8fad8a..a570e49b4 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js @@ -1,7 +1,7 @@ const { multiplyCurrencies, subtractCurrencies, -} = require('../../../../../../helpers/utils/conversion-util') +} = require('../../../../../helpers/utils/conversion-util') const ethUtil = require('ethereumjs-util') function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) { diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js index ee8271494..ee8271494 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js index b04d3897f..b04d3897f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js index f446e330c..a75ed5e8f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js @@ -29,8 +29,8 @@ proxyquire('../amount-max-button.container.js', { }, './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` }, './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 }, - '../../../../../../store/actions': actionSpies, - '../../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../../store/actions': actionSpies, + '../../../../../ducks/send/send.duck': duckActionSpies, }) describe('amount-max-button container', () => { diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js index 655fe1969..655fe1969 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js index 1ee858f67..1ee858f67 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/index.js b/ui/app/pages/send/send-content/send-amount-row/index.js index abc6852fe..abc6852fe 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/index.js +++ b/ui/app/pages/send/send-content/send-amount-row/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js index e725e7eda..c0241ea91 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' import AmountMaxButton from './amount-max-button' -import UserPreferencedCurrencyInput from '../../../user-preferenced-currency-input' -import UserPreferencedTokenInput from '../../../user-preferenced-token-input' +import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input' +import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input' export default class SendAmountRow extends Component { diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js index 0646355ab..2b3470da4 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js @@ -17,10 +17,10 @@ import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils' import { setMaxModeTo, updateSendAmount, -} from '../../../../../store/actions' +} from '../../../../store/actions' import { updateSendErrors, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import SendAmountRow from './send-amount-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow) diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js index fb08c7ed7..fb08c7ed7 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js index 14a71129f..62e0676db 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js @@ -6,7 +6,7 @@ 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 UserPreferencedTokenInput from '../../../../user-preferenced-token-input' +import UserPreferencedTokenInput from '../../../../../components/app/user-preferenced-token-input' const propsMethodSpies = { setMaxModeTo: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js index 6d20202b0..dada1c5e9 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js @@ -37,8 +37,8 @@ proxyquire('../send-amount-row.container.js', { getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }), getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }), }, - '../../../../../store/actions': actionSpies, - '../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../store/actions': actionSpies, + '../../../../ducks/send/send.duck': duckActionSpies, }) describe('send-amount-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js index 4672cb8a7..4672cb8a7 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js diff --git a/ui/app/pages/send/send-content/send-asset-row/index.js b/ui/app/pages/send/send-content/send-asset-row/index.js new file mode 100644 index 000000000..ba424a083 --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/index.js @@ -0,0 +1 @@ +export { default } from './send-asset-row.container' diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js new file mode 100644 index 000000000..de2d9462f --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -0,0 +1,152 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper' +import Identicon from '../../../../components/ui/identicon/identicon.component' +import TokenBalance from '../../../../components/ui/token-balance' +import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display' +import {PRIMARY} from '../../../../helpers/constants/common' + +export default class SendAssetRow extends Component { + static propTypes = { + tokens: PropTypes.arrayOf( + PropTypes.shape({ + address: PropTypes.string, + decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + symbol: PropTypes.string, + }) + ).isRequired, + accounts: PropTypes.object.isRequired, + selectedAddress: PropTypes.string.isRequired, + selectedTokenAddress: PropTypes.string, + setSelectedToken: PropTypes.func.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + isShowingDropdown: false, + } + + openDropdown = () => this.setState({ isShowingDropdown: true }) + + closeDropdown = () => this.setState({ isShowingDropdown: false }) + + selectToken = address => { + this.setState({ + isShowingDropdown: false, + }, () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Send Screen', + name: 'User clicks "Assets" dropdown', + }, + customVariables: { + assetSelected: address ? 'ERC20' : 'ETH', + }, + }) + this.props.setSelectedToken(address) + }) + } + + render () { + const { t } = this.context + + return ( + <SendRowWrapper label={`${t('asset')}:`}> + <div className="send-v2__asset-dropdown"> + { this.renderSelectedToken() } + { this.renderAssetDropdown() } + </div> + </SendRowWrapper> + ) + } + + renderSelectedToken () { + const { selectedTokenAddress } = this.props + const token = this.props.tokens.find(({ address }) => address === selectedTokenAddress) + return ( + <div + className="send-v2__asset-dropdown__input-wrapper" + onClick={this.openDropdown} + > + { token ? this.renderAsset(token) : this.renderEth() } + </div> + ) + } + + renderAssetDropdown () { + return this.state.isShowingDropdown && ( + <div> + <div + className="send-v2__asset-dropdown__close-area" + onClick={this.closeDropdown} + /> + <div className="send-v2__asset-dropdown__list"> + { this.renderEth() } + { this.props.tokens.map(token => this.renderAsset(token)) } + </div> + </div> + ) + } + + renderEth () { + const { t } = this.context + const { accounts, selectedAddress } = this.props + + const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : '' + + return ( + <div + className="send-v2__asset-dropdown__asset" + onClick={() => this.selectToken()} + > + <div className="send-v2__asset-dropdown__asset-icon"> + <Identicon diameter={36} /> + </div> + <div className="send-v2__asset-dropdown__asset-data"> + <div className="send-v2__asset-dropdown__symbol">ETH</div> + <div className="send-v2__asset-dropdown__name"> + <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span> + <UserPreferencedCurrencyDisplay + value={balanceValue} + type={PRIMARY} + /> + </div> + </div> + </div> + ) + } + + + renderAsset (token) { + const { address, symbol } = token + const { t } = this.context + + return ( + <div + key={address} className="send-v2__asset-dropdown__asset" + onClick={() => this.selectToken(address)} + > + <div className="send-v2__asset-dropdown__asset-icon"> + <Identicon address={address} diameter={36} /> + </div> + <div className="send-v2__asset-dropdown__asset-data"> + <div className="send-v2__asset-dropdown__symbol"> + { symbol } + </div> + <div className="send-v2__asset-dropdown__name"> + <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span> + <TokenBalance + token={token} + withSymbol + /> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js new file mode 100644 index 000000000..57b62fba1 --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux' +import SendAssetRow from './send-asset-row.component' +import {getMetaMaskAccounts} from '../../../../selectors/selectors' +import { setSelectedToken } from '../../../../store/actions' + +function mapStateToProps (state) { + return { + tokens: state.metamask.tokens, + selectedAddress: state.metamask.selectedAddress, + selectedTokenAddress: state.metamask.selectedTokenAddress, + accounts: getMetaMaskAccounts(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + setSelectedToken: address => dispatch(setSelectedToken(address)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(SendAssetRow) diff --git a/ui/app/components/app/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js index 2c09ceb19..d799806c7 100644 --- a/ui/app/components/app/send/send-content/send-content.component.js +++ b/ui/app/pages/send/send-content/send-content.component.js @@ -1,11 +1,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerContent from '../../../ui/page-container/page-container-content.component' +import PageContainerContent from '../../../components/ui/page-container/page-container-content.component' import SendAmountRow from './send-amount-row' import SendFromRow from './send-from-row' import SendGasRow from './send-gas-row' import SendHexDataRow from './send-hex-data-row' import SendToRow from './send-to-row' +import SendAssetRow from './send-asset-row' export default class SendContent extends Component { @@ -26,6 +27,7 @@ export default class SendContent extends Component { updateGas={this.updateGas} scanQrCode={ _ => this.props.scanQrCode()} /> + <SendAssetRow /> <SendAmountRow updateGas={this.updateGas} /> <SendGasRow /> {(this.props.showHexData && ( diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/index.js b/ui/app/pages/send/send-content/send-dropdown-list/index.js index 04af6536c..04af6536c 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/index.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/index.js diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js index 0d026bc69..0d026bc69 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js index b92dd4dfe..b92dd4dfe 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/index.js b/ui/app/pages/send/send-content/send-from-row/index.js index 0a79726b2..0a79726b2 100644 --- a/ui/app/components/app/send/send-content/send-from-row/index.js +++ b/ui/app/pages/send/send-content/send-from-row/index.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js index dfa53e970..dfa53e970 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js index fe3ac9aa1..fe3ac9aa1 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js index 03ef4806b..03ef4806b 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js index 18811c57e..18811c57e 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js index fd771ea77..fd771ea77 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js index ecb57bbc3..ecb57bbc3 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/README.md b/ui/app/pages/send/send-content/send-gas-row/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/README.md +++ b/ui/app/pages/send/send-content/send-gas-row/README.md diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js index 48088607a..3f5587318 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display' -import { PRIMARY, SECONDARY } from '../../../../../../helpers/constants/common' +import UserPreferencedCurrencyDisplay from '../../../../../components/app/user-preferenced-currency-display' +import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common' export default class GasFeeDisplay extends Component { diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js index dba0edb7b..dba0edb7b 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js index cb4180508..eedd43221 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import {shallow} from 'enzyme' import GasFeeDisplay from '../gas-fee-display.component' -import UserPreferencedCurrencyDisplay from '../../../../../user-preferenced-currency-display' +import UserPreferencedCurrencyDisplay from '../../../../../../components/app/user-preferenced-currency-display' import sinon from 'sinon' diff --git a/ui/app/components/app/send/send-content/send-gas-row/index.js b/ui/app/pages/send/send-content/send-gas-row/index.js index 3c7ff1d5f..3c7ff1d5f 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/index.js +++ b/ui/app/pages/send/send-content/send-gas-row/index.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js index 424a65b20..1b850ac57 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' import GasFeeDisplay from './gas-fee-display/gas-fee-display.component' -import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group' -import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs' +import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group' +import AdvancedGasInputs from '../../../../components/app/gas-customization/advanced-gas-inputs' export default class SendGasRow extends Component { @@ -20,8 +20,8 @@ export default class SendGasRow extends Component { gasButtonGroupShown: PropTypes.bool, advancedInlineGasShown: PropTypes.bool, resetGasButtons: PropTypes.func, - gasPrice: PropTypes.number, - gasLimit: PropTypes.number, + gasPrice: PropTypes.string, + gasLimit: PropTypes.string, insufficientBalance: PropTypes.bool, } diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js index f81670c02..c4daa98af 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js @@ -15,18 +15,18 @@ import { getBasicGasEstimateLoadingStatus, getRenderableEstimateDataForSmallButtonsFromGWEI, getDefaultActiveButtonIndex, -} from '../../../../../selectors/custom-gas' +} from '../../../../selectors/custom-gas' import { showGasButtonGroup, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import { resetCustomData, setCustomGasPrice, setCustomGasLimit, -} from '../../../../../ducks/gas/gas.duck' +} from '../../../../ducks/gas/gas.duck' import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js' -import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../../store/actions' -import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../../selectors/selectors' +import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../store/actions' +import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../selectors/selectors' import SendGasRow from './send-gas-row.component' export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow) diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js index 79c838543..79c838543 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js index 08f26854e..0cbc92621 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js @@ -6,7 +6,7 @@ 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' -import GasPriceButtonGroup from '../../../../gas-customization/gas-price-button-group' +import GasPriceButtonGroup from '../../../../../components/app/gas-customization/gas-price-button-group' const propsMethodSpies = { showCustomizeGasModal: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js index d1f753639..ddc6ea985 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js @@ -32,7 +32,7 @@ proxyquire('../send-gas-row.container.js', { return () => ({}) }, }, - '../../../../../selectors/selectors': { + '../../../../selectors/selectors': { getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`, getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`, getSelectedToken: () => false, @@ -59,14 +59,14 @@ proxyquire('../send-gas-row.container.js', { gasFeeIsInError: (s) => `mockGasFeeError:${s}`, getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`, }, - '../../../../../store/actions': actionSpies, - '../../../../../selectors/custom-gas': { + '../../../../store/actions': actionSpies, + '../../../../selectors/custom-gas': { getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`, getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`, getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length, }, - '../../../../../ducks/send/send.duck': sendDuckSpies, - '../../../../../ducks/gas/gas.duck': gasDuckSpies, + '../../../../ducks/send/send.duck': sendDuckSpies, + '../../../../ducks/gas/gas.duck': gasDuckSpies, }) describe('send-gas-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js index bd3c9a257..bd3c9a257 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/index.js b/ui/app/pages/send/send-content/send-hex-data-row/index.js index 08c341067..08c341067 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/index.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/index.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js index 62a74a77b..62a74a77b 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js index 76c929d08..8b1c540c3 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import { updateSendHexData, -} from '../../../../../store/actions' +} from '../../../../store/actions' import SendHexDataRow from './send-hex-data-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow) diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/index.js b/ui/app/pages/send/send-content/send-row-wrapper/index.js index d17545dcc..d17545dcc 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js index c00617f83..c00617f83 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js index 61bc7bab7..61bc7bab7 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js index 59622047f..59622047f 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js index 2304a43d2..2304a43d2 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js index eecff165d..eecff165d 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js index fd4d19ef7..fd4d19ef7 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js index f1caa8f99..f1caa8f99 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js index 7df14fd96..7df14fd96 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js index bd803d833..bd803d833 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js index 225bf056c..225bf056c 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js index 94309bd96..94309bd96 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js index 30280e1d0..30280e1d0 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js diff --git a/ui/app/components/app/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js index 121f15148..121f15148 100644 --- a/ui/app/components/app/send/send-content/send-to-row/index.js +++ b/ui/app/pages/send/send-content/send-to-row/index.js diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js index e8a55cb2a..9baf327c1 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' -import EnsInput from '../../../ens-input' +import EnsInput from '../../../../components/app/ens-input' import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js' export default class SendToRow extends Component { diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js index 30865d295..2cbe9fcd0 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js @@ -14,13 +14,13 @@ import { } from './send-to-row.selectors.js' import { updateSendTo, -} from '../../../../../store/actions' +} from '../../../../store/actions' import { updateSendErrors, updateSendWarnings, openToDropdown, closeToDropdown, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import SendToRow from './send-to-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js index a6160d335..a6160d335 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js index 60e75d34c..d0a43f086 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js @@ -4,8 +4,8 @@ const { KNOWN_RECIPIENT_ADDRESS_ERROR, INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR, } = require('../../send.constants') -const { isValidAddress, isEthNetwork } = require('../../../../../helpers/utils/util') -import { checkExistingAddresses } from '../../../../../pages/add-token/util' +const { isValidAddress, isEthNetwork } = require('../../../../helpers/utils/util') +import { checkExistingAddresses } from '../../../add-token/util' const ethUtil = require('ethereumjs-util') const contractMap = require('eth-contract-metadata') diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js index d4d054057..c180d97f1 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js @@ -16,7 +16,7 @@ const SendToRow = proxyquire('../send-to-row.component.js', { }).default import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' -import EnsInput from '../../../../ens-input' +import EnsInput from '../../../../../components/app/ens-input' const propsMethodSpies = { closeToDropdown: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js index 94b4f1024..bb8702e9a 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js @@ -36,8 +36,8 @@ proxyquire('../send-to-row.container.js', { sendToIsInWarning: (s) => `mockInWarning:${s}`, getTokens: (s) => `mockTokens:${s}`, }, - '../../../../../store/actions': actionSpies, - '../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../store/actions': actionSpies, + '../../../../ducks/send/send.duck': duckActionSpies, }) describe('send-to-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js index 0fa342d1e..0fa342d1e 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js index 95882d640..f29f5efec 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js @@ -13,7 +13,7 @@ const stubs = { } const toRowUtils = proxyquire('../send-to-row.utils.js', { - '../../../../../helpers/utils/util': { + '../../../../helpers/utils/util': { isValidAddress: stubs.isValidAddress, }, }) diff --git a/ui/app/components/app/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js index 7d102c930..521c6523e 100644 --- a/ui/app/components/app/send/send-content/tests/send-content-component.test.js +++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js @@ -3,12 +3,13 @@ import assert from 'assert' import { shallow } from 'enzyme' import SendContent from '../send-content.component.js' -import PageContainerContent from '../../../../ui/page-container/page-container-content.component' +import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component' import SendAmountRow from '../send-amount-row/send-amount-row.container' import SendFromRow from '../send-from-row/send-from-row.container' import SendGasRow from '../send-gas-row/send-gas-row.container' import SendToRow from '../send-to-row/send-to-row.container' import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container' +import SendAssetRow from '../send-asset-row/send-asset-row.container' describe('SendContent Component', function () { let wrapper @@ -32,9 +33,10 @@ describe('SendContent Component', function () { const PageContainerContentChild = wrapper.find(PageContainerContent).children() assert(PageContainerContentChild.childAt(0).is(SendFromRow)) assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(3).is(SendGasRow)) - assert(PageContainerContentChild.childAt(4).is(SendHexDataRow)) + assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) + assert(PageContainerContentChild.childAt(4).is(SendGasRow)) + assert(PageContainerContentChild.childAt(5).is(SendHexDataRow)) }) it('should not render the SendHexDataRow if props.showHexData is false', () => { @@ -42,9 +44,10 @@ describe('SendContent Component', function () { const PageContainerContentChild = wrapper.find(PageContainerContent).children() assert(PageContainerContentChild.childAt(0).is(SendFromRow)) assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(3).is(SendGasRow)) - assert.equal(PageContainerContentChild.childAt(4).exists(), false) + assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) + assert(PageContainerContentChild.childAt(4).is(SendGasRow)) + assert.equal(PageContainerContentChild.childAt(5).exists(), false) }) }) }) diff --git a/ui/app/components/app/send/send-footer/README.md b/ui/app/pages/send/send-footer/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-footer/README.md +++ b/ui/app/pages/send/send-footer/README.md diff --git a/ui/app/components/app/send/send-footer/index.js b/ui/app/pages/send/send-footer/index.js index 58e91d622..58e91d622 100644 --- a/ui/app/components/app/send/send-footer/index.js +++ b/ui/app/pages/send/send-footer/index.js diff --git a/ui/app/components/app/send/send-footer/send-footer.component.js b/ui/app/pages/send/send-footer/send-footer.component.js index cc891a9b3..16a8fdde2 100644 --- a/ui/app/components/app/send/send-footer/send-footer.component.js +++ b/ui/app/pages/send/send-footer/send-footer.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerFooter from '../../../ui/page-container/page-container-footer' -import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' +import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class SendFooter extends Component { @@ -27,6 +27,7 @@ export default class SendFooter extends Component { unapprovedTxs: PropTypes.object, update: PropTypes.func, sendErrors: PropTypes.object, + gasChangedLabel: PropTypes.string, } static contextTypes = { @@ -57,6 +58,7 @@ export default class SendFooter extends Component { update, toAccounts, history, + gasChangedLabel, } = this.props const { metricsEvent } = this.context @@ -91,6 +93,9 @@ export default class SendFooter extends Component { action: 'Edit Screen', name: 'Complete', }, + customVariables: { + gasChanged: gasChangedLabel, + }, }) history.push(CONFIRM_TRANSACTION_ROUTE) }) diff --git a/ui/app/components/app/send/send-footer/send-footer.container.js b/ui/app/pages/send/send-footer/send-footer.container.js index ea3fd7ee4..68f4dc7c3 100644 --- a/ui/app/components/app/send/send-footer/send-footer.container.js +++ b/ui/app/pages/send/send-footer/send-footer.container.js @@ -6,7 +6,7 @@ import { signTokenTx, signTx, updateTransaction, -} from '../../../../store/actions' +} from '../../../store/actions' import SendFooter from './send-footer.component' import { getGasLimit, @@ -31,10 +31,21 @@ import { constructTxParams, constructUpdatedTx, } from './send-footer.utils' +import { + getRenderableEstimateDataForSmallButtonsFromGWEI, + getDefaultActiveButtonIndex, +} from '../../../selectors/custom-gas' export default connect(mapStateToProps, mapDispatchToProps)(SendFooter) function mapStateToProps (state) { + const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state) + const gasPrice = getGasPrice(state) + const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice) + const gasChangedLabel = activeButtonIndex >= 0 + ? gasButtonInfo[activeButtonIndex].labelKey + : 'custom' + return { amount: getSendAmount(state), data: getSendHexData(state), @@ -50,6 +61,7 @@ function mapStateToProps (state) { tokenBalance: getTokenBalance(state), unapprovedTxs: getUnapprovedTxs(state), sendErrors: getSendErrors(state), + gasChangedLabel, } } diff --git a/ui/app/components/app/send/send-footer/send-footer.scss b/ui/app/pages/send/send-footer/send-footer.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-footer/send-footer.scss +++ b/ui/app/pages/send/send-footer/send-footer.scss diff --git a/ui/app/components/app/send/send-footer/send-footer.selectors.js b/ui/app/pages/send/send-footer/send-footer.selectors.js index e20addfdc..e20addfdc 100644 --- a/ui/app/components/app/send/send-footer/send-footer.selectors.js +++ b/ui/app/pages/send/send-footer/send-footer.selectors.js diff --git a/ui/app/components/app/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js index abb2ebc77..91ac29014 100644 --- a/ui/app/components/app/send/send-footer/send-footer.utils.js +++ b/ui/app/pages/send/send-footer/send-footer.utils.js @@ -38,6 +38,7 @@ function constructUpdatedTx ({ }) { const unapprovedTx = unapprovedTxs[editingTransactionId] const txParamsData = unapprovedTx.txParams.data ? unapprovedTx.txParams.data : data + const editingTx = { ...unapprovedTx, txParams: Object.assign( diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js index 6683ca8c0..56fc95df2 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js @@ -2,10 +2,10 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../../helpers/constants/routes' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import SendFooter from '../send-footer.component.js' -import PageContainerFooter from '../../../../ui/page-container/page-container-footer' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' const propsMethodSpies = { addToAddressBookIfNew: sinon.spy(), diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js index 878b0aa19..118ebf356 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js @@ -28,7 +28,7 @@ proxyquire('../send-footer.container.js', { return () => ({}) }, }, - '../../../../store/actions': actionSpies, + '../../../store/actions': actionSpies, '../send.selectors': { getGasLimit: (s) => `mockGasLimit:${s}`, getGasPrice: (s) => `mockGasPrice:${s}`, @@ -46,6 +46,10 @@ proxyquire('../send-footer.container.js', { }, './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` }, './send-footer.utils': utilsStubs, + '../../../selectors/custom-gas': { + getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => ([{ labelKey: `mockLabel:${s}` }]), + getDefaultActiveButtonIndex: () => 0, + }, }) describe('send-footer container', () => { @@ -68,6 +72,7 @@ describe('send-footer container', () => { tokenBalance: 'mockTokenBalance:mockState', unapprovedTxs: 'mockUnapprovedTxs:mockState', sendErrors: 'mockSendErrors:mockState', + gasChangedLabel: 'mockLabel:mockState', }) }) diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js index 8de032f57..8de032f57 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js index 28ff0c891..f4705e691 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js @@ -149,7 +149,6 @@ describe('send-footer utils', () => { }, }, }) - assert.deepEqual(result, { unapprovedTxParam: 'someOtherParam', txParams: { diff --git a/ui/app/components/app/send/send-header/README.md b/ui/app/pages/send/send-header/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-header/README.md +++ b/ui/app/pages/send/send-header/README.md diff --git a/ui/app/components/app/send/send-header/index.js b/ui/app/pages/send/send-header/index.js index 0b17f0b7d..0b17f0b7d 100644 --- a/ui/app/components/app/send/send-header/index.js +++ b/ui/app/pages/send/send-header/index.js diff --git a/ui/app/components/app/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js index f216954ef..76e35494a 100644 --- a/ui/app/components/app/send/send-header/send-header.component.js +++ b/ui/app/pages/send/send-header/send-header.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerHeader from '../../../ui/page-container/page-container-header' -import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes' +import PageContainerHeader from '../../../components/ui/page-container/page-container-header' +import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class SendHeader extends Component { @@ -25,7 +25,6 @@ export default class SendHeader extends Component { return ( <PageContainerHeader onClose={() => this.onClose()} - subtitle={this.context.t(...this.props.subtitleParams)} title={this.context.t(this.props.titleKey)} /> ) diff --git a/ui/app/components/app/send/send-header/send-header.container.js b/ui/app/pages/send/send-header/send-header.container.js index ce53fba9a..1a9c5e9c0 100644 --- a/ui/app/components/app/send/send-header/send-header.container.js +++ b/ui/app/pages/send/send-header/send-header.container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { clearSend } from '../../../../store/actions' +import { clearSend } from '../../../store/actions' import SendHeader from './send-header.component' import { getSubtitleParams, getTitleKey } from './send-header.selectors' diff --git a/ui/app/components/app/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js index d7c9d3766..d7c9d3766 100644 --- a/ui/app/components/app/send/send-header/send-header.selectors.js +++ b/ui/app/pages/send/send-header/send-header.selectors.js diff --git a/ui/app/components/app/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js index db2ee8967..91ac7e343 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-component.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-component.test.js @@ -2,10 +2,10 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import { DEFAULT_ROUTE } from '../../../../../helpers/constants/routes' +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import SendHeader from '../send-header.component.js' -import PageContainerHeader from '../../../../ui/page-container/page-container-header' +import PageContainerHeader from '../../../../components/ui/page-container/page-container-header' const propsMethodSpies = { clearSend: sinon.spy(), @@ -57,10 +57,8 @@ describe('SendHeader Component', function () { 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() diff --git a/ui/app/components/app/send/send-header/tests/send-header-container.test.js b/ui/app/pages/send/send-header/tests/send-header-container.test.js index 634c3424b..fdad8aab3 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-container.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-container.test.js @@ -17,7 +17,7 @@ proxyquire('../send-header.container.js', { return () => ({}) }, }, - '../../../../store/actions': actionSpies, + '../../../store/actions': actionSpies, './send-header.selectors': { getTitleKey: (s) => `mockTitleKey:${s}`, getSubtitleParams: (s) => `mockSubtitleParams:${s}`, diff --git a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js index e0c6a3ab3..e0c6a3ab3 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js diff --git a/ui/app/components/app/send/send.component.js b/ui/app/pages/send/send.component.js index a38b681b0..5f0c9c9f2 100644 --- a/ui/app/components/app/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import PersistentForm from '../../../../lib/persistent-form' +import PersistentForm from '../../../lib/persistent-form' import { getAmountErrorObject, getGasFeeErrorObject, @@ -112,6 +112,7 @@ export default class SendTransactionScreen extends PersistentForm { gasTotal: prevGasTotal, tokenBalance: prevTokenBalance, network: prevNetwork, + selectedToken: prevSelectedToken, } = prevProps const uninitialized = [prevBalance, prevGasTotal].every(n => n === null) @@ -161,6 +162,13 @@ export default class SendTransactionScreen extends PersistentForm { this.updateGas() } } + + const prevTokenAddress = prevSelectedToken && prevSelectedToken.address + const selectedTokenAddress = selectedToken && selectedToken.address + + if (selectedTokenAddress && prevTokenAddress !== selectedTokenAddress) { + this.updateSendToken() + } } componentDidMount () { @@ -171,18 +179,7 @@ export default class SendTransactionScreen extends PersistentForm { } componentWillMount () { - const { - from: { address }, - selectedToken, - tokenContract, - updateSendTokenBalance, - } = this.props - - updateSendTokenBalance({ - selectedToken, - tokenContract, - address, - }) + this.updateSendToken() // Show QR Scanner modal if ?scan=true if (window.location.search === '?scan=true') { @@ -199,6 +196,21 @@ export default class SendTransactionScreen extends PersistentForm { this.props.resetSendState() } + updateSendToken () { + const { + from: { address }, + selectedToken, + tokenContract, + updateSendTokenBalance, + } = this.props + + updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + }) + } + render () { const { history, showHexData } = this.props diff --git a/ui/app/components/app/send/send.constants.js b/ui/app/pages/send/send.constants.js index 36549038e..d3fa38d10 100644 --- a/ui/app/components/app/send/send.constants.js +++ b/ui/app/pages/send/send.constants.js @@ -1,5 +1,5 @@ const ethUtil = require('ethereumjs-util') -const { conversionUtil, multiplyCurrencies } = require('../../../helpers/utils/conversion-util') +const { conversionUtil, multiplyCurrencies } = require('../../helpers/utils/conversion-util') const MIN_GAS_PRICE_DEC = '0' const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16) diff --git a/ui/app/components/app/send/send.container.js b/ui/app/pages/send/send.container.js index e65463b93..69adbb765 100644 --- a/ui/app/components/app/send/send.container.js +++ b/ui/app/pages/send/send.container.js @@ -2,6 +2,10 @@ import { connect } from 'react-redux' import SendEther from './send.component' import { withRouter } from 'react-router-dom' import { compose } from 'recompose' +const { + getSelectedAddress, +} = require('../../selectors/selectors') + import { getAmountConversionRate, getBlockGasLimit, @@ -12,7 +16,6 @@ import { getGasTotal, getPrimaryCurrency, getRecentBlocks, - getSelectedAddress, getSelectedToken, getSelectedTokenContract, getSelectedTokenToFiatRate, @@ -31,21 +34,21 @@ import { setGasTotal, showQrScanner, qrCodeDetected, -} from '../../../store/actions' +} from '../../store/actions' import { resetSendState, updateSendErrors, -} from '../../../ducks/send/send.duck' +} from '../../ducks/send/send.duck' import { fetchBasicGasEstimates, -} from '../../../ducks/gas/gas.duck' +} from '../../ducks/gas/gas.duck' import { calcGasTotal, } from './send.utils.js' import { SEND_ROUTE, -} from '../../../helpers/constants/routes' +} from '../../helpers/constants/routes' module.exports = compose( withRouter, diff --git a/ui/app/components/app/send/send.scss b/ui/app/pages/send/send.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send.scss +++ b/ui/app/pages/send/send.scss diff --git a/ui/app/components/app/send/send.selectors.js b/ui/app/pages/send/send.selectors.js index 2ec677ad1..d4035df28 100644 --- a/ui/app/components/app/send/send.selectors.js +++ b/ui/app/pages/send/send.selectors.js @@ -1,18 +1,19 @@ -const { valuesFor } = require('../../../helpers/utils/util') +const { valuesFor } = require('../../helpers/utils/util') const abi = require('human-standard-token-abi') const { multiplyCurrencies, -} = require('../../../helpers/utils/conversion-util') +} = require('../../helpers/utils/conversion-util') const { getMetaMaskAccounts, -} = require('../../../selectors/selectors') + getSelectedAddress, +} = require('../../selectors/selectors') const { estimateGasPriceFromRecentBlocks, calcGasTotal, } = require('./send.utils') import { getFastPriceEstimateInHexWEI, -} from '../../../selectors/custom-gas' +} from '../../selectors/custom-gas' const selectors = { accountsWithSendEtherInfoSelector, @@ -33,7 +34,6 @@ const selectors = { getPrimaryCurrency, getRecentBlocks, getSelectedAccount, - getSelectedAddress, getSelectedIdentity, getSelectedToken, getSelectedTokenContract, @@ -149,12 +149,6 @@ function getSelectedAccount (state) { return accounts[selectedAddress] } -function getSelectedAddress (state) { - const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0] - - return selectedAddress -} - function getSelectedIdentity (state) { const selectedAddress = getSelectedAddress(state) const identities = state.metamask.identities @@ -246,9 +240,7 @@ function getSendTo (state) { 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) + return [...fromAccounts, ...addressBookAccounts] } function getSendWarnings (state) { diff --git a/ui/app/components/app/send/send.utils.js b/ui/app/pages/send/send.utils.js index 7609d46ea..4acc174f9 100644 --- a/ui/app/components/app/send/send.utils.js +++ b/ui/app/pages/send/send.utils.js @@ -5,10 +5,10 @@ const { multiplyCurrencies, conversionGreaterThan, conversionLessThan, -} = require('../../../helpers/utils/conversion-util') +} = require('../../helpers/utils/conversion-util') const { calcTokenAmount, -} = require('../../../helpers/utils/token-util') +} = require('../../helpers/utils/token-util') const { BASE_TOKEN_GAS_COST, INSUFFICIENT_FUNDS_ERROR, diff --git a/ui/app/components/app/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js index 738c14839..81955cc1d 100644 --- a/ui/app/components/app/send/tests/send-component.test.js +++ b/ui/app/pages/send/tests/send-component.test.js @@ -3,7 +3,7 @@ import assert from 'assert' import proxyquire from 'proxyquire' import { shallow } from 'enzyme' import sinon from 'sinon' -import timeout from '../../../../../lib/test-timeout' +import timeout from '../../../../lib/test-timeout' import SendHeader from '../send-header/send-header.container' import SendContent from '../send-content/send-content.component' diff --git a/ui/app/components/app/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js index 9538b67b3..b3e202030 100644 --- a/ui/app/components/app/send/tests/send-container.test.js +++ b/ui/app/pages/send/tests/send-container.test.js @@ -35,7 +35,6 @@ proxyquire('../send.container.js', { 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}`, @@ -47,11 +46,15 @@ proxyquire('../send.container.js', { getTokenBalance: (s) => `mockTokenBalance:${s}`, getQrCodeData: (s) => `mockQrCodeData:${s}`, }, - '../../../store/actions': actionSpies, - '../../../ducks/send/send.duck': duckActionSpies, + '../../selectors/selectors': { + getSelectedAddress: (s) => `mockSelectedAddress:${s}`, + }, + '../../store/actions': actionSpies, + '../../ducks/send/send.duck': duckActionSpies, './send.utils.js': { calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice, }, + }) describe('send container', () => { diff --git a/ui/app/components/app/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js index cff26a191..cff26a191 100644 --- a/ui/app/components/app/send/tests/send-selectors-test-data.js +++ b/ui/app/pages/send/tests/send-selectors-test-data.js diff --git a/ui/app/components/app/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js index cdc86fe59..ccc126795 100644 --- a/ui/app/components/app/send/tests/send-selectors.test.js +++ b/ui/app/pages/send/tests/send-selectors.test.js @@ -20,7 +20,6 @@ const { getPrimaryCurrency, getRecentBlocks, getSelectedAccount, - getSelectedAddress, getSelectedIdentity, getSelectedToken, getSelectedTokenContract, @@ -274,14 +273,6 @@ describe('send selectors', () => { }) }) - describe('getSelectedAddress()', () => { - it('should', () => { - assert.equal( - getSelectedAddress(mockState), - '0xd85a4b6a394794842887b8284293d69163007bbb' - ) - }) - }) describe('getSelectedIdentity()', () => { it('should return the identity object of the currently selected address', () => { diff --git a/ui/app/components/app/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js index fc4c6deed..b19535b9e 100644 --- a/ui/app/components/app/send/tests/send-utils.test.js +++ b/ui/app/pages/send/tests/send-utils.test.js @@ -9,7 +9,7 @@ import { const { addCurrencies, subtractCurrencies, -} = require('../../../../helpers/utils/conversion-util') +} = require('../../../helpers/utils/conversion-util') const { INSUFFICIENT_FUNDS_ERROR, @@ -32,7 +32,7 @@ const stubs = { } const sendUtils = proxyquire('../send.utils.js', { - '../../../helpers/utils/conversion-util': { + '../../helpers/utils/conversion-util': { addCurrencies: stubs.addCurrencies, conversionUtil: stubs.conversionUtil, conversionGTE: stubs.conversionGTE, @@ -40,7 +40,7 @@ const sendUtils = proxyquire('../send.utils.js', { conversionGreaterThan: stubs.conversionGreaterThan, conversionLessThan: stubs.conversionLessThan, }, - '../../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount }, + '../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount }, 'ethereumjs-abi': { rawEncode: stubs.rawEncode, }, diff --git a/ui/app/components/app/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js index 183967c58..183967c58 100644 --- a/ui/app/components/app/send/to-autocomplete.component.js +++ b/ui/app/pages/send/to-autocomplete.component.js diff --git a/ui/app/components/app/send/to-autocomplete/index.js b/ui/app/pages/send/to-autocomplete/index.js index 244d301d1..244d301d1 100644 --- a/ui/app/components/app/send/to-autocomplete/index.js +++ b/ui/app/pages/send/to-autocomplete/index.js diff --git a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index d3db8cb59..b246413fb 100644 --- a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -4,8 +4,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('../account-list-item/account-list-item.component').default const connect = require('react-redux').connect -const Tooltip = require('../../../ui/tooltip') -const checksumAddress = require('../../../../helpers/utils/util').checksumAddress +const Tooltip = require('../../../components/ui/tooltip') +const checksumAddress = require('../../../helpers/utils/util').checksumAddress ToAutoComplete.contextTypes = { t: PropTypes.func, diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index d1cad1746..14b9daae6 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -189,7 +189,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={event => { event.preventDefault() @@ -219,7 +219,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -251,7 +251,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { diff --git a/ui/app/pages/settings/info-tab/index.scss b/ui/app/pages/settings/info-tab/index.scss index 43ad6f652..9cc7e21b2 100644 --- a/ui/app/pages/settings/info-tab/index.scss +++ b/ui/app/pages/settings/info-tab/index.scss @@ -30,7 +30,7 @@ } &__link-text { - color: $curious-blue; + @extend %link; } &__version-number { diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 233561115..01a28bac7 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -39,7 +39,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -73,7 +73,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { @@ -101,7 +101,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="danger" large onClick={event => { event.preventDefault() diff --git a/ui/app/pages/settings/settings-tab/index.scss b/ui/app/pages/settings/settings-tab/index.scss index ef32b0e4c..c1750af2c 100644 --- a/ui/app/pages/settings/settings-tab/index.scss +++ b/ui/app/pages/settings/settings-tab/index.scss @@ -6,19 +6,15 @@ } &__advanced-link { - color: $curious-blue; + @extend %small-link; padding-left: 5px; } &__rpc-save-button { align-self: flex-end; padding: 5px; - text-transform: uppercase; - color: $dusty-gray; cursor: pointer; width: 25%; - min-width: 80px; - height: 33px; } &__button--red { @@ -35,20 +31,6 @@ } } - &__button--orange { - border-color: lighten($ecstasy, 20%); - color: $ecstasy; - - &:active { - background: lighten($ecstasy, 40%); - border-color: $ecstasy; - } - - &:hover { - border-color: $ecstasy; - } - } - &__radio-buttons { display: flex; align-items: center; diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js index ecffb37ca..5ba786f0f 100644 --- a/ui/app/selectors/custom-gas.js +++ b/ui/app/selectors/custom-gas.js @@ -18,7 +18,7 @@ import { } from '../helpers/utils/formatters' import { calcGasTotal, -} from '../components/app/send/send.utils' +} from '../pages/send/send.utils' import { addHexPrefix } from 'ethereumjs-util' const selectors = { diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 554232f7b..2d25aa156 100644 --- a/ui/app/selectors/selectors.js +++ b/ui/app/selectors/selectors.js @@ -91,7 +91,8 @@ function getAccountType (state) { } function getSelectedAsset (state) { - return getSelectedToken(state) || 'ETH' + const selectedToken = getSelectedToken(state) + return selectedToken && selectedToken.symbol || 'ETH' } function getCurrentNetworkId (state) { @@ -300,9 +301,10 @@ function isEthereumNetwork (state) { MAINNET, RINKEBY, ROPSTEN, + GOERLI, } = NETWORK_TYPES - return [ KOVAN, MAINNET, RINKEBY, ROPSTEN].includes(networkType) + return [ KOVAN, MAINNET, RINKEBY, ROPSTEN, GOERLI].includes(networkType) } function preferencesSelector ({ metamask }) { diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index 7d369fdb9..f594d9002 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -5,7 +5,7 @@ const { getTokenAddressFromTokenObject } = require('../helpers/utils/util') const { calcTokenBalance, estimateGas, -} = require('../components/app/send/send.utils') +} = require('../pages/send/send.utils') const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../helpers/utils/i18n-helper') const log = require('loglevel') diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js index 037d990fa..3eaa7cf71 100644 --- a/ui/lib/account-link.js +++ b/ui/lib/account-link.js @@ -17,6 +17,9 @@ module.exports = function (address, network) { case 42: // kovan test net link = `https://kovan.etherscan.io/address/${address}` break + case 5: // goerli test net + link = `https://goerli.etherscan.io/address/${address}` + break default: link = '' break diff --git a/ui/lib/etherscan-prefix-for-network.js b/ui/lib/etherscan-prefix-for-network.js index 2c1904f1c..ce194b0a8 100644 --- a/ui/lib/etherscan-prefix-for-network.js +++ b/ui/lib/etherscan-prefix-for-network.js @@ -14,6 +14,9 @@ module.exports = function (network) { case 42: // kovan test net prefix = 'kovan.' break + case 5: // goerli test net + prefix = 'goerli.' + break default: prefix = '' } |