use action view changes by asset type

src/components/organisms/AssetActions/Compute.tsx

@@ -17,6 +17,7 @@ import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import checkPreviousOrder from '../../../utils/checkPreviousOrder'
+import { useAsset } from '../../../providers/Asset'
 
 export default function Compute({
   ddo,
@@ -29,6 +30,7 @@ export default function Compute({
 }): ReactElement {
   const { marketFeeAddress } = useSiteMetadata()
 
+  const { type } = useAsset()
   const { ocean, accountId } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
   const { buyDT, dtSymbol } = usePricing(ddo)
@@ -129,16 +131,29 @@ export default function Compute({
         </div>
       </div>
 
-      <Input
-        type="select"
-        name="algorithm"
-        label="Select image to run the algorithm"
-        placeholder=""
-        size="small"
-        value={computeType}
-        options={computeOptions.map((x) => x.name)}
-        onChange={handleSelectChange}
-      />
+      {type === 'algorithm' ? (
+        <Input
+          type="select"
+          name="data"
+          label="Select dataset for the algorithm"
+          placeholder=""
+          size="small"
+          value="dataset-1"
+          options={['dataset-1', 'dataset-2', 'dataset-3'].map((x) => x)}
+          onChange={handleSelectChange}
+        />
+      ) : (
+        <Input
+          type="select"
+          name="algorithm"
+          label="Select image to run the algorithm"
+          placeholder=""
+          size="small"
+          value={computeType}
+          options={computeOptions.map((x) => x.name)}
+          onChange={handleSelectChange}
+        />
+      )}
       <Dropzone multiple={false} handleOnDrop={onDrop} />
 
       <div className={styles.actions}>

src/components/organisms/AssetActions/Consume.tsx

@@ -48,7 +48,7 @@ export default function Consume({
   const { marketFeeAddress } = useSiteMetadata()
   const [hasPreviousOrder, setHasPreviousOrder] = useState(false)
   const [previousOrderId, setPreviousOrderId] = useState<string>()
-  const { isInPurgatory, price } = useAsset()
+  const { isInPurgatory, price, type } = useAsset()
   const { buyDT, pricingStepText, pricingError, pricingIsLoading } = usePricing(
     ddo
   )
@@ -157,16 +157,23 @@ export default function Consume({
         <div className={styles.filewrapper}>
           <File file={file} />
         </div>
-        <div className={styles.pricewrapper}>
-          {isConsumable ? (
-            <Price ddo={ddo} conversion />
-          ) : (
-            <div className={styles.help}>
-              There is not enough liquidity in the pool to buy this data set.
-            </div>
-          )}
-          {!isInPurgatory && <PurchaseButton />}
-        </div>
+        {type === 'algorithm' ? (
+          <div className={styles.pricewrapper}>
+            This asset can not be downloaded, it can only be used in a compute
+            job
+          </div>
+        ) : (
+          <div className={styles.pricewrapper}>
+            {isConsumable ? (
+              <Price ddo={ddo} conversion />
+            ) : (
+              <div className={styles.help}>
+                There is not enough liquidity in the pool to buy this data set.
+              </div>
+            )}
+            {!isInPurgatory && <PurchaseButton />}
+          </div>
+        )}
       </div>
 
       <footer className={styles.feedback}>

src/providers/Asset.tsx

@@ -25,6 +25,7 @@ interface AssetProviderValue {
   title: string | undefined
   owner: string | undefined
   price: BestPrice | undefined
+  type: string | undefined
   error?: string
   refreshInterval: number
   refreshDdo: (token?: CancelToken) => Promise<void>
@@ -52,6 +53,7 @@ function AssetProvider({
   const [price, setPrice] = useState<BestPrice>()
   const [owner, setOwner] = useState<string>()
   const [error, setError] = useState<string>()
+  const [type, setType] = useState<string>()
 
   const refreshPrice = useCallback(async () => {
     if (
@@ -160,6 +162,7 @@ function AssetProvider({
       const { attributes } = ddo.findServiceByType('metadata')
       setMetadata((attributes as unknown) as MetadataMarket)
       setTitle(attributes?.main.name)
+      setType(attributes.main.type)
       setOwner(ddo.publicKey[0].owner)
       setIsInPurgatory(ddo.isInPurgatory === 'true')
 
@@ -184,6 +187,7 @@ function AssetProvider({
           title,
           owner,
           price,
+          type,
           error,
           isInPurgatory,
           purgatoryData,