mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Send refactor: fix error handling and form disabling in send form.
This commit is contained in:
parent
0de765aa25
commit
e712336189
@ -77,9 +77,9 @@ export default class SendFooter extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
formShouldBeDisabled () {
|
formShouldBeDisabled () {
|
||||||
const { inError, selectedToken, tokenBalance, gasTotal } = this.props
|
const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props
|
||||||
const missingTokenBalance = selectedToken && !tokenBalance
|
const missingTokenBalance = selectedToken && !tokenBalance
|
||||||
return inError || !gasTotal || missingTokenBalance
|
return inError || !gasTotal || missingTokenBalance || !to
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
@ -20,8 +20,10 @@ import {
|
|||||||
getSendToAccounts,
|
getSendToAccounts,
|
||||||
getTokenBalance,
|
getTokenBalance,
|
||||||
getUnapprovedTxs,
|
getUnapprovedTxs,
|
||||||
isSendFormInError,
|
|
||||||
} from '../send.selectors'
|
} from '../send.selectors'
|
||||||
|
import {
|
||||||
|
isSendFormInError,
|
||||||
|
} from './send-footer.selectors'
|
||||||
import {
|
import {
|
||||||
addressIsNew,
|
addressIsNew,
|
||||||
constructTxParams,
|
constructTxParams,
|
||||||
|
@ -7,6 +7,5 @@ const selectors = {
|
|||||||
module.exports = selectors
|
module.exports = selectors
|
||||||
|
|
||||||
function isSendFormInError (state) {
|
function isSendFormInError (state) {
|
||||||
const { amount, to } = getSendErrors(state)
|
return Object.values(getSendErrors(state)).some(n => n)
|
||||||
return Boolean(amount || to !== null)
|
|
||||||
}
|
}
|
||||||
|
@ -86,6 +86,12 @@ describe('SendFooter Component', function () {
|
|||||||
gasTotal: false,
|
gasTotal: false,
|
||||||
expectedResult: true,
|
expectedResult: true,
|
||||||
},
|
},
|
||||||
|
'should return true if to is truthy': {
|
||||||
|
to: '0xsomevalidAddress',
|
||||||
|
inError: false,
|
||||||
|
gasTotal: false,
|
||||||
|
expectedResult: true,
|
||||||
|
},
|
||||||
'should return true if selectedToken is truthy and tokenBalance is falsy': {
|
'should return true if selectedToken is truthy and tokenBalance is falsy': {
|
||||||
selectedToken: true,
|
selectedToken: true,
|
||||||
tokenBalance: null,
|
tokenBalance: null,
|
||||||
|
@ -39,9 +39,8 @@ proxyquire('../send-footer.container.js', {
|
|||||||
getSendToAccounts: (s) => `mockToAccounts:${s}`,
|
getSendToAccounts: (s) => `mockToAccounts:${s}`,
|
||||||
getTokenBalance: (s) => `mockTokenBalance:${s}`,
|
getTokenBalance: (s) => `mockTokenBalance:${s}`,
|
||||||
getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
|
getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
|
||||||
isSendFormInError: (s) => `mockInError:${s}`,
|
|
||||||
},
|
},
|
||||||
'./send-footer.selectors': { isSendFormInError: () => {} },
|
'./send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
|
||||||
'./send-footer.utils': utilsStubs,
|
'./send-footer.utils': utilsStubs,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -0,0 +1,24 @@
|
|||||||
|
import assert from 'assert'
|
||||||
|
import proxyquire from 'proxyquire'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isSendFormInError,
|
||||||
|
} = proxyquire('../send-footer.selectors', {
|
||||||
|
'../send.selectors': {
|
||||||
|
getSendErrors: (mockState) => mockState.errors,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('send-footer selectors', () => {
|
||||||
|
|
||||||
|
describe('getTitleKey()', () => {
|
||||||
|
it('should return true if any of the values of the object returned by getSendErrors are truthy', () => {
|
||||||
|
assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return false if all of the values of the object returned by getSendErrors are falsy', () => {
|
||||||
|
assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
@ -39,7 +39,6 @@ const selectors = {
|
|||||||
getTokenBalance,
|
getTokenBalance,
|
||||||
getTokenExchangeRate,
|
getTokenExchangeRate,
|
||||||
getUnapprovedTxs,
|
getUnapprovedTxs,
|
||||||
isSendFormInError,
|
|
||||||
transactionsSelector,
|
transactionsSelector,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -251,11 +250,6 @@ function getUnapprovedTxs (state) {
|
|||||||
return state.metamask.unapprovedTxs
|
return state.metamask.unapprovedTxs
|
||||||
}
|
}
|
||||||
|
|
||||||
function isSendFormInError (state) {
|
|
||||||
const { amount, to } = getSendErrors(state)
|
|
||||||
return Boolean(amount || to !== null)
|
|
||||||
}
|
|
||||||
|
|
||||||
function transactionsSelector (state) {
|
function transactionsSelector (state) {
|
||||||
const { network, selectedTokenAddress } = state.metamask
|
const { network, selectedTokenAddress } = state.metamask
|
||||||
const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
|
const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
|
||||||
|
@ -36,7 +36,6 @@ const {
|
|||||||
getTokenBalance,
|
getTokenBalance,
|
||||||
getTokenExchangeRate,
|
getTokenExchangeRate,
|
||||||
getUnapprovedTxs,
|
getUnapprovedTxs,
|
||||||
isSendFormInError,
|
|
||||||
transactionsSelector,
|
transactionsSelector,
|
||||||
} = selectors
|
} = selectors
|
||||||
import mockState from './send-selectors-test-data'
|
import mockState from './send-selectors-test-data'
|
||||||
@ -546,39 +545,6 @@ describe('send selectors', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('isSendFormInError()', () => {
|
|
||||||
it('should return true if amount or to errors are truthy', () => {
|
|
||||||
const editedMockState1 = {
|
|
||||||
send: Object.assign({}, mockState.send, {
|
|
||||||
errors: { amount: true },
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
assert.deepEqual(
|
|
||||||
isSendFormInError(editedMockState1),
|
|
||||||
true
|
|
||||||
)
|
|
||||||
const editedMockState2 = {
|
|
||||||
send: Object.assign({}, mockState.send, {
|
|
||||||
errors: { to: true },
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
assert.deepEqual(
|
|
||||||
isSendFormInError(editedMockState2),
|
|
||||||
true
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should return false if amount is falsy and to is null', () => {
|
|
||||||
const editedMockState = {
|
|
||||||
send: Object.assign({}, mockState.send, { errors: { amount: false, to: null } }),
|
|
||||||
}
|
|
||||||
assert.deepEqual(
|
|
||||||
isSendFormInError(editedMockState),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('transactionsSelector()', () => {
|
describe('transactionsSelector()', () => {
|
||||||
it('should return the selected addresses selected token transactions', () => {
|
it('should return the selected addresses selected token transactions', () => {
|
||||||
assert.deepEqual(
|
assert.deepEqual(
|
||||||
|
Loading…
Reference in New Issue
Block a user