Fix/Fallback to subgraph price (#1959)

* wip use subgraph

* add more fallbacks

* fix checks

* fix tests

* fix teaser

* fix build

* add return type

src/@utils/accessDetailsAndPricing.ts

@@ -5,6 +5,7 @@ import {
   TokenPriceQuery_token as TokenPrice
 } from '../@types/subgraph/TokenPriceQuery'
 import {
+  AssetPrice,
   getErrorMessage,
   LoggerInstance,
   ProviderFees,
@@ -179,7 +180,6 @@ export async function getOrderPriceAndFees(
     },
     opcFee: '0'
   } as OrderPriceAndFees
-
   // fetch provider fee
   let initializeData
   try {
@@ -255,3 +255,14 @@ export async function getAccessDetails(
     LoggerInstance.error('Error getting access details: ', error.message)
   }
 }
+
+export function getAvailablePrice(asset: AssetExtended): AssetPrice {
+  const price: AssetPrice = asset?.stats?.price?.value
+    ? asset?.stats?.price
+    : {
+        value: Number(asset?.accessDetails?.price),
+        tokenSymbol: asset?.accessDetails?.baseToken?.symbol,
+        tokenAddress: asset?.accessDetails?.baseToken?.address
+      }
+  return price
+}

src/components/@shared/AssetTeaser/index.test.tsx

@@ -8,7 +8,7 @@ describe('@shared/AssetTeaser', () => {
   testRender(<AssetTeaser asset={asset} />)
 
   it('renders no pricing schema available', () => {
-    asset.stats.price = null
+    asset.accessDetails.type = 'NOT_SUPPORTED'
     render(<AssetTeaser asset={asset} />)
     expect(screen.getByText('No pricing schema available')).toBeInTheDocument()
     expect(screen.getByText('This is a test.')).toBeInTheDocument()

src/components/@shared/AssetTeaser/index.tsx

@@ -10,6 +10,7 @@ import styles from './index.module.css'
 import { getServiceByName } from '@utils/ddo'
 import { useUserPreferences } from '@context/UserPreferences'
 import { formatNumber } from '@utils/numbers'
+import { AssetPrice } from '@oceanprotocol/lib'
 
 export declare type AssetTeaserProps = {
   asset: AssetExtended
@@ -31,7 +32,7 @@ export default function AssetTeaser({
   const { orders, allocated, price } = asset.stats
   const isUnsupportedPricing =
     !asset.services.length ||
-    asset?.stats?.price?.value === undefined ||
+    price.value === undefined ||
     asset?.accessDetails?.type === 'NOT_SUPPORTED'
   const { locale } = useUserPreferences()
 

src/components/@shared/Price/index.tsx

@@ -17,7 +17,6 @@ export default function Price({
   size?: 'small' | 'mini' | 'large'
 }): ReactElement {
   if (!price && !orderPriceAndFees) return
-
   return (
     <PriceUnit
       price={Number(orderPriceAndFees?.price) || price?.value}

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

@@ -14,6 +14,7 @@ import {
   ProviderComputeInitializeResults,
   unitsToAmount,
   ProviderFees,
+  AssetPrice,
   UserCustomParameters,
   getErrorMessage
 } from '@oceanprotocol/lib'
@@ -41,7 +42,10 @@ import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { Decimal } from 'decimal.js'
 import { useAbortController } from '@hooks/useAbortController'
-import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
+import {
+  getAvailablePrice,
+  getOrderPriceAndFees
+} from '@utils/accessDetailsAndPricing'
 import { handleComputeOrder } from '@utils/order'
 import { getComputeFeedback } from '@utils/feedback'
 import { initializeProviderForCompute } from '@utils/provider'
@@ -111,6 +115,8 @@ export default function Compute({
   const { isSupportedOceanNetwork } = useNetworkMetadata()
   const { isAssetNetwork } = useAsset()
 
+  const price: AssetPrice = getAvailablePrice(asset)
+
   const hasDatatoken = Number(dtBalance) >= 1
   const isComputeButtonDisabled =
     isOrdering === true ||
@@ -489,7 +495,7 @@ export default function Compute({
           />
         ) : (
           <Price
-            price={asset.stats?.price}
+            price={price}
             orderPriceAndFees={datasetOrderPriceAndFees}
             conversion
             size="large"

src/components/Asset/AssetActions/Download/index.tsx

@@ -4,9 +4,10 @@ import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
 import ButtonBuy from '../ButtonBuy'
 import { secondsToString } from '@utils/ddo'
-import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
 import styles from './index.module.css'
+import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
 import {
+  AssetPrice,
   FileInfo,
   LoggerInstance,
   UserCustomParameters,
@@ -15,7 +16,10 @@ import {
 import { order } from '@utils/order'
 import { downloadFile } from '@utils/provider'
 import { getOrderFeedback } from '@utils/feedback'
-import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
+import {
+  getAvailablePrice,
+  getOrderPriceAndFees
+} from '@utils/accessDetailsAndPricing'
 import { toast } from 'react-toastify'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
@@ -64,10 +68,10 @@ export default function Download({
     useState<OrderPriceAndFees>()
   const [retry, setRetry] = useState<boolean>(false)
 
+  const price: AssetPrice = getAvailablePrice(asset)
   const isUnsupportedPricing =
     !asset?.accessDetails ||
     !asset.services.length ||
-    asset?.stats?.price?.value === undefined ||
     asset?.accessDetails?.type === 'NOT_SUPPORTED' ||
     (asset?.accessDetails?.type === 'fixed' &&
       !asset?.accessDetails?.baseToken?.symbol)
@@ -287,7 +291,7 @@ export default function Download({
             ) : (
               <Price
                 className={styles.price}
-                price={asset.stats?.price}
+                price={price}
                 orderPriceAndFees={orderPriceAndFees}
                 conversion
                 size="large"