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,20 +137,24 @@ class GnoStepper extends React.PureComponent<Props, State> {
           validation={this.validate}
           render={activePage}
         >
-          {(submitting: boolean) => (
+          {(submitting: boolean, validating: boolean) => {
-            <Row align="end" margin="lg" grow>
+            const disabled = disabledWhenValidating ? submitting || validating : submitting
-              <Col xs={12} center="xs">
+
-                <Controls
+            return (
-                  submitting={submitting}
+              <Row align="end" margin="lg" grow>
-                  finishedTx={finishedTransaction}
+                <Col xs={12} center="xs">
-                  finishedButton={finished}
+                  <Controls
-                  onPrevious={this.previous}
+                    disabled={disabled}
-                  firstPage={page === 0}
+                    finishedTx={finishedTransaction}
-                  lastPage={isLastPage}
+                    finishedButton={finished}
-                />
+                    onPrevious={this.previous}
-              </Col>
+                    firstPage={page === 0}
-            </Row>
+                    lastPage={isLastPage}
-          )}
+                  />
+                </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 }