fix hooks and tsc

package.json

@@ -6,7 +6,7 @@
   "module": "dist/esm/index.js",
   "scripts": {
     "start": "tsc --watch",
-    "build": "tsc && tsc -m es6 --outDir dist/esm",
+    "build": "tsc",
     "test": "npm run lint",
     "lint": "eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx .",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
@@ -22,7 +22,8 @@
   "dependencies": {
     "@oceanprotocol/squid": "^2.1.1",
     "axios": "^0.19.2",
-    "react": "^16.13.1"
+    "react": "^16.13.1",
+    "web3connect": "^1.0.0-beta.33"
   },
   "devDependencies": {
     "@release-it/bumper": "^1.1.0",

src/hooks/useCompute/useCompute.ts

@@ -17,7 +17,7 @@ interface UseCompute {
 // TODO: customize for compute
 export const computeFeedback: { [key in number]: string } = {
   ...feedback,
-  3: '3/3 Access granted. Starting job...',
+  3: '3/3 Access granted. Starting job...'
 }
 const rawAlgorithmMeta: MetaDataAlgorithm = {
   rawcode: `console.log('Hello world'!)`,
@@ -59,7 +59,10 @@ function useCompute(): UseCompute {
 
       const agreement = await ocean.compute
         .order(account, did as string)
-        .next((step: number) => { setComputeStep(step); setComputeStepText(computeFeedback[step]) })
+        .next((step: number) => {
+          setComputeStep(step)
+          setComputeStepText(computeFeedback[step])
+        })
 
       rawAlgorithmMeta.container = computeContainer
       rawAlgorithmMeta.rawcode = algorithmRawCode
@@ -72,7 +75,6 @@ function useCompute(): UseCompute {
         rawAlgorithmMeta,
         computeOutput
       )
-
     } catch (error) {
       setComputeError(error.message)
     } finally {

src/hooks/useConsume/useConsume.ts

@@ -4,10 +4,11 @@ import { useOcean } from '../../providers'
 import { feedback } from '../../utils'
 
 interface UseConsume {
-  consume: (did: DID) => Promise<void>
+  consume: (did: DID | string) => Promise<void>
   consumeStep?: number
   consumeStepText?: string
   consumeError?: string
+  isLoading: boolean
 }
 
 // TODO: do something with this object,
@@ -20,13 +21,14 @@ export const consumeFeedback: { [key in number]: string } = {
 
 function useConsume(): UseConsume {
   const { ocean, account, accountId } = useOcean()
+  const [isLoading, setIsLoading] = useState(false)
   const [consumeStep, setConsumeStep] = useState<number | undefined>()
   const [consumeStepText, setConsumeStepText] = useState<string | undefined>()
   const [consumeError, setConsumeError] = useState<string | undefined>()
 
   async function consume(did: DID | string): Promise<void> {
     if (!ocean || !account) return
-
+    setIsLoading(true)
     setConsumeError(undefined)
 
     try {
@@ -38,23 +40,26 @@ function useConsume(): UseConsume {
       const agreementId = agreement
         ? agreement.agreementId
         : await ocean.assets
-          .order(did as string, account)
+            .order(did as string, account)
-          .next((step: number) => { setConsumeStep(step); setConsumeStepText(consumeFeedback[step]); })
+            .next((step: number) => {
+              setConsumeStep(step)
+              setConsumeStepText(consumeFeedback[step])
+            })
 
       // manually add another step here for better UX
       setConsumeStep(4)
       setConsumeStepText(consumeFeedback[4])
       await ocean.assets.consume(agreementId, did as string, account, '')
-      console.log('consume ok')
     } catch (error) {
       console.log(error)
       setConsumeError(error.message)
     } finally {
       setConsumeStep(undefined)
+      setIsLoading(false)
     }
   }
 
-  return { consume, consumeStep, consumeStepText, consumeError }
+  return { consume, consumeStep, consumeStepText, consumeError, isLoading }
 }
 
 export { useConsume, UseConsume }

src/hooks/useSearch/useSearch.ts

@@ -9,7 +9,7 @@ import {
 
 // TODO searchText
 interface UseSearch {
-  searchQuery: (query: SearchQuery) => Promise<QueryResult>
+  searchWithQuery: (query: SearchQuery) => Promise<QueryResult>
   getPublishedList: (
     account: string,
     page: number,
@@ -22,7 +22,7 @@ function useSearch(): UseSearch {
   const { ocean, account, config } = useOcean()
   const [searchError, setSearchError] = useState<string | undefined>()
 
-  async function searchQuery(query: SearchQuery): Promise<QueryResult> {
+  async function searchWithQuery(query: SearchQuery): Promise<QueryResult> {
     if (!ocean || !account) return
 
     setSearchError(undefined)
@@ -56,13 +56,13 @@ function useSearch(): UseSearch {
         }
       } as SearchQuery
 
-      return await searchQuery(query)
+      return await searchWithQuery(query)
     } catch (error) {
       setSearchError(error.message)
     }
   }
 
-  return { searchQuery, getPublishedList, searchError }
+  return { searchWithQuery, getPublishedList, searchError }
 }
 
 export { useSearch, UseSearch }

src/providers/OceanProvider/OceanProvider.tsx

@@ -1,9 +1,4 @@
-import React, {
+import React, { useContext, useState, useEffect, createContext } from 'react'
-  useContext,
-  useState,
-  useEffect,
-  createContext
-} from 'react'
 import { Ocean, Config, Account, Aquarius, Logger } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 import Balance from '@oceanprotocol/squid/dist/node/models/Balance'
@@ -22,6 +17,7 @@ interface OceanProviderValue {
   account: Account
   accountId: string
   balance: Balance
+  balanceInOcean: string
   status: OceanConnectionStatus
   config: Config
 }
@@ -40,6 +36,7 @@ function OceanProvider({
   const [account, setAccount] = useState<Account | undefined>()
   const [accountId, setAccountId] = useState<string | undefined>()
   const [balance, setBalance] = useState<Balance | undefined>()
+  const [balanceInOcean, setBalanceInOcean] = useState<string | undefined>()
   const [status, setStatus] = useState<OceanConnectionStatus>(
     OceanConnectionStatus.NOT_CONNECTED
   )
@@ -57,7 +54,6 @@ function OceanProvider({
   // 2. Once `web3` becomes available, connect to the whole network
   // -------------------------------------------------------------
   useEffect(() => {
-
     if (!web3) return
 
     async function init(): Promise<void> {
@@ -70,6 +66,7 @@ function OceanProvider({
       setAccount(account)
       setAccountId(accountId)
       setBalance(balance)
+      setBalanceInOcean(`${balance?.ocn}`)
     }
 
     try {
@@ -104,6 +101,7 @@ function OceanProvider({
           account,
           accountId,
           balance,
+          balanceInOcean,
           status,
           config
         } as OceanProviderValue

src/providers/OceanProvider/utils.ts

@@ -17,7 +17,7 @@ export async function connectOcean(
     ...config
   })
   Logger.debug('Ocean instance ready.')
-
+  // TODO : ocean was not connected and yet i got here and account was undefined so getId() threw an unmanaged error
   const oceanAccounts = await ocean.accounts.list()
   const account = oceanAccounts[0]
   const accountId = account.getId()

src/providers/Web3Provider/Web3Provider.tsx

@@ -1,22 +1,37 @@
 import React, { useContext, useState, createContext, useEffect } from 'react'
 import Web3 from 'web3'
+import Web3Connect from 'web3connect'
 import { getWeb3 } from './utils'
+import Core from 'web3connect/lib/core'
 
+export enum InjectedProviderStatus {
+  NOT_AVAILABLE = -1,
+  NOT_CONNECTED = 0,
+  CONNECTED = 1
+}
 interface Web3ProviderValue {
   web3: Web3 | undefined
+  web3Connect: Core
   account: string | undefined
   balance: string | undefined
   chainId: number | undefined
+  ethProviderStatus: InjectedProviderStatus
   enable: () => void
 }
 
 const Web3Context = createContext(null)
 
+// TODO: this will have to be updated to web3modal
 function Web3Provider({ children }: { children: any }): any {
   const [web3, setWeb3] = useState<Web3 | undefined>()
   const [chainId, setChainId] = useState<number | undefined>()
   const [account, setAccount] = useState<string | undefined>()
   const [balance, setBalance] = useState<string | undefined>()
+  const [ethProvider, setEthProvider] = useState<any>(null)
+  const [ethProviderStatus, setEthProviderStatus] = useState(
+    InjectedProviderStatus.NOT_AVAILABLE
+  )
+  const [web3Connect, setWeb3Connect] = useState<Core>(null)
 
   useEffect(() => {
     async function initWeb3(): Promise<void> {
@@ -29,18 +44,89 @@ function Web3Provider({ children }: { children: any }): any {
     initWeb3()
   }, [])
 
-  useEffect(() => {
+  function init(networkId?: string | number) {
-    if (!web3) return
+    const instance = new Web3Connect.Core({
+      network: `${networkId}`,
+      providerOptions: {}
+    })
+    setWeb3Connect(instance)
 
-    async function initUser(): Promise<void> {
+    if (Web3Connect.checkInjectedProviders().injectedAvailable) {
-      const account = await web3.eth.getAccounts()[0]
+      setEthProviderStatus(InjectedProviderStatus.NOT_CONNECTED)
-      setAccount(account)
-      if(!account) return
-      const balance = await web3.eth.getBalance(account)
-      setBalance(balance)
     }
-    initUser()
+  }
-  }, [web3])
+
+  // On mount setup Web3Connect instance & check for injected provider
+  useEffect(() => {
+    init()
+  }, [])
+
+  async function getAccount(web3: Web3) {
+    const accounts = await web3.eth.getAccounts()
+    return accounts[0]
+  }
+
+  async function getBalance(web3: Web3, address: string) {
+    const balance = await web3.eth.getBalance(address)
+    return Web3.utils.fromWei(balance)
+  }
+
+  //
+  // Listen for provider, account & network changes
+  // and react to it
+  //
+  const handleConnect = async (provider: any) => {
+    console.debug("Handling 'connect' event with payload", provider)
+    setEthProvider(provider)
+    setEthProviderStatus(InjectedProviderStatus.CONNECTED)
+
+    const web3 = new Web3(provider)
+    setWeb3(web3)
+
+    const account = await getAccount(web3)
+    setAccount(account)
+
+    const balance = await getBalance(web3, account)
+    setBalance(balance)
+  }
+
+  const handleAccountsChanged = async (accounts: string[]) => {
+    console.debug("Handling 'accountsChanged' event with payload", accounts)
+    if (accounts.length > 0) {
+      setAccount(accounts[0])
+
+      if (web3) {
+        const balance = await getBalance(web3, accounts[0])
+        setBalance(balance)
+      }
+    }
+  }
+
+  const handleNetworkChanged = async (networkId: string | number) => {
+    console.debug("Handling 'networkChanged' event with payload", networkId)
+    ethProvider.autoRefreshOnNetworkChange = false
+    init(networkId)
+    handleConnect(ethProvider)
+  }
+
+  //
+  // Setup event listeners.
+  // Web3Connect only supports a 'connect', 'error', and 'close' event,
+  // so we use the injected provider events to handle the rest.
+  //
+  useEffect(() => {
+    web3Connect && web3Connect.on('connect', handleConnect)
+
+    if (ethProvider) {
+      ethProvider.on('accountsChanged', handleAccountsChanged)
+      ethProvider.on('networkChanged', handleNetworkChanged)
+
+      return () => {
+        ethProvider.removeListener('accountsChanged', handleAccountsChanged)
+        ethProvider.removeListener('networkChanged', handleNetworkChanged)
+      }
+    }
+  }, [web3, web3Connect, ethProvider])
 
   async function enable(): Promise<boolean> {
     try {
@@ -56,7 +142,17 @@ function Web3Provider({ children }: { children: any }): any {
 
   return (
     <Web3Context.Provider
-      value={{ web3, chainId, account, balance, enable } as Web3ProviderValue}
+      value={
+        {
+          web3,
+          web3Connect,
+          chainId,
+          account,
+          balance,
+          ethProviderStatus,
+          enable
+        } as Web3ProviderValue
+      }
     >
       {children}
     </Web3Context.Provider>
@@ -66,5 +162,5 @@ function Web3Provider({ children }: { children: any }): any {
 // Helper hook to access the provider values
 const useWeb3 = (): Web3ProviderValue => useContext(Web3Context)
 
-export { Web3Provider, useWeb3,Web3ProviderValue }
+export { Web3Provider, useWeb3, Web3ProviderValue }
 export default Web3Provider

src/utils/index.ts

@@ -17,5 +17,5 @@ export const feedback: { [key in number]: string } = {
   0: '1/3 Asking for agreement signature...',
   1: '1/3 Agreement initialized.',
   2: '2/3 Asking for two payment confirmations...',
-  3: '2/3 Payment confirmed. Requesting access...',
+  3: '2/3 Payment confirmed. Requesting access...'
 }

tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["es2015", "dom"],
     "moduleResolution": "node",
     "outDir": "dist",
-    "jsx": "preserve",
+    "jsx": "react",
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": true