diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js index f2a19852..cc1b80d3 100644 --- a/src/components/Breadcrumb/Step.js +++ b/src/components/Breadcrumb/Step.js @@ -29,7 +29,7 @@ const Wrapper = styled(Box).attrs({ const StepNumber = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', - color: p => (['active', 'valid'].includes(p.status) ? 'white' : 'fog'), + color: p => (['active', 'valid', 'error'].includes(p.status) ? 'white' : 'fog'), bg: p => ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'white', ff: 'Rubik|Regular', diff --git a/src/components/modals/Receive/index.js b/src/components/modals/Receive/index.js index 01d8c5e3..d038c7ca 100644 --- a/src/components/modals/Receive/index.js +++ b/src/components/modals/Receive/index.js @@ -61,6 +61,8 @@ const INITIAL_STATE = { stepIndex: 0, stepsDisabled: [], stepsErrors: [], + // FIXME the two above can be derivated from other info (if we keep error etc) + // we can get rid of it after a big refactoring (see how done in Send) } const mapStateToProps = createStructuredSelector({ @@ -232,12 +234,12 @@ class ReceiveModal extends PureComponent { }) } - this.setState({ addressVerified: true, stepIndex: 3 }) + this.handleCheckAddress(true) } else { - this.setState({ addressVerified: false }) + this.handleCheckAddress(false) } } catch (err) { - this.setState({ addressVerified: false }) + this.handleCheckAddress(false) } } diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js index 57106659..029e8b7b 100644 --- a/src/components/modals/Send/index.js +++ b/src/components/modals/Send/index.js @@ -57,6 +57,7 @@ type Step = { canNext: (State<*>) => boolean, canPrev: (State<*>) => boolean, canClose: (State<*>) => boolean, + hasError: (State<*>) => boolean, prevStep?: number, } @@ -91,6 +92,7 @@ class SendModal extends Component> { bridge && account && transaction ? bridge.isValidTransaction(account, transaction) : false, + hasError: () => false, }, { label: t('app:send.steps.connectDevice.title'), @@ -99,6 +101,7 @@ class SendModal extends Component> { deviceSelected !== null && appStatus === 'success', prevStep: 0, canPrev: () => true, + hasError: () => false, }, { label: t('app:send.steps.verification.title'), @@ -106,6 +109,7 @@ class SendModal extends Component> { canNext: () => true, canPrev: ({ error }) => !!error, prevStep: 0, + hasError: ({ error }) => (error && error.name === 'UserRefusedOnDevice') || false, }, { label: t('app:send.steps.confirmation.title'), @@ -113,6 +117,7 @@ class SendModal extends Component> { canClose: () => true, canPrev: () => true, canNext: () => false, + hasError: ({ error }) => (error && error.name !== 'UserRefusedOnDevice') || false, }, ] } @@ -273,6 +278,13 @@ class SendModal extends Component> { const canNext = step.canNext(this.state) const canPrev = step.canPrev(this.state) + const stepsErrors = [] + this.steps.forEach((s, i) => { + if (s.hasError(this.state)) { + stepsErrors.push(i) + } + }) + return ( > { - +