mirror of
https://github.com/oceanprotocol/react.git
synced 2024-12-23 01:29:49 +01:00
refactoring, context fix
This commit is contained in:
parent
495013c021
commit
7658e56683
@ -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 }
|
||||
|
@ -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 }
|
||||
|
@ -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> {
|
||||
|
@ -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
|
||||
|
@ -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...',
|
||||
}
|
Loading…
Reference in New Issue
Block a user