refactoring, context fix

src/hooks/useCompute/useCompute.ts

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { DID, MetaDataAlgorithm } from '@oceanprotocol/squid'
 import { useOcean } from '../../providers'
 import { ComputeValue } from './ComputeOptions'
-
+import { feedback } from './../../utils'
 interface UseCompute {
   compute: (
     did: DID,
@@ -10,17 +10,14 @@ interface UseCompute {
     computeContainer: ComputeValue
   ) => Promise<void>
   computeStep?: number
+  computeStepText?: string
   computeError?: string
 }
 
 // TODO: customize for compute
 export const computeFeedback: { [key in number]: string } = {
-  99: 'Decrypting file URL...',
-  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...',
-  4: '3/3 Access granted. Consuming file...'
+  ...feedback,
+  3: '3/3 Access granted. Starting job...',
 }
 const rawAlgorithmMeta: MetaDataAlgorithm = {
   rawcode: `console.log('Hello world'!)`,
@@ -36,6 +33,7 @@ const rawAlgorithmMeta: MetaDataAlgorithm = {
 function useCompute(): UseCompute {
   const { ocean, account, accountId, config } = useOcean()
   const [computeStep, setComputeStep] = useState<number | undefined>()
+  const [computeStepText, setComputeStepText] = useState<string | undefined>()
   const [computeError, setComputeError] = useState<string | undefined>()
 
   async function compute(
@@ -61,11 +59,12 @@ function useCompute(): UseCompute {
 
       const agreement = await ocean.compute
         .order(account, did as string)
-        .next((step: number) => setComputeStep(step))
+        .next((step: number) => { setComputeStep(step); setComputeStepText(computeFeedback[step]) })
 
       rawAlgorithmMeta.container = computeContainer
       rawAlgorithmMeta.rawcode = algorithmRawCode
-
+      setComputeStep(4)
+      setComputeStepText(computeFeedback[4])
       await ocean.compute.start(
         account,
         agreement,
@@ -73,6 +72,7 @@ function useCompute(): UseCompute {
         rawAlgorithmMeta,
         computeOutput
       )
+
     } catch (error) {
       setComputeError(error.message)
     } finally {
@@ -80,7 +80,7 @@ function useCompute(): UseCompute {
     }
   }
 
-  return { compute, computeStep, computeError }
+  return { compute, computeStep, computeStepText, computeError }
 }
 
 export { useCompute, UseCompute }

src/hooks/useConsume/useConsume.ts

@@ -1,22 +1,20 @@
 import { useState } from 'react'
 import { DID } from '@oceanprotocol/squid'
 import { useOcean } from '../../providers'
+import { feedback } from '../../utils'
 
 interface UseConsume {
   consume: (did: DID) => Promise<void>
   consumeStep?: number
+  consumeStepText?: string
   consumeError?: string
 }
 
 // TODO: do something with this object,
 // consumeStep should probably return one of those strings
 // instead of just a number
-export const feedback: { [key in number]: string } = {
-  99: 'Decrypting file URL...',
-  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...',
+export const consumeFeedback: { [key in number]: string } = {
+  ...feedback,
   4: '3/3 Access granted. Consuming file...'
 }
 
@@ -25,6 +23,7 @@ function useConsume(): UseConsume {
   // Otherwise we could just require `ocean` to be passed to `useConsume()`
   const { ocean, account, accountId } = useOcean()
   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> {
@@ -37,15 +36,18 @@ function useConsume(): UseConsume {
         accountId
       )
       const agreement = agreements.find((el: { did: string }) => el.did === did)
+      console.log('existing agre',agreement)
       const agreementId = agreement
         ? agreement.agreementId
         : await ocean.assets
-            .order(did as string, account)
-            .next((step: number) => setConsumeStep(step))
-
+          .order(did as string, account)
+          .next((step: number) => { setConsumeStep(step); setConsumeStepText(consumeFeedback[step]) })
+      console.log('aggrement ok', agreementId)
       // 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) {
       setConsumeError(error.message)
     } finally {
@@ -53,7 +55,7 @@ function useConsume(): UseConsume {
     }
   }
 
-  return { consume, consumeStep, consumeError }
+  return { consume, consumeStep, consumeStepText, consumeError }
 }
 
 export { useConsume, UseConsume }

src/providers/OceanProvider/OceanProvider.tsx

@@ -1,5 +1,4 @@
 import React, {
-  ReactNode,
   useContext,
   useState,
   useEffect,
@@ -9,6 +8,7 @@ import { Ocean, Config, Account, Aquarius, Logger } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 import Balance from '@oceanprotocol/squid/dist/node/models/Balance'
 import { connectOcean } from './utils'
+import { useWeb3 } from '../Web3Provider'
 
 enum OceanConnectionStatus {
   OCEAN_CONNECTION_ERROR = -1,
@@ -30,11 +30,9 @@ const OceanContext = createContext(null)
 
 function OceanProvider({
   config,
-  web3,
   children
 }: {
   config: Config
-  web3: Web3 | undefined
   children: any
 }): any {
   const [ocean, setOcean] = useState<Ocean | undefined>()
@@ -45,6 +43,7 @@ function OceanProvider({
   const [status, setStatus] = useState<OceanConnectionStatus>(
     OceanConnectionStatus.NOT_CONNECTED
   )
+  const { web3 } = useWeb3()
 
   // -------------------------------------------------------------
   // 1. On mount, connect to Aquarius instance right away
@@ -58,6 +57,7 @@ function OceanProvider({
   // 2. Once `web3` becomes available, connect to the whole network
   // -------------------------------------------------------------
   useEffect(() => {
+    console.log('ocean', web3)
     if (!web3) return
 
     async function init(): Promise<void> {

src/providers/Web3Provider/Web3Provider.tsx

@@ -22,7 +22,7 @@ function Web3Provider({ children }: { children: any }): any {
     async function initWeb3(): Promise<void> {
       const web3 = await getWeb3()
       setWeb3(web3)
-
+    
       const chainId = web3 && (await web3.eth.getChainId())
       setChainId(chainId)
     }
@@ -35,7 +35,7 @@ function Web3Provider({ children }: { children: any }): any {
     async function initUser(): Promise<void> {
       const account = await web3.eth.getAccounts()[0]
       setAccount(account)
-
+      if(!account) return
       const balance = await web3.eth.getBalance(account)
       setBalance(balance)
     }
@@ -66,5 +66,5 @@ function Web3Provider({ children }: { children: any }): any {
 // Helper hook to access the provider values
 const useWeb3 = (): Web3ProviderValue => useContext(Web3Context)
 
-export { Web3Provider, useWeb3 }
+export { Web3Provider, useWeb3,Web3ProviderValue }
 export default Web3Provider

src/utils/index.ts

@@ -11,3 +11,11 @@ export function readFileContent(file: File): Promise<string> {
     reader.readAsText(file)
   })
 }
+
+export const feedback: { [key in number]: string } = {
+  99: 'Decrypting file URL...',
+  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...',
+}