packages updated, working user context

package.json

@@ -16,7 +16,6 @@
   },
   "dependencies": {
     "@oceanprotocol/squid": "^0.2.7",
-    "@types/web3": "^1.0.15",
     "query-string": "^6.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
@@ -24,14 +23,15 @@
     "web3": "^1.0.0-beta.37"
   },
   "devDependencies": {
-    "@types/jest": "23.3.12",
+    "@types/jest": "23.3.13",
-    "@types/node": "10.12.18",
+    "@types/node": "10.12.19",
     "@types/query-string": "^6.2.0",
-    "@types/react": "16.7.20",
+    "@types/react": "16.7.22",
     "@types/react-dom": "16.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "@types/web3": "^1.0.18",
     "node-sass": "^4.11.0",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.2",
     "prettier-stylelint": "^0.4.2",
     "react-scripts": "2.1.3",
     "stylelint-config-bigchaindb": "^1.2.1",

src/App.tsx

@@ -1,20 +1,103 @@
 import React, { Component } from 'react'
+import Web3 from 'web3'
 import styles from './App.module.scss'
-import { User, userDefaults } from './context/User'
+import { User } from './context/User'
+import Routes from './Routes'
 import './styles/global.scss'
 
-import Routes from './Routes'
+import {
+    nodeHost,
+    nodePort,
+    nodeScheme
+} from './config'
+
+interface IState {
+    isLogged: boolean,
+    web3: any,
+    startLogin: () => void
+}
+
+class App extends Component<{},IState> {
+    public startLogin: () => void
+    constructor(props: {}) {
+        super(props)
+        this.startLogin = (event?) => {
+            if (event) {
+                event.preventDefault()
+            }
+            this.startLoginProcess()
+        }
+        this.state = {
+            isLogged: false,
+            web3: {},
+            startLogin: this.startLogin
+        }
+    }
+
+    public async componentDidMount() {
+        this.bootstrap()
+    }
 
-class App extends Component {
     public render() {
         return (
             <div className={styles.app}>
-                <User.Provider value={userDefaults}>
+                <User.Provider value={this.state}>
                     <Routes />
                 </User.Provider>
             </div>
         )
     }
+
+    private startLoginProcess = async () => {
+        if((window as any).web3) {
+            const web3 = new Web3((window as any).web3.currentProvider)
+            try {
+                const accounts = await web3.eth.getAccounts()
+                if (accounts.length === 0 && (window as any).ethereum) {
+                    await (window as any).ethereum.enable()
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3
+                    }))
+                } else {
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3
+                    }))
+                }
+            } catch (e) {
+                this.setDefaultProvider()
+            }
+        } else {
+            this.setDefaultProvider()
+        }
+    }
+
+    private bootstrap = async () => {
+        if((window as any).web3) {
+            const web3 = new Web3((window as any).web3.currentProvider)
+            try {
+                const accounts = await web3.eth.getAccounts()
+                if (accounts.length > 0) {
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3
+                    }))
+                }
+            } catch (e) {
+                this.setDefaultProvider()
+            }
+        } else {
+            this.setDefaultProvider()
+        }
+    }
+
+    private setDefaultProvider = () => {
+        this.setState(state => ({
+            isLogged: false,
+            web3: new Web3(new Web3.providers.HttpProvider(`${nodeScheme}://${nodeHost}:${nodePort}`))
+        }))
+    }
 }
 
 export default App

src/context/User.ts

@@ -1,7 +1,6 @@
 import React from 'react'
 
-export const userDefaults = {
+export const User = React.createContext({
-    logged: false
+    isLogged: false,
-}
+    startLogin: () => {/* empty */}
-
+})
-export const User = React.createContext(userDefaults)

src/pages/Details.tsx

@@ -5,8 +5,8 @@ import Web3 from 'web3'
 import { provideOcean } from '../ocean'
 
 interface IState {
-    ddo?: any,
+    ddo: any,
-    metadata?: any
+    metadata: any
 }
 
 interface IProps {

src/pages/Home.tsx

@@ -3,7 +3,7 @@ import Button from '../components/atoms/Button'
 import styles from './Home.module.scss'
 
 interface IState {
-    search?: string
+    search: string
 }
 
 interface IProps {
@@ -31,9 +31,9 @@ class Home extends Component<IProps, IState> {
     }
 
     private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        this.setState({
+        this.setState(state => ({
-            [event.target.name]: event.target.value
+            search: event.target.value
-        })
+        }))
     }
 
     private searchAssets = (event: FormEvent<HTMLFormElement>) => {

src/pages/Publish.tsx

@@ -1,6 +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'
 
@@ -104,7 +105,13 @@ class Publish extends Component<{}, IState> {
                       </select>
                   </div>
                   <div>CopyrightHolder:<input type="text" name="copyrightHolder" value={this.state.copyrightHolder} onChange={this.inputChange} /></div>
-                  <div><Button>Register asset</Button></div>
+                  <User.Consumer>
+                      {states => ( /* tslint:disable-next-line */
+                          <div>
+                              {states.isLogged ? (<div><Button>Register asset (we are logged)</Button></div>) : (<div><button onClick={states.startLogin}>Register asset (login first)</button></div>)}
+                          </div>
+                      )}
+                  </User.Consumer>
                 </form>
             </div>
         )

src/pages/Search.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { provideOcean } from '../ocean'
 
 interface IState {
-    results?: any[]
+    results: any[]
 }
 
 interface IProps {
@@ -30,7 +30,7 @@ class Search extends Component<IProps, IState>  {
             }
         }
         const assets = await ocean.searchAssets(queryRequest)
-        this.setState({results:assets})
+        this.setState(state => ({results:assets}))
     }
 
     public render() {