Merge pull request #654 from gre/fix-error-step

fix errors in steps

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',

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<Props, State> {
           })
         }
 
-        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)
     }
   }
 

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<Props, State<*>> {
           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<Props, State<*>> {
           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<Props, State<*>> {
         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<Props, State<*>> {
         canClose: () => true,
         canPrev: () => true,
         canNext: () => false,
+        hasError: ({ error }) => (error && error.name !== 'UserRefusedOnDevice') || false,
       },
     ]
   }
@@ -273,6 +278,13 @@ class SendModal extends Component<Props, State<*>> {
     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 (
       <Modal
         name={MODAL_SEND}
@@ -290,7 +302,13 @@ class SendModal extends Component<Props, State<*>> {
             </ModalTitle>
 
             <ModalContent>
-              <Breadcrumb t={t} mb={6} currentStep={stepIndex} items={this.steps} />
+              <Breadcrumb
+                t={t}
+                mb={6}
+                currentStep={stepIndex}
+                stepsErrors={stepsErrors}
+                items={this.steps}
+              />
 
               <ChildSwitch index={stepIndex}>
                 <StepAmount