aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.babelrc4
-rw-r--r--.github/CODEOWNERS6
-rw-r--r--CHANGELOG.md1
-rw-r--r--README.md2
-rw-r--r--app/scripts/contentscript.js1
-rw-r--r--app/scripts/controllers/network/network.js3
-rw-r--r--app/scripts/migrations/index.js1
-rw-r--r--app/scripts/platforms/extension.js6
-rw-r--r--app/scripts/ui.js1
-rw-r--r--package-lock.json43
-rw-r--r--package.json21
-rw-r--r--test/e2e/beta/metamask-beta-ui.spec.js2
-rw-r--r--ui/app/actions.js73
-rw-r--r--ui/app/components/button-group/button-group.component.js61
-rw-r--r--ui/app/components/button-group/button-group.stories.js49
-rw-r--r--ui/app/components/button-group/index.js1
-rw-r--r--ui/app/components/button-group/index.scss38
-rw-r--r--ui/app/components/button-group/tests/button-group-component.test.js97
-rw-r--r--ui/app/components/index.scss2
-rw-r--r--ui/app/components/pages/home.js12
-rw-r--r--ui/app/helpers/confirm-transaction/util.js6
-rw-r--r--ui/app/selectors/confirm-transaction.js29
22 files changed, 416 insertions, 43 deletions
diff --git a/.babelrc b/.babelrc
index 307583ffd..628fe652c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
- "presets": ["es2015", "stage-0", "react"],
- "plugins": ["transform-runtime", "transform-async-to-generator"]
+ "presets": [["env", { "debug": true }], "react", "stage-0"],
+ "plugins": ["transform-runtime", "transform-async-to-generator", "transform-class-properties"]
}
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 000000000..1cdadda65
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,6 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+ui/ @danjm @alextsg @whymarrh
+app/scripts/controllers/transactions @frankiebee
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2d78b6b1..7e1e1ff4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
- Add Trezor Support
- Allow to remove accounts (Imported and Hardware Wallets)
- [#4840](https://github.com/MetaMask/metamask-extension/pull/4840): Now shows notifications when transactions are completed.
+- [#4855](https://github.com/MetaMask/metamask-extension/pull/4855): network.js: convert rpc protocol to lower case.
## 4.8.0 Thur Jun 14 2018
diff --git a/README.md b/README.md
index 8a1eda46c..86d515377 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
# MetaMask Browser Extension
[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/MetaMask/metamask-extension.svg)](https://greenkeeper.io/) [![Stories in Ready](https://badge.waffle.io/MetaMask/metamask-extension.png?label=in%20progress&title=waffle.io)](https://waffle.io/MetaMask/metamask-extension)
+🚨 As of 7/25/18, the MetaMask extension has been removed from the Chrome Web Store. In the meantime, you can download the latest version of MetaMask on our [Releases](https://github.com/MetaMask/metamask-extension/releases) page and load it in Chrome by visiting `chrome://extensions`. For more detailed steps, see our [help center](https://consensys.zendesk.com/hc/en-us/articles/360004134152-How-to-Install-MetaMask-Manually). Follow [@metamask_io](https://twitter.com/metamask_io) on Twitter for updates. 🚨
+
## Support
If you're a user seeking support, [here is our support site](https://metamask.helpscoutdocs.com/).
diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
index 7c775fb04..7b7114c35 100644
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@@ -178,6 +178,7 @@ function blacklistedDomainCheck () {
'adyen.com',
'gravityforms.com',
'harbourair.com',
+ 'ani.gamer.com.tw',
'blueskybooking.com',
]
var currentUrl = window.location.href
diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js
index a50f6dc45..b6f7705b5 100644
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@@ -9,6 +9,7 @@ const extend = require('xtend')
const EthQuery = require('eth-query')
const createEventEmitterProxy = require('../../lib/events-proxy.js')
const log = require('loglevel')
+const urlUtil = require('url')
const {
ROPSTEN,
RINKEBY,
@@ -155,6 +156,8 @@ module.exports = class NetworkController extends EventEmitter {
}
_configureStandardProvider ({ rpcUrl }) {
+ // urlUtil handles malformed urls
+ rpcUrl = urlUtil.parse(rpcUrl).format()
const providerParams = extend(this._baseProviderParams, {
rpcUrl,
engineParams: {
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 04d90bfff..bd0005221 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -37,4 +37,5 @@ module.exports = [
require('./024'),
require('./025'),
require('./026'),
+ require('./027'),
]
diff --git a/app/scripts/platforms/extension.js b/app/scripts/platforms/extension.js
index 901c26cab..0803164e8 100644
--- a/app/scripts/platforms/extension.js
+++ b/app/scripts/platforms/extension.js
@@ -14,6 +14,12 @@ class ExtensionPlatform {
extension.tabs.create({ url })
}
+ closeCurrentWindow () {
+ return extension.windows.getCurrent((windowDetails) => {
+ return extension.windows.remove(windowDetails.id)
+ })
+ }
+
getVersion () {
return extension.runtime.getManifest().version
}
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index 9bf97be87..da100f928 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -64,7 +64,6 @@ async function start () {
css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
deleteInjectedCss = injectCss(css)
}
- if (state.appState.shouldClose) notificationManager.closePopup()
})
})
diff --git a/package-lock.json b/package-lock.json
index 443e173a9..1a2897a9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3618,9 +3618,9 @@
}
},
"babel-preset-env": {
- "version": "1.6.1",
- "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.1.tgz",
- "integrity": "sha512-W6VIyA6Ch9ePMI7VptNn2wBM6dbG0eSz25HEiL40nQXCsXGTGZSTZu1Iap+cj3Q0S5a7T9+529l/5Bkvd+afNA==",
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz",
+ "integrity": "sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==",
"requires": {
"babel-plugin-check-es2015-constants": "^6.22.0",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
@@ -3649,7 +3649,7 @@
"babel-plugin-transform-es2015-unicode-regex": "^6.22.0",
"babel-plugin-transform-exponentiation-operator": "^6.22.0",
"babel-plugin-transform-regenerator": "^6.22.0",
- "browserslist": "^2.1.2",
+ "browserslist": "^3.2.6",
"invariant": "^2.2.2",
"semver": "^5.3.0"
}
@@ -4664,12 +4664,19 @@
}
},
"browserslist": {
- "version": "2.11.0",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.0.tgz",
- "integrity": "sha512-mNYp0RNeu1xueGuJFSXkU+K0nH+dBE/gcjtyhtNKfU8hwdrVIfoA7i5iFSjOmzkGdL2QaO7YX9ExiVPE7AY9JA==",
+ "version": "3.2.8",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
+ "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
"requires": {
- "caniuse-lite": "^1.0.30000784",
- "electron-to-chromium": "^1.3.30"
+ "caniuse-lite": "^1.0.30000844",
+ "electron-to-chromium": "^1.3.47"
+ },
+ "dependencies": {
+ "electron-to-chromium": {
+ "version": "1.3.52",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz",
+ "integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA="
+ }
}
},
"bs58": {
@@ -4996,9 +5003,9 @@
"integrity": "sha1-MN/YMAnVcE8C3/s3clBo7RKjZrs="
},
"caniuse-lite": {
- "version": "1.0.30000786",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000786.tgz",
- "integrity": "sha1-G0Jc2FaNgFvFY4veSQXNhjVod0Y="
+ "version": "1.0.30000865",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+ "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw=="
},
"capture-stack-trace": {
"version": "1.0.0",
@@ -13470,9 +13477,9 @@
"integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
},
"node-sass": {
- "version": "4.9.1",
- "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.1.tgz",
- "integrity": "sha512-m6H1I6cHXsHsJ7BIWdnJsz9S9gVMyh+/H2cOTXgl2/2WqyyWlBcl4PHJcqrXo5RZVCfCUFqOtjPN0+0XbVHR5Q==",
+ "version": "4.9.2",
+ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.2.tgz",
+ "integrity": "sha512-LdxoJLZutx0aQXHtWIYwJKMj+9pTjneTcLWJgzf2XbGu0q5pRNqW5QvFCEdm3mc5rJOdru/mzln5d0EZLacf6g==",
"requires": {
"async-foreach": "^0.1.3",
"chalk": "^1.1.1",
@@ -20653,9 +20660,9 @@
}
},
"node-sass": {
- "version": "4.9.1",
- "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.1.tgz",
- "integrity": "sha512-m6H1I6cHXsHsJ7BIWdnJsz9S9gVMyh+/H2cOTXgl2/2WqyyWlBcl4PHJcqrXo5RZVCfCUFqOtjPN0+0XbVHR5Q==",
+ "version": "4.9.2",
+ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.2.tgz",
+ "integrity": "sha512-LdxoJLZutx0aQXHtWIYwJKMj+9pTjneTcLWJgzf2XbGu0q5pRNqW5QvFCEdm3mc5rJOdru/mzln5d0EZLacf6g==",
"dev": true,
"requires": {
"async-foreach": "^0.1.3",
diff --git a/package.json b/package.json
index 376f773e5..96b0829db 100644
--- a/package.json
+++ b/package.json
@@ -54,9 +54,19 @@
"babelify",
{
"presets": [
- "es2015",
+ [
+ "env",
+ {
+ "debug": true
+ }
+ ],
"stage-0"
]
+ },
+ {
+ "plugins": [
+ "transform-class-properties"
+ ]
}
],
"reactify",
@@ -94,6 +104,7 @@
"eslint-plugin-react": "^7.4.0",
"eth-bin-to-ops": "^1.0.1",
"eth-contract-metadata": "github:MetaMask/eth-contract-metadata#master",
+ "eth-ens-namehash": "^2.0.8",
"eth-hd-keyring": "^2.0.0",
"eth-json-rpc-filters": "^1.2.6",
"eth-json-rpc-infura": "^3.0.0",
@@ -142,6 +153,7 @@
"metamascara": "^2.0.0",
"metamask-logo": "^2.1.4",
"mkdirp": "^0.5.1",
+ "multihashes": "^0.4.12",
"multiplex": "^6.7.0",
"number-to-bn": "^1.7.0",
"obj-multiplex": "^1.0.0",
@@ -195,9 +207,7 @@
"web3": "^0.20.1",
"web3-provider-engine": "^14.0.5",
"web3-stream-provider": "^3.0.1",
- "xtend": "^4.0.1",
- "multihashes": "^0.4.12",
- "eth-ens-namehash": "^2.0.8"
+ "xtend": "^4.0.1"
},
"devDependencies": {
"@sentry/cli": "^1.30.3",
@@ -209,6 +219,7 @@
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
+ "babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.7.2",
@@ -274,7 +285,7 @@
"mocha-jsdom": "^1.1.0",
"mocha-sinon": "^2.0.0",
"nock": "^9.0.14",
- "node-sass": "^4.9.1",
+ "node-sass": "^4.9.2",
"nsp": "^3.2.1",
"nyc": "^13.0.0",
"open": "0.0.5",
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index ee1aa0ff1..ca1977c5a 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -472,7 +472,7 @@ describe('MetaMask', function () {
await confirmButton.click()
await delay(regularDelayMs)
- await closeAllWindowHandlesExcept(driver, [extension, dapp])
+ await waitUntilXWindowHandles(driver, 2)
await driver.switchTo().window(extension)
await delay(regularDelayMs)
})
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6c947fc35..7a8d9667d 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -10,6 +10,8 @@ const {
const ethUtil = require('ethereumjs-util')
const { fetchLocale } = require('../i18n-helper')
const log = require('loglevel')
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
+const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
var actions = {
_setBackgroundConnection: _setBackgroundConnection,
@@ -743,7 +745,7 @@ function setCurrentCurrency (currencyCode) {
function signMsg (msgData) {
log.debug('action - signMsg')
- return (dispatch) => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -760,6 +762,12 @@ function signMsg (msgData) {
}
dispatch(actions.completedTx(msgData.metamaskId))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -768,7 +776,7 @@ function signMsg (msgData) {
function signPersonalMsg (msgData) {
log.debug('action - signPersonalMsg')
- return dispatch => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -785,6 +793,12 @@ function signPersonalMsg (msgData) {
}
dispatch(actions.completedTx(msgData.metamaskId))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -793,7 +807,7 @@ function signPersonalMsg (msgData) {
function signTypedMsg (msgData) {
log.debug('action - signTypedMsg')
- return (dispatch) => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -810,6 +824,12 @@ function signTypedMsg (msgData) {
}
dispatch(actions.completedTx(msgData.metamaskId))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -1003,7 +1023,7 @@ function clearSend () {
function sendTx (txData) {
log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
- return (dispatch) => {
+ return (dispatch, getState) => {
log.debug(`actions calling background.approveTransaction`)
background.approveTransaction(txData.id, (err) => {
if (err) {
@@ -1011,6 +1031,11 @@ function sendTx (txData) {
return log.error(err.message)
}
dispatch(actions.completedTx(txData.id))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
})
}
}
@@ -1059,7 +1084,7 @@ function updateTransaction (txData) {
function updateAndApproveTx (txData) {
log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
- return dispatch => {
+ return (dispatch, getState) => {
log.debug(`actions calling background.updateAndApproveTx`)
dispatch(actions.showLoadingIndication())
@@ -1084,6 +1109,12 @@ function updateAndApproveTx (txData) {
dispatch(actions.clearSend())
dispatch(actions.completedTx(txData.id))
dispatch(actions.hideLoadingIndication())
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return txData
})
}
@@ -1112,7 +1143,7 @@ function txError (err) {
}
function cancelMsg (msgData) {
- return dispatch => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -1126,6 +1157,12 @@ function cancelMsg (msgData) {
}
dispatch(actions.completedTx(msgData.id))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -1133,7 +1170,7 @@ function cancelMsg (msgData) {
}
function cancelPersonalMsg (msgData) {
- return dispatch => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -1147,6 +1184,12 @@ function cancelPersonalMsg (msgData) {
}
dispatch(actions.completedTx(id))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -1154,7 +1197,7 @@ function cancelPersonalMsg (msgData) {
}
function cancelTypedMsg (msgData) {
- return dispatch => {
+ return (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
@@ -1168,6 +1211,12 @@ function cancelTypedMsg (msgData) {
}
dispatch(actions.completedTx(id))
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return resolve(msgData)
})
})
@@ -1175,7 +1224,7 @@ function cancelTypedMsg (msgData) {
}
function cancelTx (txData) {
- return dispatch => {
+ return (dispatch, getState) => {
log.debug(`background.cancelTransaction`)
dispatch(actions.showLoadingIndication())
@@ -1194,6 +1243,12 @@ function cancelTx (txData) {
dispatch(actions.clearSend())
dispatch(actions.completedTx(txData.id))
dispatch(actions.hideLoadingIndication())
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+ !hasUnconfirmedTransactions(getState())) {
+ return global.platform.closeCurrentWindow()
+ }
+
return txData
})
}
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
new file mode 100644
index 000000000..f99f710ce
--- /dev/null
+++ b/ui/app/components/button-group/button-group.component.js
@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class ButtonGroup extends PureComponent {
+ static propTypes = {
+ defaultActiveButtonIndex: PropTypes.number,
+ disabled: PropTypes.bool,
+ children: PropTypes.array,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ }
+
+ static defaultProps = {
+ className: 'button-group',
+ }
+
+ state = {
+ activeButtonIndex: this.props.defaultActiveButtonIndex || 0,
+ }
+
+ handleButtonClick (activeButtonIndex) {
+ this.setState({ activeButtonIndex })
+ }
+
+ renderButtons () {
+ const { children, disabled } = this.props
+
+ return React.Children.map(children, (child, index) => {
+ return child && (
+ <button
+ className={classnames(
+ 'button-group__button',
+ { 'button-group__button--active': index === this.state.activeButtonIndex },
+ )}
+ onClick={() => {
+ this.handleButtonClick(index)
+ child.props.onClick && child.props.onClick()
+ }}
+ disabled={disabled || child.props.disabled}
+ key={index}
+ >
+ { child.props.children }
+ </button>
+ )
+ })
+ }
+
+ render () {
+ const { className, style } = this.props
+
+ return (
+ <div
+ className={className}
+ style={style}
+ >
+ { this.renderButtons() }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/button-group/button-group.stories.js b/ui/app/components/button-group/button-group.stories.js
new file mode 100644
index 000000000..14e1a7e49
--- /dev/null
+++ b/ui/app/components/button-group/button-group.stories.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import ButtonGroup from './'
+import Button from '../button'
+import { text, boolean } from '@storybook/addon-knobs/react'
+
+storiesOf('ButtonGroup', module)
+ .add('with Buttons', () =>
+ <ButtonGroup
+ style={{ width: '300px' }}
+ disabled={boolean('Disabled', false)}
+ defaultActiveButtonIndex={1}
+ >
+ <Button
+ onClick={action('cheap')}
+ >
+ {text('Button1', 'Cheap')}
+ </Button>
+ <Button
+ onClick={action('average')}
+ >
+ {text('Button2', 'Average')}
+ </Button>
+ <Button
+ onClick={action('fast')}
+ >
+ {text('Button3', 'Fast')}
+ </Button>
+ </ButtonGroup>
+ )
+ .add('with a disabled Button', () =>
+ <ButtonGroup
+ style={{ width: '300px' }}
+ disabled={boolean('Disabled', false)}
+ >
+ <Button
+ onClick={action('enabled')}
+ >
+ {text('Button1', 'Enabled')}
+ </Button>
+ <Button
+ onClick={action('disabled')}
+ disabled
+ >
+ {text('Button2', 'Disabled')}
+ </Button>
+ </ButtonGroup>
+ )
diff --git a/ui/app/components/button-group/index.js b/ui/app/components/button-group/index.js
new file mode 100644
index 000000000..df470bd57
--- /dev/null
+++ b/ui/app/components/button-group/index.js
@@ -0,0 +1 @@
+export { default } from './button-group.component'
diff --git a/ui/app/components/button-group/index.scss b/ui/app/components/button-group/index.scss
new file mode 100644
index 000000000..29713c75b
--- /dev/null
+++ b/ui/app/components/button-group/index.scss
@@ -0,0 +1,38 @@
+.button-group {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &__button {
+ font-family: Roboto;
+ font-size: 1rem;
+ color: $tundora;
+ border-style: solid;
+ border-color: $alto;
+ border-width: 1px 1px 1px;
+ border-left: 0;
+ flex: 1;
+ padding: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &:first-child {
+ border-left: 1px solid $alto;
+ border-radius: 4px 0 0 4px;
+ }
+
+ &:last-child {
+ border-radius: 0 4px 4px 0;
+ }
+
+ &--active {
+ background-color: $dodger-blue;
+ color: $white;
+ }
+
+ &:disabled {
+ opacity: .5;
+ }
+ }
+} \ No newline at end of file
diff --git a/ui/app/components/button-group/tests/button-group-component.test.js b/ui/app/components/button-group/tests/button-group-component.test.js
new file mode 100644
index 000000000..f07bb97c8
--- /dev/null
+++ b/ui/app/components/button-group/tests/button-group-component.test.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import ButtonGroup from '../button-group.component.js'
+
+const childButtonSpies = {
+ onClick: sinon.spy(),
+}
+
+sinon.spy(ButtonGroup.prototype, 'handleButtonClick')
+sinon.spy(ButtonGroup.prototype, 'renderButtons')
+
+const mockButtons = [
+ <button onClick={childButtonSpies.onClick} key={'a'}><div className="mockClass" /></button>,
+ <button onClick={childButtonSpies.onClick} key={'b'}></button>,
+ <button onClick={childButtonSpies.onClick} key={'c'}></button>,
+]
+
+describe('ButtonGroup Component', function () {
+ let wrapper
+
+ beforeEach(() => {
+ wrapper = shallow(<ButtonGroup
+ defaultActiveButtonIndex={1}
+ disabled={false}
+ className="someClassName"
+ style={ { color: 'red' } }
+ >{mockButtons}</ButtonGroup>)
+ })
+
+ afterEach(() => {
+ childButtonSpies.onClick.resetHistory()
+ ButtonGroup.prototype.handleButtonClick.resetHistory()
+ ButtonGroup.prototype.renderButtons.resetHistory()
+ })
+
+ describe('handleButtonClick', () => {
+ it('should set the activeButtonIndex', () => {
+ assert.equal(wrapper.state('activeButtonIndex'), 1)
+ wrapper.instance().handleButtonClick(2)
+ assert.equal(wrapper.state('activeButtonIndex'), 2)
+ })
+ })
+
+ describe('renderButtons', () => {
+ it('should render a button for each child', () => {
+ const childButtons = wrapper.find('.button-group__button')
+ assert.equal(childButtons.length, 3)
+ })
+
+ it('should render the correct button with an active state', () => {
+ const childButtons = wrapper.find('.button-group__button')
+ const activeChildButton = wrapper.find('.button-group__button--active')
+ assert.deepEqual(childButtons.get(1), activeChildButton.get(0))
+ })
+
+ it('should call handleButtonClick and the respective button\'s onClick method when a button is clicked', () => {
+ assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0)
+ assert.equal(childButtonSpies.onClick.callCount, 0)
+ const childButtons = wrapper.find('.button-group__button')
+ childButtons.at(0).props().onClick()
+ childButtons.at(1).props().onClick()
+ childButtons.at(2).props().onClick()
+ assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3)
+ assert.equal(childButtonSpies.onClick.callCount, 3)
+ })
+
+ it('should render all child buttons as disabled if props.disabled is true', () => {
+ const childButtons = wrapper.find('.button-group__button')
+ childButtons.forEach(button => {
+ assert.equal(button.props().disabled, undefined)
+ })
+ wrapper.setProps({ disabled: true })
+ const disabledChildButtons = wrapper.find('[disabled=true]')
+ assert.equal(disabledChildButtons.length, 3)
+ })
+
+ it('should render the children of the button', () => {
+ const mockClass = wrapper.find('.mockClass')
+ assert.equal(mockClass.length, 1)
+ })
+ })
+
+ describe('render', () => {
+ it('should render a div with the expected class and style', () => {
+ assert.equal(wrapper.find('div').at(0).props().className, 'someClassName')
+ assert.deepEqual(wrapper.find('div').at(0).props().style, { color: 'red' })
+ })
+
+ it('should call renderButtons when rendering', () => {
+ assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1)
+ wrapper.instance().render()
+ assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2)
+ })
+ })
+})
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index 32f0e90e4..b3e14ce23 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -1,3 +1,5 @@
+@import './button-group/index';
+
@import './export-text-container/index';
@import './selected-account/index';
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 38aa02dae..5e3fdc9af 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -27,19 +27,17 @@ const {
NOTICE_ROUTE,
} = require('../../routes')
+const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
+
class Home extends Component {
componentDidMount () {
const {
history,
- unapprovedTxs = {},
- unapprovedMsgCount = 0,
- unapprovedPersonalMsgCount = 0,
- unapprovedTypedMessagesCount = 0,
+ unconfirmedTransactionsCount = 0,
} = this.props
// unapprovedTxs and unapproved messages
- if (Object.keys(unapprovedTxs).length ||
- unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
+ if (unconfirmedTransactionsCount > 0) {
history.push(CONFIRM_TRANSACTION_ROUTE)
}
}
@@ -167,6 +165,7 @@ Home.propTypes = {
isPopup: PropTypes.bool,
isMouseUser: PropTypes.bool,
t: PropTypes.func,
+ unconfirmedTransactionsCount: PropTypes.number,
}
function mapStateToProps (state) {
@@ -230,6 +229,7 @@ function mapStateToProps (state) {
// state needed to get account dropdown temporarily rendering from app bar
selected,
+ unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
}
}
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index 1373d28df..f015b2bf5 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -16,6 +16,8 @@ import {
conversionGreaterThan,
} from '../../conversion-util'
+import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
+
export function getTokenData (data = {}) {
return abiDecoder.decodeMethod(data)
}
@@ -131,3 +133,7 @@ export function convertTokenToFiat ({
conversionRate: totalExchangeRate,
})
}
+
+export function hasUnconfirmedTransactions (state) {
+ return unconfirmedTransactionsCountSelector(state) > 0
+}
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index 54016a30e..8f8e0ea74 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -62,6 +62,34 @@ export const unconfirmedTransactionsHashSelector = createSelector(
}
)
+const unapprovedMsgCountSelector = state => state.metamask.unapprovedMsgCount
+const unapprovedPersonalMsgCountSelector = state => state.metamask.unapprovedPersonalMsgCount
+const unapprovedTypedMessagesCountSelector = state => state.metamask.unapprovedTypedMessagesCount
+
+export const unconfirmedTransactionsCountSelector = createSelector(
+ unapprovedTxsSelector,
+ unapprovedMsgCountSelector,
+ unapprovedPersonalMsgCountSelector,
+ unapprovedTypedMessagesCountSelector,
+ networkSelector,
+ (
+ unapprovedTxs = {},
+ unapprovedMsgCount = 0,
+ unapprovedPersonalMsgCount = 0,
+ unapprovedTypedMessagesCount = 0,
+ network
+ ) => {
+ const filteredUnapprovedTxIds = Object.keys(unapprovedTxs).filter(txId => {
+ const { metamaskNetworkId } = unapprovedTxs[txId]
+ return metamaskNetworkId === network
+ })
+
+ return filteredUnapprovedTxIds.length + unapprovedTypedMessagesCount + unapprovedMsgCount +
+ unapprovedPersonalMsgCount
+ }
+)
+
+
export const currentCurrencySelector = state => state.metamask.currentCurrency
export const conversionRateSelector = state => state.metamask.conversionRate
@@ -156,7 +184,6 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector(
}
)
-
export const contractExchangeRateSelector = createSelector(
contractExchangeRatesSelector,
tokenAddressSelector,
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-29 19:44:41 +0800