From 5999d735a3d379ade7f4fb16d05f218cc356695c Mon Sep 17 00:00:00 2001 From: mihaisc Date: Mon, 4 May 2020 15:38:41 +0300 Subject: [PATCH] readme example not tested --- src/hooks/useCompute/ComputeOptions.tsx | 28 ++++++ src/hooks/useCompute/README.md | 76 ++++++++++++++++ src/hooks/useCompute/useCompute.ts | 116 +++++++++++++----------- src/index.ts | 2 + src/utils/index.ts | 13 +++ 5 files changed, 180 insertions(+), 55 deletions(-) create mode 100644 src/hooks/useCompute/ComputeOptions.tsx create mode 100644 src/hooks/useCompute/README.md create mode 100644 src/utils/index.ts diff --git a/src/hooks/useCompute/ComputeOptions.tsx b/src/hooks/useCompute/ComputeOptions.tsx new file mode 100644 index 0000000..40f5067 --- /dev/null +++ b/src/hooks/useCompute/ComputeOptions.tsx @@ -0,0 +1,28 @@ +export interface ComputeValue { + entrypoint: string + image: string + tag: string +} +export interface ComputeOption { + name: string + value: ComputeValue +} + +export const computeOptions: ComputeOption[] = [ + { + name: 'nodejs', + value: { + entrypoint: 'node $ALGO', + image: 'node', + tag: '10' + } + }, + { + name: 'python3.7', + value: { + entrypoint: 'python $ALGO', + image: 'oceanprotocol/algo_dockers', + tag: 'python-panda' + } + } +] diff --git a/src/hooks/useCompute/README.md b/src/hooks/useCompute/README.md new file mode 100644 index 0000000..c188975 --- /dev/null +++ b/src/hooks/useCompute/README.md @@ -0,0 +1,76 @@ +# `useCompute` + +The `OceanProvider` maintains a connection to the Ocean Protocol network in multiple steps: + +1. On mount, connect to Aquarius instance right away so any asset metadata can be retrieved before, and independent of any Web3 connections. +2. Once Web3 becomes available, a connection to all Ocean Protocol network components is established. +3. Once Ocean becomes available, spits out some info about it. + +Also provides a `useOcean` helper hook to access its context values from any component. + +## Usage + +```tsx +import React from 'react' +import { + useWeb3, + useOcean, + useMetadata, + useCompute, + computeOptions, + ComputeValue, + readFileContent +} from '@oceanprotocol/react' + +const did = 'did:op:0x000000000' + +export default function MyComponent() { + // Get web3 from built-in Web3Provider context + const { web3 } = useWeb3() + + // Get Ocean instance from built-in OceanProvider context + const { ocean, account } = useOcean() + + // Get metadata for this asset + const { title, metadata } = useMetadata(did) + + + // compute asset + const { compute, computeStep } = useCompute() + // raw code text + const [algorithmRawCode, setAlgorithmRawCode] = useState('') + const [computeContainer, setComputeContainer] = useState() + async function handleCompute() { + await consume(did,algorithmRawCode,computeContainer) + } + + async function onChangeHandler(event){ + const fileText = await readFileContent(files[0]) + setAlgorithmRawCode(fileText) + } + async function handleSelectChange(event: any) { + const comType = event.target.value + setComputeContainer(comType) + } + + return ( +
+

{title}

+

Price: {web3.utils.fromWei(metadata.main.price)}

+ +

Your account: {account}

+ + + + +
+ ) +} +``` diff --git a/src/hooks/useCompute/useCompute.ts b/src/hooks/useCompute/useCompute.ts index 60a0063..b025ce9 100644 --- a/src/hooks/useCompute/useCompute.ts +++ b/src/hooks/useCompute/useCompute.ts @@ -1,80 +1,86 @@ import { useState } from 'react' import { DID, MetaDataAlgorithm } from '@oceanprotocol/squid' import { useOcean } from '../../providers' +import { ComputeValue } from './ComputeOptions' interface UseCompute { - compute: (did: DID) => Promise - computeStep?: number - computeError?: string + compute: ( + did: DID, + algorithmRawCode: string, + computeContainer: ComputeValue + ) => Promise + computeStep?: number + computeError?: string } // TODO: customize for compute 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...', - 4: '3/3 Access granted. Consuming file...' + 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...' } const rawAlgorithmMeta: MetaDataAlgorithm = { - rawcode: `console.log('Hello world'!)`, - format: 'docker-image', - version: '0.1', - container: { - entrypoint: '', - image: '', - tag: '' - } + rawcode: `console.log('Hello world'!)`, + format: 'docker-image', + version: '0.1', + container: { + entrypoint: '', + image: '', + tag: '' + } } function useCompute(): UseCompute { - - const { ocean, account, accountId, config } = useOcean() - const [computeStep, setComputeStep] = useState() - const [computeError, setComputeError] = useState() + const { ocean, account, accountId, config } = useOcean() + const [computeStep, setComputeStep] = useState() + const [computeError, setComputeError] = useState() - async function compute(did: DID | string): Promise { - if (!ocean || !account) return + async function compute( + did: DID | string, + algorithmRawCode: string, + computeContainer: ComputeValue + ): Promise { + if (!ocean || !account) return - setComputeError(undefined) + setComputeError(undefined) - try { - const computeOutput = { - publishAlgorithmLog: false, - publishOutput: false, - brizoAddress: config.brizoAddress, - brizoUri: config.brizoUri, - metadataUri: config.aquariusUri, - nodeUri: config.nodeUri, - owner: accountId, - secretStoreUri: config.secretStoreUri - } + try { + const computeOutput = { + publishAlgorithmLog: false, + publishOutput: false, + brizoAddress: config.brizoAddress, + brizoUri: config.brizoUri, + metadataUri: config.aquariusUri, + nodeUri: config.nodeUri, + owner: accountId, + secretStoreUri: config.secretStoreUri + } - const agreement = await ocean.compute - .order(account, did as string) - .next((step: number) => setComputeStep(step)) + const agreement = await ocean.compute + .order(account, did as string) + .next((step: number) => setComputeStep(step)) - // rawAlgorithmMeta.container = computeContainer - // rawAlgorithmMeta.rawcode = 'algorithmRawCode' + rawAlgorithmMeta.container = computeContainer + rawAlgorithmMeta.rawcode = algorithmRawCode - await ocean.compute.start( - account, - agreement, - undefined, - rawAlgorithmMeta, - computeOutput - ) - - - } catch (error) { - setComputeError(error.message) - } finally { - setComputeStep(undefined) - } + await ocean.compute.start( + account, + agreement, + undefined, + rawAlgorithmMeta, + computeOutput + ) + } catch (error) { + setComputeError(error.message) + } finally { + setComputeStep(undefined) } + } - return { compute, computeStep, computeError } + return { compute, computeStep, computeError } } export { useCompute, UseCompute } diff --git a/src/index.ts b/src/index.ts index 441c499..779a417 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,3 +3,5 @@ import './@types/globals' export * from './providers' export * from './hooks' // export * from './components' + +export * from './utils' diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..144ae1e --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,13 @@ +export function readFileContent(file: File): Promise { + return new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onerror = () => { + reader.abort() + reject(new DOMException('Problem parsing input file.')) + } + reader.onload = () => { + resolve(reader.result as string) + } + reader.readAsText(file) + }) +}