isWeb3 state, App loading, publish states, consume flow

src/App.tsx

@@ -21,6 +21,7 @@ declare global {
 interface AppState {
     isLogged: boolean
     isLoading: boolean
+    isWeb3: boolean
     web3: Web3
     ocean: {}
     startLogin: () => void
@@ -37,6 +38,7 @@ class App extends Component<{}, AppState> {
     public state = {
         isLogged: false,
         isLoading: true,
+        isWeb3: false,
         web3: new Web3(
             new Web3.providers.HttpProvider(
                 `${nodeScheme}://${nodeHost}:${nodePort}`
@@ -51,7 +53,6 @@ class App extends Component<{}, AppState> {
     }
 
     private startLoginProcess = async () => {
-        this.setState({ isLoading: true })
         if (window.web3) {
             const web3 = new Web3(window.web3.currentProvider)
             try {
@@ -59,6 +60,7 @@ class App extends Component<{}, AppState> {
                 if (accounts.length > 0) {
                     this.setState({
                         isLogged: true,
+                        isWeb3: true,
                         web3
                     })
                 } else {
@@ -66,6 +68,7 @@ class App extends Component<{}, AppState> {
                         await window.ethereum.enable()
                         this.setState({
                             isLogged: true,
+                            isWeb3: true,
                             web3
                         })
                     }
@@ -76,11 +79,11 @@ class App extends Component<{}, AppState> {
         } else {
             // no metamask/mist, show installation guide!
         }
-        this.setState({ isLoading: false })
     }
 
     private bootstrap = async () => {
         if (window.web3) {
+            this.setState({ isWeb3: true })
             const web3 = new Web3(window.web3.currentProvider)
             try {
                 const accounts = await web3.eth.getAccounts()
@@ -94,11 +97,18 @@ class App extends Component<{}, AppState> {
                 // continue with default
             }
         }
+        try {
             const { ocean } = await provideOcean()
             this.setState({
                 isLoading: false,
                 ocean
             })
+        } catch (e) {
+            // show loading error / unable to initialize ocean
+            this.setState({
+                isLoading: false
+            })
+        }
     }
 
     public render() {
@@ -109,9 +119,11 @@ class App extends Component<{}, AppState> {
                         <>
                             <Header />
 
+                            {!this.state.isLoading ? (
                                 <main className={styles.main}>
                                     <Routes />
                                 </main>
+                            ) : null}
 
                             <Footer />
                         </>

src/components/Web3message.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import Button from '../components/atoms/Button'
 import styles from './Web3message.module.scss'
+import { User } from '../context/User'
 
 export default class Web3message extends PureComponent {
     public render() {
@@ -12,7 +13,9 @@ export default class Web3message extends PureComponent {
 
         return (
             <>
-                {/* IF no Web3 */}
+                <User.Consumer>
+                    {states =>
+                        !states.isWeb3 ? (
                             <div className={styles.message}>
                                 <span className={styles.indicator} /> No Web3 Browser. For
                                 publishing an asset you need to use a Web3-capable plugin or
@@ -22,19 +25,16 @@ export default class Web3message extends PureComponent {
                                 </a>
                                 .
                             </div>
-
+                        ) : !states.isLogged ? (
-                {/* IF connected and account locked */}
                             <div className={styles.message}>
                                 <span className={styles.indicatorCloseEnough} /> Account
                                 locked. For publishing an asset you need to unlock your Web3
                                 account.
-                    <Button link>Unlock account</Button>
+                                <Button link onClick={states.startLogin}>Unlock account</Button>
                             </div>
-
+                        ) : states.isLogged ? (
-                {/* IF connected and unlocked */}
                             <div className={styles.message}>
-                    <span className={styles.indicatorActive} /> Connected with
+                                <span className={styles.indicatorActive} /> Connected with account
-                    account
                                 <span
                                     className={styles.account}
                                     title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
@@ -42,6 +42,9 @@ export default class Web3message extends PureComponent {
                                     0xfehz2u89n...
                                 </span>
                             </div>
+                        ) : null
+                    }
+                </User.Consumer>
             </>
         )
     }

src/context/User.ts

@@ -3,6 +3,7 @@ import React from 'react'
 export const User = React.createContext({
     isLogged: false,
     isLoading: false,
+    isWeb3: false,
     web3: {},
     ocean: {},
     startLogin: () => {

src/routes/Details.tsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
 import { User } from '../context/User'
+import quertString from 'query-string'
 
 interface DetailsState {
     ddo: any
@@ -26,6 +27,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
     }
 
     private purchaseAsset = async (ddo: any) => {
+        try {
             const account = await this.context.ocean.getAccounts()
             const service = ddo.findServiceByType('Access')
             const serviceAgreementSignatureResult: any = await this.context.ocean.signServiceAgreement(
@@ -33,22 +35,25 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                 service.serviceDefinitionId,
                 account[0]
             )
-        Logger.log(
-            'serviceAgreementSignatureResult',
-            serviceAgreementSignatureResult
-        )
-
             await this.context.ocean.initializeServiceAgreement(
                 ddo.id,
                 service.serviceDefinitionId,
                 serviceAgreementSignatureResult.serviceAgreementId,
                 serviceAgreementSignatureResult.serviceAgreementSignature,
-            (files: any) =>
+                (files: any) => {
-                Logger.log(
+                    files.forEach((file: any) => {
-                    `Got files, first files length in bytes: ${files[0].length}`
+                        const parsedUrl: any = quertString.parseUrl(file)
-                ),
+                        setTimeout(() => {
+                            // eslint-disable-next-line
+                            window.open(parsedUrl.query.url)
+                        }, 100)
+                    })
+                },
                 account[0]
             )
+        } catch (e) {
+            Logger.log('error', e)
+        }
     }
 
     private showDetails = (ddo: any) => {
@@ -56,7 +61,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
             <>
                 <div>{JSON.stringify(this.state.metadata)}</div>
 
-                <Button onClick={this.purchaseAsset(ddo)}>
+                <Button onClick={() => this.purchaseAsset(ddo)}>
                     Purchase asset
                 </Button>
             </>

src/routes/Publish.tsx

@@ -1,4 +1,5 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
+import { Logger } from '@oceanprotocol/squid'
 import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
@@ -22,7 +23,9 @@ interface PublishState {
     license?: string
     copyrightHolder?: string
     categories?: string[]
-    tags?: string[]
+    tags?: string[],
+    isPublishing?: boolean,
+    publishingError?: string
 }
 
 class Publish extends Component<{}, PublishState> {
@@ -36,7 +39,9 @@ class Publish extends Component<{}, PublishState> {
         type: 'dataset' as AssetType,
         license: '',
         copyrightHolder: '',
-        categories: ['']
+        categories: [''],
+        isPublishing: false,
+        publishingError: ''
     }
 
     public formFields = (entries: any[]) =>
@@ -80,8 +85,16 @@ class Publish extends Component<{}, PublishState> {
         })
     }
 
+    private tryAgain = () => {
+        this.setState({ publishingError: '' })
+    }
+
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
+        this.setState({
+            publishingError: '',
+            isPublishing: true
+        })
         const account = await this.context.ocean.getAccounts()
         const newAsset = {
             // OEP-08 Attributes
@@ -109,8 +122,18 @@ class Publish extends Component<{}, PublishState> {
                 AssetModel.additionalInformation
             )
         }
-
+        try {
             await this.context.ocean.registerAsset(newAsset, account[0])
+        } catch (e) {
+            // make readable errors
+            Logger.log('error:', e)
+            this.setState({
+                publishingError: e
+            })
+        }
+        this.setState({
+            isPublishing: false
+        })
     }
 
     public render() {
@@ -120,6 +143,11 @@ class Publish extends Component<{}, PublishState> {
             <Route title="Publish">
                 <Web3message />
 
+                {this.state.isPublishing ? (
+                    <div>Please sign with ctypto wallet</div>
+                ) : this.state.publishingError ? (
+                    <div>Something went wrong, <a onClick={() => this.tryAgain()}>try again</a></div>
+                ) : (
                     <Form
                         title={form.title}
                         description={form.description}
@@ -131,16 +159,18 @@ class Publish extends Component<{}, PublishState> {
                             {states =>
                                 states.isLogged ? (
                                     <Button primary>
-                                    Register asset (we are logged)
+                                        Register asset
                                     </Button>
                                 ) : (
-                                <Button primary onClick={states.startLogin}>
+                                    <Button onClick={states.startLogin}>
                                         Register asset (login first)
                                     </Button>
                                 )
                             }
                         </User.Consumer>
                     </Form>
+                )}
+
             </Route>
         )
     }

src/routes/Search.tsx

@@ -2,7 +2,7 @@ import queryString from 'query-string'
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import Route from '../components/templates/Route'
-import { provideOcean } from '../ocean'
+import { User } from '../context/User'
 
 interface SearchState {
     results: any[]
@@ -17,8 +17,6 @@ export default class Search extends Component<SearchProps, SearchState> {
     public state = { results: [] }
 
     public async componentDidMount() {
-        // temporary ocean init and asset retrieval
-        const { ocean } = await provideOcean()
         const searchParams = queryString.parse(this.props.location.search)
         const queryRequest: any = {
             offset: 100,
@@ -29,7 +27,7 @@ export default class Search extends Component<SearchProps, SearchState> {
                 }
             }
         }
-        const assets = await ocean.searchAssets(queryRequest)
+        const assets = await this.context.ocean.searchAssets(queryRequest)
         this.setState({ results: assets })
     }
 
@@ -56,3 +54,5 @@ export default class Search extends Component<SearchProps, SearchState> {
         )
     }
 }
+
+Search.contextType = User