1
0
mirror of https://github.com/oceanprotocol/react.git synced 2024-12-23 01:29:49 +01:00

Merge branch 'master' into feature/curation

This commit is contained in:
mihaisc 2020-05-08 12:58:10 +03:00 committed by GitHub
commit 39f4d92661
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 215 additions and 14 deletions

View File

@ -1,2 +1,3 @@
export * from './useConsume'
export * from './useMetadata'
export * from './useCompute'

View File

@ -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'
}
}
]

View File

@ -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<ComputeValue>()
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 (
<div>
<h1>{title}</h1>
<p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
<p>Your account: {account}</p>
<label for="computeOptions">Select image to run the algorithm</label>
<select id="computeOptions" onChange={handleSelectChange}>
{computeOptions.map((x) => (
<option value={x.value}>{x.name}</option>
)
}
</select>
<input type="file" name="file" onChange={onChangeHandler}/>
<button onClick={handleCompute}>
{computeStep || 'Start compute job'}
</button>
</div>
)
}
```

View File

@ -0,0 +1,2 @@
export * from './useCompute'
export * from './ComputeOptions'

View File

@ -0,0 +1,87 @@
import { useState } from 'react'
import { DID, MetaDataAlgorithm } from '@oceanprotocol/squid'
import { useOcean } from '../../providers'
import { ComputeValue } from './ComputeOptions'
interface UseCompute {
compute: (
did: DID,
algorithmRawCode: string,
computeContainer: ComputeValue
) => Promise<void>
computeStep?: number
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...'
}
const rawAlgorithmMeta: MetaDataAlgorithm = {
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<number | undefined>()
const [computeError, setComputeError] = useState<string | undefined>()
async function compute(
did: DID | string,
algorithmRawCode: string,
computeContainer: ComputeValue
): Promise<void> {
if (!ocean || !account) return
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
}
const agreement = await ocean.compute
.order(account, did as string)
.next((step: number) => setComputeStep(step))
rawAlgorithmMeta.container = computeContainer
rawAlgorithmMeta.rawcode = algorithmRawCode
await ocean.compute.start(
account,
agreement,
undefined,
rawAlgorithmMeta,
computeOutput
)
} catch (error) {
setComputeError(error.message)
} finally {
setComputeStep(undefined)
}
}
return { compute, computeStep, computeError }
}
export { useCompute, UseCompute }
export default UseCompute

View File

@ -71,4 +71,4 @@ function useMetadata(did?: DID | string): UseMetadata {
}
export { useMetadata, UseMetadata }
export default useConsume
export default useMetadata

View File

@ -1,6 +1,6 @@
import './@types/globals'
export * from './providers'
export * from './hooks'
// export * from './components'
export * from './utils/curationUtils'
export * from './utils'

View File

@ -35,8 +35,8 @@ function OceanProvider({
}: {
config: Config
web3: Web3 | undefined
children: ReactNode
}): ReactNode {
children: any
}): any {
const [ocean, setOcean] = useState<Ocean | undefined>()
const [aquarius, setAquarius] = useState<Aquarius | undefined>()
const [account, setAccount] = useState<Account | undefined>()

View File

@ -1,10 +1,4 @@
import React, {
ReactNode,
useContext,
useState,
createContext,
useEffect
} from 'react'
import React, { useContext, useState, createContext, useEffect } from 'react'
import Web3 from 'web3'
import { getWeb3 } from './utils'
@ -18,7 +12,7 @@ interface Web3ProviderValue {
const Web3Context = createContext(null)
function Web3Provider({ children }: { children: ReactNode }): ReactNode {
function Web3Provider({ children }: { children: any }): any {
const [web3, setWeb3] = useState<Web3 | undefined>()
const [chainId, setChainId] = useState<number | undefined>()
const [account, setAccount] = useState<string | undefined>()

13
src/utils/index.ts Normal file
View File

@ -0,0 +1,13 @@
export function readFileContent(file: File): Promise<string> {
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)
})
}

View File

@ -10,5 +10,5 @@
"sourceMap": true,
"declaration": true
},
"files": ["./src/index.ts"]
"include": ["./src/@types", "./src/index.ts"]
}