Making Stepper to work async

src/components/Stepper/Controls/index.jsx

@@ -5,13 +5,6 @@ import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import { sm } from '~/theme/variables'
 
-type ControlProps = {
-  next: string,
-  back: string,
-  onPrevious: () => void,
-  disabled: boolean,
-}
-
 const controlStyle = {
   backgroundColor: 'white',
   padding: sm,
@@ -21,35 +14,7 @@ const firstButtonStyle = {
   marginRight: sm,
 }
 
-const ControlButtons = ({
-  next, back, onPrevious, disabled,
-}: ControlProps) => (
-  <Row style={controlStyle} align="end" grow>
-    <Col xs={12} end="xs">
-      <Button
-        style={firstButtonStyle}
-        type="button"
-        onClick={onPrevious}
-        size="small"
-      >
-        {back}
-      </Button>
-      <Button
-        size="small"
-        variant="raised"
-        color="primary"
-        type="submit"
-        disabled={disabled}
-      >
-        {next}
-      </Button>
-    </Col>
-  </Row>
-)
-
 type Props = {
-  finishedTx: boolean,
-  finishedButton: React$Node,
   onPrevious: () => void,
   firstPage: boolean,
   lastPage: boolean,
@@ -57,17 +22,35 @@ type Props = {
 }
 
 const Controls = ({
-  finishedTx, finishedButton, onPrevious, firstPage, lastPage, disabled,
-}: Props) => (
-  finishedTx
-    ? <React.Fragment>{finishedButton}</React.Fragment>
-    : <ControlButtons
-      disabled={disabled}
-      back={firstPage ? 'Cancel' : 'Back'}
-      // eslint-disable-next-line
-      next={firstPage ? 'Start' : lastPage ? 'Finish' : 'Next'}
-      onPrevious={onPrevious}
-    />
-)
+  onPrevious, firstPage, lastPage, disabled,
+}: Props) => {
+  // eslint-disable-next-line
+  const next = firstPage ? 'Start' : lastPage ? 'Submit' : 'Next'
+  const back = firstPage ? 'Cancel' : 'Back'
+
+  return (
+    <Row style={controlStyle} align="end" grow>
+      <Col xs={12} end="xs">
+        <Button
+          style={firstButtonStyle}
+          type="button"
+          onClick={onPrevious}
+          size="small"
+        >
+          {back}
+        </Button>
+        <Button
+          size="small"
+          variant="raised"
+          color="primary"
+          type="submit"
+          disabled={disabled}
+        >
+          {next}
+        </Button>
+      </Col>
+    </Row>
+  )
+}
 
 export default Controls

src/components/Stepper/index.jsx

@@ -14,15 +14,13 @@ import Controls from './Controls'
 export { default as Step } from './Step'
 
 type Props = {
-  disabledWhenValidating?: boolean,
-  classes: Object,
   steps: string[],
-  finishedTransaction: boolean,
-  finishedButton: React$Node,
-  initialValues?: Object,
-  children: React$Node,
-  onReset?: () => void,
   onSubmit: (values: Object) => Promise<void>,
+  children: React$Node,
+  classes: Object,
+  onReset?: () => void,
+  initialValues?: Object,
+  disabledWhenValidating?: boolean,
 }
 
 type State = {
@@ -122,12 +120,11 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      steps, children, finishedTransaction, finishedButton, classes, disabledWhenValidating = false,
+      steps, children, classes, disabledWhenValidating = false,
     } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
     const isLastPage = page === steps.length - 1
-    const finished = React.cloneElement(React.Children.only(finishedButton), { onClick: this.onReset })
 
     return (
       <React.Fragment>
@@ -143,8 +140,6 @@ class GnoStepper extends React.PureComponent<Props, State> {
                 <Hairline />
                 <Controls
                   disabled={disabled}
-                  finishedTx={finishedTransaction}
-                  finishedButton={finished}
                   onPrevious={this.previous}
                   firstPage={page === 0}
                   lastPage={isLastPage}