Fix buy asset button (#537)

* fixed button turning to Download on unsuccessful buy

* removed console.log

* fixed multiple error message displayed bug

* return if error on buying datatoken

* verify orderId value

* added try catch block for asset.order in consume hook

* added checkPreviousOrders also when compute ends with error

* bumped oceanjs lib to 0.15.0

* fixed lint errors

* show loading while consume

* fixed wrong timeout validation

* updated package-lock from main

Co-authored-by: Norbi <katunanorbert@gmai.com>
Co-authored-by: Bogdan Fazakas <bogdan.fazakas@gmail.com>

src/components/organisms/AssetActions/Compute/index.tsx

@@ -363,6 +363,8 @@ export default function Compute({
       await checkPreviousOrders(ddo)
       setIsPublished(true)
     } catch (error) {
+      await checkPreviousOrders(selectedAlgorithmAsset)
+      await checkPreviousOrders(ddo)
       setError('Failed to start job!')
       Logger.error('[compute] Failed to start job: ', error.message)
     } finally {

src/components/organisms/AssetActions/Consume.tsx

@@ -53,12 +53,11 @@ export default function Consume({
   const { isInPurgatory, price, type } = useAsset()
   const { buyDT, pricingStepText, pricingError, pricingIsLoading } =
     usePricing()
-  const { consumeStepText, consume, consumeError } = useConsume()
+  const { consumeStepText, consume, consumeError, isLoading } = useConsume()
   const [isDisabled, setIsDisabled] = useState(true)
   const [hasDatatoken, setHasDatatoken] = useState(false)
   const [isConsumable, setIsConsumable] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
-
   const { data } = useQuery<OrdersData>(previousOrderQuery, {
     variables: {
       id: ddo.dataToken?.toLowerCase(),
@@ -89,7 +88,7 @@ export default function Consume({
 
   useEffect(() => {
     const { timeout } = ddo.findServiceByType('access').attributes.main
-    setAssetTimeout(secondsToString(timeout))
+    setAssetTimeout(timeout.toString())
   }, [ddo])
 
   useEffect(() => {
@@ -125,22 +124,28 @@ export default function Consume({
   ])
 
   async function handleConsume() {
-    !hasPreviousOrder && !hasDatatoken && (await buyDT('1', price, ddo))
-    await consume(
+    if (!hasPreviousOrder && !hasDatatoken) {
+      const tx = await buyDT('1', price, ddo)
+      if (tx === undefined) return
+    }
+    const error = await consume(
       ddo.id,
       ddo.dataToken,
       'access',
       appConfig.marketFeeAddress,
       previousOrderId
     )
-    setHasPreviousOrder(true)
+    error || setHasPreviousOrder(true)
   }
 
   // Output errors in UI
   useEffect(() => {
     consumeError && toast.error(consumeError)
+  }, [consumeError])
+
+  useEffect(() => {
     pricingError && toast.error(pricingError)
-  }, [consumeError, pricingError])
+  }, [pricingError])
 
   const PurchaseButton = () => (
     <ButtonBuy
@@ -154,7 +159,7 @@ export default function Consume({
       assetTimeout={assetTimeout}
       assetType={type}
       stepText={consumeStepText || pricingStepText}
-      isLoading={pricingIsLoading}
+      isLoading={pricingIsLoading || isLoading}
     />
   )
 

src/hooks/useConsume.ts

@@ -11,7 +11,7 @@ interface UseConsume {
     serviceType: ServiceType,
     marketFeeAddress: string,
     orderId?: string
-  ) => Promise<void>
+  ) => Promise<string>
   consumeStep?: number
   consumeStepText?: string
   consumeError?: string
@@ -37,7 +37,7 @@ function useConsume(): UseConsume {
     serviceType: ServiceType = 'access',
     marketFeeAddress: string,
     orderId?: string
-  ): Promise<void> {
+  ): Promise<string> {
     if (!ocean || !account || !accountId) return
 
     setIsLoading(true)
@@ -53,19 +53,25 @@ function useConsume(): UseConsume {
         )
         if (parseFloat(userOwnedTokens) < 1) {
           setConsumeError('Not enough datatokens')
+          return 'Not enough datatokens'
         } else {
           setStep(1)
-          orderId = await ocean.assets.order(
-            did as string,
-            serviceType,
-            accountId,
-            undefined,
-            marketFeeAddress,
-            undefined,
-            false
-          )
-          Logger.log('order created', orderId)
-          setStep(2)
+          try {
+            orderId = await ocean.assets.order(
+              did as string,
+              serviceType,
+              accountId,
+              undefined,
+              marketFeeAddress,
+              undefined,
+              false
+            )
+            Logger.log('order created', orderId)
+            setStep(2)
+          } catch (error) {
+            setConsumeError(error.message)
+            return error.message
+          }
         }
       }
       setStep(3)
@@ -81,11 +87,13 @@ function useConsume(): UseConsume {
     } catch (error) {
       setConsumeError(error.message)
       Logger.error(error)
+      return error.message
     } finally {
       setConsumeStep(undefined)
       setConsumeStepText(undefined)
       setIsLoading(false)
     }
+    return undefined
   }
 
   return { consume, consumeStep, consumeStepText, consumeError, isLoading }