refactor Compute flow

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

@@ -22,3 +22,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/Compute.tsx

@@ -9,7 +9,8 @@ import {
   computeOptions,
   useCompute,
   readFileContent,
-  useOcean
+  useOcean,
+  usePricing
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
 import Button from '../../atoms/Button'
@@ -26,9 +27,12 @@ export default function Compute({
   isBalanceSufficient: boolean
   dtBalance: string
 }): ReactElement {
+  const { marketFeeAddress } = useSiteMetadata()
+
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
-  const { marketFeeAddress } = useSiteMetadata()
+  const { buyDT, dtSymbol } = usePricing(ddo)
+
   const computeService = ddo.findServiceByType('compute')
   const metadataService = ddo.findServiceByType('metadata')
 
@@ -50,6 +54,7 @@ export default function Compute({
     computeType === '' ||
     !ocean ||
     !isBalanceSufficient
+  const hasDatatoken = Number(dtBalance) >= 1
 
   const onDrop = async (files: File[]) => {
     setFile(files[0])
@@ -74,6 +79,8 @@ export default function Compute({
       setIsPublished(false)
       setError('')
 
+      !hasDatatoken && (await buyDT('1'))
+
       await compute(
         ddo.id,
         computeService,
@@ -101,6 +108,12 @@ export default function Compute({
         </div>
         <div className={styles.pricewrapper}>
           <Price ddo={ddo} conversion />
+          {hasDatatoken && (
+            <div className={styles.hasTokens}>
+              You own {dtBalance} {dtSymbol} so you can use this asset without
+              paying again.
+            </div>
+          )}
         </div>
       </div>