refactor consume

src/components/organisms/AssetActions/Consume.module.css

@@ -19,3 +19,9 @@
 .feedback {
   width: 100%;
 }
+
+.hasTokens {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin-top: calc(var(--spacer) / 4);
+}

src/components/organisms/AssetActions/Consume.tsx

@@ -7,7 +7,7 @@ import Price from '../../atoms/Price'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../../atoms/Loader'
-import { useOcean, useConsume } from '@oceanprotocol/react'
+import { useOcean, useConsume, usePricing } from '@oceanprotocol/react'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function Consume({
@@ -23,25 +23,31 @@ export default function Consume({
 }): ReactElement {
   const { ocean } = useOcean()
   const { marketFeeAddress } = useSiteMetadata()
+  const { buyDT, pricingStepText, pricingError } = usePricing()
   const { consumeStepText, consume, consumeError } = useConsume()
 
-  const isDisabled = !ocean || !isBalanceSufficient
+  const isDisabled =
+    !ocean || !isBalanceSufficient || consumeStepText || pricingStepText
+  const hasDatatoken = Number(dtBalance) >= 1
 
   async function handleConsume() {
+    !hasDatatoken && (await buyDT(ddo.dataToken, '1'))
     await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
   }
 
+  // Output errors in UI
   useEffect(() => {
     consumeError && toast.error(consumeError)
-  }, [consumeError])
+    pricingError && toast.error(pricingError)
+  }, [consumeError, pricingError])
 
   const PurchaseButton = () => (
     <div>
-      {consumeStepText ? (
-        <Loader message={consumeStepText} />
+      {consumeStepText || pricingStepText ? (
+        <Loader message={consumeStepText || pricingStepText} />
       ) : (
         <Button style="primary" onClick={handleConsume} disabled={isDisabled}>
-          Buy
+          {hasDatatoken ? 'Download' : 'Buy'}
         </Button>
       )}
     </div>
@@ -55,6 +61,12 @@ export default function Consume({
         </div>
         <div className={styles.pricewrapper}>
           <Price ddo={ddo} conversion />
+          {hasDatatoken && (
+            <div className={styles.hasTokens}>
+              You own {dtBalance} {ddo.dataTokenInfo?.symbol || 'DT'} so you can
+              use this asset without paying again.
+            </div>
+          )}
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/index.tsx

@@ -38,14 +38,17 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
 
   // Check user balance against price
   useEffect(() => {
-    if (!price || !price.value || !balance || !balance.ocean) return
+    if (!price || !price.value || !balance || !balance.ocean || !dtBalance)
+      return
 
-    setIsBalanceSufficient(compareAsBN(balance.ocean, `${price.value}`))
+    setIsBalanceSufficient(
+      compareAsBN(balance.ocean, `${price.value}`) || Number(dtBalance) >= 1
+    )
 
     return () => {
       setIsBalanceSufficient(false)
     }
-  }, [balance, price])
+  }, [balance, price, dtBalance])
 
   const UseContent = isCompute ? (
     <Compute