move register feedback onto last step

src/components/atoms/Spinner.module.scss

@@ -3,7 +3,8 @@
 .spinner {
     position: relative;
     text-align: center;
-    margin-bottom: $spacer / 2;
+    margin-bottom: $spacer * 2;
+    margin-top: $spacer * 2;
 
     &:before {
         content: '';
@@ -13,7 +14,7 @@
         left: 50%;
         width: 20px;
         height: 20px;
-        margin-top: -10px;
+        margin-top: -20px;
         margin-left: -10px;
         border-radius: 50%;
         border: 2px solid $brand-purple;
@@ -24,7 +25,6 @@
 
 .spinnerMessage {
     color: $brand-grey-light;
-    margin-top: $spacer / 2;
 }
 
 @keyframes spinner {

src/routes/Publish/Step.module.scss

@@ -1,7 +1,7 @@
 @import '../../styles/variables';
 
 .header {
-    margin-bottom: $spacer * 1.5;
+    margin-bottom: $spacer;
 }
 
 .title {
@@ -11,14 +11,13 @@
 
 .description {
     margin-top: $spacer / 4;
+    margin-bottom: 0;
 }
 
 .actions {
     display: flex;
     justify-content: space-between;
-    border-top: .1rem solid $brand-grey-lighter;
-    padding-top: $spacer;
-    margin-top: $spacer;
+    margin-top: $spacer * 2;
 
     button:last-child {
         min-width: 12rem;

src/routes/Publish/Step.tsx

@@ -3,9 +3,9 @@ import Input from '../../components/atoms/Form/Input'
 import Label from '../../components/atoms/Form/Label'
 import Row from '../../components/atoms/Form/Row'
 import Button from '../../components/atoms/Button'
-import Web3message from '../../components/Web3message'
 import { User } from '../../context/User'
 import Files from './Files/'
+import StepRegisterContent from './StepRegisterContent'
 import styles from './Step.module.scss'
 
 interface StepProps {
@@ -14,14 +14,15 @@ interface StepProps {
     inputChange: any
     inputToArrayChange: any
     fields?: any[]
-    files?: any
     state: any
     title: string
     description: string
     next: any
     prev: any
     totalSteps: number
-    component?: string
+    tryAgain: any
+    toStart: any
+    publishedDid?: string
 }
 
 export default class Step extends PureComponent<StepProps, {}> {
@@ -56,10 +57,10 @@ export default class Step extends PureComponent<StepProps, {}> {
             fields,
             inputChange,
             inputToArrayChange,
-            files,
             state,
             totalSteps,
-            component
+            tryAgain,
+            toStart
         } = this.props
 
         if (currentStep !== index + 1) {
@@ -93,7 +94,7 @@ export default class Step extends PureComponent<StepProps, {}> {
                                         placeholder={value.placeholder}
                                         name={value.name}
                                         help={value.help}
-                                        files={files}
+                                        files={state.files}
                                         onChange={onChange}
                                     />
                                 </Row>
@@ -117,7 +118,13 @@ export default class Step extends PureComponent<StepProps, {}> {
                         )
                     })}
 
-                {lastStep && <Web3message />}
+                {lastStep && (
+                    <StepRegisterContent
+                        tryAgain={tryAgain}
+                        toStart={toStart}
+                        state={state}
+                    />
+                )}
 
                 <div className={styles.actions}>
                     {this.previousButton()}

src/routes/Publish/StepRegisterContent.tsx

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import Web3message from '../../components/Web3message'
+import Spinner from '../../components/atoms/Spinner'
+
+interface StepRegisterContentProps {
+    tryAgain: any
+    toStart: any
+    state: any
+}
+
+export default class StepRegisterContent extends PureComponent<
+    StepRegisterContentProps,
+    {}
+> {
+    public publishingState = () => (
+        <Spinner message={'Please sign with your crypto wallet'} />
+    )
+
+    public errorState = () => (
+        <div>
+            Something went wrong,{' '}
+            <a onClick={() => this.props.tryAgain()}>try again</a>
+        </div>
+    )
+
+    public publishedState = () => (
+        <div>
+            Your asset is published! See it{' '}
+            <a href={'/asset/' + this.props.state.publishedDid}>here</a>, submit
+            another asset by clicking{' '}
+            <a onClick={() => this.props.toStart()}>here</a>
+        </div>
+    )
+
+    public render() {
+        return (
+            <>
+                <Web3message />
+
+                {this.props.state.isPublishing ? (
+                    this.publishingState()
+                ) : this.props.state.publishingError ? (
+                    this.errorState()
+                ) : this.props.state.isPublished ? (
+                    this.publishedState()
+                ) : (
+                    <div>Hello</div>
+                )}
+            </>
+        )
+    }
+}

src/routes/Publish/index.tsx

@@ -64,10 +64,6 @@ class Publish extends Component<{}, PublishState> {
         })
     }
 
-    private tryAgain = () => {
-        this.setState({ publishingError: '' })
-    }
-
     private next = () => {
         let { currentStep } = this.state
         const totalSteps = form.steps.length
@@ -83,6 +79,10 @@ class Publish extends Component<{}, PublishState> {
         this.setState({ currentStep })
     }
 
+    private tryAgain = () => {
+        this.setState({ publishingError: '' })
+    }
+
     private toStart = () => {
         this.setState({
             name: '',
@@ -162,68 +162,34 @@ class Publish extends Component<{}, PublishState> {
                 title="Publish"
                 description="Publish a new data set into the Ocean Protocol Network."
             >
-                {this.state.isPublishing ? (
-                    this.publishingState()
-                ) : this.state.publishingError ? (
-                    this.errorState()
-                ) : this.state.isPublished ? (
-                    this.publishedState()
-                ) : (
-                    <>
-                        <Progress
-                            steps={form.steps}
+                <Progress
+                    steps={form.steps}
+                    currentStep={this.state.currentStep}
+                />
+
+                <Form onSubmit={this.registerAsset}>
+                    {form.steps.map((step: any, index: number) => (
+                        <Step
+                            key={index}
+                            index={index}
+                            title={step.title}
+                            description={step.description}
                             currentStep={this.state.currentStep}
+                            fields={step.fields}
+                            inputChange={this.inputChange}
+                            inputToArrayChange={this.inputToArrayChange}
+                            state={this.state}
+                            next={this.next}
+                            prev={this.prev}
+                            totalSteps={form.steps.length}
+                            tryAgain={this.tryAgain}
+                            toStart={this.toStart}
                         />
-
-                        <Form onSubmit={this.registerAsset}>
-                            {form.steps.map((step: any, index: number) => (
-                                <Step
-                                    key={index}
-                                    index={index}
-                                    title={step.title}
-                                    description={step.description}
-                                    currentStep={this.state.currentStep}
-                                    fields={step.fields}
-                                    inputChange={this.inputChange}
-                                    inputToArrayChange={this.inputToArrayChange}
-                                    files={this.state.files}
-                                    state={this.state}
-                                    next={this.next}
-                                    prev={this.prev}
-                                    totalSteps={form.steps.length}
-                                    component={step.component}
-                                />
-                            ))}
-                        </Form>
-                    </>
-                )}
+                    ))}
+                </Form>
             </Route>
         )
     }
-
-    public publishingState = () => {
-        return <div>Please sign with your crypto wallet</div>
-    }
-
-    public errorState = () => {
-        return (
-            <div>
-                Something went wrong,{' '}
-                <a onClick={() => this.tryAgain()}>try again</a>
-            </div>
-        )
-    }
-
-    public publishedState = () => {
-        return (
-            <div>
-                Your asset is published! See it{' '}
-                <a href={'/asset/' + this.state.publishedDid}>here</a>, submit
-                another asset by clicking{' '}
-                <a onClick={() => this.toStart()}>here</a>
-            </div>
-        )
-    }
 }
 
 export default Publish