refactor Compute for new hooks

src/components/atoms/File.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
+import { File as FileMetadata } from '@oceanprotocol/lib'
 import filesize from 'filesize'
 import classNames from 'classnames/bind'
 import cleanupContentType from '../../utils/cleanupContentType'

src/components/organisms/AssetActions/Compute.tsx

@@ -9,26 +9,21 @@ import Price from '../../atoms/Price'
 import {
   computeOptions,
   useCompute,
-  readFileContent
+  readFileContent,
+  useMetadata,
+  useOcean
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
 import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
-import { MetadataMarket } from '../../../@types/Metadata'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({
-  did,
-  metadata,
-  balance,
-  ocean
-}: {
-  did: string
-  metadata: MetadataMarket
-  balance: string | null
-  ocean: Ocean | null
-}): ReactElement {
+export default function Compute({ did }: { did: string }): ReactElement {
+  const { ocean } = useOcean()
+  const { ddo } = useMetadata(did)
   const { compute, isLoading, computeStepText, computeError } = useCompute()
+  const computeService = ddo.findServiceByType('compute').attributes.main
+
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')
   const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
@@ -41,11 +36,10 @@ export default function Compute({
   const [algorithmRawCode, setAlgorithmRawCode] = useState('')
   const [isPublished, setIsPublished] = useState(false)
   const [file, setFile] = useState(null)
-
-  const { price } = metadata.main
-  const isFree = price === '0'
-
   const [isTermsAgreed, setIsTermsAgreed] = useState(true)
+
+  const isFree = computeService.cost === '0'
+
   const isComputeButtonDisabled =
     isJobStarting ||
     file === null ||
@@ -54,13 +48,13 @@ export default function Compute({
     !isBalanceSufficient ||
     !isTermsAgreed
 
-  useEffect(() => {
-    setIsBalanceSufficient(
-      isFree ||
-        (balance !== null &&
-          compareAsBN(balance, fromWei(price), Comparisson.gte))
-    )
-  }, [balance])
+  // useEffect(() => {
+  //   setIsBalanceSufficient(
+  //     isFree ||
+  //       (balance !== null &&
+  //         compareAsBN(balance, fromWei(computeService.cost), Comparisson.gte))
+  //   )
+  // }, [balance])
 
   const onDrop = async (files: any) => {
     setFile(files[0])
@@ -80,11 +74,18 @@ export default function Compute({
   const startJob = async () => {
     try {
       if (!ocean) return
+
       setIsJobStarting(true)
       setIsPublished(false)
       setError('')
 
-      await compute(did, algorithmRawCode, computeContainer)
+      await compute(
+        did,
+        computeService,
+        ddo.dataToken,
+        algorithmRawCode,
+        computeContainer
+      )
 
       setIsPublished(true)
       setFile(null)
@@ -97,7 +98,7 @@ export default function Compute({
 
   return (
     <div className={styles.compute}>
-      <Price price={price} />
+      <Price price={computeService.cost} />
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import { fromWei } from 'web3-utils'
 import { toast } from 'react-toastify'
+import { File as FileMetadata } from '@oceanprotocol/lib'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Button from '../../atoms/Button'
 import File from '../../atoms/File'
@@ -9,17 +10,15 @@ import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../../atoms/Loader'
 import { useOcean, useConsume, useMetadata } from '@oceanprotocol/react'
-import { MetadataMarket } from '../../../@types/Metadata'
 
 export default function Consume({
   did,
-  metadata
+  file
 }: {
   did: string
-  metadata: MetadataMarket
+  file: FileMetadata
 }): ReactElement {
   const { ddo } = useMetadata(did)
-  const file = metadata.main.files[0]
   const { cost } = ddo.findServiceByType('access').attributes.main
 
   const { ocean } = useOcean()

src/components/organisms/AssetActions/index.tsx

@@ -3,7 +3,6 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
-import { useOcean } from '@oceanprotocol/react'
 import { MetadataMarket } from '../../../@types/Metadata'
 
 export default function AssetActions({
@@ -13,7 +12,6 @@ export default function AssetActions({
   metadata: MetadataMarket
   did: string
 }): ReactElement {
-  // const { ocean, balanceInOcean } = useOcean()
   const { access } = metadata.additionalInformation
   const isCompute = access && access === 'Compute'
 
@@ -26,15 +24,9 @@ export default function AssetActions({
       <div className={styles.tabContent}>
         <TabPanel>
           {isCompute ? (
-            // <Compute
-            //   did={did}
-            //   metadata={metadata}
-            //   ocean={ocean}
-            //   balance={balanceInOcean}
-            // />
-            'Compute Me'
+            <Compute did={did} />
           ) : (
-            <Consume did={did} metadata={metadata} />
+            <Consume did={did} file={metadata.main.files[0]} />
           )}
         </TabPanel>
         <TabPanel>Trade Me</TabPanel>