Few feedback

src/components/Breadcrumb/index.js

@@ -24,23 +24,38 @@ const Bar = styled.div`
   height: 1px;
   left: ${p => p.start}%;
   position: absolute;
-  right: ${p => p.start}%;
+  right: ${p => p.end}%;
   top: 8px;
   z-index: 1;
 
-  &:after {
-    background: ${p => p.theme.colors.wallet};
+  &:after,
+  &:before {
     bottom: 0;
     content: '';
     display: block;
     left: 0;
     position: absolute;
-    right: ${p => (p.current === 0 ? 0 : `${p.current}%`)};
+    right: auto;
     top: 0;
     transition: right ease-in-out 0.4s;
   }
+
+  &:after {
+    background: ${p => p.theme.colors.wallet};
+    right: ${p => (p.current === 0 ? 0 : `${p.current}%`)};
+    z-index: 1;
+  }
+
+  &:before {
+    background: ${p => p.theme.colors.fog};
+    left: ${p => (p.disabled ? `${p.disabled[0]}%` : 0)};
+    right: ${p => (p.disabled ? `${p.disabled[1]}%` : 'auto')};
+    z-index: 2;
+  }
 `
 
+const indexToPurcent = (index, itemsLength) => 100 - 100 / (itemsLength - 1) * parseInt(index, 10)
+
 type Props = {
   currentStep: number | string,
   items: Array<Object>,
@@ -58,6 +73,7 @@ class Breadcrumb extends PureComponent<Props> {
     const { items, stepsDisabled, stepsErrors, currentStep, ...props } = this.props
     const itemsLength = items.length
     const start = 100 / itemsLength / 2
+
     return (
       <Box {...props} relative>
         <Wrapper>
@@ -90,8 +106,17 @@ class Breadcrumb extends PureComponent<Props> {
           })}
         </Wrapper>
         <Bar
+          end={start}
           start={start}
-          current={!currentStep ? 100 : 100 - 100 / (itemsLength - 1) * parseInt(currentStep, 10)}
+          disabled={
+            stepsDisabled.length > 0
+              ? [
+                  stepsDisabled[0] === 0 ? 0 : indexToPurcent(stepsDisabled[0] + 1, itemsLength),
+                  indexToPurcent(stepsDisabled[stepsDisabled.length - 1], itemsLength),
+                ]
+              : null
+          }
+          current={!currentStep ? 100 : indexToPurcent(currentStep, itemsLength)}
         />
       </Box>
     )

src/components/base/Modal/index.js

