From c6713e93adcaeeba1ec559d44135bb62c76d2538 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 17 Nov 2017 13:23:25 -0800 Subject: Fix bug where gas param was not a string Prevented sending transactions. Fixes #2598 --- ui/app/components/customize-gas-modal/index.js | 2 +- ui/app/components/send/send-constants.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 485dacf90..6d27702e8 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -244,7 +244,7 @@ CustomizeGasModal.prototype.render = function () { min: 1, // max: 100000, step: 1, - onChange: value => this.convertAndSetGasLimit(value), + onChange: value => this.convertAndSetGasLimit(String(value)), title: 'Gas Limit', copy: 'We calculate the suggested gas limit based on network success rates.', }), diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js index a961ffcd8..9c240972f 100644 --- a/ui/app/components/send/send-constants.js +++ b/ui/app/components/send/send-constants.js @@ -3,8 +3,8 @@ const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const MIN_GAS_PRICE_HEX = (100000000).toString(16) const MIN_GAS_PRICE_DEC = '100000000' -const MIN_GAS_LIMIT_HEX = (21000).toString(16) -const MIN_GAS_LIMIT_DEC = 21000 +const MIN_GAS_LIMIT_DEC = '21000' +const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16) const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, { fromDenomination: 'WEI', -- cgit v1.2.3 From 28409294c3cd70ddbc9a9f3467d402c89e110261 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 20 Nov 2017 10:54:05 -0800 Subject: Remove unneeded type casting --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 6d27702e8..485dacf90 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -244,7 +244,7 @@ CustomizeGasModal.prototype.render = function () { min: 1, // max: 100000, step: 1, - onChange: value => this.convertAndSetGasLimit(String(value)), + onChange: value => this.convertAndSetGasLimit(value), title: 'Gas Limit', copy: 'We calculate the suggested gas limit based on network success rates.', }), -- cgit v1.2.3 From 597af980dd68c0252625e7cc5b6a6a223406fbc2 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 20 Nov 2017 14:03:47 -0800 Subject: Prevent multiple submissions of first time form --- ui/app/first-time/init-menu.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index cc7c51bd3..b4587f1ee 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -8,6 +8,8 @@ const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') +let isSubmitting = false + module.exports = connect(mapStateToProps)(InitializeMenuScreen) inherits(InitializeMenuScreen, Component) @@ -164,7 +166,10 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { return } - this.props.dispatch(actions.createNewVaultAndKeychain(password)) + if (!isSubmitting) { + isSubmitting = true + this.props.dispatch(actions.createNewVaultAndKeychain(password)) + } } InitializeMenuScreen.prototype.inputChanged = function (event) { -- cgit v1.2.3 From 90fc4812bc75857581e56eb6d63484dbc5c48cb1 Mon Sep 17 00:00:00 2001 From: "Clark, Jason (Contractor)" Date: Thu, 23 Nov 2017 18:33:44 -0700 Subject: incremental commit --- ui/app/actions.js | 9 +++++++++ ui/app/components/identicon.js | 3 ++- ui/app/reducers/metamask.js | 6 ++++++ ui/app/settings.js | 25 +++++++++++++++++++++++++ 4 files changed, 42 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 2ca62c41f..957e42223 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -234,6 +234,9 @@ var actions = { toggleAccountMenu, useEtherscanProvider, + + TOGGLE_USE_BLOCKIE: 'TOGGLE_USE_BLOCKIE', + toggleUseBlockie, } module.exports = actions @@ -1550,3 +1553,9 @@ function toggleAccountMenu () { type: actions.TOGGLE_ACCOUNT_MENU, } } + +function toggleUseBlockie () { + return { + type: actions.TOGGLE_USE_BLOCKIE, + } +} diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index d30b7cd56..63f3087a4 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') +const blockies = require('blockies') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) @@ -18,7 +19,7 @@ function IdenticonComponent () { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '', address } = props + const { className = '', address, useBlockie } = props var diameter = props.diameter || this.defaultDiameter return address diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 83161320e..ee496dc6f 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -36,6 +36,7 @@ function reduceMetamask (state, action) { editingTransactionId: null, }, coinOptions: {}, + useBlockie: false, }, state.metamask) switch (action.type) { @@ -314,6 +315,11 @@ function reduceMetamask (state, action) { coinOptions, }) + case actions.TOGGLE_USE_BLOCKIE: + return extend(metamaskState, { + useBlockie: !metamaskState.useBlockie, + }) + default: return metamaskState diff --git a/ui/app/settings.js b/ui/app/settings.js index 786a70e7e..793906bdb 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -8,6 +8,7 @@ const validUrl = require('valid-url') const { exportAsFile } = require('./util') const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') +import Switch from 'react-toggle-switch' const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -51,6 +52,26 @@ class Settings extends Component { ]) } + renderBlockieOptIn () { + const { metamask: { useBlockie }, toggleUseBlockie } = this.props + + return h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'Use Blockie Identicon'), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + + h(Switch, { + on: useBlockie, + onClick: event => toggleUseBlockie(), + }), + + ]), + ]), + ]) + } + renderCurrentConversion () { const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props @@ -214,6 +235,7 @@ class Settings extends Component { return ( h('div.settings__content', [ warning && h('div.settings__error', warning), + this.renderBlockieOptIn(), this.renderCurrentConversion(), // this.renderCurrentProvider(), this.renderNewRpcUrl(), @@ -335,6 +357,7 @@ class Settings extends Component { Settings.propTypes = { tab: PropTypes.string, metamask: PropTypes.object, + useBlockie: PropTypes.bool, setCurrentCurrency: PropTypes.func, setRpcTarget: PropTypes.func, displayWarning: PropTypes.func, @@ -347,6 +370,7 @@ const mapStateToProps = state => { return { metamask: state.metamask, warning: state.appState.warning, + useBlockie: state.useBlockie, } } @@ -357,6 +381,7 @@ const mapDispatchToProps = dispatch => { setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)), displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), + toggleUseBlockie: () => dispatch(actions.toggleUseBlockie()), } } -- cgit v1.2.3 From fc46a16a329df296cb565e3a0b04f268d2aeceb5 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Fri, 24 Nov 2017 10:35:17 -0700 Subject: toggle wired up to preferences property store --- ui/app/actions.js | 23 +++++++++++++++++------ ui/app/reducers/metamask.js | 8 ++++---- ui/app/settings.js | 19 +++++++++---------- 3 files changed, 30 insertions(+), 20 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 957e42223..2819742e5 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -235,8 +235,8 @@ var actions = { useEtherscanProvider, - TOGGLE_USE_BLOCKIE: 'TOGGLE_USE_BLOCKIE', - toggleUseBlockie, + SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', + setUseBlockie, } module.exports = actions @@ -1554,8 +1554,19 @@ function toggleAccountMenu () { } } -function toggleUseBlockie () { - return { - type: actions.TOGGLE_USE_BLOCKIE, +function setUseBlockie (val) { + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + log.debug(`background.setUseBlockie`) + background.setUseBlockie(val, (err) => { + dispatch(actions.hideLoadingIndication()) + if (err) { + return dispatch(actions.displayWarning(err.message)) + } + }) + dispatch({ + type: actions.SET_USE_BLOCKIE, + value: val + }) } -} +} \ No newline at end of file diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index ee496dc6f..1b747e188 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -315,10 +315,10 @@ function reduceMetamask (state, action) { coinOptions, }) - case actions.TOGGLE_USE_BLOCKIE: - return extend(metamaskState, { - useBlockie: !metamaskState.useBlockie, - }) + case actions.SET_USE_BLOCKIE: + return extend(metamaskState, { + useBlockie: action.value + }) default: return metamaskState diff --git a/ui/app/settings.js b/ui/app/settings.js index 793906bdb..949cbfb26 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -8,7 +8,7 @@ const validUrl = require('valid-url') const { exportAsFile } = require('./util') const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') -import Switch from 'react-toggle-switch' +const ToggleButton = require('react-toggle-button') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -53,7 +53,7 @@ class Settings extends Component { } renderBlockieOptIn () { - const { metamask: { useBlockie }, toggleUseBlockie } = this.props + const { metamask: { useBlockie }, setUseBlockie } = this.props return h('div.settings__content-row', [ h('div.settings__content-item', [ @@ -61,12 +61,12 @@ class Settings extends Component { ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - - h(Switch, { - on: useBlockie, - onClick: event => toggleUseBlockie(), + h(ToggleButton, { + value: useBlockie, + onToggle: (value) => setUseBlockie(!value), + activeLabel: '', + inactiveLabel: '', }), - ]), ]), ]) @@ -357,7 +357,7 @@ class Settings extends Component { Settings.propTypes = { tab: PropTypes.string, metamask: PropTypes.object, - useBlockie: PropTypes.bool, + setUseBlockie: PropTypes.func, setCurrentCurrency: PropTypes.func, setRpcTarget: PropTypes.func, displayWarning: PropTypes.func, @@ -370,7 +370,6 @@ const mapStateToProps = state => { return { metamask: state.metamask, warning: state.appState.warning, - useBlockie: state.useBlockie, } } @@ -381,7 +380,7 @@ const mapDispatchToProps = dispatch => { setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)), displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), - toggleUseBlockie: () => dispatch(actions.toggleUseBlockie()), + setUseBlockie: value => dispatch(actions.setUseBlockie(value)), } } -- cgit v1.2.3 From dc7bd3c62897edfb642f215a71fbf7dd93faa350 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Fri, 24 Nov 2017 13:48:56 -0700 Subject: incremental commit of working blockie component --- ui/app/components/blockies/blockies-component.js | 30 +++++++++++++++++ ui/app/components/identicon.js | 41 +++++++++++++++--------- 2 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 ui/app/components/blockies/blockies-component.js (limited to 'ui/app') diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js new file mode 100644 index 000000000..d6defda16 --- /dev/null +++ b/ui/app/components/blockies/blockies-component.js @@ -0,0 +1,30 @@ +const Component = require('react').Component +const createElement = require('react').createElement +const blockies = require("ethereum-blockies"); + +class BlockiesIdenticon extends Component { + constructor(props) { + super(props); + } + getOpts () { + return { + seed: this.props.seed || "foo", + color: this.props.color || "#dfe", + bgcolor: this.props.bgcolor || "#a71", + size: this.props.size || 15, + scale: this.props.scale || 3, + spotcolor: this.props.spotcolor || "#000" + }; + } + componentDidMount() { + this.draw(); + } + draw() { + blockies.render(this.getOpts(), this.canvas); + } + render() { + return createElement("canvas", {ref: canvas => this.canvas = canvas}); + } +} + +module.exports = BlockiesIdenticon; diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 63f3087a4..9e9b82aae 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -1,14 +1,15 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const connect = require('react-redux').connect const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') -const blockies = require('blockies') +const BlockiesIdenticon = require('./blockies/blockies-component') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) -module.exports = IdenticonComponent +module.exports = connect(mapStateToProps)(IdenticonComponent) inherits(IdenticonComponent, Component) function IdenticonComponent () { @@ -17,6 +18,12 @@ function IdenticonComponent () { this.defaultDiameter = 46 } +function mapStateToProps (state) { + return { + useBlockie: state.metamask.useBlockie + } +} + IdenticonComponent.prototype.render = function () { var props = this.props const { className = '', address, useBlockie } = props @@ -24,19 +31,23 @@ IdenticonComponent.prototype.render = function () { return address ? ( - h('div', { - className: `${className} identicon`, - key: 'identicon-' + address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) + useBlockie + ? h(BlockiesIdenticon, { + seed: address, + }) + : h('div', { + className: `${className} identicon`, + key: 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) ) : ( h('img.balance-icon', { -- cgit v1.2.3 From 41be4714c248870447c7593355f23023d63f24f6 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Fri, 24 Nov 2017 14:18:46 -0700 Subject: tweaking styling --- ui/app/components/blockies/blockies-component.js | 17 +++++++++++------ ui/app/components/identicon.js | 19 ++++++++++++++++--- 2 files changed, 27 insertions(+), 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js index d6defda16..b3a97ced4 100644 --- a/ui/app/components/blockies/blockies-component.js +++ b/ui/app/components/blockies/blockies-component.js @@ -3,25 +3,30 @@ const createElement = require('react').createElement const blockies = require("ethereum-blockies"); class BlockiesIdenticon extends Component { + constructor(props) { super(props); } + getOpts () { return { - seed: this.props.seed || "foo", - color: this.props.color || "#dfe", - bgcolor: this.props.bgcolor || "#a71", - size: this.props.size || 15, - scale: this.props.scale || 3, - spotcolor: this.props.spotcolor || "#000" + seed: this.props.seed, + color: this.props.color, + bgcolor: this.props.bgcolor, + size: this.props.size, + scale: this.props.scale, + spotcolor: this.props.spotcolor, }; } + componentDidMount() { this.draw(); } + draw() { blockies.render(this.getOpts(), this.canvas); } + render() { return createElement("canvas", {ref: canvas => this.canvas = canvas}); } diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 9e9b82aae..c1dc0fb5c 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -32,9 +32,22 @@ IdenticonComponent.prototype.render = function () { return address ? ( useBlockie - ? h(BlockiesIdenticon, { - seed: address, - }) + ? h('div', { + className: `${className} identicon`, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }, [ + h(BlockiesIdenticon, { + seed: address + }) + ]) : h('div', { className: `${className} identicon`, key: 'identicon-' + address, -- cgit v1.2.3 From 1b89ceb63aa7d96912eb32c8766ef566479dde41 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 14:33:42 -0700 Subject: swapped out ethereum-blockies lib for MEW blockies library, tightened up identicon.js code --- ui/app/components/blockies/blockies-component.js | 35 --------- ui/app/components/identicon.js | 99 ++++++++++++------------ 2 files changed, 49 insertions(+), 85 deletions(-) delete mode 100644 ui/app/components/blockies/blockies-component.js (limited to 'ui/app') diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js deleted file mode 100644 index b3a97ced4..000000000 --- a/ui/app/components/blockies/blockies-component.js +++ /dev/null @@ -1,35 +0,0 @@ -const Component = require('react').Component -const createElement = require('react').createElement -const blockies = require("ethereum-blockies"); - -class BlockiesIdenticon extends Component { - - constructor(props) { - super(props); - } - - getOpts () { - return { - seed: this.props.seed, - color: this.props.color, - bgcolor: this.props.bgcolor, - size: this.props.size, - scale: this.props.scale, - spotcolor: this.props.spotcolor, - }; - } - - componentDidMount() { - this.draw(); - } - - draw() { - blockies.render(this.getOpts(), this.canvas); - } - - render() { - return createElement("canvas", {ref: canvas => this.canvas = canvas}); - } -} - -module.exports = BlockiesIdenticon; diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index c1dc0fb5c..3e2349dbe 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -5,9 +5,9 @@ const connect = require('react-redux').connect const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') -const BlockiesIdenticon = require('./blockies/blockies-component') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) +const { toDataUrl } = require('../../lib/blockies') module.exports = connect(mapStateToProps)(IdenticonComponent) @@ -31,36 +31,19 @@ IdenticonComponent.prototype.render = function () { return address ? ( - useBlockie - ? h('div', { - className: `${className} identicon`, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }, [ - h(BlockiesIdenticon, { - seed: address - }) - ]) - : h('div', { - className: `${className} identicon`, - key: 'identicon-' + address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) + h('div', { + className: `${className} identicon`, + key: useBlockie ? 'blockie' : 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) ) : ( h('img.balance-icon', { @@ -76,38 +59,54 @@ IdenticonComponent.prototype.render = function () { IdenticonComponent.prototype.componentDidMount = function () { var props = this.props - const { address } = props + const { address, useBlockie } = props if (!address) return - // eslint-disable-next-line react/no-find-dom-node - var container = findDOMNode(this) - - var diameter = props.diameter || this.defaultDiameter if (!isNode) { - var img = iconFactory.iconForAddress(address, diameter) - container.appendChild(img) + // eslint-disable-next-line react/no-find-dom-node + var container = findDOMNode(this) + + if (useBlockie) { + _generateBlockie(container, address) + } else { + const diameter = props.diameter || this.defaultDiameter + _generateJazzicon(container, address, diameter) + } } } IdenticonComponent.prototype.componentDidUpdate = function () { var props = this.props - const { address } = props + const { address, useBlockie } = props if (!address) return - // eslint-disable-next-line react/no-find-dom-node - var container = findDOMNode(this) - - var children = container.children - for (var i = 0; i < children.length; i++) { - container.removeChild(children[i]) - } - - var diameter = props.diameter || this.defaultDiameter if (!isNode) { - var img = iconFactory.iconForAddress(address, diameter) - container.appendChild(img) + // eslint-disable-next-line react/no-find-dom-node + var container = findDOMNode(this) + + var children = container.children + for (var i = 0; i < children.length; i++) { + container.removeChild(children[i]) + } + + if (useBlockie) { + _generateBlockie(container, address) + } else { + const diameter = props.diameter || this.defaultDiameter + _generateJazzicon(container, address, diameter) + } } } +function _generateBlockie(container, address) { + const img = new Image() + img.src = toDataUrl(address) + container.appendChild(img) +} + +function _generateJazzicon(container, address, diameter) { + const img = iconFactory.iconForAddress(address, diameter) + container.appendChild(img) +} -- cgit v1.2.3 From bd48d858f4226da889760e259377637164f3099c Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 15:11:29 -0700 Subject: fixing blockies display issues --- ui/app/components/identicon.js | 12 ++++++++---- ui/app/settings.js | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 3e2349dbe..7a3bd5394 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -67,10 +67,11 @@ IdenticonComponent.prototype.componentDidMount = function () { // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) + const diameter = props.diameter || this.defaultDiameter + if (useBlockie) { _generateBlockie(container, address) } else { - const diameter = props.diameter || this.defaultDiameter _generateJazzicon(container, address, diameter) } } @@ -91,18 +92,21 @@ IdenticonComponent.prototype.componentDidUpdate = function () { container.removeChild(children[i]) } + const diameter = props.diameter || this.defaultDiameter + if (useBlockie) { - _generateBlockie(container, address) + _generateBlockie(container, address, diameter) } else { - const diameter = props.diameter || this.defaultDiameter _generateJazzicon(container, address, diameter) } } } -function _generateBlockie(container, address) { +function _generateBlockie(container, address, diameter) { const img = new Image() img.src = toDataUrl(address) + const dia = !diameter || diameter < 50 ? 50 : diameter + img.height, img.width = dia * 1.25 container.appendChild(img) } diff --git a/ui/app/settings.js b/ui/app/settings.js index 949cbfb26..caa36d2b8 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -57,7 +57,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'Use Blockie Identicon'), + h('span', 'Use Blockies Identicon'), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ -- cgit v1.2.3 From 75ef848196646e060703764e97656ab3abd8c023 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 15:47:34 -0700 Subject: making eslint happy --- ui/app/actions.js | 4 ++-- ui/app/components/identicon.js | 9 +++++---- ui/app/reducers/metamask.js | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 2819742e5..e79f4373e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1566,7 +1566,7 @@ function setUseBlockie (val) { }) dispatch({ type: actions.SET_USE_BLOCKIE, - value: val + value: val, }) } -} \ No newline at end of file +} diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 7a3bd5394..5b3786992 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -20,7 +20,7 @@ function IdenticonComponent () { function mapStateToProps (state) { return { - useBlockie: state.metamask.useBlockie + useBlockie: state.metamask.useBlockie, } } @@ -102,15 +102,16 @@ IdenticonComponent.prototype.componentDidUpdate = function () { } } -function _generateBlockie(container, address, diameter) { +function _generateBlockie (container, address, diameter) { const img = new Image() img.src = toDataUrl(address) const dia = !diameter || diameter < 50 ? 50 : diameter - img.height, img.width = dia * 1.25 + img.height = dia * 1.25 + img.width = dia * 1.25 container.appendChild(img) } -function _generateJazzicon(container, address, diameter) { +function _generateJazzicon (container, address, diameter) { const img = iconFactory.iconForAddress(address, diameter) container.appendChild(img) } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 1b747e188..fb53bbaef 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -317,7 +317,7 @@ function reduceMetamask (state, action) { case actions.SET_USE_BLOCKIE: return extend(metamaskState, { - useBlockie: action.value + useBlockie: action.value, }) default: -- cgit v1.2.3 From a34362b7765f48d24375c9953fa7c49cf3306491 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Mon, 27 Nov 2017 08:11:48 -0700 Subject: Fixes changes requested in pullrequestreview-79088534 --- ui/app/components/identicon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 5b3786992..ddd7e65f3 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -33,7 +33,7 @@ IdenticonComponent.prototype.render = function () { ? ( h('div', { className: `${className} identicon`, - key: useBlockie ? 'blockie' : 'identicon-' + address, + key: 'identicon-' + address, style: { display: 'flex', alignItems: 'center', @@ -70,7 +70,7 @@ IdenticonComponent.prototype.componentDidMount = function () { const diameter = props.diameter || this.defaultDiameter if (useBlockie) { - _generateBlockie(container, address) + _generateBlockie(container, address, diameter) } else { _generateJazzicon(container, address, diameter) } -- cgit v1.2.3 From f131468353aa518b8fc178cd591bfc7ab5bdc32c Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 28 Nov 2017 13:37:45 -0600 Subject: Remove useBlockie in props for render Removed unused useBlock for Lint validation. --- ui/app/components/identicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index ddd7e65f3..b803b7ceb 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -26,7 +26,7 @@ function mapStateToProps (state) { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '', address, useBlockie } = props + const { className = '', address } = props var diameter = props.diameter || this.defaultDiameter return address -- cgit v1.2.3 From 7dba114feb428f7f2f78fee5611377b04bff5be6 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 1 Dec 2017 14:19:53 -0800 Subject: Update font weights to 300, remove animation from network dropdown, fix network dropdown not closing from certain click-areas --- ui/app/components/dropdowns/network-dropdown.js | 27 +++++++++++++++---------- ui/app/components/network.js | 14 ++++++------- ui/app/css/itcss/components/account-menu.scss | 6 +++--- ui/app/css/itcss/components/menu.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 2 +- 5 files changed, 28 insertions(+), 23 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 0908faf01..dfaa6b22c 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -6,6 +6,16 @@ const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkDropdownIcon = require('./components/network-dropdown-icon') +const R = require('ramda') + +// classes from nodes of the toggle element. +const notToggleElementClassnames = [ + 'menu-icon', + 'network-name', + 'network-indicator', + 'network-caret', + 'network-component', +] function mapStateToProps (state) { return { @@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) { showConfigPage: () => { dispatch(actions.showConfigPage()) }, - showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, - hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), } } @@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () { } return h(Dropdown, { - useCssTransition: true, isOpen, onClickOutside: (event) => { const { classList } = event.target - const isNotToggleElement = [ - classList.contains('menu-icon'), - classList.contains('network-name'), - classList.contains('network-indicator'), - ].filter(bool => bool).length === 0 - // classes from three constituent nodes of the toggle element - - if (isNotToggleElement) { + const isInClassList = className => classList.contains(className) + const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames) + + if (notToggleElementIndex === -1) { this.props.hideNetworkDropdown() } }, diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 915818009..5a8d0763d 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -39,7 +39,7 @@ Network.prototype.render = function () { }, src: 'images/loading.svg', }), - h('i.fa.fa-caret-down'), + h('i.fa.fa-caret-down.network-caret'), ]) } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' @@ -63,7 +63,7 @@ Network.prototype.render = function () { return ( h('div.network-component.pointer', { - className: classnames('network-component pointer', { + className: classnames({ 'network-component--disabled': this.props.disabled, 'ethereum-network': providerName === 'mainnet', 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3, @@ -90,7 +90,7 @@ Network.prototype.render = function () { color: '#039396', }}, 'Main Network'), - h('i.fa.fa-caret-down.fa-lg'), + h('i.fa.fa-caret-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -103,7 +103,7 @@ Network.prototype.render = function () { color: '#ff6666', }}, 'Ropsten Test Net'), - h('i.fa.fa-caret-down.fa-lg'), + h('i.fa.fa-caret-down.fa-lg.network-caret'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -116,7 +116,7 @@ Network.prototype.render = function () { color: '#690496', }}, 'Kovan Test Net'), - h('i.fa.fa-caret-down.fa-lg'), + h('i.fa.fa-caret-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -129,7 +129,7 @@ Network.prototype.render = function () { color: '#e7a218', }}, 'Rinkeby Test Net'), - h('i.fa.fa-caret-down.fa-lg'), + h('i.fa.fa-caret-down.fa-lg.network-caret'), ]) default: return h('.network-indicator', [ @@ -145,7 +145,7 @@ Network.prototype.render = function () { color: '#AEAEAE', }}, 'Private Network'), - h('i.fa.fa-caret-down.fa-lg'), + h('i.fa.fa-caret-down.fa-lg.network-caret'), ]) } })(), diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index e40e5a8c0..e16d2e024 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -40,7 +40,7 @@ font-size: 12px; line-height: 23px; padding: 0 24px; - font-weight: 200; + font-weight: 300; } img { @@ -113,7 +113,7 @@ &__name { color: $white; font-size: 18px; - font-weight: 200; + font-weight: 300; line-height: 16px; } @@ -126,7 +126,7 @@ &__action { font-size: 16px; line-height: 18px; - font-weight: 200; + font-weight: 300; cursor: pointer; } } diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 17e24de98..7953834ee 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -12,7 +12,7 @@ align-items: center; position: relative; z-index: 200; - font-weight: 200; + font-weight: 300; @media screen and (max-width: 575px) { padding: 14px; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 244de2ba0..43a59c4da 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -248,7 +248,7 @@ $wallet-view-bg: $wild-sand; // wallet view .account-name { font-size: 24px; - font-weight: 200; + font-weight: 300; line-height: 20px; color: $scorpion; margin-top: 8px; -- cgit v1.2.3 From a171b9b847bf0a889d1a29f51ddd475da8061874 Mon Sep 17 00:00:00 2001 From: Anatoli Babenia Date: Tue, 5 Dec 2017 00:46:19 +0300 Subject: Download State Logs with .json extension That doesn't fix #2095, but at least makes downloaded files syntax-highlighted when opened in editors --- ui/app/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/config.js b/ui/app/config.js index c14fa1d28..9cb2a0aad 100644 --- a/ui/app/config.js +++ b/ui/app/config.js @@ -117,7 +117,7 @@ ConfigScreen.prototype.render = function () { if (err) { state.dispatch(actions.displayWarning('Error in retrieving state logs.')) } else { - exportAsFile('MetaMask State Logs', result) + exportAsFile('MetaMask State Logs.json', result) } }) }, -- cgit v1.2.3 From 7f795240706c013dc4a9ece0e9c9e33897c7fc71 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:55 -0330 Subject: Add UI selection --- ui/app/actions.js | 29 +++++++++++++++++ ui/app/app.js | 60 ++++++++++++++++++++--------------- ui/app/css/index.scss | 1 + ui/app/css/itcss/components/menu.scss | 2 +- ui/app/reducers/metamask.js | 6 ++++ ui/app/root.js | 4 +-- ui/app/select-app.js | 21 ++++++++++++ 7 files changed, 94 insertions(+), 29 deletions(-) create mode 100644 ui/app/select-app.js (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index e79f4373e..745b8779e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -237,6 +237,11 @@ var actions = { SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', setUseBlockie, + + // Feature Flags + setFeatureFlag, + updateFeatureFlags, + UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS', } module.exports = actions @@ -1506,6 +1511,30 @@ function updateTokenExchangeRate (token = '') { } } +function setFeatureFlag (feature, activated) { + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + return new Promise((resolve, reject) => { + background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => { + dispatch(actions.hideLoadingIndication()) + if (err) { + dispatch(actions.displayWarning(err.message)) + reject(err) + } + dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) + resolve(updatedFeatureFlags) + }) + }) + } +} + +function updateFeatureFlags (updatedFeatureFlags) { + return { + type: actions.UPDATE_FEATURE_FLAGS, + value: updatedFeatureFlags, + } +} + // Call Background Then Update // // A function generator for a common pattern wherein: diff --git a/ui/app/app.js b/ui/app/app.js index e90c3e98e..7e1eb200f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -116,40 +116,41 @@ App.prototype.render = function () { log.debug('Main ui render function') return ( + h('.new-ui', [ + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ - - // global modal - h(Modal, {}, []), + // global modal + h(Modal, {}, []), - // app bar - this.renderAppBar(), + // app bar + this.renderAppBar(), - // sidebar - this.renderSidebar(), + // sidebar + this.renderSidebar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - h(AccountMenu), + h(AccountMenu), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - // content - this.renderPrimary(), + // content + this.renderPrimary(), + ]) ]) ) } @@ -268,6 +269,13 @@ App.prototype.renderAppBar = function () { }, }, 'MetaMask'), + h('span', { + style: {}, + onClick: () => { + props.dispatch(actions.setFeatureFlag('betaUI', false)) + }, + }, 'Leave Beta') + ]), h('div.header__right-actions', [ diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 01899ccad..445c819ff 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -4,6 +4,7 @@ http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ */ + @import './itcss/settings/index.scss'; @import './itcss/tools/index.scss'; @import './itcss/generic/index.scss'; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 17e24de98..77c49bbcf 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -11,7 +11,7 @@ flex-flow: row nowrap; align-items: center; position: relative; - z-index: 200; + z-index: 201; font-weight: 200; @media screen and (max-width: 575px) { diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index fb53bbaef..6d6068d05 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -37,6 +37,7 @@ function reduceMetamask (state, action) { }, coinOptions: {}, useBlockie: false, + featureFlags: {}, }, state.metamask) switch (action.type) { @@ -320,6 +321,11 @@ function reduceMetamask (state, action) { useBlockie: action.value, }) + case actions.UPDATE_FEATURE_FLAGS: + return extend(metamaskState, { + featureFlags: action.value, + }) + default: return metamaskState diff --git a/ui/app/root.js b/ui/app/root.js index 9e7314b20..21d6d1829 100644 --- a/ui/app/root.js +++ b/ui/app/root.js @@ -2,7 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const Provider = require('react-redux').Provider const h = require('react-hyperscript') -const App = require('./app') +const SelectedApp = require('./select-app') module.exports = Root @@ -15,7 +15,7 @@ Root.prototype.render = function () { h(Provider, { store: this.props.store, }, [ - h(App), + h(SelectedApp), ]) ) diff --git a/ui/app/select-app.js b/ui/app/select-app.js new file mode 100644 index 000000000..3cba44052 --- /dev/null +++ b/ui/app/select-app.js @@ -0,0 +1,21 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const App = require('./app') +const OldApp = require('../../old-ui/app/app') + +function mapStateToProps (state) { + return { betaUI: state.metamask.featureFlags.betaUI } +} + +module.exports = connect(mapStateToProps)(SelectedApp) + +inherits(SelectedApp, Component) +function SelectedApp () { Component.call(this) } + +SelectedApp.prototype.render = function () { + const { betaUI } = this.props + const Selected = betaUI ? App : OldApp + return h(Selected) +} -- cgit v1.2.3 From ce14ee2ffcc784849ab42797d5c999b76ed57a78 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 15 Nov 2017 14:09:03 -0330 Subject: New-ui actions accomodates old-ui. --- ui/app/actions.js | 17 ++++++++++------- ui/app/reducers/metamask.js | 2 +- 2 files changed, 11 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 745b8779e..bdacf3092 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -993,9 +993,10 @@ function showConfigPage (transitionForward = true) { } } -function showAddTokenPage () { +function showAddTokenPage (transitionForward = true) { return { type: actions.SHOW_ADD_TOKEN_PAGE, + value: transitionForward, } } @@ -1277,7 +1278,8 @@ function exportAccount (password, address) { return reject(err) } - dispatch(self.exportAccountComplete()) + // dispatch(self.exportAccountComplete()) + dispatch(self.showPrivateKey(result)) return resolve(result) }) @@ -1444,7 +1446,7 @@ function reshowQrCode (data, coin) { dispatch(actions.showLoadingIndication()) shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => { if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error)) - + var message = [ `Deposit your ${coin} to the address bellow:`, `Deposit Limit: ${mktResponse.limit}`, @@ -1452,10 +1454,11 @@ function reshowQrCode (data, coin) { ] dispatch(actions.hideLoadingIndication()) - return dispatch(actions.showModal({ - name: 'SHAPESHIFT_DEPOSIT_TX', - Qr: { data, message }, - })) + return dispatch(actions.showQrView(data, message)) + // return dispatch(actions.showModal({ + // name: 'SHAPESHIFT_DEPOSIT_TX', + // Qr: { data, message }, + // })) }) } } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 6d6068d05..c496625c7 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -311,7 +311,7 @@ function reduceMetamask (state, action) { return extend(metamaskState, { tokenExchangeRates: { ...metamaskState.tokenExchangeRates, - [marketinfo.pair]: ssMarketInfo, + [ssMarketInfo.pair]: ssMarketInfo, }, coinOptions, }) -- cgit v1.2.3 From 84321b2d9b08a2b0f3e773cfb6f6d11dff9f7d4c Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 16 Nov 2017 15:58:59 -0330 Subject: Lint fix --- ui/app/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7e1eb200f..7cee07ea5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -150,7 +150,7 @@ App.prototype.render = function () { // content this.renderPrimary(), - ]) + ]), ]) ) } @@ -274,7 +274,7 @@ App.prototype.renderAppBar = function () { onClick: () => { props.dispatch(actions.setFeatureFlag('betaUI', false)) }, - }, 'Leave Beta') + }, 'Leave Beta'), ]), -- cgit v1.2.3 From 730d7f84ca8c202674677a6a6a94290e57ad9e3a Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 15:30:45 -0330 Subject: Update newUI UI for switching back to old UI. --- ui/app/app.js | 7 ------- ui/app/settings.js | 25 ++++++++++++++++++++++++- 2 files changed, 24 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7cee07ea5..88a5c8458 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -269,13 +269,6 @@ App.prototype.renderAppBar = function () { }, }, 'MetaMask'), - h('span', { - style: {}, - onClick: () => { - props.dispatch(actions.setFeatureFlag('betaUI', false)) - }, - }, 'Leave Beta'), - ]), h('div.header__right-actions', [ diff --git a/ui/app/settings.js b/ui/app/settings.js index caa36d2b8..ba59f1c76 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -229,6 +229,26 @@ class Settings extends Component { ) } + renderOldUI () { + const { setFeatureFlagToBeta } = this.props + + return ( + h('div.settings__content-row', [ + h('div.settings__content-item', 'Use old UI'), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('button.settings__clear-button.settings__clear-button--red', { + onClick (event) { + event.preventDefault() + setFeatureFlagToBeta() + }, + }, 'Use old UI'), + ]), + ]), + ]) + ) + } + renderSettingsContent () { const { warning } = this.props @@ -241,10 +261,11 @@ class Settings extends Component { this.renderNewRpcUrl(), this.renderStateLogs(), this.renderSeedWords(), + this.renderOldUI(), ]) ) } - + renderLogo () { return ( h('div.settings__info-logo-wrapper', [ @@ -362,6 +383,7 @@ Settings.propTypes = { setRpcTarget: PropTypes.func, displayWarning: PropTypes.func, revealSeedConfirmation: PropTypes.func, + setFeatureFlagToBeta: PropTypes.func, warning: PropTypes.string, goHome: PropTypes.func, } @@ -381,6 +403,7 @@ const mapDispatchToProps = dispatch => { displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), setUseBlockie: value => dispatch(actions.setUseBlockie(value)), + setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)), } } -- cgit v1.2.3 From 9db00fa507c04180f6425cc3b1e3187afa193ab8 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 22:30:11 -0330 Subject: Show user notifications after switch between UIs --- ui/app/actions.js | 4 ++ ui/app/components/modals/modal.js | 37 +++++++++++++++++++ ui/app/components/modals/notification-modal.js | 51 ++++++++++++++++++++++++++ ui/app/css/itcss/components/modal.scss | 36 ++++++++++++++++++ ui/app/css/itcss/components/settings.scss | 5 +++ ui/app/settings.js | 4 +- 6 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 ui/app/components/modals/notification-modal.js (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index bdacf3092..bba2a014f 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1515,6 +1515,9 @@ function updateTokenExchangeRate (token = '') { } function setFeatureFlag (feature, activated) { + const notificationType = activated + ? 'BETA_UI_NOTIFICATION_MODAL' + : 'OLD_UI_NOTIFICATION_MODAL' return (dispatch) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { @@ -1525,6 +1528,7 @@ function setFeatureFlag (feature, activated) { reject(err) } dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) + dispatch(actions.showModal({ name: notificationType })) resolve(updatedFeatureFlags) }) }) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index f2909f3c3..2ff6accaa 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal') const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') +const NotifcationModal = require('./notification-modal') const accountModalStyle = { mobileModalStyle: { @@ -133,6 +134,42 @@ const MODALS = { }, }, + BETA_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Welcome to the New UI (Beta)', + message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, + and let us know if you have any issues.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + + OLD_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Old UI', + message: `You have returned to the old UI. You can switch back to the New UI through the option in the top + right dropdown menu.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js new file mode 100644 index 000000000..239144b0c --- /dev/null +++ b/ui/app/components/modals/notification-modal.js @@ -0,0 +1,51 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../actions') + +class NotificationModal extends Component { + render () { + const { + header, + message, + } = this.props + + return h('div', [ + h('div.notification-modal-wrapper', { + }, [ + + h('div.notification-modal-header', {}, [ + header, + ]), + + h('div.notification-modal-message-wrapper', {}, [ + h('div.notification-modal-message', {}, [ + message, + ]), + ]), + + h('div.modal-close-x', { + onClick: this.props.hideModal, + }), + + ]), + ]) + } +} + +NotificationModal.propTypes = { + hideModal: PropTypes.func, + header: PropTypes.string, + message: PropTypes.string, +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +module.exports = connect(null, mapDispatchToProps)(NotificationModal) diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index b69bd5c7e..9b64564d6 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -563,3 +563,39 @@ } } } + +//Notification Modal + +.notification-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; + font-family: Roboto; +} + +.notification-modal-header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; + height: 79px; +} + +.notification-modal-message { + padding: 20px; +} + +.notification-modal-message { + width: 100%; + display: flex; + justify-content: center; + font-size: 17px; + color: $nile-blue; +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index 2f29d8017..d60ebd934 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -145,6 +145,11 @@ color: $monzo; } +.settings__clear-button--orange { + border: 1px solid rgba(247, 134, 28, 1); + color: rgba(247, 134, 28, 1); +} + .settings__info-logo-wrapper { height: 80px; margin-bottom: 20px; diff --git a/ui/app/settings.js b/ui/app/settings.js index ba59f1c76..ca7535d26 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -228,7 +228,7 @@ class Settings extends Component { ]) ) } - + renderOldUI () { const { setFeatureFlagToBeta } = this.props @@ -237,7 +237,7 @@ class Settings extends Component { h('div.settings__content-item', 'Use old UI'), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--red', { + h('button.settings__clear-button.settings__clear-button--orange', { onClick (event) { event.preventDefault() setFeatureFlagToBeta() -- cgit v1.2.3 From bd5ce9461e5119c13ab8be29db5cdfc57228bac8 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Dec 2017 20:49:45 -0330 Subject: User is automatically added to new UI if they meet conditions at time of login. --- ui/app/select-app.js | 32 +++++++++++++++++++++++++++++--- ui/app/selectors.js | 18 ++++++++++++++++++ 2 files changed, 47 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 3cba44052..ffa31b767 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -4,18 +4,44 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const App = require('./app') const OldApp = require('../../old-ui/app/app') +const { autoAddToBetaUI } = require('./selectors') +const { setFeatureFlag } = require('./actions') function mapStateToProps (state) { - return { betaUI: state.metamask.featureFlags.betaUI } + return { + betaUI: state.metamask.featureFlags.betaUI, + autoAdd: autoAddToBetaUI(state), + isUnlocked: state.metamask.isUnlocked, + } } -module.exports = connect(mapStateToProps)(SelectedApp) +function mapDispatchToProps (dispatch) { + return { + setFeatureFlagToBeta: () => dispatch(setFeatureFlag('betaUI', true)), + } +} +module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp) inherits(SelectedApp, Component) -function SelectedApp () { Component.call(this) } +function SelectedApp () { + this.state = { + autoAdd: false, + } + Component.call(this) +} + +SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { + const { isUnlocked, setFeatureFlagToBeta } = this.props + + if (!isUnlocked && nextProps.isUnlocked && nextProps.autoAdd) { + this.setState({ autoAdd: nextProps.autoAdd }) + setFeatureFlagToBeta() + } +} SelectedApp.prototype.render = function () { const { betaUI } = this.props + const { autoAdd } = this.state const Selected = betaUI ? App : OldApp return h(Selected) } diff --git a/ui/app/selectors.js b/ui/app/selectors.js index a5f9a75d8..8aea7864a 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -24,6 +24,7 @@ const selectors = { getSendAmount, getSelectedTokenToFiatRate, getSelectedTokenContract, + autoAddToBetaUI, } module.exports = selectors @@ -158,3 +159,20 @@ function getSelectedTokenContract (state) { ? global.eth.contract(abi).at(selectedToken.address) : null } + +function autoAddToBetaUI (state) { + const autoAddTransactionThreshold = 12 + const autoAddAccountsThreshold = 2 + const autoAddTokensThreshold = 1 + + const numberOfTransactions = state.metamask.selectedAddressTxList.length + const numberOfAccounts = Object.keys(state.metamask.accounts).length + const numberOfTokensAdded = state.metamask.tokens.length + + const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) && + (numberOfAccounts > autoAddAccountsThreshold) && + (numberOfTokensAdded > autoAddTokensThreshold) + const userIsNotInBeta = !state.metamask.featureFlags.betaUI + + return userIsNotInBeta && userPassesThreshold +} \ No newline at end of file -- cgit v1.2.3 From 6ff580584a74c6d85f54ce7cfc500db822904957 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 22:20:11 -0500 Subject: Add retry background method and action --- ui/app/actions.js | 6 ++++++ ui/app/components/transaction-list-item.js | 10 +++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 04fd35b20..2ab68b62d 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -168,6 +168,7 @@ var actions = { callBackgroundThenUpdate, forceUpdateMetamaskState, + retryTransaction, } module.exports = actions @@ -759,6 +760,11 @@ function markAccountsFound () { return callBackgroundThenUpdate(background.markAccountsFound) } +function retryTransaction () { + log.debug(`background.retryTransaction`) + return callBackgroundThenUpdate(background.retryTransaction) +} + // // config // diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 891d5e227..ddef4a4ae 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -9,6 +9,7 @@ const CopyButton = require('./copyButton') const vreme = new (require('vreme'))() const Tooltip = require('./tooltip') const numberToBN = require('number-to-bn') +const actions = require('../actions') const TransactionIcon = require('./transaction-list-item-icon') const ShiftListItem = require('./shift-list-item') @@ -21,6 +22,7 @@ function TransactionListItem () { TransactionListItem.prototype.render = function () { const { transaction, network, conversionRate, currentCurrency } = this.props + const { status } = transaction if (transaction.key === 'shapeshift') { if (network === '1') return h(ShiftListItem, transaction) } @@ -32,7 +34,7 @@ TransactionListItem.prototype.render = function () { var isMsg = ('msgParams' in transaction) var isTx = ('txParams' in transaction) - var isPending = transaction.status === 'unapproved' + var isPending = status === 'unapproved' let txParams if (isTx) { txParams = transaction.txParams @@ -97,10 +99,16 @@ TransactionListItem.prototype.render = function () { showFiat: false, style: {fontSize: '15px'}, }) : h('.flex-column'), + ]) ) } +TransactionListItem.prototype.resubmit = function () { + const { transaction } = this.props + this.props.dispatch(actions.resubmitTx(transaction.id)) +} + function domainField (txParams) { return h('div', { style: { -- cgit v1.2.3 From 500fbe450a10e1a3c756707e44225b196601372e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 22:22:40 -0500 Subject: Add button to retry transaction --- ui/app/components/transaction-list-item.js | 103 +++++++++++++++++++---------- 1 file changed, 69 insertions(+), 34 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index ddef4a4ae..9c512a89d 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -46,7 +46,7 @@ TransactionListItem.prototype.render = function () { const isClickable = ('hash' in transaction && isLinkable) || isPending return ( - h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { + h('.transaction-list-item.flex-column', { onClick: (event) => { if (isPending) { this.props.showTx(transaction.id) @@ -58,48 +58,83 @@ TransactionListItem.prototype.render = function () { }, style: { padding: '20px 0', + alignItems: 'center', }, }, [ + h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { + style: { + width: '100%', + }, + }, [ + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + ]), - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + h(Tooltip, { + title: 'Transaction Number', + position: 'right', + }, [ + h('span', { + style: { + display: 'flex', + cursor: 'normal', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '10px', + }, + }, nonce), + ]), + + h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ + domainField(txParams), + h('div', date), + recipientField(txParams, transaction, isTx, isMsg), + ]), + + // Places a copy button if tx is successful, else places a placeholder empty div. + transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), + + isTx ? h(EthBalance, { + value: txParams.value, + conversionRate, + currentCurrency, + width: '55px', + shorten: true, + showFiat: false, + style: {fontSize: '15px'}, + }) : h('.flex-column'), ]), - h(Tooltip, { - title: 'Transaction Number', - position: 'right', + transaction.status === 'submitted' && h('.transition-list-item__retry', { + onClick: event => { + event.stopPropagation() + this.resubmit() + }, + style: { + height: '30px', + borderRadius: '30px', + color: '#F9881B', + padding: '0 25px', + backgroundColor: '#FFE3C9', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + fontSize: '9px', + cursor: 'pointer', + }, }, [ - h('span', { + h('div', { style: { - display: 'flex', - cursor: 'normal', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - padding: '10px', + paddingRight: '2px', }, - }, nonce), - ]), - - h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ - domainField(txParams), - h('div', date), - recipientField(txParams, transaction, isTx, isMsg), + }, 'Taking too long?'), + h('div', { + style: { + textDecoration: 'underline', + }, + }, 'Retry with a higher gas price here'), ]), - - // Places a copy button if tx is successful, else places a placeholder empty div. - transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), - - isTx ? h(EthBalance, { - value: txParams.value, - conversionRate, - currentCurrency, - width: '55px', - shorten: true, - showFiat: false, - style: {fontSize: '15px'}, - }) : h('.flex-column'), - ]) ) } -- cgit v1.2.3 From 02736d2d361a415f145404a96f553c73e3707eb5 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 22:48:26 -0500 Subject: Connect to redux for retryTransaction --- ui/app/components/transaction-list-item.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 9c512a89d..56e90e26c 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const connect = require('react-redux').connect const EthBalance = require('./eth-balance') const addressSummary = require('../util').addressSummary @@ -13,7 +14,14 @@ const actions = require('../actions') const TransactionIcon = require('./transaction-list-item-icon') const ShiftListItem = require('./shift-list-item') -module.exports = TransactionListItem + +const mapDispatchToProps = dispatch => { + return { + retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), + } +} + +module.exports = connect(null, mapDispatchToProps)(TransactionListItem) inherits(TransactionListItem, Component) function TransactionListItem () { @@ -141,7 +149,7 @@ TransactionListItem.prototype.render = function () { TransactionListItem.prototype.resubmit = function () { const { transaction } = this.props - this.props.dispatch(actions.resubmitTx(transaction.id)) + this.props.retryTransaction(transaction.id) } function domainField (txParams) { -- cgit v1.2.3 From 97abbc5cbe97157304f27f0f20336b543de62428 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 22:55:47 -0500 Subject: Fix action --- ui/app/actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 2ab68b62d..35eb4b0c8 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -760,9 +760,9 @@ function markAccountsFound () { return callBackgroundThenUpdate(background.markAccountsFound) } -function retryTransaction () { +function retryTransaction (txId) { log.debug(`background.retryTransaction`) - return callBackgroundThenUpdate(background.retryTransaction) + return callBackgroundThenUpdate(background.retryTransaction, txId) } // -- cgit v1.2.3 From 81fb9db1bcd08fb4e92d87d0c0905cb02dac63c2 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 23:09:32 -0500 Subject: View tx after editing state to unconfirmed --- ui/app/actions.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 35eb4b0c8..0dc4f3832 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -762,7 +762,15 @@ function markAccountsFound () { function retryTransaction (txId) { log.debug(`background.retryTransaction`) - return callBackgroundThenUpdate(background.retryTransaction, txId) + return (dispatch) => { + background.retryTransaction(txId, (err) => { + if (err) { + return dispatch(actions.displayWarning(err.message)) + } + forceUpdateMetamaskState(dispatch) + dispatch(actions.viewPendingTx(txId)) + }) + } } // -- cgit v1.2.3 From 31564e0a86072ae2b49923dcf28983075308c432 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 23:20:15 -0500 Subject: Fix retry action --- ui/app/actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 0dc4f3832..52ea899aa 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -763,11 +763,11 @@ function markAccountsFound () { function retryTransaction (txId) { log.debug(`background.retryTransaction`) return (dispatch) => { - background.retryTransaction(txId, (err) => { + background.retryTransaction(txId, (err, newState) => { if (err) { return dispatch(actions.displayWarning(err.message)) } - forceUpdateMetamaskState(dispatch) + dispatch(actions.updateMetamaskState(newState)) dispatch(actions.viewPendingTx(txId)) }) } -- cgit v1.2.3 From 6b3909547f14533cfe09e3d12ac61f0cf57eedd4 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 23:27:43 -0500 Subject: Fix styling of Retry buton --- ui/app/components/transaction-list-item.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 56e90e26c..fa6c5915d 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -120,15 +120,15 @@ TransactionListItem.prototype.render = function () { this.resubmit() }, style: { - height: '30px', - borderRadius: '30px', + height: '22px', + borderRadius: '22px', color: '#F9881B', - padding: '0 25px', + padding: '0 20px', backgroundColor: '#FFE3C9', display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: '9px', + fontSize: '8px', cursor: 'pointer', }, }, [ -- cgit v1.2.3 From 0e25129028dd45d717d27dfe0c06db8a4052bd4e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 23:42:47 -0500 Subject: Enforce retry tx at minimum gas of previous tx --- ui/app/components/pending-tx.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 5b1b367c6..51e57dcd2 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -38,6 +38,14 @@ PendingTx.prototype.render = function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} + // Allow retry txs + const { lastGasPrice } = txMeta + let forceGasMin + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = new BN(stripped, 16).add(MIN_GAS_PRICE_BN) + } + // Account Details const address = txParams.from || props.selectedAddress const identity = props.identities[address] || { address: address } @@ -199,7 +207,7 @@ PendingTx.prototype.render = function () { precision: 9, scale: 9, suffix: 'GWEI', - min: MIN_GAS_PRICE_BN, + min: forceGasMin || MIN_GAS_PRICE_BN, style: { position: 'relative', top: '5px', -- cgit v1.2.3 From b9f2f8c2a78332a2522d49baedf25e894273ef38 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 7 Dec 2017 00:01:11 -0500 Subject: Show retry button on submitted transactions greater than 30 seconds, add hover styling --- ui/app/components/transaction-list-item.js | 8 +++++++- ui/app/css/index.css | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index fa6c5915d..42ef665b1 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -28,6 +28,12 @@ function TransactionListItem () { Component.call(this) } +TransactionListItem.prototype.showRetryButton = function () { + const { transaction = {} } = this.props + const { status, time } = transaction + return status === 'submitted' && Date.now() - time > 30000 +} + TransactionListItem.prototype.render = function () { const { transaction, network, conversionRate, currentCurrency } = this.props const { status } = transaction @@ -114,7 +120,7 @@ TransactionListItem.prototype.render = function () { }) : h('.flex-column'), ]), - transaction.status === 'submitted' && h('.transition-list-item__retry', { + this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', { onClick: event => { event.stopPropagation() this.resubmit() diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 0630c4c12..c0bf18c23 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -108,6 +108,10 @@ button:not([disabled]):active, input[type="submit"]:not([disabled]):active { transform: scale(0.95); } +.grow-on-hover:hover { + transform: scale(1.05); +} + a { text-decoration: none; color: inherit; -- cgit v1.2.3 From ec6c3c33bdbe2d90dc71649d0cc5fb3c07d96af7 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 5 Dec 2017 13:11:59 -0330 Subject: Merge branch 'master' into NewUI-flat-merge-with-master --- ui/app/first-time/init-menu.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index cc7c51bd3..b4587f1ee 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -8,6 +8,8 @@ const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') +let isSubmitting = false + module.exports = connect(mapStateToProps)(InitializeMenuScreen) inherits(InitializeMenuScreen, Component) @@ -164,7 +166,10 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { return } - this.props.dispatch(actions.createNewVaultAndKeychain(password)) + if (!isSubmitting) { + isSubmitting = true + this.props.dispatch(actions.createNewVaultAndKeychain(password)) + } } InitializeMenuScreen.prototype.inputChanged = function (event) { -- cgit v1.2.3 From 2e9137dddd4abd07cc45caa670f09bdc9559bbbb Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 16 Nov 2017 14:44:25 -0330 Subject: Update max amount behaviour to meet new specs. --- ui/app/actions.js | 9 +++++++++ ui/app/components/customize-gas-modal/index.js | 22 +++++++++++++++++++++- ui/app/components/send/send-v2-container.js | 1 + ui/app/reducers/metamask.js | 9 +++++++++ ui/app/selectors.js | 5 +++++ ui/app/send-v2.js | 24 ++++++++++-------------- 6 files changed, 55 insertions(+), 15 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index e79f4373e..326c361cd 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -149,6 +149,7 @@ var actions = { UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT', UPDATE_SEND_MEMO: 'UPDATE_SEND_MEMO', UPDATE_SEND_ERRORS: 'UPDATE_SEND_ERRORS', + UPDATE_MAX_MODE: 'UPDATE_MAX_MODE', UPDATE_SEND: 'UPDATE_SEND', CLEAR_SEND: 'CLEAR_SEND', updateGasLimit, @@ -160,6 +161,7 @@ var actions = { updateSendAmount, updateSendMemo, updateSendErrors, + setMaxModeTo, updateSend, clearSend, setSelectedAddress, @@ -637,6 +639,13 @@ function updateSendErrors (error) { } } +function setMaxModeTo (bool) { + return { + type: actions.UPDATE_MAX_MODE, + value: bool, + } +} + function updateSend (newSend) { return { type: actions.UPDATE_SEND, diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 485dacf90..826d2cd4b 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,6 +5,8 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') +const ethUtil = require('ethereumjs-util') + const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, @@ -19,6 +21,7 @@ const { conversionUtil, multiplyCurrencies, conversionGreaterThan, + subtractCurrencies, } = require('../../conversion-util') const { @@ -30,6 +33,7 @@ const { getSendFrom, getCurrentAccountWithSendEtherInfo, getSelectedTokenToFiatRate, + getSendMaxModeState, } = require('../../selectors') function mapStateToProps (state) { @@ -42,6 +46,7 @@ function mapStateToProps (state) { gasLimit: getGasLimit(state), conversionRate, amount: getSendAmount(state), + maxModeOn: getSendMaxModeState(state), balance: currentAccount.balance, primaryCurrency: selectedToken && selectedToken.symbol, selectedToken, @@ -55,6 +60,7 @@ function mapDispatchToProps (dispatch) { updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), + updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), } } @@ -93,8 +99,21 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateGasLimit, hideModal, updateGasTotal, + maxModeOn, + selectedToken, + balance, + updateSendAmount, } = this.props + if (maxModeOn && !selectedToken) { + const maxAmount = subtractCurrencies( + ethUtil.addHexPrefix(balance), + ethUtil.addHexPrefix(gasTotal), + { toNumericBase: 'hex' } + ) + updateSendAmount(maxAmount) + } + updateGasPrice(gasPrice) updateGasLimit(gasLimit) updateGasTotal(gasTotal) @@ -112,12 +131,13 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { selectedToken, amountConversionRate, conversionRate, + maxModeOn, } = this.props let error = null const balanceIsSufficient = isBalanceSufficient({ - amount: selectedToken ? '0' : amount, + amount: selectedToken || maxModeOn ? '0' : amount, gasTotal, balance, selectedToken, diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 4451a6113..655de8897 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -78,5 +78,6 @@ function mapDispatchToProps (dispatch) { goHome: () => dispatch(actions.goHome()), clearSend: () => dispatch(actions.clearSend()), backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })), + setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)), } } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index fb53bbaef..98207f23b 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -33,6 +33,7 @@ function reduceMetamask (state, action) { amount: '0x0', memo: '', errors: {}, + maxModeOn: false, editingTransactionId: null, }, coinOptions: {}, @@ -258,6 +259,14 @@ function reduceMetamask (state, action) { }, }) + case actions.UPDATE_MAX_MODE: + return extend(metamaskState, { + send: { + ...metamaskState.send, + maxModeOn: action.value, + }, + }) + case actions.UPDATE_SEND: return extend(metamaskState, { send: { diff --git a/ui/app/selectors.js b/ui/app/selectors.js index a5f9a75d8..f891f70c0 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -24,6 +24,7 @@ const selectors = { getSendAmount, getSelectedTokenToFiatRate, getSelectedTokenContract, + getSendMaxModeState, } module.exports = selectors @@ -135,6 +136,10 @@ function getSendAmount (state) { return state.metamask.send.amount } +function getSendMaxModeState (state) { + return state.metamask.send.maxModeOn +} + function getCurrentCurrency (state) { return state.metamask.currentCurrency } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 788ae87b4..e1b88f0db 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -13,8 +13,6 @@ const GasFeeDisplay = require('./components/send/gas-fee-display-v2') const { MIN_GAS_TOTAL, - MIN_GAS_PRICE_HEX, - MIN_GAS_LIMIT_HEX, } = require('./components/send/send-constants') const { @@ -313,8 +311,9 @@ SendTransactionScreen.prototype.renderToRow = function () { SendTransactionScreen.prototype.handleAmountChange = function (value) { const amount = value - const { updateSendAmount } = this.props + const { updateSendAmount, setMaxModeTo } = this.props + setMaxModeTo(false) this.validateAmount(amount) updateSendAmount(amount) } @@ -324,11 +323,9 @@ SendTransactionScreen.prototype.setAmountToMax = function () { from: { balance }, updateSendAmount, updateSendErrors, - updateGasPrice, - updateGasLimit, - updateGasTotal, tokenBalance, selectedToken, + gasTotal, } = this.props const { decimals } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) @@ -337,16 +334,12 @@ SendTransactionScreen.prototype.setAmountToMax = function () { ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'}) : subtractCurrencies( ethUtil.addHexPrefix(balance), - ethUtil.addHexPrefix(MIN_GAS_TOTAL), + ethUtil.addHexPrefix(gasTotal), { toNumericBase: 'hex' } ) updateSendErrors({ amount: null }) - if (!selectedToken) { - updateGasPrice(MIN_GAS_PRICE_HEX) - updateGasLimit(MIN_GAS_LIMIT_HEX) - updateGasTotal(MIN_GAS_TOTAL) - } + updateSendAmount(maxAmount) } @@ -407,19 +400,22 @@ SendTransactionScreen.prototype.renderAmountRow = function () { amountConversionRate, errors, amount, + setMaxModeTo, + maxModeOn, } = this.props return h('div.send-v2__form-row', [ - h('div.send-v2__form-label', [ + h('div.send-v2__form-label', [ 'Amount:', this.renderErrorMessage('amount'), !errors.amount && h('div.send-v2__amount-max', { onClick: (event) => { event.preventDefault() + setMaxModeTo(true) this.setAmountToMax() }, - }, [ 'Max' ]), + }, [ !maxModeOn ? 'Max' : '' ]), ]), h('div.send-v2__form-field', [ -- cgit v1.2.3 From c82fd990aafd72ede0c08d2820c0c1f1db6bfa81 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 7 Dec 2017 04:02:11 -0500 Subject: Add 10% price bump to retry attempts. Turns out geth requires at least a 10% price bump to replace txs: https://github.com/ethereum/go-ethereum/blob/9619a610248e9630968ba1d9be8e214b645c9c55/core/tx_pool.go#L133 --- ui/app/components/pending-tx.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 51e57dcd2..32d54902e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -43,7 +43,9 @@ PendingTx.prototype.render = function () { let forceGasMin if (lastGasPrice) { const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = new BN(stripped, 16).add(MIN_GAS_PRICE_BN) + const lastGas = new BN(stripped, 16) + const priceBump = lastGas.divn('10') + forceGasMin = lastGas.add(priceBump) } // Account Details -- cgit v1.2.3 From bfec077d798aea7b2869b3ff0d292243eec60da5 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 13:09:53 -0330 Subject: Fixes the cancel button in the buy screen to take the user home. --- ui/app/components/coinbase-form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index f44d86045..f70208625 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -40,7 +40,7 @@ CoinbaseForm.prototype.render = function () { }, 'Continue to Coinbase'), h('button.btn-red', { - onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)), + onClick: () => props.dispatch(actions.goHome()), }, 'Cancel'), ]), ]) -- cgit v1.2.3 From d110c916a4dde947dcfdc610aaadf9fba251449a Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 12 Dec 2017 09:47:51 -0800 Subject: Show watched tokens with no balance --- ui/app/components/token-list.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 998ec901d..149733b89 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -194,10 +194,7 @@ TokenList.prototype.componentWillUpdate = function (nextProps) { } TokenList.prototype.updateBalances = function (tokens) { - const heldTokens = tokens.filter(token => { - return token.balance !== '0' && token.string !== '0.000' - }) - this.setState({ tokens: heldTokens, isLoading: false }) + this.setState({ tokens, isLoading: false }) } TokenList.prototype.componentWillUnmount = function () { -- cgit v1.2.3 From 05c6789030791bd1b46434cf89c1817db37e8f38 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 21:18:08 -0330 Subject: Adds button for opening app in main browser window in extension. --- ui/app/components/tx-view.js | 5 +++++ ui/app/css/itcss/components/newui-sections.scss | 4 ++++ 2 files changed, 9 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index ebef22680..832f8e56a 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -107,6 +107,7 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { margin: '1em 0.9em', + justifyContent: 'space-between', alignItems: 'center', }, }, [ @@ -139,6 +140,10 @@ TxView.prototype.render = function () { identity.name, ]), + h('div.open-in-browser', { + onClick: () => global.platform.openExtensionInBrowser(), + }, [h('img', { src: 'images/open.svg' })]) + ]), this.renderHeroBalance(), diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 43a59c4da..61dfbd176 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -38,6 +38,10 @@ $wallet-view-bg: $wild-sand; } } +.open-in-browser { + cursor: pointer; +} + // wallet view and sidebar .wallet-view { -- cgit v1.2.3 From 4b654669e692665aba88a14cb5804370dbfd4a80 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 21:52:31 -0330 Subject: Hide open in browser button on mobile (but still show on extension); adds a function to detect if viewing with mobile browser. --- ui/app/components/tx-view.js | 5 +++-- ui/app/select-app.js | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 832f8e56a..bd52ac4c2 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -3,6 +3,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits +const isMobileBrowser = require('../../lib/is-mobile-browser') const actions = require('../actions') const selectors = require('../selectors') @@ -140,9 +141,9 @@ TxView.prototype.render = function () { identity.name, ]), - h('div.open-in-browser', { + !isMobileBrowser() && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), - }, [h('img', { src: 'images/open.svg' })]) + }, [h('img', { src: 'images/open.svg' })]), ]), diff --git a/ui/app/select-app.js b/ui/app/select-app.js index ffa31b767..3ea93ced3 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -41,7 +41,6 @@ SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { SelectedApp.prototype.render = function () { const { betaUI } = this.props - const { autoAdd } = this.state const Selected = betaUI ? App : OldApp return h(Selected) } -- cgit v1.2.3 From 57c91435a7357165441252acfffcdaff6e54e422 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 12 Dec 2017 16:21:05 -0330 Subject: Substitute isMascara check for explicit check if user is on mobile browser. --- ui/app/components/tx-view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index bd52ac4c2..0f8a54a74 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -15,6 +15,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen + const isMascara = state.appState.isMascara const identities = state.metamask.identities const accounts = state.metamask.accounts @@ -141,7 +142,7 @@ TxView.prototype.render = function () { identity.name, ]), - !isMobileBrowser() && h('div.open-in-browser', { + !isMascara && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), }, [h('img', { src: 'images/open.svg' })]), -- cgit v1.2.3 From 515437a4c956e47a5f1d4522715a9021e08d3408 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 12 Dec 2017 12:22:22 -0800 Subject: Fix isMascara and update yarn.lock --- ui/app/components/tx-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 0f8a54a74..e42a20c85 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -3,7 +3,6 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits -const isMobileBrowser = require('../../lib/is-mobile-browser') const actions = require('../actions') const selectors = require('../selectors') @@ -33,6 +32,7 @@ function mapStateToProps (state) { selectedToken: selectors.getSelectedToken(state), identity, network, + isMascara, } } @@ -100,7 +100,7 @@ TxView.prototype.renderButtons = function () { } TxView.prototype.render = function () { - const { selectedAddress, identity, network } = this.props + const { selectedAddress, identity, network, isMascara } = this.props return h('div.tx-view.flex-column', { style: {}, -- cgit v1.2.3 From 4e0485938a84f665aef466ef34e90299c5863ff4 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 12:36:32 -0330 Subject: Fix height of login screen --- ui/app/app.js | 52 +++++++++++++++++++++++++--------------------------- 1 file changed, 25 insertions(+), 27 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 88a5c8458..1f40eccbe 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -116,41 +116,39 @@ App.prototype.render = function () { log.debug('Main ui render function') return ( - h('.new-ui', [ - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - // global modal - h(Modal, {}, []), + // global modal + h(Modal, {}, []), - // app bar - this.renderAppBar(), + // app bar + this.renderAppBar(), - // sidebar - this.renderSidebar(), + // sidebar + this.renderSidebar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - h(AccountMenu), + h(AccountMenu), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - // content - this.renderPrimary(), - ]), + // content + this.renderPrimary(), ]) ) } -- cgit v1.2.3 From 339eb7d1a687f141e822c745c568063783d44f15 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 13 Dec 2017 02:54:41 -0330 Subject: Fix edit to field bug. (#2738) --- ui/app/components/pending-tx/confirm-send-token.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index cc2df8299..727cd260b 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -67,15 +67,15 @@ function mapDispatchToProps (dispatch, ownProps) { const { txParams, id } = txMeta const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { params = [] } = tokenData - const { value } = params[1] || {} - const amount = conversionUtil(value, { + const { value: to } = params[0] || {} + const { value: tokenAmountInDec } = params[1] || {} + const tokenAmountInHex = conversionUtil(tokenAmountInDec, { fromNumericBase: 'dec', toNumericBase: 'hex', }) const { gas: gasLimit, gasPrice, - to, } = txParams dispatch(actions.setSelectedToken(address)) dispatch(actions.updateSend({ @@ -83,7 +83,7 @@ function mapDispatchToProps (dispatch, ownProps) { gasPrice, gasTotal: null, to, - amount, + amount: tokenAmountInHex, errors: { to: null, amount: null }, editingTransactionId: id, })) @@ -446,10 +446,11 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { amount, gasLimit: gas, gasPrice, + to, }, } = props - const { txParams: { from, to } } = txData + const { txParams: { from, to: tokenAddress } } = txData const tokenParams = { from: ethUtil.addHexPrefix(from), @@ -465,7 +466,7 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { txData.txParams = { ...tokenParams, - to: ethUtil.addHexPrefix(to), + to: ethUtil.addHexPrefix(tokenAddress), memo: memo && ethUtil.addHexPrefix(memo), data, } -- cgit v1.2.3 From 0feb5b210b81533fc25c4760ce33876b4c749247 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 14:19:13 -0330 Subject: Hides the sidebar after the an account menu actions changes the screen behind the sidebar. --- ui/app/components/account-menu/index.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index a9f075ec7..286a3b587 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -28,27 +28,33 @@ function mapDispatchToProps (dispatch) { toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), showAccountDetail: address => { dispatch(actions.showAccountDetail(address)) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, lockMetamask: () => { dispatch(actions.lockMetamask()) dispatch(actions.displayWarning(null)) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, showConfigPage: () => { dispatch(actions.showConfigPage()) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, showNewAccountModal: () => { dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, showImportPage: () => { dispatch(actions.showImportPage()) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, showInfoPage: () => { dispatch(actions.showInfoPage()) + dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, } -- cgit v1.2.3 From 109e4e5d96e31b52fcfdb22620bff113107d000c Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Dec 2017 14:02:32 -0330 Subject: Hide fiat values on account details screen when eth/token value is 0. --- ui/app/components/balance-component.js | 3 ++- ui/app/components/token-cell.js | 4 +++- ui/app/components/tx-list-item.js | 4 +++- 3 files changed, 8 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index d14aa675f..50007ce14 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -94,7 +94,8 @@ BalanceComponent.prototype.renderFiatValue = function (formattedBalance) { } BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) { - if (fiatDisplayNumber === 'N/A') return null + const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0 + if (shouldNotRenderFiat) return null return h('div.fiat-amount', { style: {}, diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index b40c0ec0d..677b66830 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -86,7 +86,9 @@ TokenCell.prototype.render = function () { numberOfDecimals: 2, conversionRate: currentTokenToFiatRate, }) - formattedFiat = `${currentTokenInFiat} ${currentCurrency.toUpperCase()}` + formattedFiat = currentTokenInFiat.toString() === '0' + ? '' + : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}` } const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 4e76147a1..8a9253d4d 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -170,6 +170,7 @@ TxListItem.prototype.getSendTokenTotal = async function () { TxListItem.prototype.render = function () { const { transactionStatus, + transactionAmount, onClick, transActionId, dateString, @@ -177,6 +178,7 @@ TxListItem.prototype.render = function () { className, } = this.props const { total, fiatTotal } = this.state + const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { key: transActionId, @@ -238,7 +240,7 @@ TxListItem.prototype.render = function () { }), }, total), - fiatTotal && h('span.tx-list-fiat-value', fiatTotal), + showFiatTotal && h('span.tx-list-fiat-value', fiatTotal), ]), ]), -- cgit v1.2.3 From bccbf14b39ab2b1670c9c30b276404fe4f949cd7 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 20 Dec 2017 14:52:50 -0330 Subject: [NewUI] Hide UI toggle in mascara (#2772) * Hides old-UI on mascara. * Improve code clarity in select-app.js --- ui/app/actions.js | 7 ++----- ui/app/select-app.js | 25 +++++++++++++++---------- ui/app/settings.js | 8 +++++--- 3 files changed, 22 insertions(+), 18 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index ed0518184..e694152a2 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1523,10 +1523,7 @@ function updateTokenExchangeRate (token = '') { } } -function setFeatureFlag (feature, activated) { - const notificationType = activated - ? 'BETA_UI_NOTIFICATION_MODAL' - : 'OLD_UI_NOTIFICATION_MODAL' +function setFeatureFlag (feature, activated, notificationType) { return (dispatch) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { @@ -1537,7 +1534,7 @@ function setFeatureFlag (feature, activated) { reject(err) } dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) - dispatch(actions.showModal({ name: notificationType })) + notificationType && dispatch(actions.showModal({ name: notificationType })) resolve(updatedFeatureFlags) }) }) diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 3ea93ced3..a51182f47 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -12,35 +12,40 @@ function mapStateToProps (state) { betaUI: state.metamask.featureFlags.betaUI, autoAdd: autoAddToBetaUI(state), isUnlocked: state.metamask.isUnlocked, + isMascara: state.metamask.isMascara, } } function mapDispatchToProps (dispatch) { return { - setFeatureFlagToBeta: () => dispatch(setFeatureFlag('betaUI', true)), + setFeatureFlagWithModal: () => dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')), + setFeatureFlagWithoutModal: () => dispatch(setFeatureFlag('betaUI', true)), } } module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp) inherits(SelectedApp, Component) function SelectedApp () { - this.state = { - autoAdd: false, - } Component.call(this) } SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { - const { isUnlocked, setFeatureFlagToBeta } = this.props + const { + isUnlocked, + setFeatureFlagWithModal, + setFeatureFlagWithoutModal, + isMascara, + } = this.props - if (!isUnlocked && nextProps.isUnlocked && nextProps.autoAdd) { - this.setState({ autoAdd: nextProps.autoAdd }) - setFeatureFlagToBeta() + if (isMascara) { + setFeatureFlagWithoutModal() + } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) { + setFeatureFlagWithModal() } } SelectedApp.prototype.render = function () { - const { betaUI } = this.props - const Selected = betaUI ? App : OldApp + const { betaUI, isMascara } = this.props + const Selected = betaUI || isMascara ? App : OldApp return h(Selected) } diff --git a/ui/app/settings.js b/ui/app/settings.js index ca7535d26..74b282a98 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -250,7 +250,7 @@ class Settings extends Component { } renderSettingsContent () { - const { warning } = this.props + const { warning, isMascara } = this.props return ( h('div.settings__content', [ @@ -261,7 +261,7 @@ class Settings extends Component { this.renderNewRpcUrl(), this.renderStateLogs(), this.renderSeedWords(), - this.renderOldUI(), + !isMascara && this.renderOldUI(), ]) ) } @@ -386,12 +386,14 @@ Settings.propTypes = { setFeatureFlagToBeta: PropTypes.func, warning: PropTypes.string, goHome: PropTypes.func, + isMascara: PropTypes.bool, } const mapStateToProps = state => { return { metamask: state.metamask, warning: state.appState.warning, + isMascara: state.metamask.isMascara, } } @@ -403,7 +405,7 @@ const mapDispatchToProps = dispatch => { displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), setUseBlockie: value => dispatch(actions.setUseBlockie(value)), - setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)), + setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), } } -- cgit v1.2.3 From 1f1fc2c49ecbb5c6a0a1d925d5c02cf48f795b2f Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Dec 2017 11:16:11 -0330 Subject: Canceled, edited transactions show edited amount. --- ui/app/actions.js | 19 +++++++++++++++++++ ui/app/components/pending-tx/confirm-send-ether.js | 9 ++++++++- ui/app/components/pending-tx/confirm-send-token.js | 9 ++++++++- 3 files changed, 35 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index e694152a2..9d3d7184e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -126,6 +126,7 @@ var actions = { signTx: signTx, signTokenTx: signTokenTx, updateAndApproveTx, + updateAndCancelTx, cancelTx: cancelTx, completedTx: completedTx, txError: txError, @@ -710,6 +711,24 @@ function updateAndApproveTx (txData) { } } +function updateAndCancelTx (txData) { + log.info('actions: updateAndCancelTx: ' + JSON.stringify(txData)) + return (dispatch) => { + log.debug(`actions calling background.updateAndCancelTx`) + background.updateAndCancelTransaction(txData, (err) => { + dispatch(actions.hideLoadingIndication()) + dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) + dispatch(actions.clearSend()) + if (err) { + dispatch(actions.txError(err)) + dispatch(actions.goHome()) + return log.error(err.message) + } + dispatch(actions.completedTx(txData.id)) + }) + } +} + function completedTx (id) { return { type: actions.COMPLETED_TX, diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 1264da153..01195502e 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -55,6 +55,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -421,7 +422,13 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() - this.props.cancelTransaction(txMeta) + const { send, updateAndCancelTx, cancelTransaction } = this.props + + if (send.editingTransactionId) { + updateAndCancelTx(txMeta) + } else { + cancelTransaction(txMeta) + } } ConfirmSendEther.prototype.checkValidity = function () { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 727cd260b..e6ce3f6e6 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -89,6 +89,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, + updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -415,7 +416,13 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - this.props.cancelTransaction(txMeta) + const { send, updateAndCancelTx, cancelTransaction } = this.props + + if (send.editingTransactionId) { + updateAndCancelTx(txMeta) + } else { + cancelTransaction(txMeta) + } } ConfirmSendToken.prototype.checkValidity = function () { -- cgit v1.2.3 From bf4043c59bb67ea93599207d91cb7a4f4426e75f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 13:47:16 -0330 Subject: Adds updateTransaction to background and used it to update after editing in send-v2. --- ui/app/actions.js | 22 +++--- ui/app/components/pending-tx/confirm-send-ether.js | 29 +------- ui/app/components/pending-tx/confirm-send-token.js | 42 +----------- ui/app/components/send/send-v2-container.js | 2 + ui/app/conf-tx.js | 2 +- ui/app/send-v2.js | 78 +++++++++++++++++----- 6 files changed, 80 insertions(+), 95 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 9d3d7184e..ef8a5ec46 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -125,8 +125,8 @@ var actions = { sendTx: sendTx, signTx: signTx, signTokenTx: signTokenTx, + updateTransaction, updateAndApproveTx, - updateAndCancelTx, cancelTx: cancelTx, completedTx: completedTx, txError: txError, @@ -693,29 +693,28 @@ function signTokenTx (tokenAddress, toAddress, amount, txData) { } } -function updateAndApproveTx (txData) { - log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) +function updateTransaction (txData) { + log.info('actions: updateTx: ' + JSON.stringify(txData)) return (dispatch) => { - log.debug(`actions calling background.updateAndApproveTx`) - background.updateAndApproveTransaction(txData, (err) => { + log.debug(`actions calling background.updateTx`) + background.updateTransaction(txData, (err) => { dispatch(actions.hideLoadingIndication()) dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) - dispatch(actions.clearSend()) if (err) { dispatch(actions.txError(err)) dispatch(actions.goHome()) return log.error(err.message) } - dispatch(actions.completedTx(txData.id)) + dispatch(actions.showConfTxPage({ id: txData.id })) }) } } -function updateAndCancelTx (txData) { - log.info('actions: updateAndCancelTx: ' + JSON.stringify(txData)) +function updateAndApproveTx (txData) { + log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) return (dispatch) => { - log.debug(`actions calling background.updateAndCancelTx`) - background.updateAndCancelTransaction(txData, (err) => { + log.debug(`actions calling background.updateAndApproveTx`) + background.updateAndApproveTransaction(txData, (err) => { dispatch(actions.hideLoadingIndication()) dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) dispatch(actions.clearSend()) @@ -773,6 +772,7 @@ function cancelTx (txData) { return (dispatch) => { log.debug(`background.cancelTransaction`) background.cancelTransaction(txData.id, () => { + dispatch(actions.clearSend()) dispatch(actions.completedTx(txData.id)) }) } diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 01195502e..566224864 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -55,7 +55,6 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -422,13 +421,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, updateAndCancelTx, cancelTransaction } = this.props + const { cancelTransaction } = this.props - if (send.editingTransactionId) { - updateAndCancelTx(txMeta) - } else { - cancelTransaction(txMeta) - } + cancelTransaction(txMeta) } ConfirmSendEther.prototype.checkValidity = function () { @@ -452,26 +447,6 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (props.send.editingTransactionId) { - const { - send: { - memo, - amount: value, - gasLimit: gas, - gasPrice, - }, - } = props - const { txParams: { from, to } } = txData - txData.txParams = { - from: ethUtil.addHexPrefix(from), - to: ethUtil.addHexPrefix(to), - memo: memo && ethUtil.addHexPrefix(memo), - value: ethUtil.addHexPrefix(value), - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), - } - } - // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index e6ce3f6e6..a07835911 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -89,7 +89,6 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, - updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -416,13 +415,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, updateAndCancelTx, cancelTransaction } = this.props + const { send, cancelTransaction } = this.props - if (send.editingTransactionId) { - updateAndCancelTx(txMeta) - } else { - cancelTransaction(txMeta) - } + cancelTransaction(txMeta) } ConfirmSendToken.prototype.checkValidity = function () { @@ -446,39 +441,6 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (props.send.editingTransactionId) { - const { - send: { - memo, - amount, - gasLimit: gas, - gasPrice, - to, - }, - } = props - - const { txParams: { from, to: tokenAddress } } = txData - - const tokenParams = { - from: ethUtil.addHexPrefix(from), - value: '0', - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), - } - - const data = '0xa9059cbb' + Array.prototype.map.call( - ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), - x => ('00' + x.toString(16)).slice(-2) - ).join('') - - txData.txParams = { - ...tokenParams, - to: ethUtil.addHexPrefix(tokenAddress), - memo: memo && ethUtil.addHexPrefix(memo), - data, - } - } - // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 655de8897..ff7714e82 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -50,6 +50,7 @@ function mapStateToProps (state) { data, amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate, tokenContract: getSelectedTokenContract(state), + unapprovedTxs: state.metamask.unapprovedTxs, } } @@ -64,6 +65,7 @@ function mapDispatchToProps (dispatch) { ), signTx: txParams => dispatch(actions.signTx(txParams)), updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)), + updateTx: txData => dispatch(actions.updateTransaction(txData)), setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)), addToAddressBook: address => dispatch(actions.addToAddressBook(address)), updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)), diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 9f273aaec..d71e4b35f 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -115,7 +115,7 @@ function currentTxView (opts) { log.info('rendering current tx view') const { txData } = opts const { txParams, msgParams } = txData - + console.log(`22222 currentTxView txData`, txData); if (txParams) { log.debug('txParams detected, rendering pending tx') return h(PendingTx, opts) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index e1b88f0db..617211b20 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -2,6 +2,7 @@ const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') +const ethAbi = require('ethereumjs-abi') const ethUtil = require('ethereumjs-util') const Identicon = require('./components/identicon') @@ -552,6 +553,47 @@ SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) { } } +SendTransactionScreen.prototype.getEditedTx = function () { + const { + from: {address: from}, + to, + amount, + gasLimit: gas, + gasPrice, + selectedToken, + editingTransactionId, + unapprovedTxs, + } = this.props + + const editingTx = unapprovedTxs[editingTransactionId] + + editingTx.txParams = { + from: ethUtil.addHexPrefix(from), + gas: ethUtil.addHexPrefix(gas), + gasPrice: ethUtil.addHexPrefix(gasPrice), + } + + if (selectedToken) { + const data = '0xa9059cbb' + Array.prototype.map.call( + ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), + x => ('00' + x.toString(16)).slice(-2) + ).join('') + + Object.assign(editingTx.txParams, { + value: ethUtil.addHexPrefix('0'), + to: ethUtil.addHexPrefix(selectedToken.address), + data, + }) + } else { + Object.assign(editingTx.txParams, { + value: ethUtil.addHexPrefix(amount), + to: ethUtil.addHexPrefix(to), + }) + } + + return editingTx +} + SendTransactionScreen.prototype.onSubmit = function (event) { event.preventDefault() const { @@ -562,10 +604,12 @@ SendTransactionScreen.prototype.onSubmit = function (event) { gasPrice, signTokenTx, signTx, + updateTx, selectedToken, editingTransactionId, errors: { amount: amountError, to: toError }, backToConfirmScreen, + unapprovedTxs, } = this.props const noErrors = !amountError && toError === null @@ -577,23 +621,25 @@ SendTransactionScreen.prototype.onSubmit = function (event) { this.addToAddressBookIfNew(to) if (editingTransactionId) { - backToConfirmScreen(editingTransactionId) - return - } + const editedTx = this.getEditedTx() - const txParams = { - from, - value: '0', - gas, - gasPrice, - } + updateTx(editedTx) + } else { - if (!selectedToken) { - txParams.value = amount - txParams.to = to - } + const txParams = { + from, + value: '0', + gas, + gasPrice, + } - selectedToken - ? signTokenTx(selectedToken.address, to, amount, txParams) - : signTx(txParams) + if (!selectedToken) { + txParams.value = amount + txParams.to = to + } + + selectedToken + ? signTokenTx(selectedToken.address, to, amount, txParams) + : signTx(txParams) + } } -- cgit v1.2.3 From 5fe3c5aae6756f225edd0f8646ac0a23c264a81c Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 15:05:41 -0330 Subject: Lint fixes. --- ui/app/components/pending-tx/confirm-send-token.js | 3 +-- ui/app/components/send/send-v2-container.js | 1 - ui/app/conf-tx.js | 2 +- ui/app/send-v2.js | 2 -- 4 files changed, 2 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index a07835911..aa4f29fb0 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -2,7 +2,6 @@ const Component = require('react').Component const { connect } = require('react-redux') const h = require('react-hyperscript') const inherits = require('util').inherits -const ethAbi = require('ethereumjs-abi') const tokenAbi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') abiDecoder.addABI(tokenAbi) @@ -415,7 +414,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, cancelTransaction } = this.props + const { cancelTransaction } = this.props cancelTransaction(txMeta) } diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index ff7714e82..2d2ed4546 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -79,7 +79,6 @@ function mapDispatchToProps (dispatch) { updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)), goHome: () => dispatch(actions.goHome()), clearSend: () => dispatch(actions.clearSend()), - backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })), setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)), } } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index d71e4b35f..9f273aaec 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -115,7 +115,7 @@ function currentTxView (opts) { log.info('rendering current tx view') const { txData } = opts const { txParams, msgParams } = txData - console.log(`22222 currentTxView txData`, txData); + if (txParams) { log.debug('txParams detected, rendering pending tx') return h(PendingTx, opts) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 617211b20..1c0ff3aea 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -608,8 +608,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) { selectedToken, editingTransactionId, errors: { amount: amountError, to: toError }, - backToConfirmScreen, - unapprovedTxs, } = this.props const noErrors = !amountError && toError === null -- cgit v1.2.3 From 9ced63584bc93cf6ac82786dec0984b5022346ae Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 19:06:58 -0330 Subject: Add constanst for token transfer function signature. --- ui/app/components/send/send-constants.js | 3 +++ ui/app/send-v2.js | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js index 9c240972f..b3ee0899a 100644 --- a/ui/app/components/send/send-constants.js +++ b/ui/app/components/send/send-constants.js @@ -20,6 +20,8 @@ const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, { multiplierBase: 16, }) +const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb' + module.exports = { MIN_GAS_PRICE_GWEI, MIN_GAS_PRICE_HEX, @@ -27,4 +29,5 @@ module.exports = { MIN_GAS_LIMIT_HEX, MIN_GAS_LIMIT_DEC, MIN_GAS_TOTAL, + TOKEN_TRANSFER_FUNCTION_SIGNATURE, } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 1c0ff3aea..cf9e709d4 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -14,6 +14,7 @@ const GasFeeDisplay = require('./components/send/gas-fee-display-v2') const { MIN_GAS_TOTAL, + TOKEN_TRANSFER_FUNCTION_SIGNATURE, } = require('./components/send/send-constants') const { @@ -574,7 +575,7 @@ SendTransactionScreen.prototype.getEditedTx = function () { } if (selectedToken) { - const data = '0xa9059cbb' + Array.prototype.map.call( + const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), x => ('00' + x.toString(16)).slice(-2) ).join('') -- cgit v1.2.3 From e7e1b7a95180597308bd167bd4a152bbbf53ff21 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 19:11:18 -0330 Subject: Clone transaction while editing instead of mutating object from state. --- ui/app/send-v2.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index cf9e709d4..b7f2e7277 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -566,12 +566,13 @@ SendTransactionScreen.prototype.getEditedTx = function () { unapprovedTxs, } = this.props - const editingTx = unapprovedTxs[editingTransactionId] - - editingTx.txParams = { - from: ethUtil.addHexPrefix(from), - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), + const editingTx = { + ...unapprovedTxs[editingTransactionId], + txParams: { + from: ethUtil.addHexPrefix(from), + gas: ethUtil.addHexPrefix(gas), + gasPrice: ethUtil.addHexPrefix(gasPrice), + } } if (selectedToken) { -- cgit v1.2.3 From 4acd48966edf2e6cf4ced6e3e0983a44dcb2ec13 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 21 Dec 2017 23:33:01 -0330 Subject: [NewUI] Fixes tests and sends user to NewUI after registering. (#2788) * Fixes tests and sends user to NewUI after registering. * Karma config? * Empty commit * Remove unneeded json state mock file. --- ui/app/select-app.js | 9 ++++++--- ui/app/send-v2.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/select-app.js b/ui/app/select-app.js index a51182f47..0b837b547 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -13,6 +13,7 @@ function mapStateToProps (state) { autoAdd: autoAddToBetaUI(state), isUnlocked: state.metamask.isUnlocked, isMascara: state.metamask.isMascara, + firstTime: Object.keys(state.metamask.identities).length === 0, } } @@ -35,9 +36,10 @@ SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { setFeatureFlagWithModal, setFeatureFlagWithoutModal, isMascara, + firstTime, } = this.props - if (isMascara) { + if (isMascara || firstTime) { setFeatureFlagWithoutModal() } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) { setFeatureFlagWithModal() @@ -45,7 +47,8 @@ SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { } SelectedApp.prototype.render = function () { - const { betaUI, isMascara } = this.props - const Selected = betaUI || isMascara ? App : OldApp + const { betaUI, isMascara, firstTime } = this.props + + const Selected = betaUI || isMascara || firstTime ? App : OldApp return h(Selected) } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index b7f2e7277..7c9b6dbc6 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -572,7 +572,7 @@ SendTransactionScreen.prototype.getEditedTx = function () { from: ethUtil.addHexPrefix(from), gas: ethUtil.addHexPrefix(gas), gasPrice: ethUtil.addHexPrefix(gasPrice), - } + }, } if (selectedToken) { -- cgit v1.2.3 From a218008adf85dfb5fa8ca93c789e14d9f2090813 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 22 Dec 2017 10:43:02 -0800 Subject: Track usage of old and new UI (#2794) [NewUI] Track usage of old and new UI --- ui/app/actions.js | 37 +++++++++++++++++++++++++++++++++---- ui/app/reducers/metamask.js | 7 +++++++ ui/app/select-app.js | 13 ++++++++++--- ui/app/settings.js | 10 +++++++--- 4 files changed, 57 insertions(+), 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index e8271c9a7..bd3aab45a 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -240,12 +240,17 @@ var actions = { SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', setUseBlockie, - + // Feature Flags setFeatureFlag, updateFeatureFlags, UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS', - + + // Network + setNetworkEndpoints, + updateNetworkEndpointType, + UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE', + retryTransaction, } @@ -1489,7 +1494,7 @@ function reshowQrCode (data, coin) { dispatch(actions.showLoadingIndication()) shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => { if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error)) - + var message = [ `Deposit your ${coin} to the address bellow:`, `Deposit Limit: ${mktResponse.limit}`, @@ -1565,7 +1570,7 @@ function setFeatureFlag (feature, activated, notificationType) { dispatch(actions.hideLoadingIndication()) if (err) { dispatch(actions.displayWarning(err.message)) - reject(err) + return reject(err) } dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) notificationType && dispatch(actions.showModal({ name: notificationType })) @@ -1646,3 +1651,27 @@ function setUseBlockie (val) { }) } } + +function setNetworkEndpoints (networkEndpointType) { + return dispatch => { + log.debug('background.setNetworkEndpoints') + return new Promise((resolve, reject) => { + background.setNetworkEndpoints(networkEndpointType, err => { + if (err) { + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + + dispatch(actions.updateNetworkEndpointType(networkEndpointType)) + resolve(networkEndpointType) + }) + }) + } +} + +function updateNetworkEndpointType (networkEndpointType) { + return { + type: actions.UPDATE_NETWORK_ENDPOINT_TYPE, + value: networkEndpointType, + } +} diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 95b41e5f3..294c29948 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -1,6 +1,7 @@ const extend = require('xtend') const actions = require('../actions') const MetamascaraPlatform = require('../../../app/scripts/platforms/window') +const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums module.exports = reduceMetamask @@ -39,6 +40,7 @@ function reduceMetamask (state, action) { coinOptions: {}, useBlockie: false, featureFlags: {}, + networkEndpointType: OLD_UI_NETWORK_TYPE, }, state.metamask) switch (action.type) { @@ -335,6 +337,11 @@ function reduceMetamask (state, action) { featureFlags: action.value, }) + case actions.UPDATE_NETWORK_ENDPOINT_TYPE: + return extend(metamaskState, { + networkEndpointType: action.value, + }) + default: return metamaskState diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 0b837b547..ac6867aeb 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -5,7 +5,8 @@ const h = require('react-hyperscript') const App = require('./app') const OldApp = require('../../old-ui/app/app') const { autoAddToBetaUI } = require('./selectors') -const { setFeatureFlag } = require('./actions') +const { setFeatureFlag, setNetworkEndpoints } = require('./actions') +const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums function mapStateToProps (state) { return { @@ -19,8 +20,14 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setFeatureFlagWithModal: () => dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')), - setFeatureFlagWithoutModal: () => dispatch(setFeatureFlag('betaUI', true)), + setFeatureFlagWithModal: () => { + return dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE))) + }, + setFeatureFlagWithoutModal: () => { + return dispatch(setFeatureFlag('betaUI', true)) + .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE))) + }, } } module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp) diff --git a/ui/app/settings.js b/ui/app/settings.js index 74b282a98..a3dd65f14 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -9,6 +9,7 @@ const { exportAsFile } = require('./util') const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') +const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -228,7 +229,7 @@ class Settings extends Component { ]) ) } - + renderOldUI () { const { setFeatureFlagToBeta } = this.props @@ -265,7 +266,7 @@ class Settings extends Component { ]) ) } - + renderLogo () { return ( h('div.settings__info-logo-wrapper', [ @@ -405,7 +406,10 @@ const mapDispatchToProps = dispatch => { displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), setUseBlockie: value => dispatch(actions.setUseBlockie(value)), - setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), + setFeatureFlagToBeta: () => { + return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) + .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) + }, } } -- cgit v1.2.3