m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Improved UX for sweeping accounts (#6488)

Browse Source 
* Changed max button to checkbox, disabled input if max mode is on, recalculate price according to gas fee if max mode is on

* Disabled insufficient funds message in the modal if max mode is on, displays proper amounts in modal when max mode is on, sets the send amount according to custom gas price after gas modal save, resets the send amount after resetting custom gas price

* Disabled max mode checkbox if gas buttons are loading, refactored gas-modal-page-container

* Implemented new max button & max mode message. Moved insufficient funds error to underneath the send amount field

* Fixed existing integration test to pass, created new tests to ensure send amount field is disabled when max button is clicked and the amount changes when the gas price is changed. Refactored some components
This commit is contained in:
Etienne Dusseault 2019-05-21 00:38:08 +08:00 committed by Whymarrh Whitby
parent b27a4d2b4e
commit 0e9c8fb5cc
20 changed files with 314 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
test/integration/lib/send-new-ui.js
View File

@ -71,11 +71,29 @@ async function runSendFlowTest (assert) {
assert.equal(sendToAccountAddress, '0x2f8D4a878cFA04A6E60D46362f5644DeAb66572D', 'send to dropdown selects the correct address')
const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(3)')
sendAmountField.find('.unit-input')[0].click()
const sendAmountFieldInput = await findAsync(sendAmountField, '.unit-input__input')
const amountMaxButton = await queryAsync($, '.send-v2__amount-max')
amountMaxButton.click()
reactTriggerChange(sendAmountField.find('input')[1])
assert.equal(sendAmountFieldInput.is(':disabled'), true, 'disabled the send amount input when max mode is on')
const gasPriceButtonGroup = await queryAsync($, '.gas-price-button-group--small')
const gasPriceButton = await gasPriceButtonGroup.find('button')[0]
const valueBeforeGasPriceChange = sendAmountFieldInput.prop('value')
gasPriceButton.click()
reactTriggerChange(sendAmountField.find('input')[1])
await timeout(1000)
assert.notEqual(valueBeforeGasPriceChange, sendAmountFieldInput.prop('value'), 'send amount value changes when gas price changes')
amountMaxButton.click()
reactTriggerChange(sendAmountField.find('input')[1])
sendAmountField.find('.unit-input').click()
sendAmountFieldInput.val('5.1')
reactTriggerChange(sendAmountField.find('input')[0])
reactTriggerChange(sendAmountField.find('input')[1])
let errorMessage = await queryAsync($, '.send-v2__error')
assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')

57
ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
View File

@ -7,6 +7,8 @@ import {
setGasPrice,
createSpeedUpTransaction,
hideSidebar,
updateSendAmount,
setGasTotal,
} from '../../../../store/actions'
import {
setCustomGasPrice,
@ -18,6 +20,7 @@ import {
} from '../../../../ducks/gas/gas.duck'
import {
hideGasButtonGroup,
updateSendErrors,
} from '../../../../ducks/send/send.duck'
import {
updateGasAndCalculate,
@ -45,6 +48,9 @@ import {
getBasicGasEstimateBlockTime,
isCustomPriceSafe,
} from '../../../../selectors/custom-gas'
import {
getTokenBalance,
} from '../../../../pages/send/send.selectors'
import {
submittedPendingTransactionsSelector,
} from '../../../../selectors/transactions'
@ -53,6 +59,7 @@ import {
} from '../../../../helpers/utils/confirm-tx.util'
import {
addHexWEIsToDec,
subtractHexWEIsToDec,
decEthToConvertedCurrency as ethTotalToConvertedCurrency,
decGWEIToHexWEI,
hexWEIToDecGWEI,
@ -66,6 +73,8 @@ import {
} from '../../../../pages/send/send.utils'
import { addHexPrefix } from 'ethereumjs-util'
import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
import { getMaxModeOn } from '../../../../pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors'
import { calcMaxAmount } from '../../../../pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils'
const mapStateToProps = (state, ownProps) => {
const { transaction = {} } = ownProps
@ -75,8 +84,6 @@ const mapStateToProps = (state, ownProps) => {
const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
const gasButtonInfo = getRenderableBasicEstimateData(state, customModalGasLimitInHex)
@ -90,6 +97,8 @@ const mapStateToProps = (state, ownProps) => {
const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
const maxModeOn = getMaxModeOn(state)
const gasPrices = getEstimatedGasPrices(state)
const estimatedTimes = getEstimatedGasTimes(state)
const balance = getCurrentEthBalance(state)
@ -98,9 +107,13 @@ const mapStateToProps = (state, ownProps) => {
const isMainnet = getIsMainnet(state)
const showFiat = Boolean(isMainnet || showFiatInTestnets)
const insufficientBalance = !isBalanceSufficient({
const newTotalEth = maxModeOn ? addHexWEIsToRenderableEth(balance, '0x0') : addHexWEIsToRenderableEth(value, customGasTotal)
const sendAmount = maxModeOn ? subtractHexWEIsFromRenderableEth(balance, customGasTotal) : addHexWEIsToRenderableEth(value, '0x0')
const insufficientBalance = maxModeOn ? false : !isBalanceSufficient({
amount: value,
gasTotal,
gasTotal: customGasTotal,
balance,
conversionRate,
})
@ -112,10 +125,12 @@ const mapStateToProps = (state, ownProps) => {
customModalGasLimitInHex,
customGasPrice,
customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
customGasTotal,
newTotalFiat,
currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
blockTime: getBasicGasEstimateBlockTime(state),
customPriceIsSafe: isCustomPriceSafe(state),
maxModeOn,
gasPriceButtonGroupProps: {
buttonDataLoading,
defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
@ -129,12 +144,12 @@ const mapStateToProps = (state, ownProps) => {
estimatedTimesMax: estimatedTimes[0],
},
infoRowProps: {
originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
originalTotalFiat: addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate),
originalTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
newTotalFiat: showFiat ? newTotalFiat : '',
newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
newTotalEth,
transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
sendAmount,
},
isSpeedUp: transaction.status === 'submitted',
txId: transaction.id,
@ -142,6 +157,9 @@ const mapStateToProps = (state, ownProps) => {
gasEstimatesLoading,
isMainnet,
isEthereumNetwork: isEthereumNetwork(state),
selectedToken: getSelectedToken(state),
balance,
tokenBalance: getTokenBalance(state),
}
}
@ -174,11 +192,16 @@ const mapDispatchToProps = dispatch => {
hideSidebar: () => dispatch(hideSidebar()),
fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
setGasTotal: (total) => dispatch(setGasTotal(total)),
setAmountToMax: (maxAmountDataObject) => {
dispatch(updateSendErrors({ amount: null }))
dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
},
}
}
const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { gasPriceButtonGroupProps, isConfirm, txId, isSpeedUp, insufficientBalance, customGasPrice } = stateProps
const { gasPriceButtonGroupProps, isConfirm, txId, isSpeedUp, insufficientBalance, maxModeOn, customGasPrice, customGasTotal, balance, selectedToken, tokenBalance} = stateProps
const {
updateCustomGasPrice: dispatchUpdateCustomGasPrice,
hideGasButtonGroup: dispatchHideGasButtonGroup,
@ -188,6 +211,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
hideSidebar: dispatchHideSidebar,
cancelAndClose: dispatchCancelAndClose,
hideModal: dispatchHideModal,
setAmountToMax: dispatchSetAmountToMax,
...otherDispatchProps
} = dispatchProps
@ -208,6 +232,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
dispatchHideGasButtonGroup()
dispatchCancelAndClose()
}
if (maxModeOn) {
dispatchSetAmountToMax({
balance,
gasTotal: customGasTotal,
selectedToken,
tokenBalance,
})
}
},
gasPriceButtonGroupProps: {
...gasPriceButtonGroupProps,
@ -258,6 +290,13 @@ function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
)(aHexWEI, bHexWEI)
}
function subtractHexWEIsFromRenderableEth (aHexWEI, bHexWei) {
return pipe(
subtractHexWEIsToDec,
formatETHFee
)(aHexWEI, bHexWei)
}
function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
return pipe(
addHexWEIsToDec,

12
ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
View File

@ -46,6 +46,10 @@ proxyquire('../gas-modal-page-container.container.js', {
'../../../../ducks/send/send.duck': sendActionSpies,
'../../../../selectors/selectors.js': {
getCurrentEthBalance: (state) => state.metamask.balance || '0x0',
getSelectedToken: () => null,
},
'../../../../pages/send/send.selectors': {
getTokenBalance: (state) => state.metamask.send.tokenBalance || '0x0',
},
})
@ -68,6 +72,7 @@ describe('gas-modal-page-container container', () => {
gasLimit: '16',
gasPrice: '32',
amount: '64',
maxModeOn: false,
},
currentCurrency: 'abc',
conversionRate: 50,
@ -106,6 +111,7 @@ describe('gas-modal-page-container container', () => {
},
}
const baseExpectedResult = {
balance: '0x0',
isConfirm: true,
customGasPrice: 4.294967295,
customGasLimit: 2863311530,
@ -114,6 +120,7 @@ describe('gas-modal-page-container container', () => {
blockTime: 12,
customModalGasLimitInHex: 'aaaaaaaa',
customModalGasPriceInHex: 'ffffffff',
customGasTotal: 'aaaaaaa955555556',
customPriceIsSafe: true,
gasChartProps: {
'currentPrice': 4.294967295,
@ -142,6 +149,9 @@ describe('gas-modal-page-container container', () => {
txId: 34,
isEthereumNetwork: true,
isMainnet: true,
maxModeOn: false,
selectedToken: null,
tokenBalance: '0x0',
}
const baseMockOwnProps = { transaction: { id: 34 } }
const tests = [
@ -150,7 +160,7 @@ describe('gas-modal-page-container container', () => {
mockState: Object.assign({}, baseMockState, {
metamask: { ...baseMockState.metamask, balance: '0xfffffffffffffffffffff' },
}),
expectedResult: Object.assign({}, baseExpectedResult, { insufficientBalance: false }),
expectedResult: Object.assign({}, baseExpectedResult, { balance: '0xfffffffffffffffffffff', insufficientBalance: false }),
mockOwnProps: baseMockOwnProps,
},
{

4
ui/app/components/ui/currency-input/currency-input.component.js
View File

@ -18,6 +18,7 @@ export default class CurrencyInput extends PureComponent {
static propTypes = {
conversionRate: PropTypes.number,
currentCurrency: PropTypes.string,
maxModeOn: PropTypes.bool,
nativeCurrency: PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
@ -136,7 +137,7 @@ export default class CurrencyInput extends PureComponent {
}
render () {
const { fiatSuffix, nativeSuffix, ...restProps } = this.props
const { fiatSuffix, nativeSuffix, maxModeOn, ...restProps } = this.props
const { decimalValue } = this.state
return (
@ -146,6 +147,7 @@ export default class CurrencyInput extends PureComponent {
onChange={this.handleChange}
onBlur={this.handleBlur}
value={decimalValue}
maxModeOn={maxModeOn}
actionComponent={(
<div
className="currency-input__swap-component"

3
ui/app/components/ui/currency-input/currency-input.container.js
View File

@ -1,18 +1,21 @@
import { connect } from 'react-redux'
import CurrencyInput from './currency-input.component'
import { ETH } from '../../../helpers/constants/common'
import { getMaxModeOn } from '../../../pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors'
import {getIsMainnet, preferencesSelector} from '../../../selectors/selectors'
const mapStateToProps = state => {
const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const maxModeOn = getMaxModeOn(state)
return {
nativeCurrency,
currentCurrency,
conversionRate,
hideFiat: (!isMainnet && !showFiatInTestnets),
maxModeOn,
}
}

16
ui/app/components/ui/currency-input/tests/currency-input.container.test.js
View File

@ -30,6 +30,9 @@ describe('CurrencyInput container', () => {
provider: {
type: 'mainnet',
},
send: {
maxModeOn: false,
},
},
},
expected: {
@ -37,6 +40,7 @@ describe('CurrencyInput container', () => {
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: false,
maxModeOn: false,
},
},
// Test # 2
@ -53,6 +57,9 @@ describe('CurrencyInput container', () => {
provider: {
type: 'rinkeby',
},
send: {
maxModeOn: false,
},
},
},
expected: {
@ -60,6 +67,7 @@ describe('CurrencyInput container', () => {
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: true,
maxModeOn: false,
},
},
// Test # 3
@ -76,6 +84,9 @@ describe('CurrencyInput container', () => {
provider: {
type: 'rinkeby',
},
send: {
maxModeOn: false,
},
},
},
expected: {
@ -83,6 +94,7 @@ describe('CurrencyInput container', () => {
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: false,
maxModeOn: false,
},
},
// Test # 4
@ -99,6 +111,9 @@ describe('CurrencyInput container', () => {
provider: {
type: 'mainnet',
},
send: {
maxModeOn: false,
},
},
},
expected: {
@ -106,6 +121,7 @@ describe('CurrencyInput container', () => {
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: false,
maxModeOn: false,
},
},
]

9
ui/app/components/ui/unit-input/index.scss
View File

@ -42,6 +42,10 @@
max-width: 22ch;
height: 16px;
line-height: 18px;
&__disabled {
background-color: rgb(222, 222, 222);
}
}
&__input-container {
@ -59,4 +63,9 @@
&--error {
border-color: $red;
}
&__disabled {
background-color: #F2F3F4;
}
}

10
ui/app/components/ui/unit-input/unit-input.component.js
View File

@ -13,6 +13,7 @@ export default class UnitInput extends PureComponent {
children: PropTypes.node,
actionComponent: PropTypes.node,
error: PropTypes.bool,
maxModeOn: PropTypes.bool,
onBlur: PropTypes.func,
onChange: PropTypes.func,
placeholder: PropTypes.string,
@ -71,25 +72,26 @@ export default class UnitInput extends PureComponent {
}
render () {
const { error, placeholder, suffix, actionComponent, children } = this.props
const { error, placeholder, suffix, actionComponent, children, maxModeOn } = this.props
const { value } = this.state
return (
<div
className={classnames('unit-input', { 'unit-input--error': error })}
onClick={this.handleFocus}
className={classnames('unit-input', { 'unit-input--error': error }, { 'unit-input__disabled': maxModeOn })}
onClick={maxModeOn ? null : this.handleFocus}
>
<div className="unit-input__inputs">
<div className="unit-input__input-container">
<input
type="number"
className="unit-input__input"
className={classnames('unit-input__input', { 'unit-input__disabled': maxModeOn })}
value={value}
placeholder={placeholder}
onChange={this.handleChange}
onBlur={this.handleBlur}
style={{ width: this.getInputWidth(value) }}
ref={ref => { this.unitInput = ref }}
disabled={maxModeOn}
/>
{
suffix && (

55
ui/app/css/itcss/components/send.scss
View File

@ -520,6 +520,10 @@
color: $red;
}
&__error-amount {
margin-top: 5px;
}
&__warning {
font-size: 12px;
line-height: 12px;
@ -557,6 +561,12 @@
justify-content: space-between;
}
&__form-field-container {
display: flex;
flex-direction: column;
width: 277px;
}
&__form-field {
flex: 1 1 auto;
min-width: 0;
@ -817,12 +827,47 @@
}
&__amount-max {
color: $curious-blue;
font-family: Roboto;
font-size: 12px;
left: 8px;
border: none;
cursor: pointer;
position: relative;
display: inline-block;
width: 56px;
height: 20px;
margin-top: 5px;
&__button {
width: 56px;
height: 20px;
position: absolute;
border: 2px solid #B0D7F2;
border-radius: 6px;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: #2f9ae0;
&__disabled {
color: #B0D7F2;
cursor: auto;
}
}
input:checked + &__button {
background-color: #037DD6;
border: 2px solid #037DD6;
color: #fff;
}
}
&__amount-max input {
opacity: 0;
width: 0;
height: 0;
}
&__gas-fee-display {
@ -1077,7 +1122,7 @@
font-size: 14px;
color: #2f9ae0;
cursor: pointer;
margin-top: 16px;
margin-top: 5px;
}
.sliders-icon-container {

11
ui/app/helpers/utils/conversions.util.js
View File

@ -1,6 +1,6 @@
import ethUtil from 'ethereumjs-util'
import { ETH, GWEI, WEI } from '../constants/common'
import { conversionUtil, addCurrencies } from './conversion-util'
import { conversionUtil, addCurrencies, subtractCurrencies } from './conversion-util'
export function bnToHex (inputBn) {
return ethUtil.addHexPrefix(inputBn.toString(16))
@ -92,6 +92,15 @@ export function addHexWEIsToDec (aHexWEI, bHexWEI) {
})
}
export function subtractHexWEIsToDec (aHexWEI, bHexWEI) {
return subtractCurrencies(aHexWEI, bHexWEI, {
aBase: 16,
bBase: 16,
fromDenomination: 'WEI',
numberOfDecimals: 6,
})
}
export function decEthToConvertedCurrency (ethTotal, convertedCurrency, conversionRate) {
return conversionUtil(ethTotal, {
fromNumericBase: 'dec',

39
ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
View File

@ -1,16 +1,21 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
export default class AmountMaxButton extends Component {
static propTypes = {
balance: PropTypes.string,
buttonDataLoading: PropTypes.bool,
clearMaxAmount: PropTypes.func,
inError: PropTypes.bool,
gasTotal: PropTypes.string,
maxModeOn: PropTypes.bool,
selectedToken: PropTypes.object,
setAmountToMax: PropTypes.func,
setMaxModeTo: PropTypes.func,
tokenBalance: PropTypes.string,
}
static contextTypes = {
@ -36,7 +41,7 @@ export default class AmountMaxButton extends Component {
}
onMaxClick = (event) => {
const { setMaxModeTo } = this.props
const { setMaxModeTo, clearMaxAmount, maxModeOn } = this.props
const { metricsEvent } = this.context
metricsEvent({
@ -46,25 +51,25 @@ export default class AmountMaxButton extends Component {
name: 'Clicked "Amount Max"',
},
})
event.preventDefault()
setMaxModeTo(true)
this.setMaxAmount()
if (!maxModeOn) {
setMaxModeTo(true)
this.setMaxAmount()
} else {
setMaxModeTo(false)
clearMaxAmount()
}
}
render () {
return this.props.maxModeOn
? null
: (
<div>
<span
className="send-v2__amount-max"
onClick={this.onMaxClick}
>
{this.context.t('max')}
</span>
</div>
const { maxModeOn, buttonDataLoading, inError } = this.props
return (
<div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}>
<input type="checkbox" checked={maxModeOn} />
<div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}>
{this.context.t('max')}
</div>
</div>
)
}
}

5
ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
View File

@ -5,6 +5,7 @@ import {
getSendFromBalance,
getTokenBalance,
} from '../../../send.selectors.js'
import { getBasicGasEstimateLoadingStatus } from '../../../../../selectors/custom-gas'
import { getMaxModeOn } from './amount-max-button.selectors.js'
import { calcMaxAmount } from './amount-max-button.utils.js'
import {
@ -22,6 +23,7 @@ function mapStateToProps (state) {
return {
balance: getSendFromBalance(state),
buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
gasTotal: getGasTotal(state),
maxModeOn: getMaxModeOn(state),
selectedToken: getSelectedToken(state),
@ -35,6 +37,9 @@ function mapDispatchToProps (dispatch) {
dispatch(updateSendErrors({ amount: null }))
dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
},
clearMaxAmount: () => {
dispatch(updateSendAmount('0'))
},
setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
}
}

7
ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
View File

@ -65,7 +65,7 @@ describe('AmountMaxButton Component', function () {
assert(wrapper.exists('.send-v2__amount-max'))
})
it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
it('should call setMaxModeTo and setMaxAmount when the checkbox is checked', () => {
const {
onClick,
} = wrapper.find('.send-v2__amount-max').props()
@ -81,11 +81,6 @@ describe('AmountMaxButton Component', function () {
)
})
it('should not render anything when maxModeOn is true', () => {
wrapper.setProps({ maxModeOn: true })
assert.ok(!wrapper.exists('.send-v2__amount-max'))
})
it('should render the expected text when maxModeOn is false', () => {
wrapper.setProps({ maxModeOn: false })
assert.equal(wrapper.find('.send-v2__amount-max').text(), 'max_t')

2
ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
View File

@ -29,6 +29,7 @@ proxyquire('../amount-max-button.container.js', {
},
'./amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` },
'./amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 },
'../../../../../selectors/custom-gas': { getBasicGasEstimateLoadingStatus: (s) => `mockButtonDataLoading:${s}`},
'../../../../../store/actions': actionSpies,
'../../../../../ducks/send/send.duck': duckActionSpies,
})
@ -40,6 +41,7 @@ describe('amount-max-button container', () => {
it('should map the correct properties to props', () => {
assert.deepEqual(mapStateToProps('mockState'), {
balance: 'mockBalance:mockState',
buttonDataLoading: 'mockButtonDataLoading:mockState',
gasTotal: 'mockGasTotal:mockState',
maxModeOn: 'mockMaxModeOn:mockState',
selectedToken: 'mockSelectedToken:mockState',

2
ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js
View File

@ -110,7 +110,7 @@ export default class SendAmountRow extends Component {
showError={inError}
errorType={'amount'}
>
{!inError && gasTotal && <AmountMaxButton />}
{gasTotal && <AmountMaxButton inError={inError} />}
{ this.renderInput() }
</SendRowWrapper>
)

37
ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
View File

@ -8,14 +8,19 @@ import AdvancedGasInputs from '../../../../components/app/gas-customization/adva
export default class SendGasRow extends Component {
static propTypes = {
balance: PropTypes.string,
conversionRate: PropTypes.number,
convertedCurrency: PropTypes.string,
gasFeeError: PropTypes.bool,
gasLoadingError: PropTypes.bool,
gasTotal: PropTypes.string,
maxModeOn: PropTypes.bool,
showCustomizeGasModal: PropTypes.func,
selectedToken: PropTypes.object,
setAmountToMax: PropTypes.func,
setGasPrice: PropTypes.func,
setGasLimit: PropTypes.func,
tokenBalance: PropTypes.string,
gasPriceButtonGroupProps: PropTypes.object,
gasButtonGroupShown: PropTypes.bool,
advancedInlineGasShown: PropTypes.bool,
@ -47,6 +52,23 @@ export default class SendGasRow extends Component {
</div>
}
setMaxAmount () {
const {
balance,
gasTotal,
selectedToken,
setAmountToMax,
tokenBalance,
} = this.props
setAmountToMax({
balance,
gasTotal,
selectedToken,
tokenBalance,
})
}
renderContent () {
const {
conversionRate,
@ -57,6 +79,7 @@ export default class SendGasRow extends Component {
gasPriceButtonGroupProps,
gasButtonGroupShown,
advancedInlineGasShown,
maxModeOn,
resetGasButtons,
setGasPrice,
setGasLimit,
@ -71,7 +94,7 @@ export default class SendGasRow extends Component {
className="gas-price-button-group--small"
showCheck={false}
{...gasPriceButtonGroupProps}
handleGasPriceSelection={(...args) => {
handleGasPriceSelection={async (...args) => {
metricsEvent({
eventOpts: {
category: 'Transactions',
@ -79,7 +102,10 @@ export default class SendGasRow extends Component {
name: 'Changed Gas Button',
},
})
gasPriceButtonGroupProps.handleGasPriceSelection(...args)
await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
if (maxModeOn) {
this.setMaxAmount()
}
}}
/>
{ this.renderAdvancedOptionsButton() }
@ -89,7 +115,12 @@ export default class SendGasRow extends Component {
convertedCurrency={convertedCurrency}
gasLoadingError={gasLoadingError}
gasTotal={gasTotal}
onReset={resetGasButtons}
onReset={() => {
resetGasButtons()
if (maxModeOn) {
this.setMaxAmount()
}
}}
onClick={() => showCustomizeGasModal()}
/>
const advancedGasInputs = <div>

18
ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js
View File

@ -6,11 +6,17 @@ import {
getGasPrice,
getGasLimit,
getSendAmount,
getSendFromBalance,
getTokenBalance,
} from '../../send.selectors.js'
import {
getMaxModeOn,
} from '../send-amount-row/amount-max-button/amount-max-button.selectors'
import {
isBalanceSufficient,
calcGasTotal,
} from '../../send.utils.js'
import { calcMaxAmount } from '../send-amount-row/amount-max-button/amount-max-button.utils'
import {
getBasicGasEstimateLoadingStatus,
getRenderableEstimateDataForSmallButtonsFromGWEI,
@ -18,6 +24,7 @@ import {
} from '../../../../selectors/custom-gas'
import {
showGasButtonGroup,
updateSendErrors,
} from '../../../../ducks/send/send.duck'
import {
resetCustomData,
@ -25,10 +32,11 @@ import {
setCustomGasLimit,
} from '../../../../ducks/gas/gas.duck'
import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../store/actions'
import { showModal, setGasPrice, setGasLimit, setGasTotal, updateSendAmount } from '../../../../store/actions'
import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../selectors/selectors'
import SendGasRow from './send-gas-row.component'
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
function mapStateToProps (state) {
@ -49,6 +57,7 @@ function mapStateToProps (state) {
})
return {
balance: getSendFromBalance(state),
conversionRate,
convertedCurrency: getCurrentCurrency(state),
gasTotal,
@ -65,6 +74,9 @@ function mapStateToProps (state) {
gasPrice,
gasLimit,
insufficientBalance,
maxModeOn: getMaxModeOn(state),
selectedToken: getSelectedToken(state),
tokenBalance: getTokenBalance(state),
}
}
@ -85,6 +97,10 @@ function mapDispatchToProps (dispatch) {
dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
}
},
setAmountToMax: maxAmountDataObject => {
dispatch(updateSendErrors({ amount: null }))
dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
},
showGasButtonGroup: () => dispatch(showGasButtonGroup()),
resetCustomData: () => dispatch(resetCustomData()),
}

9
ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
View File

@ -44,6 +44,11 @@ proxyquire('../send-gas-row.container.js', {
getGasPrice: (s) => `mockGasPrice:${s}`,
getGasLimit: (s) => `mockGasLimit:${s}`,
getSendAmount: (s) => `mockSendAmount:${s}`,
getSendFromBalance: (s) => `mockBalance:${s}`,
getTokenBalance: (s) => `mockTokenBalance:${s}`,
},
'../send-amount-row/amount-max-button/amount-max-button.selectors': {
getMaxModeOn: (s) => `mockMaxModeOn:${s}`,
},
'../../send.utils.js': {
isBalanceSufficient: ({
@ -75,6 +80,7 @@ describe('send-gas-row container', () => {
it('should map the correct properties to props', () => {
assert.deepEqual(mapStateToProps('mockState'), {
balance: 'mockBalance:mockState',
conversionRate: 'mockConversionRate:mockState',
convertedCurrency: 'mockConvertedCurrency:mockState',
gasTotal: 'mockGasTotal:mockState',
@ -91,6 +97,9 @@ describe('send-gas-row container', () => {
gasLimit: 'mockGasLimit:mockState',
gasPrice: 'mockGasPrice:mockState',
insufficientBalance: false,
maxModeOn: 'mockMaxModeOn:mockState',
selectedToken: false,
tokenBalance: 'mockTokenBalance:mockState',
})
})

3
ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
export default class SendRowErrorMessage extends Component {
@ -19,7 +20,7 @@ export default class SendRowErrorMessage extends Component {
return (
errorMessage
? <div className="send-v2__error">{this.context.t(errorMessage)}</div>
? <div className={classnames('send-v2__error', {'send-v2__error-amount': errorType === 'amount'})}>{this.context.t(errorMessage)}</div>
: null
)
}

46
ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js
View File

@ -18,7 +18,7 @@ export default class SendRowWrapper extends Component {
t: PropTypes.func,
};
render () {
renderAmountFormRow () {
const {
children,
errorType = '',
@ -34,7 +34,39 @@ export default class SendRowWrapper extends Component {
<div className="send-v2__form-row">
<div className="send-v2__form-label">
{label}
{showError && <SendRowErrorMessage errorType={errorType}/>}
{customLabelContent}
</div>
<div className="send-v2__form-field-container">
<div className="send-v2__form-field">
{formField}
</div>
<div>
{showError && <SendRowErrorMessage errorType={errorType} />}
{!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
</div>
</div>
</div>
)
}
renderFormRow () {
const {
children,
errorType = '',
label,
showError = false,
showWarning = false,
warningType = '',
} = this.props
const formField = Array.isArray(children) ? children[1] || children[0] : children
const customLabelContent = (Array.isArray(children) && children.length) > 1 ? children[0] : null
return (
<div className="send-v2__form-row">
<div className="send-v2__form-label">
{label}
{showError && <SendRowErrorMessage errorType={errorType} />}
{!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
{customLabelContent}
</div>
@ -45,4 +77,14 @@ export default class SendRowWrapper extends Component {
)
}
render () {
const {
errorType = '',
} = this.props
return (
errorType === 'amount' ? this.renderAmountFormRow() : this.renderFormRow()
)
}
}