Repository: oceanprotocol/market (ts)

Issue:
Fetch price from aquarius
Get price from aquarius so we don't have to do multiple sub queries. 

```
"price": {
      "value" : 33,
      "tokenAddress": "0x0....",
      "tokenSymbol": "ocean"
}
```
If value is 0 the it's a dispenser so it's free
if the price object is empty  (`{}`) then no valid pricing was found.

Requires new aquarius deployment( > 4.2.0)
Aqua issue: https://github.com/oceanprotocol/aquarius/issues/853

Pull request:
Fetching prices from Aquarius in AssetList component
- Fixes #1654 

Changes proposed in this PR:

- Fetching prices from Aquarius in AssetList component 

Patch:
diff --git a/.jest/__mocks__/@utils/accessDetailsAndPricing.ts b/.jest/__mocks__/@utils/accessDetailsAndPricing.ts
deleted file mode 100644
index 7a162fc6..00000000
--- a/.jest/__mocks__/@utils/accessDetailsAndPricing.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { assets } from '../../__fixtures__/datasetsWithAccessDetails'
-
-export const getAccessDetailsForAssets = jest.fn().mockResolvedValue(assets)
diff --git a/src/@utils/accessDetailsAndPricing.ts b/src/@utils/accessDetailsAndPricing.ts
index 2d053684..7d0b0774 100644
--- a/src/@utils/accessDetailsAndPricing.ts
+++ b/src/@utils/accessDetailsAndPricing.ts
@@ -5,11 +5,6 @@ import {
   TokenPriceQuery_token as TokenPrice
 } from '../@types/subgraph/TokenPriceQuery'
 import {
-  TokensPriceQuery,
-  TokensPriceQuery_tokens as TokensPrice
-} from '../@types/subgraph/TokensPriceQuery'
-import {
-  Asset,
   LoggerInstance,
   ProviderFees,
   ProviderInstance
@@ -21,64 +16,6 @@ import {
   publisherMarketOrderFee
 } from '../../app.config'
 
-const tokensPriceQuery = gql`
-  query TokensPriceQuery($datatokenIds: [ID!], $account: String) {
-    tokens(first: 1000, where: { id_in: $datatokenIds }) {
-      id
-      symbol
-      name
-      publishMarketFeeAddress
-      publishMarketFeeToken
-      publishMarketFeeAmount
-      templateId
-      orders(
-        where: { payer: $account }
-        orderBy: createdTimestamp
-        orderDirection: desc
-      ) {
-        tx
-        serviceIndex
-        createdTimestamp
-        reuses(orderBy: createdTimestamp, orderDirection: desc) {
-          id
-          caller
-          createdTimestamp
-          tx
-          block
-        }
-      }
-      dispensers {
-        id
-        active
-        isMinter
-        maxBalance
-        token {
-          id
-          name
-          symbol
-        }
-      }
-      fixedRateExchanges {
-        id
-        exchangeId
-        price
-        publishMarketSwapFee
-        baseToken {
-          symbol
-          name
-          address
-          decimals
-        }
-        datatoken {
-          symbol
-          name
-          address
-        }
-        active
-      }
-    }
-  }
-`
 const tokenPriceQuery = gql`
   query TokenPriceQuery($datatokenId: ID!, $account: String) {
     token(id: $datatokenId) {
@@ -139,7 +76,7 @@ const tokenPriceQuery = gql`
 `
 
 function getAccessDetailsFromTokenPrice(
-  tokenPrice: TokenPrice | TokensPrice,
+  tokenPrice: TokenPrice,
   timeout?: number
 ): AccessDetails {
   const accessDetails = {} as AccessDetails
@@ -216,7 +153,7 @@ export async function getOrderPriceAndFees(
   providerFees?: ProviderFees
 ): Promise<OrderPriceAndFees> {
   const orderPriceAndFee = {
-    price: '0',
+    price: String(asset?.stats?.price?.value || '0'),
     publisherMarketOrderFee: publisherMarketOrderFee || '0',
     publisherMarketFixedSwapFee: '0',
     consumeMarketOrderFee: consumeMarketOrderFee || '0',
@@ -291,56 +228,3 @@ export async function getAccessDetails(
     LoggerInstance.error('Error getting access details: ', error.message)
   }
 }
-
-export async function getAccessDetailsForAssets(
-  assets: Asset[],
-  account = ''
-): Promise<AssetExtended[]> {
-  const assetsExtended: AssetExtended[] = assets
-  const chainAssetLists: { [key: number]: string[] } = {}
-
-  try {
-    for (const asset of assets) {
-      if (chainAssetLists[asset.chainId]) {
-        chainAssetLists[asset.chainId].push(
-          asset.services[0].datatokenAddress.toLowerCase()
-        )
-      } else {
-        chainAssetLists[asset.chainId] = []
-        chainAssetLists[asset.chainId].push(
-          asset.services[0].datatokenAddress.toLowerCase()
-        )
-      }
-    }
-
-    for (const chainKey in chainAssetLists) {
-      const queryContext = getQueryContext(Number(chainKey))
-      const tokenQueryResult: OperationResult<
-        TokensPriceQuery,
-        { datatokenIds: [string]; account: string }
-      > = await fetchData(
-        tokensPriceQuery,
-        {
-          datatokenIds: chainAssetLists[chainKey],
-          account: account?.toLowerCase()
-        },
-        queryContext
-      )
-      tokenQueryResult?.data?.tokens?.forEach((token) => {
-        const currentAsset = assetsExtended.find(
-          (asset) =>
-            asset.services[0].datatokenAddress.toLowerCase() === token.id
-        )
-        const accessDetails = getAccessDetailsFromTokenPrice(
-          token,
-          currentAsset?.services[0]?.timeout
-        )
-
-        currentAsset.accessDetails = accessDetails
-      })
-    }
-    return assetsExtended
-  } catch (error) {
-    LoggerInstance.error('Error getting access details: ', error.message)
-  }
-}
diff --git a/src/@utils/assetConvertor.ts b/src/@utils/assetConvertor.ts
index 2b143b59..c8f89e95 100644
--- a/src/@utils/assetConvertor.ts
+++ b/src/@utils/assetConvertor.ts
@@ -1,4 +1,3 @@
-import { getAccessDetailsForAssets } from './accessDetailsAndPricing'
 import { PublisherTrustedAlgorithm, Asset } from '@oceanprotocol/lib'
 import { AssetSelectionAsset } from '@shared/FormInput/InputElement/AssetSelection'
 import { getServiceByName } from './ddo'
@@ -8,17 +7,14 @@ export async function transformAssetToAssetSelection(
   assets: Asset[],
   selectedAlgorithms?: PublisherTrustedAlgorithm[]
 ): Promise<AssetSelectionAsset[]> {
-  const extendedAssets: AssetExtended[] = await getAccessDetailsForAssets(
-    assets
-  )
   const algorithmList: AssetSelectionAsset[] = []
 
-  for (const asset of extendedAssets) {
+  for (const asset of assets) {
     const algoService =
       getServiceByName(asset, 'compute') || getServiceByName(asset, 'access')
 
     if (
-      asset?.accessDetails?.price &&
+      asset?.stats?.price?.value &&
       algoService?.serviceEndpoint === datasetProviderEndpoint
     ) {
       let selected = false
@@ -30,7 +26,7 @@ export async function transformAssetToAssetSelection(
       const algorithmAsset: AssetSelectionAsset = {
         did: asset.id,
         name: asset.metadata.name,
-        price: asset.accessDetails.price,
+        price: asset.stats.price.value,
         checked: selected,
         symbol: asset.datatokens[0].symbol
       }
diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx
index 7624a61a..35fd67da 100644
--- a/src/components/@shared/AssetList/index.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -1,19 +1,7 @@
 import AssetTeaser from '@shared/AssetTeaser'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import Pagination from '@shared/Pagination'
 import styles from './index.module.css'
-import Loader from '@shared/atoms/Loader'
-import { useIsMounted } from '@hooks/useIsMounted'
-import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
-import { useWeb3 } from '@context/Web3'
-
-function LoaderArea() {
-  return (
-    <div className={styles.loaderWrap}>
-      <Loader />
-    </div>
-  )
-}
 
 export declare type AssetListProps = {
   assets: AssetExtended[]
@@ -33,52 +21,27 @@ export default function AssetList({
   showPagination,
   page,
   totalPages,
-  isLoading,
   onPageChange,
   className,
   noPublisher,
   noDescription,
   noPrice
 }: AssetListProps): ReactElement {
-  const { accountId } = useWeb3()
-  const [assetsWithPrices, setAssetsWithPrices] =
-    useState<AssetExtended[]>(assets)
-  const [loading, setLoading] = useState<boolean>(isLoading)
-  const isMounted = useIsMounted()
-
-  useEffect(() => {
-    if (!assets || !assets.length) return
-
-    setAssetsWithPrices(assets as AssetExtended[])
-    setLoading(false)
-    async function fetchPrices() {
-      const assetsWithPrices = await getAccessDetailsForAssets(
-        assets,
-        accountId || ''
-      )
-      if (!isMounted() || !assetsWithPrices) return
-      setAssetsWithPrices([...assetsWithPrices])
-    }
-    fetchPrices()
-  }, [assets, isMounted, accountId])
-
-  // // This changes the page field inside the query
+  // This changes the page field inside the query
   function handlePageChange(selected: number) {
     onPageChange(selected + 1)
   }
 
   const styleClasses = `${styles.assetList} ${className || ''}`
 
-  return loading ? (
-    <LoaderArea />
-  ) : (
+  return (
     <>
       <div className={styleClasses}>
-        {assetsWithPrices?.length > 0 ? (
-          assetsWithPrices?.map((assetWithPrice) => (
+        {assets?.length > 0 ? (
+          assets?.map((asset) => (
             <AssetTeaser
-              asset={assetWithPrice}
-              key={assetWithPrice.id}
+              asset={asset}
+              key={asset.id}
               noPublisher={noPublisher}
               noDescription={noDescription}
               noPrice={noPrice}
diff --git a/src/components/@shared/AssetTeaser/index.tsx b/src/components/@shared/AssetTeaser/index.tsx
index 75e0b023..ed76d7d3 100644
--- a/src/components/@shared/AssetTeaser/index.tsx
+++ b/src/components/@shared/AssetTeaser/index.tsx
@@ -21,16 +21,18 @@ export declare type AssetTeaserProps = {
 export default function AssetTeaser({
   asset,
   noPublisher,
-  noDescription,
-  noPrice
+  noDescription
 }: AssetTeaserProps): ReactElement {
   const { name, type, description } = asset.metadata
   const { datatokens } = asset
   const isCompute = Boolean(getServiceByName(asset, 'compute'))
   const accessType = isCompute ? 'compute' : 'access'
   const { owner } = asset.nft
-  const { orders, allocated } = asset.stats
-  const isUnsupportedPricing = asset?.accessDetails?.type === 'NOT_SUPPORTED'
+  const { orders, allocated, price } = asset.stats
+  const isUnsupportedPricing =
+    !asset.services.length ||
+    asset?.stats?.price?.value === undefined ||
+    asset?.accessDetails?.type === 'NOT_SUPPORTED'
   const { locale } = useUserPreferences()
 
   return (
@@ -60,15 +62,13 @@ export default function AssetTeaser({
             </Dotdotdot>
           </div>
         )}
-        {!noPrice && (
-          <div className={styles.price}>
-            {isUnsupportedPricing || !asset.services.length ? (
-              <strong>No pricing schema available</strong>
-            ) : (
-              <Price accessDetails={asset.accessDetails} size="small" />
-            )}
-          </div>
-        )}
+        <div className={styles.price}>
+          {isUnsupportedPricing ? (
+            <strong>No pricing schema available</strong>
+          ) : (
+            <Price price={price} assetId={asset.id} size="small" />
+          )}
+        </div>
         <footer className={styles.footer}>
           {allocated && allocated > 0 ? (
             <span className={styles.typeLabel}>
diff --git a/src/components/@shared/FormInput/InputElement/AssetSelection/index.tsx b/src/components/@shared/FormInput/InputElement/AssetSelection/index.tsx
index 4c2d8126..7697ec7d 100644
--- a/src/components/@shared/FormInput/InputElement/AssetSelection/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/AssetSelection/index.tsx
@@ -10,7 +10,7 @@ import styles from './index.module.css'
 export interface AssetSelectionAsset {
   did: string
   name: string
-  price: string
+  price: number
   checked: boolean
   symbol: string
 }
@@ -106,8 +106,7 @@ export default function AssetSelection({
                 </label>
 
                 <PriceUnit
-                  price={Number(asset.price)}
-                  type={asset.price === '0' ? 'free' : undefined}
+                  price={asset.price}
                   size="small"
                   className={styles.price}
                 />
diff --git a/src/components/@shared/Price/PriceUnit.tsx b/src/components/@shared/Price/PriceUnit.tsx
index 1ddd742a..7b551f84 100644
--- a/src/components/@shared/Price/PriceUnit.tsx
+++ b/src/components/@shared/Price/PriceUnit.tsx
@@ -10,11 +10,9 @@ export default function PriceUnit({
   size = 'small',
   conversion,
   symbol,
-  type,
   decimals
 }: {
   price: number
-  type?: string
   className?: string
   size?: 'small' | 'mini' | 'large'
   conversion?: boolean
@@ -25,12 +23,14 @@ export default function PriceUnit({
 
   return (
     <div className={`${styles.price} ${styles[size]} ${className}`}>
-      {type === 'free' ? (
+      {price === 0 ? (
         <div>Free</div>
+      ) : !price || Number.isNaN(price) ? (
+        <div>-</div>
       ) : (
         <>
           <div>
-            {Number.isNaN(price) ? '-' : formatNumber(price, locale, decimals)}{' '}
+            {formatNumber(price, locale, decimals)}
             <span className={styles.symbol}>{symbol}</span>
           </div>
           {conversion && <Conversion price={price} symbol={symbol} />}
diff --git a/src/components/@shared/Price/index.tsx b/src/components/@shared/Price/index.tsx
index 4a972334..06731510 100644
--- a/src/components/@shared/Price/index.tsx
+++ b/src/components/@shared/Price/index.tsx
@@ -1,32 +1,30 @@
 import React, { ReactElement } from 'react'
+import { AssetPrice } from '@oceanprotocol/lib'
 import PriceUnit from './PriceUnit'
 
 export default function Price({
-  accessDetails,
+  price,
   orderPriceAndFees,
   className,
   size,
   conversion
 }: {
-  accessDetails: AccessDetails
+  price: AssetPrice
   orderPriceAndFees?: OrderPriceAndFees
+  assetId?: string
   className?: string
   conversion?: boolean
   size?: 'small' | 'mini' | 'large'
 }): ReactElement {
-  const isSupported =
-    accessDetails?.type === 'free' ||
-    (accessDetails?.type === 'fixed' && accessDetails?.baseToken?.symbol)
-  const price = `${orderPriceAndFees?.price || accessDetails?.price}`
+  if (!price && !orderPriceAndFees) return
 
-  return isSupported ? (
+  return (
     <PriceUnit
-      price={Number(price)}
-      symbol={accessDetails?.baseToken?.symbol}
+      price={Number(orderPriceAndFees?.price) || price?.value}
+      symbol={price?.tokenSymbol}
       className={className}
       size={size}
       conversion={conversion}
-      type={accessDetails?.type}
     />
-  ) : null
+  )
 }
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 2718bc22..0b870c47 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -433,7 +433,7 @@ export default function Compute({
           />
         ) : (
           <Price
-            accessDetails={asset?.accessDetails}
+            price={asset.stats?.price}
             orderPriceAndFees={datasetOrderPriceAndFees}
             conversion
             size="large"
diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download.tsx
index f47238d4..4aad6a9f 100644
--- a/src/components/Asset/AssetActions/Download.tsx
+++ b/src/components/Asset/AssetActions/Download.tsx
@@ -51,6 +51,9 @@ export default function Download({
   const [retry, setRetry] = useState<boolean>(false)
 
   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)
@@ -60,7 +63,7 @@ export default function Download({
   }, [asset?.nft.state])
 
   useEffect(() => {
-    if (!asset?.accessDetails || isUnsupportedPricing) return
+    if (isUnsupportedPricing) return
 
     setIsOwned(asset?.accessDetails?.isOwned || false)
     setValidOrderTx(asset?.accessDetails?.validOrderTx || '')
@@ -100,7 +103,6 @@ export default function Download({
       (asset?.accessDetails?.type === 'fixed' && !orderPriceAndFees) ||
       !isMounted ||
       !accountId ||
-      !asset?.accessDetails ||
       isUnsupportedPricing
     )
       return
@@ -202,7 +204,7 @@ export default function Download({
           />
         ) : (
           <>
-            {isUnsupportedPricing || !asset.services.length ? (
+            {isUnsupportedPricing ? (
               <Alert
                 className={styles.fieldWarning}
                 state="info"
@@ -214,7 +216,7 @@ export default function Download({
                   <Loader message="Calculating full price (including fees)" />
                 ) : (
                   <Price
-                    accessDetails={asset.accessDetails}
+                    price={asset.stats?.price}
                     orderPriceAndFees={orderPriceAndFees}
                     conversion
                     size="large"
diff --git a/src/components/Home/Bookmarks.tsx b/src/components/Home/Bookmarks.tsx
index 2c3bcd4e..cd3037da 100644
--- a/src/components/Home/Bookmarks.tsx
+++ b/src/components/Home/Bookmarks.tsx
@@ -7,7 +7,6 @@ import Tooltip from '@shared/atoms/Tooltip'
 import AssetTitle from '@shared/AssetListTitle'
 import { getAssetsFromDids } from '@utils/aquarius'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { useWeb3 } from '@context/Web3'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
@@ -32,7 +31,7 @@ const columns: TableOceanColumn<AssetExtended>[] = [
   },
   {
     name: 'Price',
-    selector: (row) => <Price accessDetails={row.accessDetails} size="small" />,
+    selector: (row) => <Price price={row.stats.price} size="small" />,
     right: true
   }
 ]
@@ -66,11 +65,7 @@ export default function Bookmarks(): ReactElement {
         )
         if (!result?.length) return
 
-        const pinnedAssets: AssetExtended[] = await getAccessDetailsForAssets(
-          result,
-          accountId
-        )
-        setPinned(pinnedAssets)
+        setPinned(result)
       } catch (error) {
         LoggerInstance.error(`Bookmarks error:`, error.message)
       } finally {
diff --git a/src/components/Profile/Header/Stats.tsx b/src/components/Profile/Header/Stats.tsx
index 3678d541..fbd47476 100644
--- a/src/components/Profile/Header/Stats.tsx
+++ b/src/components/Profile/Header/Stats.tsx
@@ -5,7 +5,6 @@ import Conversion from '@shared/Price/Conversion'
 import NumberUnit from './NumberUnit'
 import styles from './Stats.module.css'
 import { useProfile } from '@context/Profile'
-import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { getLocked } from '@utils/veAllocation'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Button from '@shared/atoms/Button'
@@ -37,12 +36,10 @@ export default function Stats({
 
     async function getPublisherTotalSales() {
       try {
-        const assetsPrices = await getAccessDetailsForAssets(assets)
         let count = 0
-        for (const priceInfo of assetsPrices) {
-          if (priceInfo?.accessDetails?.price && priceInfo.stats.orders > 0) {
-            count +=
-              parseInt(priceInfo.accessDetails.price) * priceInfo.stats.orders
+        for (const priceInfo of assets) {
+          if (priceInfo?.stats?.price?.value && priceInfo.stats.orders > 0) {
+            count += priceInfo.stats.price.value * priceInfo.stats.orders
           }
         }
         setTotalSales(count)


Test patch:
diff --git a/src/components/@shared/AssetTeaser/index.test.tsx b/src/components/@shared/AssetTeaser/index.test.tsx
index 27d5f293..61c1f83e 100644
--- a/src/components/@shared/AssetTeaser/index.test.tsx
+++ b/src/components/@shared/AssetTeaser/index.test.tsx
@@ -1,8 +1,23 @@
 import React from 'react'
+import { render, screen } from '@testing-library/react'
 import testRender from '../../../../.jest/testRender'
 import AssetTeaser from './index'
 import { asset } from '../../../../.jest/__fixtures__/datasetWithAccessDetails'
 
 describe('@shared/AssetTeaser', () => {
   testRender(<AssetTeaser asset={asset} />)
+
+  it('renders no pricing schema available', () => {
+    asset.stats.price = null
+    render(<AssetTeaser asset={asset} />)
+    expect(screen.getByText('No pricing schema available')).toBeInTheDocument()
+    expect(screen.getByText('This is a test.')).toBeInTheDocument()
+  })
+  it('renders asset teaser with no description', () => {
+    asset.metadata.description = null
+    render(<AssetTeaser asset={asset} />)
+    expect(
+      screen.queryByText('This is a test description')
+    ).not.toBeInTheDocument()
+  })
 })
diff --git a/src/components/@shared/FormInput/InputElement/AssetSelection/index.test.tsx b/src/components/@shared/FormInput/InputElement/AssetSelection/index.test.tsx
index 8414f6cd..b400d9cf 100644
--- a/src/components/@shared/FormInput/InputElement/AssetSelection/index.test.tsx
+++ b/src/components/@shared/FormInput/InputElement/AssetSelection/index.test.tsx
@@ -7,21 +7,21 @@ describe('@shared/FormInput/InputElement/AssetSelection', () => {
     {
       did: 'did:op:xxx',
       name: 'Asset',
-      price: '10',
+      price: 10,
       checked: false,
       symbol: 'OCEAN'
     },
     {
       did: 'did:op:yyy',
       name: 'Asset',
-      price: '10',
+      price: 10,
       checked: true,
       symbol: 'OCEAN'
     },
     {
       did: 'did:op:zzz',
       name: 'Asset',
-      price: '0',
+      price: 0,
       checked: false,
       symbol: 'OCEAN'
     }
diff --git a/src/components/@shared/FormInput/index.test.tsx b/src/components/@shared/FormInput/index.test.tsx
index 42df44cc..b27a472a 100644
--- a/src/components/@shared/FormInput/index.test.tsx
+++ b/src/components/@shared/FormInput/index.test.tsx
@@ -59,14 +59,14 @@ describe('@shared/FormInput', () => {
       {
         did: 'did:op:xxx',
         name: 'Asset',
-        price: '10',
+        price: 10,
         checked: false,
         symbol: 'OCEAN'
       },
       {
         did: 'did:op:yyy',
         name: 'Asset',
-        price: '10',
+        price: 10,
         checked: true,
         symbol: 'OCEAN'
       }
diff --git a/src/components/@shared/Price/index.test.tsx b/src/components/@shared/Price/index.test.tsx
index 84ff52e7..112c1f6e 100644
--- a/src/components/@shared/Price/index.test.tsx
+++ b/src/components/@shared/Price/index.test.tsx
@@ -13,39 +13,25 @@ describe('@shared/Price', () => {
   it('renders fixed price', () => {
     render(
       <Price
-        accessDetails={{ ...asset.accessDetails, type: 'fixed', price: '10' }}
+        price={{ value: 10, tokenSymbol: 'OCEAN', tokenAddress: '0x123' }}
       />
     )
     expect(screen.getByText('10')).toBeInTheDocument()
   })
-
   it('renders free price', () => {
-    render(<Price accessDetails={{ ...asset.accessDetails, type: 'free' }} />)
+    render(<Price price={{ value: 0 }} />)
     expect(screen.getByText('Free')).toBeInTheDocument()
   })
-
   it('renders null price', () => {
-    render(<Price accessDetails={{ ...asset.accessDetails, price: null }} />)
+    render(<Price price={{ value: null }} />)
     expect(screen.getByText('-')).toBeInTheDocument()
   })
-
   it('renders conversion', async () => {
-    render(
-      <Price
-        accessDetails={{ ...asset.accessDetails, price: '10' }}
-        conversion
-      />
-    )
+    render(<Price price={asset.stats.price} conversion />)
     expect(await screen.findByText('≈')).toBeInTheDocument()
   })
-
   it('renders no conversion when no price defined', async () => {
-    render(
-      <Price
-        accessDetails={{ ...asset.accessDetails, price: null }}
-        conversion
-      />
-    )
+    render(<Price price={{ value: null, tokenSymbol: 'TEST' }} conversion />)
     expect(screen.queryByText('≈')).not.toBeInTheDocument()
   })
 })