WA-232 Disabling stepper controls when validating if prop is set

src/components/Stepper/Controls/index.jsx

@@ -6,16 +6,16 @@ type ControlProps = {
   next: string,
   onPrevious: () => void,
   firstPage: boolean,
-  submitting: boolean,
+  disabled: boolean,
 }
 
 const ControlButtons = ({
-  next, firstPage, onPrevious, submitting,
+  next, firstPage, onPrevious, disabled,
 }: ControlProps) => (
   <React.Fragment>
     <Button
       type="button"
-      disabled={firstPage || submitting}
+      disabled={firstPage || disabled}
       onClick={onPrevious}
     >
       Back
@@ -24,7 +24,7 @@ const ControlButtons = ({
       variant="raised"
       color="primary"
       type="submit"
-      disabled={submitting}
+      disabled={disabled}
     >
       {next}
     </Button>
@@ -37,16 +37,16 @@ type Props = {
   onPrevious: () => void,
   firstPage: boolean,
   lastPage: boolean,
-  submitting: boolean,
+  disabled: boolean,
 }
 
 const Controls = ({
-  finishedTx, finishedButton, onPrevious, firstPage, lastPage, submitting,
+  finishedTx, finishedButton, onPrevious, firstPage, lastPage, disabled,
 }: Props) => (
   finishedTx
     ? <React.Fragment>{finishedButton}</React.Fragment>
     : <ControlButtons
-      submitting={submitting}
+      disabled={disabled}
       next={lastPage ? 'Finish' : 'Next'}
       firstPage={firstPage}
       onPrevious={onPrevious}

src/components/Stepper/index.jsx

@@ -13,6 +13,7 @@ import Controls from './Controls'
 export { default as Step } from './Step'
 
 type Props = {
+  disabledWhenValidating?: boolean,
   classes: Object,
   steps: string[],
   finishedTransaction: boolean,
@@ -100,7 +101,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
       page: Math.max(state.page - 1, 0),
     }))
 
-  handleSubmit = (values: Object) => {
+  handleSubmit = async (values: Object) => {
     const { children, onSubmit } = this.props
     const { page } = this.state
     const isLastPage = page === React.Children.count(children) - 1
@@ -113,7 +114,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      steps, children, finishedTransaction, finishedButton, classes,
+      steps, children, finishedTransaction, finishedButton, classes, disabledWhenValidating = false,
     } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
@@ -136,11 +137,14 @@ class GnoStepper extends React.PureComponent<Props, State> {
           validation={this.validate}
           render={activePage}
         >
-          {(submitting: boolean) => (
+          {(submitting: boolean, validating: boolean) => {
+            const disabled = disabledWhenValidating ? submitting || validating : submitting
+
+            return (
               <Row align="end" margin="lg" grow>
                 <Col xs={12} center="xs">
                   <Controls
-                  submitting={submitting}
+                    disabled={disabled}
                     finishedTx={finishedTransaction}
                     finishedButton={finished}
                     onPrevious={this.previous}
@@ -149,7 +153,8 @@ class GnoStepper extends React.PureComponent<Props, State> {
                   />
                 </Col>
               </Row>
-          )}
+            )
+          }}
         </GnoForm>
       </React.Fragment>
     )

src/routes/tokens/component/AddToken/index.jsx

@@ -92,6 +92,7 @@ class AddToken extends React.Component<Props, State> {
           onSubmit={this.onAddToken}
           steps={steps}
           onReset={this.onReset}
+          disabledWhenValidating
         >
           <Stepper.Page addresses={tokens} prepareNextInitialProps={this.fetchInitialPropsSecondPage}>
             { FirstPage }