output event messages during publishing flow

client/src/routes/Publish/Step.tsx

@@ -154,7 +154,13 @@ export default class Step extends PureComponent<StepProps, {}> {
                     {this.nextButton()}
 
                     {lastStep && (
-                        <Button disabled={!this.context.isLogged} primary>
+                        <Button
+                            disabled={
+                                !this.context.isLogged ||
+                                this.props.state.isPublishing
+                            }
+                            primary
+                        >
                             Register asset
                         </Button>
                     )}

client/src/routes/Publish/StepRegisterContent.tsx

@@ -4,6 +4,17 @@ import Spinner from '../../components/atoms/Spinner'
 import Button from '../../components/atoms/Button'
 import styles from './StepRegisterContent.module.scss'
 
+export const messages: any = {
+    0: '1/4<br />Encrypting files...',
+    1: '1/4<br />Successfully encrypted files.',
+    2: '2/4<br />Generating proof...',
+    3: '2/4<br />Successfully generated proof.',
+    4: '3/4<br /> Registering DID...',
+    5: '3/4<br /> Successfully registered DID.',
+    6: '4/4<br /> Storing DDO...',
+    7: '4/4<br /> Successfully stored DDO.'
+}
+
 interface StepRegisterContentProps {
     tryAgain(): void
     toStart(): void
@@ -12,6 +23,7 @@ interface StepRegisterContentProps {
         isPublishing: boolean
         publishingError: string
         isPublished: boolean
+        publishingStep: number
     }
     content?: string
 }
@@ -20,9 +32,13 @@ export default class StepRegisterContent extends PureComponent<
     StepRegisterContentProps,
     {}
 > {
-    public publishingState = () => (
-        <Spinner message={'Please sign with your crypto wallet'} />
-    )
+    public publishingState = () => {
+        const { publishingStep } = this.props.state
+
+        const message = messages[publishingStep]
+
+        return <Spinner message={message} />
+    }
 
     public errorState = () => (
         <div className={styles.message}>

client/src/routes/Publish/index.tsx

@@ -30,11 +30,14 @@ interface PublishState {
     isPublished?: boolean
     publishedDid?: string
     publishingError?: string
+    publishingStep?: number
     currentStep?: number
     validationStatus?: any
 }
 
-class Publish extends Component<{}, PublishState> {
+export default class Publish extends Component<{}, PublishState> {
+    public static contextType = User
+
     public state = {
         currentStep: 1,
         name: '',
@@ -51,6 +54,7 @@ class Publish extends Component<{}, PublishState> {
         isPublished: false,
         publishedDid: '',
         publishingError: '',
+        publishingStep: 0,
         validationStatus: {
             1: { name: false, files: false, allFieldsValid: false },
             2: {
@@ -126,6 +130,7 @@ class Publish extends Component<{}, PublishState> {
             categories: '',
             isPublishing: false,
             isPublished: false,
+            publishingStep: 0,
             currentStep: 1
         })
     }
@@ -251,14 +256,15 @@ class Publish extends Component<{}, PublishState> {
 
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        ReactGA.event({
-            category: 'Publish',
-            action: 'registerAsset-start'
-        })
+
+        ReactGA.event({ category: 'Publish', action: 'registerAsset-start' })
+
         this.setState({
             publishingError: '',
-            isPublishing: true
+            isPublishing: true,
+            publishingStep: 0
         })
+
         const { ocean } = this.context
         const account = await ocean.accounts.list()
         const newAsset = {
@@ -286,32 +292,33 @@ class Publish extends Component<{}, PublishState> {
         }
 
         try {
-            const asset = await this.context.ocean.assets.create(
-                newAsset,
-                account[0]
-            )
+            const asset = await this.context.ocean.assets
+                .create(newAsset, account[0])
+                .next((publishingStep: number) =>
+                    this.setState({ publishingStep })
+                )
+
             this.setState({
                 publishedDid: asset.id,
                 isPublished: true
             })
+
             ReactGA.event({
                 category: 'Publish',
-                action: 'registerAsset-end' + asset.id
+                action: `registerAsset-end ${asset.id}`
             })
-        } catch (e) {
+        } catch (error) {
             // make readable errors
-            Logger.log('error:', e)
-            this.setState({
-                publishingError: e.message
-            })
+            Logger.error('error:', error.message)
+            this.setState({ publishingError: error.message })
+
             ReactGA.event({
                 category: 'Publish',
-                action: 'registerAsset-error' + e.message
+                action: `registerAsset-error ${error.message}`
             })
         }
-        this.setState({
-            isPublishing: false
-        })
+
+        this.setState({ isPublishing: false })
     }
 
     public render() {
@@ -355,6 +362,3 @@ class Publish extends Component<{}, PublishState> {
         )
     }
 }
-
-Publish.contextType = User
-export default Publish