consolidate balance check

src/components/organisms/AssetActions/Compute.tsx

@@ -1,6 +1,5 @@
-import React, { useState, ReactElement, useEffect } from 'react'
+import React, { useState, ReactElement } from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import compareAsBN, { Comparison } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import Dropzone from '../../atoms/Dropzone'
@@ -16,14 +15,21 @@ import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
+export default function Compute({
-  const { ocean, balance } = useOcean()
+  ddo,
+  isBalanceSufficient,
+  setPrice
+}: {
+  ddo: DDO
+  isBalanceSufficient: boolean
+  setPrice: (price: string) => void
+}): ReactElement {
+  const { ocean } = useOcean()
   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)
   const [computeType, setComputeType] = useState('')
   const [computeContainer, setComputeContainer] = useState({
     entrypoint: '',
@@ -33,7 +39,6 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
   const [algorithmRawCode, setAlgorithmRawCode] = useState('')
   const [isPublished, setIsPublished] = useState(false)
   const [file, setFile] = useState(null)
-  const [price, setPrice] = useState<string>()
 
   const isComputeButtonDisabled =
     isJobStarting ||
@@ -42,20 +47,6 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
     !ocean ||
     !isBalanceSufficient
 
-  useEffect(() => {
-    if (!price || !balance || !balance.ocean) return
-
-    const isFree = price === '0'
-
-    setIsBalanceSufficient(
-      isFree ? true : compareAsBN(balance.ocean, price, Comparison.gte)
-    )
-
-    return () => {
-      setIsBalanceSufficient(false)
-    }
-  }, [balance, price])
-
   const onDrop = async (files: any) => {
     setFile(files[0])
     const fileText = await readFileContent(files[0])

src/components/organisms/AssetActions/Consume.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import Button from '../../atoms/Button'
@@ -8,35 +8,23 @@ 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,
-  file
+  file,
+  isBalanceSufficient,
+  setPrice
 }: {
   ddo: DDO
   file: FileMetadata
+  isBalanceSufficient: boolean
+  setPrice: (price: string) => void
 }): ReactElement {
-  const { ocean, balance } = useOcean()
+  const { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
-  const [price, setPrice] = useState<string>()
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
 
   const isDisabled = !ocean || !isBalanceSufficient
 
-  useEffect(() => {
-    if (!price || !balance || !balance.ocean) return
-
-    const isFree = price === '0'
-    setIsBalanceSufficient(
-      isFree ? true : compareAsBN(balance.ocean, price, Comparison.gte)
-    )
-
-    return () => {
-      setIsBalanceSufficient(false)
-    }
-  }, [balance, price])
-
   if (consumeError) {
     toast.error(consumeError)
   }

src/components/organisms/AssetActions/index.tsx

@@ -1,10 +1,12 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
 import { MetadataMarket } from '../../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
+import { useOcean } from '@oceanprotocol/react'
+import compareAsBN, { Comparison } from '../../../utils/compareAsBN'
 
 export default function AssetActions({
   metadata,
@@ -13,12 +15,39 @@ export default function AssetActions({
   metadata: MetadataMarket
   ddo: DDO
 }): ReactElement {
+  const { balance } = useOcean()
+  const [price, setPrice] = useState<string>()
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
+
   const isCompute = Boolean(ddo.findServiceByType('compute'))
 
+  // Check user balance against price
+  useEffect(() => {
+    if (!price || !balance || !balance.ocean) return
+
+    const isFree = price === '0'
+    setIsBalanceSufficient(
+      isFree ? true : compareAsBN(balance.ocean, price, Comparison.gte)
+    )
+
+    return () => {
+      setIsBalanceSufficient(false)
+    }
+  }, [balance, price])
+
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} />
+    <Compute
+      ddo={ddo}
+      isBalanceSufficient={isBalanceSufficient}
+      setPrice={setPrice}
+    />
   ) : (
-    <Consume ddo={ddo} file={metadata.main.files[0]} />
+    <Consume
+      ddo={ddo}
+      isBalanceSufficient={isBalanceSufficient}
+      file={metadata.main.files[0]}
+      setPrice={setPrice}
+    />
   )
 
   const tabs = [