@@ -29,7 +29,7 @@ const springConfig = {
 const mapStateToProps: Function = (
   state,
   { name, isOpened, onBeforeOpen }: { name: string, isOpened?: boolean, onBeforeOpen: Function },
-): Object => {
+): * => {
   const data = getModalData(state, name)
   const modalOpened = isOpened || (name && isModalOpened(state, name))
 
@@ -43,7 +43,7 @@ const mapStateToProps: Function = (
   }
 }
 
-const mapDispatchToProps: Function = (dispatch, { name, onClose = noop }): Object => ({
+const mapDispatchToProps: Function = (dispatch, { name, onClose = noop }): * => ({
   onClose: name
     ? () => {
         dispatch(closeModal(name))

src/components/modals/Receive/03-step-confirm-address.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled from 'styled-components'
 
 import type { Account } from '@ledgerhq/wallet-common/lib/types'
@@ -15,6 +15,7 @@ const Container = styled(Box).attrs({
   alignItems: 'center',
   fontSize: 4,
   color: 'dark',
+  px: 7,
 })``
 
 const Title = styled(Box).attrs({
@@ -31,7 +32,7 @@ const Text = styled(Box).attrs({
 
 type Props = {
   account: Account | null,
-  addressVerified: null | boolean,
+  addressVerified: boolean | null,
   device: Device | null,
   onCheck: Function,
   t: T,
@@ -39,21 +40,29 @@ type Props = {
 
 export default (props: Props) => (
   <Container>
-    <Title>{props.t('receive:steps.confirmAddress.action')}</Title>
-    <Text>{props.t('receive:steps.confirmAddress.text')}</Text>
-    {props.account && (
-      <CurrentAddress addressVerified={props.addressVerified} address={props.account.address} />
+    {props.addressVerified === false ? (
+      <Fragment>
+        <Title>{props.t('receive:steps.confirmAddress.error.title')}</Title>
+        <Text mb={5}>{props.t('receive:steps.confirmAddress.error.text')}</Text>
+        <DeviceConfirm notValid />
+      </Fragment>
+    ) : (
+      <Fragment>
+        <Title>{props.t('receive:steps.confirmAddress.action')}</Title>
+        <Text>{props.t('receive:steps.confirmAddress.text')}</Text>
+        {props.account && <CurrentAddress address={props.account.address} />}
+        {props.device &&
+          props.account && (
+            <Box mb={2} mt={-1}>
+              <DeviceCheckAddress
+                account={props.account}
+                device={props.device}
+                onCheck={props.onCheck}
+                render={({ isVerified }) => <DeviceConfirm notValid={isVerified === false} />}
+              />
+            </Box>
+          )}
+      </Fragment>
     )}
-    {props.device &&
-      props.account && (
-        <Box mb={2}>
-          <DeviceCheckAddress
-            account={props.account}
-            device={props.device}
-            onCheck={props.onCheck}
-            render={({ isVerified }) => <DeviceConfirm notValid={isVerified === false} />}
-          />
-        </Box>
-      )}
   </Container>
 )

src/components/modals/Receive/04-step-receive-funds.js

@@ -13,7 +13,7 @@ import RequestAmount from 'components/RequestAmount'
 
 type Props = {
   account: Account | null,
-  addressVerified: null | boolean,
+  addressVerified: boolean | null,
   amount: string | number,
   onChangeAmount: Function,
   onVerify: Function,

src/components/modals/Receive/index.js

@@ -138,11 +138,12 @@ class ReceiveModal extends PureComponent<Props, State> {
     }
 
     this.setState({
-      deviceSelected: null,
-      appStatus: null,
       addressVerified: null,
-      stepsErrors: [],
+      appStatus: null,
+      deviceSelected: null,
       stepIndex: newStepIndex,
+      stepsDisabled: [],
+      stepsErrors: [],
     })
   }
 
@@ -163,6 +164,12 @@ class ReceiveModal extends PureComponent<Props, State> {
     }
   }
 
+  handleRetryCheckAddress = () =>
+    this.setState({
+      addressVerified: null,
+      stepsErrors: [],
+    })
+
   handleChangeAmount = amount => this.setState({ amount })
 
   handleBeforeOpenModal = ({ data }) => {
@@ -179,6 +186,7 @@ class ReceiveModal extends PureComponent<Props, State> {
     this.setState({
       addressVerified: false,
       stepsErrors: [],
+      stepsDisabled: [1, 2],
       stepIndex: this._steps.length - 1, // last step
     })
 
@@ -223,7 +231,7 @@ class ReceiveModal extends PureComponent<Props, State> {
 
   renderButton = () => {
     const { t } = this.props
-    const { stepIndex } = this.state
+    const { stepIndex, addressVerified } = this.state
 
     let onClick
     let props
@@ -232,7 +240,8 @@ class ReceiveModal extends PureComponent<Props, State> {
       case 2:
         props = {
           primary: true,
-          children: 'Contact Support',
+          onClick: this.handleRetryCheckAddress,
+          children: t('common:retry'),
         }
         break
       default:
@@ -252,6 +261,10 @@ class ReceiveModal extends PureComponent<Props, State> {
             {t('receive:steps.connectDevice.withoutDevice')}
           </Button>
         )}
+        {stepIndex === 2 &&
+          addressVerified === false && (
+            <Button fontSize={4}>{t('receive:steps.confirmAddress.support')}</Button>
+          )}
         <Button {...props} />
       </Fragment>
     )
@@ -259,7 +272,7 @@ class ReceiveModal extends PureComponent<Props, State> {
 
   render() {
     const { t } = this.props
-    const { stepsErrors, stepIndex } = this.state
+    const { stepsErrors, stepsDisabled, stepIndex } = this.state
 
     const canClose = this.canClose()
     const canPrev = this.canPrev()
@@ -288,6 +301,7 @@ class ReceiveModal extends PureComponent<Props, State> {
                 mb={5}
                 currentStep={stepIndex}
                 stepsErrors={stepsErrors}
+                stepsDisabled={stepsDisabled}
                 items={this._steps}
               />
               {this.renderStep()}

static/i18n/en/common.yml

@@ -12,3 +12,4 @@ lockApplication: Lock application
 max: Max
 next: Next
 back: Back
+retry: Retry

static/i18n/en/receive.yml

@@ -13,6 +13,10 @@ steps:
     title: Confirm Address
     action: Confirm address on device
     text: To receive funds, confirm the address on your device.
+    support: Contact Support
+    error:
+      title: Houston, we have a problem!
+      text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non nibh diam. In eget ipsum arcu donec finibus
 
   receiveFunds:
     title: Receive Funds