finished state w redirects

src/components/Web3message.tsx

@@ -16,36 +16,55 @@ export default class Web3message extends PureComponent {
                 <User.Consumer>
                     {states =>
                         !states.isWeb3 ? (
-                            <div className={styles.message}>
+                            this.noWeb3()
-                                <span className={styles.indicator} /> No Web3 Browser. For
-                                publishing an asset you need to use a Web3-capable plugin or
-                                browser, like{' '}
-                                <a href="https://docs.oceanprotocol.com/tutorials/wallets/#how-to-setup-metamask">
-                                    MetaMask
-                                </a>
-                                .
-                            </div>
                         ) : !states.isLogged ? (
-                            <div className={styles.message}>
+                            this.unlockAccount(states)
-                                <span className={styles.indicatorCloseEnough} /> Account
-                                locked. For publishing an asset you need to unlock your Web3
-                                account.
-                                <Button link onClick={states.startLogin}>Unlock account</Button>
-                            </div>
                         ) : states.isLogged ? (
-                            <div className={styles.message}>
+                            this.haveAccount()
-                                <span className={styles.indicatorActive} /> Connected with account
-                                <span
-                                    className={styles.account}
-                                    title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
-                                >
-                                    0xfehz2u89n...
-                                </span>
-                            </div>
                         ) : null
                     }
                 </User.Consumer>
             </>
         )
     }
+
+    public noWeb3() {
+        return (
+            <div className={styles.message}>
+                <span className={styles.indicator} /> No Web3 Browser. For
+                publishing an asset you need to use a Web3-capable plugin or
+                browser, like{' '}
+                <a href="https://docs.oceanprotocol.com/tutorials/wallets/#how-to-setup-metamask">
+                    MetaMask
+                </a>
+                .
+            </div>
+        )
+    }
+
+    public unlockAccount(states: any) {
+        return (
+            <div className={styles.message}>
+                <span className={styles.indicatorCloseEnough} /> Account
+                locked. For publishing an asset you need to unlock your Web3
+                account.
+                <Button link onClick={states.startLogin}>Unlock account</Button>
+            </div>
+        )
+    }
+
+    public haveAccount() {
+        return (
+            <div className={styles.message}>
+                <span className={styles.indicatorActive} /> Connected with account
+                <span
+                    className={styles.account}
+                    title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
+                >
+                    0xfehz2u89n...
+                </span>
+            </div>
+        )
+    }
+
 }

src/routes/Publish.tsx

@@ -23,8 +23,10 @@ interface PublishState {
     license?: string
     copyrightHolder?: string
     categories?: string[]
-    tags?: string[],
+    tags?: string[]
-    isPublishing?: boolean,
+    isPublishing?: boolean
+    isPublished?: boolean
+    publishedDid?: string
     publishingError?: string
 }
 
@@ -41,6 +43,8 @@ class Publish extends Component<{}, PublishState> {
         copyrightHolder: '',
         categories: [''],
         isPublishing: false,
+        isPublished: false,
+        publishedDid: '',
         publishingError: ''
     }
 
@@ -89,6 +93,23 @@ class Publish extends Component<{}, PublishState> {
         this.setState({ publishingError: '' })
     }
 
+    private toStart = () => {
+        this.setState({
+            name: '',
+            dateCreated: new Date(),
+            description: '',
+            files: [''],
+            price: 0,
+            author: '',
+            type: 'dataset' as AssetType,
+            license: '',
+            copyrightHolder: '',
+            categories: [''],
+            isPublishing: false,
+            isPublished: false
+        })
+    }
+
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
         this.setState({
@@ -123,7 +144,12 @@ class Publish extends Component<{}, PublishState> {
             )
         }
         try {
-            await this.context.ocean.registerAsset(newAsset, account[0])
+            const asset = await this.context.ocean.registerAsset(newAsset, account[0])
+            Logger.log('asset:', asset)
+            this.setState({
+                publishedDid: asset.id,
+                isPublished: true
+            })
         } catch (e) {
             // make readable errors
             Logger.log('error:', e)
@@ -144,9 +170,11 @@ class Publish extends Component<{}, PublishState> {
                 <Web3message />
 
                 {this.state.isPublishing ? (
-                    <div>Please sign with ctypto wallet</div>
+                    this.publishingState()
                 ) : this.state.publishingError ? (
-                    <div>Something went wrong, <a onClick={() => this.tryAgain()}>try again</a></div>
+                    this.errorState()
+                ) : this.state.isPublished ? (
+                    this.publishedState()
                 ) : (
                     <Form
                         title={form.title}
@@ -174,6 +202,25 @@ class Publish extends Component<{}, PublishState> {
             </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>
+        )
+    }
+
 }
 
 Publish.contextType = User