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
             }
         }
-        const { ocean } = await provideOcean()
-        this.setState({
-            isLoading: false,
-            ocean
-        })
+        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 />
 
-                            <main className={styles.main}>
-                                <Routes />
-                            </main>
+                            {!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,36 +13,38 @@ export default class Web3message extends PureComponent {
 
         return (
             <>
-                {/* IF no Web3 */}
-                <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>
-
-                {/* 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>
-                </div>
-
-                {/* IF connected and unlocked */}
-                <div className={styles.message}>
-                    <span className={styles.indicatorActive} /> Connected with
-                    account
-                    <span
-                        className={styles.account}
-                        title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
-                    >
-                        0xfehz2u89n...
-                    </span>
-                </div>
+                <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
+                                browser, like{' '}
+                                <a href="https://docs.oceanprotocol.com/tutorials/wallets/#how-to-setup-metamask">
+                                    MetaMask
+                                </a>
+                                .
+                            </div>
+                        ) : !states.isLogged ? (
+                            <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>
+                        ) : states.isLogged ? (
+                            <div className={styles.message}>
+                                <span className={styles.indicatorActive} /> Connected with account
+                                <span
+                                    className={styles.account}
+                                    title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
+                                >
+                                    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,29 +27,33 @@ export default class Details extends Component<DetailsProps, DetailsState> {
     }
 
     private purchaseAsset = async (ddo: any) => {
-        const account = await this.context.ocean.getAccounts()
-        const service = ddo.findServiceByType('Access')
-        const serviceAgreementSignatureResult: any = await this.context.ocean.signServiceAgreement(
-            ddo.id,
-            service.serviceDefinitionId,
-            account[0]
-        )
-        Logger.log(
-            'serviceAgreementSignatureResult',
-            serviceAgreementSignatureResult
-        )
-
-        await this.context.ocean.initializeServiceAgreement(
-            ddo.id,
-            service.serviceDefinitionId,
-            serviceAgreementSignatureResult.serviceAgreementId,
-            serviceAgreementSignatureResult.serviceAgreementSignature,
-            (files: any) =>
-                Logger.log(
-                    `Got files, first files length in bytes: ${files[0].length}`
-                ),
-            account[0]
-        )
+        try {
+            const account = await this.context.ocean.getAccounts()
+            const service = ddo.findServiceByType('Access')
+            const serviceAgreementSignatureResult: any = await this.context.ocean.signServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                account[0]
+            )
+            await this.context.ocean.initializeServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                serviceAgreementSignatureResult.serviceAgreementId,
+                serviceAgreementSignatureResult.serviceAgreementSignature,
+                (files: any) => {
+                    files.forEach((file: any) => {
+                        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
             )
         }
-
-        await this.context.ocean.registerAsset(newAsset, account[0])
+        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,27 +143,34 @@ class Publish extends Component<{}, PublishState> {
             <Route title="Publish">
                 <Web3message />
 
-                <Form
-                    title={form.title}
-                    description={form.description}
-                    onSubmit={this.registerAsset}
-                >
-                    {this.formFields(entries)}
+                {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}
+                        onSubmit={this.registerAsset}
+                    >
+                        {this.formFields(entries)}
+
+                        <User.Consumer>
+                            {states =>
+                                states.isLogged ? (
+                                    <Button primary>
+                                        Register asset
+                                    </Button>
+                                ) : (
+                                    <Button onClick={states.startLogin}>
+                                        Register asset (login first)
+                                    </Button>
+                                )
+                            }
+                        </User.Consumer>
+                    </Form>
+                )}
 
-                    <User.Consumer>
-                        {states =>
-                            states.isLogged ? (
-                                <Button primary>
-                                    Register asset (we are logged)
-                                </Button>
-                            ) : (
-                                <Button primary 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