lift price up, handle balance check

src/components/atoms/Price/index.tsx

@@ -13,11 +13,13 @@ const cx = classNames.bind(styles)
 export default function Price({
   ddo,
   className,
-  small
+  small,
+  setPriceOutside
 }: {
   ddo: DDO
   className?: string
   small?: boolean
+  setPriceOutside?: (price: string) => void
 }): ReactElement {
   const { chainId } = useOcean()
   const { getBestPrice } = useMetadata()
@@ -27,6 +29,7 @@ export default function Price({
     async function init() {
       const price = await getBestPrice(ddo.dataToken)
       setPrice(price)
+      setPriceOutside && setPriceOutside(price)
     }
     init()
   }, [chainId])

src/components/organisms/AssetActions/Compute.tsx

@@ -1,6 +1,6 @@
-import React, { useState, ReactElement } from 'react'
+import React, { useState, ReactElement, useEffect } from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
+import compareAsBN, { Comparison } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import Dropzone from '../../atoms/Dropzone'
@@ -17,7 +17,7 @@ import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
 export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
-  const { ocean } = useOcean()
+  const { ocean, balance } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
   const computeService = ddo.findServiceByType('compute').attributes.main
 
@@ -34,8 +34,9 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
   const [isPublished, setIsPublished] = useState(false)
   const [file, setFile] = useState(null)
   const [isTermsAgreed, setIsTermsAgreed] = useState(true)
+  const [price, setPrice] = useState<string>()
 
-  // const isFree = price === '0'
+  const isFree = price === '0'
 
   const isComputeButtonDisabled =
     isJobStarting ||
@@ -45,13 +46,14 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
     !isBalanceSufficient ||
     !isTermsAgreed
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   setIsBalanceSufficient(
+    if (!price || !balance || !balance.ocean) return
-  //     isFree ||
+    setIsBalanceSufficient(compareAsBN(balance.ocean, price, Comparison.gte))
-  //       (balance !== null &&
+
-  //         compareAsBN(balance, fromWei(computeService.cost), Comparisson.gte))
+    return () => {
-  //   )
+      setIsBalanceSufficient(false)
-  // }, [balance])
+    }
+  }, [balance, price])
 
   const onDrop = async (files: any) => {
     setFile(files[0])
@@ -95,7 +97,7 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <div className={styles.compute}>
-      <Price ddo={ddo} />
+      <Price ddo={ddo} setPriceOutside={setPrice} />
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import Button from '../../atoms/Button'
@@ -8,6 +8,7 @@ import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../../atoms/Loader'
 import { useOcean, useConsume } from '@oceanprotocol/react'
+import compareAsBN, { Comparison } from '../../../utils/compareAsBN'
 
 export default function Consume({
   ddo,
@@ -16,9 +17,23 @@ export default function Consume({
   ddo: DDO
   file: FileMetadata
 }): ReactElement {
-  const { ocean } = useOcean()
+  const { ocean, balance } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
-  const isDisabled = !ocean
+  const [price, setPrice] = useState<string>()
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
+
+  const isFree = price === '0'
+  const isDisabled = !ocean || !isBalanceSufficient
+
+  useEffect(() => {
+    if (!price || !balance || !balance.ocean) return
+
+    setIsBalanceSufficient(compareAsBN(balance.ocean, price, Comparison.gte))
+
+    return () => {
+      setIsBalanceSufficient(false)
+    }
+  }, [balance, price])
 
   if (consumeError) {
     toast.error(consumeError)
@@ -44,7 +59,7 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          <Price ddo={ddo} />
+          <Price ddo={ddo} setPriceOutside={setPrice} />
           <PurchaseButton />
         </div>
       </div>

src/utils/compareAsBN.ts

@@ -1,6 +1,6 @@
 import BN from 'bn.js'
 
-export enum Comparisson {
+export enum Comparison {
   'lt' = 'lt',
   'lte' = 'lte',
   'gt' = 'gt',
@@ -8,14 +8,14 @@ export enum Comparisson {
   'eq' = 'eq'
 }
 
-// Run the corresponding bn.js comparisson:
+// Run the corresponding bn.js comparison:
 // https://github.com/indutny/bn.js/#utilities
 export default function compareAsBN(
   a: string,
   b: string,
-  comparisson: Comparisson
+  comparison: Comparison
-) {
+): boolean {
   const aBN = new BN(a)
   const bBN = new BN(b)
-  return aBN[comparisson](bBN)
+  return aBN[comparison](bBN)
 }