diff --git a/src/hooks/useCompute/useCompute.ts b/src/hooks/useCompute/useCompute.ts index 1e392be..a591c47 100644 --- a/src/hooks/useCompute/useCompute.ts +++ b/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 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() + const [computeStepText, setComputeStepText] = useState() const [computeError, setComputeError] = useState() 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 } diff --git a/src/hooks/useConsume/useConsume.ts b/src/hooks/useConsume/useConsume.ts index 540d274..c54eafd 100644 --- a/src/hooks/useConsume/useConsume.ts +++ b/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 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() + const [consumeStepText, setConsumeStepText] = useState() const [consumeError, setConsumeError] = useState() async function consume(did: DID | string): Promise { @@ -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 } diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index 6937bdc..eb44efc 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/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() @@ -45,6 +43,7 @@ function OceanProvider({ const [status, setStatus] = useState( 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 { diff --git a/src/providers/Web3Provider/Web3Provider.tsx b/src/providers/Web3Provider/Web3Provider.tsx index 6fefb7f..aac2314 100644 --- a/src/providers/Web3Provider/Web3Provider.tsx +++ b/src/providers/Web3Provider/Web3Provider.tsx @@ -22,7 +22,7 @@ function Web3Provider({ children }: { children: any }): any { async function initWeb3(): Promise { 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 { 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 diff --git a/src/utils/index.ts b/src/utils/index.ts index 144ae1e..3f1eec1 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -11,3 +11,11 @@ export function readFileContent(file: File): Promise { 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...', +} \ No newline at end of file