add ocean init to bootstrap and context

src/App.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Web3 from 'web3'
 import styles from './App.module.scss'
 import { User } from './context/User'
+import { provideOcean } from './ocean'
 import Routes from './Routes'
 import './styles/global.scss'
 
@@ -14,7 +15,8 @@ import {
 interface IState {
     isLogged: boolean,
     web3: any,
-    startLogin: () => void
+    ocean: {},
+    startLogin: () => void,
 }
 
 class App extends Component<{},IState> {
@@ -30,7 +32,8 @@ class App extends Component<{},IState> {
         this.state = {
             isLogged: false,
             web3: {},
-            startLogin: this.startLogin
+            ocean: {},
+            startLogin: this.startLogin,
         }
     }
 
@@ -55,9 +58,11 @@ class App extends Component<{},IState> {
                 const accounts = await web3.eth.getAccounts()
                 if (accounts.length === 0 && (window as any).ethereum) {
                     await (window as any).ethereum.enable()
+                    const { ocean } = await provideOcean()
                     this.setState(state => ({
                         isLogged: true,
-                        web3
+                        web3,
+                        ocean
                     }))
                 } else {
                     this.setState(state => ({
@@ -79,9 +84,11 @@ class App extends Component<{},IState> {
             try {
                 const accounts = await web3.eth.getAccounts()
                 if (accounts.length > 0) {
+                    const { ocean } = await provideOcean()
                     this.setState(state => ({
                         isLogged: true,
-                        web3
+                        web3,
+                        ocean
                     }))
                 }
             } catch (e) {

src/context/User.ts

@@ -2,5 +2,7 @@ import React from 'react'
 
 export const User = React.createContext({
     isLogged: false,
+    web3: {},
+    ocean: {},
     startLogin: () => {/* empty */}
 })

src/pages/Details.tsx

@@ -1,8 +1,7 @@
 import { Logger } from '@oceanprotocol/squid'
 import queryString from 'query-string'
 import React, { Component } from 'react'
-import Web3 from 'web3'
-import { provideOcean } from '../ocean'
+import { User } from '../context/User'
 
 interface IState {
     ddo: any,
@@ -19,9 +18,7 @@ class Details extends Component<IProps, IState>  {
     public state = { ddo: null, metadata: null }
 
     public async componentDidMount() {
-        // temporary ocean init and asset retrieval
-        const { ocean } = await provideOcean()
-        const ddo = await ocean.resolveDID(this.props.match.params.did)
+        const ddo = await this.context.ocean.resolveDID(this.props.match.params.did)
         const { metadata } = ddo.findServiceByType('Metadata')
         this.setState({ddo, metadata})
     }
@@ -35,22 +32,16 @@ class Details extends Component<IProps, IState>  {
     }
 
     private purchaseAsset = async (ddo: any) => {
-
-        const web3 = new Web3((window as any).web3.currentProvider)
-        await (window as any).ethereum.enable()
-
-        const { ocean } = await provideOcean()
-        const account = await ocean.getAccounts()
-
+        const account = await this.context.ocean.getAccounts()
         const service = ddo.findServiceByType('Access')
-        const serviceAgreementSignatureResult: any = await ocean
+        const serviceAgreementSignatureResult: any = await this.context.ocean
             .signServiceAgreement(
                 ddo.id,
                 service.serviceDefinitionId,
                 account[0])
         Logger.log('serviceAgreementSignatureResult', serviceAgreementSignatureResult)
 
-        await ocean
+        await this.context.ocean
             .initializeServiceAgreement(
                 ddo.id,
                 service.serviceDefinitionId,
@@ -71,4 +62,5 @@ class Details extends Component<IProps, IState>  {
     }
 }
 
+Details.contextType = User
 export default Details

src/pages/Publish.tsx

@@ -1,9 +1,7 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
-import Web3 from 'web3'
 import Button from '../components/atoms/Button'
 import { User } from '../context/User'
 import AssetModel from '../models/AssetModel'
-import { provideOcean } from '../ocean'
 
 type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
@@ -131,12 +129,7 @@ class Publish extends Component<{}, IState> {
 
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-
-        const web3 = new Web3((window as any).web3.currentProvider)
-        await (window as any).ethereum.enable()
-        const { ocean } = await provideOcean()
-        const account = await ocean.getAccounts()
-
+        const account = await this.context.ocean.getAccounts()
         const newAsset = {
             // OEP-08 Attributes
             // https://github.com/oceanprotocol/OEPs/tree/master/8
@@ -161,8 +154,9 @@ class Publish extends Component<{}, IState> {
             curation: Object.assign(AssetModel.curation),
             additionalInformation: Object.assign(AssetModel.additionalInformation)
         }
-        const ddo = await ocean.registerAsset(newAsset, account[0])
+        const ddo = await this.context.ocean.registerAsset(newAsset, account[0])
     }
 }
 
+Publish.contextType = User
 export default Publish