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,9 +14,21 @@ const firstButtonStyle = {
   marginRight: sm,
 }
 
-const ControlButtons = ({
+type Props = {
-  next, back, onPrevious, disabled,
+  onPrevious: () => void,
-}: ControlProps) => (
+  firstPage: boolean,
+  lastPage: boolean,
+  disabled: boolean,
+}
+
+const Controls = ({
+  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
@@ -45,29 +50,7 @@ const ControlButtons = ({
         </Button>
       </Col>
     </Row>
-)
+  )
-
-type Props = {
-  finishedTx: boolean,
-  finishedButton: React$Node,
-  onPrevious: () => void,
-  firstPage: boolean,
-  lastPage: boolean,
-  disabled: boolean,
 }
 
-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}
-    />
-)
-
 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}