added assetTeaser, assetList, assetComputeList, as well as some mock data for storybook

.storybook/__mockdata__/index.tsx

@@ -0,0 +1,120 @@
+import { Asset } from '@oceanprotocol/lib'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
+import { AssetExtended } from 'src/@types/AssetExtended'
+
+export const locale: string = 'en-US'
+
+export const asset: Asset = {
+  '@context': ['https://w3id.org/did/v1'],
+  purgatory: {
+    state: true,
+    reason: ''
+  },
+  stats: { consume: -1 },
+  chainId: 4,
+  datatokens: [
+    {
+      address: '0x9773173aa83064B2e6092Ab154Be30e9Ea317258',
+      name: 'Comely Herring Token',
+      serviceId:
+        'f4d9a48f1a229e00edd69630b138c05ea50d82d47caba8aadd701b9c43213628',
+      symbol: 'COMHER-98'
+    }
+  ],
+  event: {
+    block: 10771807,
+    contract: '0x58390B3527A3Ac42F92bF2A12a29fFBE832206bA',
+    datetime: '2022-05-31T11:17:52',
+    from: '0x491AECC4b3d690a4D7027A385499fd04fE50b796',
+    tx: '0xa5abd03b5804918fe5e13145ab511e536da66b73fd8123fe2a6aff47ea2a221b'
+  },
+  id: 'did:op:72468f062a26f9eb668b6392a0bbdeebd33f889b2c31e2c91768eba35a31cd94',
+  metadata: {
+    additionalInformation: {
+      termsAndConditions: true
+    },
+    author: 'EVJ',
+    created: '2022-05-30T13:51:59Z',
+    description: 'Space Situational Awareness: TLE Data + Visualization',
+    license: 'https://market.oceanprotocol.com/terms',
+    name: 'Space Situational Awareness: TLE Data + Visualization',
+    tags: ['open-data'],
+    type: 'dataset',
+    updated: '2022-05-30T13:51:59Z'
+  },
+  nft: {
+    address: '0x58390B3527A3Ac42F92bF2A12a29fFBE832206bA',
+    created: '2022-05-30T13:52:09',
+    name: 'Ocean Data NFT',
+    owner: '0x491AECC4b3d690a4D7027A385499fd04fE50b796',
+    state: 0,
+    symbol: 'OCEAN-NFT',
+    tokenURI:
+      'data:application/json;base64,eyJuYW1lIjoiT2NlYW4gRGF0YSBORlQiLCJzeW1ib2wiOiJPQ0VBTi1ORlQiLCJkZXNjcmlwdGlvbiI6IlRoaXMgTkZUIHJlcHJlc2VudHMgYW4gYXNzZXQgaW4gdGhlIE9jZWFuIFByb3RvY29sIHY0IGVjb3N5c3RlbS5cblxuVmlldyBvbiBPY2VhbiBNYXJrZXQ6IGh0dHBzOi8vbWFya2V0Lm9jZWFucHJvdG9jb2wuY29tL2Fzc2V0L2RpZDpvcDo3MjQ2OGYwNjJhMjZmOWViNjY4YjYzOTJhMGJiZGVlYmQzM2Y4ODliMmMzMWUyYzkxNzY4ZWJhMzVhMzFjZDk0IiwiZXh0ZXJuYWxfdXJsIjoiaHR0cHM6Ly9tYXJrZXQub2NlYW5wcm90b2NvbC5jb20vYXNzZXQvZGlkOm9wOjcyNDY4ZjA2MmEyNmY5ZWI2NjhiNjM5MmEwYmJkZWViZDMzZjg4OWIyYzMxZTJjOTE3NjhlYmEzNWEzMWNkOTQiLCJiYWNrZ3JvdW5kX2NvbG9yIjoiMTQxNDE0IiwiaW1hZ2VfZGF0YSI6ImRhdGE6aW1hZ2Uvc3ZnK3htbCwlM0Nzdmcgdmlld0JveD0nMCAwIDk5IDk5JyBmaWxsPSd1bmRlZmluZWQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM0UlM0NwYXRoIGZpbGw9JyUyM2ZmNDA5Mjc3JyBkPSdNMCw5OUwwLDI1QzEzLDI1IDI2LDI1IDM2LDI0QzQ1LDIyIDUyLDE5IDYyLDIwQzcxLDIwIDg1LDI1IDk5LDMwTDk5LDk5WicvJTNFJTNDcGF0aCBmaWxsPSclMjNmZjQwOTJiYicgZD0nTTAsOTlMMCw0MkMxMiw0NSAyNSw0OCAzNyw1MEM0OCw1MSA1OCw1MCA2OSw1MUM3OSw1MSA4OSw1MyA5OSw1NUw5OSw5OVonJTNFJTNDL3BhdGglM0UlM0NwYXRoIGZpbGw9JyUyM2ZmNDA5MmZmJyBkPSdNMCw5OUwwLDc5QzksODAgMTksODEgMzAsODBDNDAsNzggNTEsNzMgNjMsNzJDNzQsNzAgODYsNzEgOTksNzJMOTksOTlaJyUzRSUzQy9wYXRoJTNFJTNDL3N2ZyUzRSJ9'
+  },
+  nftAddress: '0x58390B3527A3Ac42F92bF2A12a29fFBE832206bA',
+  services: [
+    {
+      datatokenAddress: '0x9773173aa83064B2e6092Ab154Be30e9Ea317258',
+      files:
+        '0x04e61c511bdc8021779064e53972031d27d2afa53298ac85b8cca80cb9e1b45a0a3f2a71c0261b2f9d224fa78cf03f116a817c74aac5d96dd7164e47c6d0a508e0ef1a58226ceb8f26df474a4cb3dd2a15080e4dfbc94ccf07914f0bd036eb59972164bc5c7990f71da70160f749e6bfcf302a584a7a05d529fa9a4319df088a772be109cf58f6fcab38be565d87fc8adc0b895527f04742193e2aab81f1f6f148b1cac579bb99ea8bf6e6259d9156f769f3255e91437b34f581cb4ae83cd020730d6f41f29094fffdb2ad8ebf7844e6907f0ef86628222c14dfb8',
+      id: 'f4d9a48f1a229e00edd69630b138c05ea50d82d47caba8aadd701b9c43213628',
+      serviceEndpoint: 'https://v4.provider.rinkeby.oceanprotocol.com',
+      timeout: 604800,
+      type: 'access'
+    }
+  ],
+  version: '4.0.0'
+}
+
+export const assetExtended: AssetExtended = {
+  ...asset,
+  accessDetails: {
+    isOwned: true,
+    validOrderTx:
+      '0xfd9e9e4688589a231be9b17932abd8137890ab5f03ab475196442f3369cc4f4f',
+    publisherMarketOrderFee: '0',
+    type: 'free',
+    addressOrId: '0x9773173aa83064b2e6092ab154be30e9ea317258',
+    price: '0',
+    isPurchasable: true,
+    datatoken: {
+      address: '0x9773173aa83064b2e6092ab154be30e9ea317258',
+      name: 'Comely Herring Token',
+      symbol: 'COMHER-98'
+    }
+  }
+}
+
+export const assetSelectionAsset: AssetSelectionAsset[] = [
+  {
+    did: 'did:op:408538d6c10a45925b880db726b1eca87dffefb439c6442c00a78c0ace0d90e3',
+    name: 'Small Arms & Ammunition: Price of War Algorithm',
+    price: '3',
+    checked: false,
+    symbol: 'JUDKRI-62'
+  },
+  {
+    did: 'did:op:31eca1f32e593b8572cacca4fff75eb3d39ca2ae2dd2c6b08d069575ac73bbd6',
+    name: 'Space Situational Awareness: TLE Data + Visualization',
+    price: '2.086680902897933865',
+    checked: false,
+    symbol: 'DELBAR-47'
+  },
+  {
+    did: 'did:op:40bc6de6055bb5eed6935e5f75080c465fd1ce867362df7dd20e142830aebcff',
+    name: 'Space Situational Awareness: Two Line Element Data Only',
+    price: '2.012072434607645876',
+    checked: false,
+    symbol: 'BOOTUN-64'
+  },
+  {
+    did: 'did:op:96760f9743b2f07dc0fe9300e20df769cb4593c498bab957de392437cc360ac4',
+    name: 'Small Arms & Ammunition: Data Only',
+    price: '1',
+    checked: false,
+    symbol: 'VIBOTT-81'
+  }
+]
+
+export const assets = [asset, asset, asset, asset]

src/components/@shared/AssetList/AssetComputeList/index.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AssetComputeList, {
+  AssetComputeListProps
+} from '@shared/AssetList/AssetComputeList'
+import {
+  assetSelectionAsset,
+  locale
+} from '../../../../../.storybook/__mockdata__'
+
+export default {
+  title: 'Component/@shared/AssetList/AssetComputeList',
+  component: AssetComputeList
+} as ComponentMeta<typeof AssetComputeList>
+
+const Template: ComponentStory<typeof AssetComputeList> = (
+  args: AssetComputeListProps
+) => <AssetComputeList {...args} />
+
+interface Props {
+  args: AssetComputeListProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  assets: assetSelectionAsset,
+  locale: locale
+}

src/components/@shared/AssetList/AssetComputeList/index.tsx

@@ -3,18 +3,22 @@ import Dotdotdot from 'react-dotdotdot'
 import Link from 'next/link'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Loader from '@shared/atoms/Loader'
-import styles from './AssetComputeList.module.css'
+import styles from './index.module.css'
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 
 function Empty() {
   return <div className={styles.empty}>No assets found.</div>
 }
 
-export default function AssetComputeSelection({
-  assets
-}: {
+export interface AssetComputeListProps {
   assets: AssetSelectionAsset[]
-}): JSX.Element {
+  locale: string
+}
+
+export default function AssetComputeSelection({
+  assets,
+  locale
+}: AssetComputeListProps): JSX.Element {
   return (
     <div className={styles.display}>
       <div className={styles.scroll}>
@@ -40,6 +44,7 @@ export default function AssetComputeSelection({
                   price={asset.price}
                   size="small"
                   className={styles.price}
+                  locale={locale}
                 />
               </a>
             </Link>

src/components/@shared/AssetList/AssetListTitle/index.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AssetListTitle, {
+  AssetListTitleProps
+} from '@shared/AssetList/AssetListTitle'
+import { asset } from '../../../../../.storybook/__mockdata__'
+
+export default {
+  title: 'Component/@shared/AssetList/AssetListTitle',
+  component: AssetListTitle
+} as ComponentMeta<typeof AssetListTitle>
+
+const Template: ComponentStory<typeof AssetListTitle> = (
+  args: AssetListTitleProps
+) => <AssetListTitle {...args} />
+
+interface Props {
+  args: AssetListTitleProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  title: 'Space Situational Awareness: TLE Data + Visualization'
+}

src/components/@shared/AssetList/AssetListTitle/index.tsx

@@ -1,25 +1,27 @@
 import Link from 'next/link'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { getAssetsNames } from '@utils/aquarius'
-import styles from './AssetListTitle.module.css'
+import styles from './index.module.css'
 import axios from 'axios'
 import { Asset } from '@oceanprotocol/lib'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
+export interface AssetListTitleProps {
+  asset?: Asset
+  did?: string
+  title?: string
+}
+
 export default function AssetListTitle({
   asset,
   did,
   title
-}: {
-  asset?: Asset
-  did?: string
-  title?: string
-}): ReactElement {
+}: AssetListTitleProps): ReactElement {
   const { appConfig } = useMarketMetadata()
   const [assetTitle, setAssetTitle] = useState<string>(title)
 
   useEffect(() => {
-    if (title || !appConfig.metadataCacheUri) return
+    if (title || !appConfig || !appConfig.metadataCacheUri) return
     if (asset) {
       setAssetTitle(asset.metadata.name)
       return
@@ -37,7 +39,7 @@ export default function AssetListTitle({
     return () => {
       source.cancel()
     }
-  }, [assetTitle, appConfig.metadataCacheUri, asset, did, title])
+  }, [assetTitle, appConfig?.metadataCacheUri, asset, did, title])
 
   return (
     <h3 className={styles.title}>

src/components/@shared/AssetList/index.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AssetList, { AssetListProps } from '@shared/AssetList'
+import * as config from '../../../../app.config'
+import { assets, locale } from '../../../../.storybook/__mockdata__'
+import UrqlClientProvider from '@context/UrqlProvider'
+
+export default {
+  title: 'Component/@shared/AssetList',
+  component: AssetList
+} as ComponentMeta<typeof AssetList>
+
+const Template: ComponentStory<typeof AssetList> = (args: AssetListProps) => {
+  return (
+    <UrqlClientProvider>
+      <AssetList {...args} />
+    </UrqlClientProvider>
+  )
+}
+
+interface Props {
+  args: AssetListProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  locale,
+  assets,
+  showPagination: false,
+  chainIds: config.chainIds,
+  accountId: '0x491AECC4b3d690a4D7027A385499fd04fE50b796'
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import { assets, locale } from '../../../../.storybook/__mockdata__'
+import * as config from '../../../../app.config'
+import AssetList from './'
+import UrqlClientProvider from '@context/UrqlProvider'
+
+test('render AssetList with arc', async () => {
+  const args = {
+    locale,
+    assets,
+    showPagination: false,
+    chainIds: config.chainIds,
+    accountId: '0x491AECC4b3d690a4D7027A385499fd04fE50b796'
+  }
+  await act(async () => {
+    render(
+      <UrqlClientProvider>
+        <AssetList {...args} />
+      </UrqlClientProvider>
+    )
+  })
+})

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

@@ -1,16 +1,14 @@
-import AssetTeaser from '@shared/AssetTeaser/AssetTeaser'
+import AssetTeaser from '@shared/AssetTeaser'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Pagination from '@shared/Pagination'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import Loader from '@shared/atoms/Loader'
-import { useUserPreferences } from '@context/UserPreferences'
 import { useIsMounted } from '@hooks/useIsMounted'
 // not sure why this import is required
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { Asset } from '@oceanprotocol/lib'
 import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
-import { useWeb3 } from '@context/Web3'
 
 const cx = classNames.bind(styles)
 
@@ -22,7 +20,7 @@ function LoaderArea() {
   )
 }
 
-declare type AssetListProps = {
+export interface AssetListProps {
   assets: Asset[]
   showPagination: boolean
   page?: number
@@ -31,6 +29,9 @@ declare type AssetListProps = {
   onPageChange?: React.Dispatch<React.SetStateAction<number>>
   className?: string
   noPublisher?: boolean
+  chainIds: number[]
+  accountId: string
+  locale: string
 }
 
 export default function AssetList({
@@ -41,10 +42,11 @@ export default function AssetList({
   isLoading,
   onPageChange,
   className,
-  noPublisher
+  noPublisher,
+  chainIds,
+  accountId,
+  locale
 }: AssetListProps): ReactElement {
-  const { chainIds } = useUserPreferences()
-  const { accountId } = useWeb3()
   const [assetsWithPrices, setAssetsWithPrices] = useState<AssetExtended[]>()
   const [loading, setLoading] = useState<boolean>(isLoading)
   const isMounted = useIsMounted()
@@ -58,7 +60,7 @@ export default function AssetList({
         assets,
         accountId || ''
       )
-      if (!isMounted()) return
+      if (!isMounted() || !assetsWithPrices) return
       setAssetsWithPrices([...assetsWithPrices])
     }
     fetchPrices()
@@ -82,11 +84,12 @@ export default function AssetList({
     <>
       <div className={styleClasses}>
         {assetsWithPrices.length > 0 ? (
-          assetsWithPrices.map((assetWithPrice) => (
+          assetsWithPrices.map((assetWithPrice, i) => (
             <AssetTeaser
               asset={assetWithPrice}
-              key={assetWithPrice.id}
+              key={`${assetWithPrice.id}_${i}`}
               noPublisher={noPublisher}
+              locale={locale}
             />
           ))
         ) : (

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { assetExtended, locale } from '../../../../.storybook/__mockdata__'
+import AssetTeaser, { AssetTeaserProps } from '@shared/AssetTeaser'
+
+export default {
+  title: 'Component/@shared/AssetTeaser',
+  component: AssetTeaser
+} as ComponentMeta<typeof AssetTeaser>
+
+const Template: ComponentStory<typeof AssetTeaser> = (
+  args: AssetTeaserProps
+) => {
+  return <AssetTeaser {...args} />
+}
+
+interface Props {
+  args: AssetTeaserProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  locale,
+  asset: assetExtended
+}

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

@@ -6,18 +6,20 @@ import removeMarkdown from 'remove-markdown'
 import Publisher from '@shared/Publisher'
 import AssetType from '@shared/AssetType'
 import NetworkName from '@shared/NetworkName'
-import styles from './AssetTeaser.module.css'
+import styles from './index.module.css'
 import { getServiceByName } from '@utils/ddo'
 import { AssetExtended } from 'src/@types/AssetExtended'
 
-declare type AssetTeaserProps = {
+export interface AssetTeaserProps {
   asset: AssetExtended
   noPublisher?: boolean
+  locale: string
 }
 
 export default function AssetTeaser({
   asset,
-  noPublisher
+  noPublisher,
+  locale
 }: AssetTeaserProps): ReactElement {
   const { name, type, description } = asset.metadata
   const { datatokens } = asset
@@ -51,7 +53,11 @@ export default function AssetTeaser({
           </div>
 
           <footer className={styles.foot}>
-            <Price accessDetails={asset.accessDetails} size="small" />
+            <Price
+              accessDetails={asset.accessDetails}
+              size="small"
+              locale={locale}
+            />
             <NetworkName networkId={asset.chainId} className={styles.network} />
           </footer>
         </a>

src/components/@shared/FormFields/AssetSelection/index.tsx

@@ -7,6 +7,7 @@ import External from '@images/external.svg'
 import InputElement from '@shared/FormInput/InputElement'
 import Loader from '@shared/atoms/Loader'
 import styles from './index.module.css'
+import { useUserPreferences } from '@context/UserPreferences'
 
 const cx = classNames.bind(styles)
 
@@ -35,6 +36,7 @@ export default function AssetSelection({
   ...props
 }: AssetSelectionProps): JSX.Element {
   const [searchValue, setSearchValue] = useState('')
+  const { locale } = useUserPreferences()
 
   const styleClassesInput = cx({
     input: true,
@@ -114,6 +116,7 @@ export default function AssetSelection({
                   type={asset.price === '0' ? 'free' : undefined}
                   size="small"
                   className={styles.price}
+                  locale={locale}
                 />
               </div>
             ))

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

@@ -21,6 +21,7 @@ export interface PriceUnitProps {
   size?: 'small' | 'mini' | 'large'
   conversion?: boolean
   symbol?: string
+  locale: string
 }
 
 export default function PriceUnit({
@@ -29,10 +30,9 @@ export default function PriceUnit({
   size = 'small',
   conversion,
   symbol,
-  type
+  type,
+  locale
 }: PriceUnitProps): ReactElement {
-  const { locale } = useUserPreferences()
-
   return (
     <div className={`${styles.price} ${styles[size]} ${className}`}>
       {type && type === 'free' ? (

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

@@ -11,6 +11,7 @@ export interface PriceProps {
   className?: string
   conversion?: boolean
   size?: 'small' | 'mini' | 'large'
+  locale: string
 }
 
 export default function Price({
@@ -18,7 +19,8 @@ export default function Price({
   orderPriceAndFees,
   className,
   size,
-  conversion
+  conversion,
+  locale
 }: PriceProps): ReactElement {
   return accessDetails?.price || accessDetails?.type === 'free' ? (
     <PriceUnit
@@ -28,6 +30,7 @@ export default function Price({
       size={size}
       conversion={conversion}
       type={accessDetails.type}
+      locale={locale}
     />
   ) : !accessDetails || accessDetails?.type === '' ? (
     <div className={styles.empty}>

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

@@ -3,6 +3,7 @@ import styles from './index.module.css'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Logo from '@shared/atoms/Logo'
 import Conversion from '@shared/Price/Conversion'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function Token({
   symbol,
@@ -17,6 +18,7 @@ export default function Token({
   noIcon?: boolean
   size?: 'small' | 'mini'
 }): ReactElement {
+  const { locale } = useUserPreferences()
   return (
     <>
       <div className={`${styles.token} ${size ? styles[size] : ''}`}>
@@ -25,7 +27,12 @@ export default function Token({
         >
           <Logo noWordmark />
         </figure>
-        <PriceUnit price={balance} symbol={symbol} size={size} />
+        <PriceUnit
+          price={balance}
+          symbol={symbol}
+          size={size}
+          locale={locale}
+        />
       </div>
       {conversion && (
         <Conversion price={balance} className={`${styles.conversion}`} />

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

@@ -7,6 +7,7 @@ import { useCancelToken } from '@hooks/useCancelToken'
 import { getServiceByName } from '@utils/ddo'
 import { Asset } from '@oceanprotocol/lib'
 import { AssetExtended } from 'src/@types/AssetExtended'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function AlgorithmDatasetsListForCompute({
   asset,
@@ -18,6 +19,7 @@ export default function AlgorithmDatasetsListForCompute({
   const [datasetsForCompute, setDatasetsForCompute] =
     useState<AssetSelectionAsset[]>()
   const newCancelToken = useCancelToken()
+  const { locale } = useUserPreferences()
 
   useEffect(() => {
     if (!asset) return
@@ -42,7 +44,7 @@ export default function AlgorithmDatasetsListForCompute({
   return (
     <div className={styles.datasetsContainer}>
       <h3 className={styles.text}>Datasets algorithm is allowed to run on</h3>
-      <AssetComputeList assets={datasetsForCompute} />
+      <AssetComputeList assets={datasetsForCompute} locale={locale} />
     </div>
   )
 }

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

@@ -4,7 +4,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './PriceOutput.module.css'
 import { AccessDetails } from 'src/@types/Price'
-
+import { useUserPreferences } from '@context/UserPreferences'
 interface PriceOutputProps {
   totalPrice: number
   hasPreviousOrder: boolean
@@ -32,6 +32,7 @@ function Row({
   timeout?: string
   sign?: string
 }) {
+  const { locale } = useUserPreferences()
   return (
     <div className={styles.priceRow}>
       <div className={styles.sign}>{sign}</div>
@@ -41,6 +42,7 @@ function Row({
           symbol={symbol}
           size="small"
           className={styles.price}
+          locale={locale}
         />
         <span className={styles.timeout}>
           {timeout &&
@@ -65,11 +67,16 @@ export default function PriceOutput({
   selectedComputeAssetTimeout
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
-
+  const { locale } = useUserPreferences()
   return (
     <div className={styles.priceComponent}>
       You will pay{' '}
-      <PriceUnit price={`${totalPrice}`} symbol={symbol} size="small" />
+      <PriceUnit
+        price={`${totalPrice}`}
+        symbol={symbol}
+        size="small"
+        locale={locale}
+      />
       <Tooltip
         content={
           <div className={styles.calculation}>

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

@@ -34,6 +34,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 import { AccessDetails } from 'src/@types/Price'
 import { transformAssetToAssetSelection } from '@utils/assetConvertor'
 import { useMarketMetadata } from '@context/MarketMetadata'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function Compute({
   ddo,
@@ -53,6 +54,7 @@ export default function Compute({
   consumableFeedback?: string
 }): ReactElement {
   const { appConfig } = useMarketMetadata()
+  const { locale } = useUserPreferences()
   const { accountId } = useWeb3()
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [error, setError] = useState<string>()
@@ -162,6 +164,7 @@ export default function Compute({
         []
       )
     }
+
     return algorithmSelectionList
   }
 
@@ -387,7 +390,12 @@ export default function Compute({
     <>
       <div className={styles.info}>
         <FileIcon file={file} isLoading={fileIsLoading} small />
-        <Price accessDetails={accessDetails} conversion size="large" />
+        <Price
+          accessDetails={accessDetails}
+          conversion
+          size="large"
+          locale={locale}
+        />
       </div>
 
       {ddo.metadata.type === 'algorithm' ? (

src/components/Asset/AssetActions/Download.tsx

@@ -19,6 +19,7 @@ import { toast } from 'react-toastify'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { usePool } from '@context/Pool'
 import { useMarketMetadata } from '@context/MarketMetadata'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function Download({
   asset,
@@ -36,6 +37,7 @@ export default function Download({
   consumableFeedback?: string
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
+  const { locale } = useUserPreferences()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { isInPurgatory, isAssetNetwork } = useAsset()
   const { poolData } = usePool()
@@ -213,6 +215,7 @@ export default function Download({
             orderPriceAndFees={orderPriceAndFees}
             conversion
             size="large"
+            locale={locale}
           />
           {!isInPurgatory && <PurchaseButton />}
         </div>

src/components/Asset/AssetActions/Pool/Sections/index.tsx

@@ -15,9 +15,11 @@ import { OpcFeesQuery_opc as OpcFeesData } from '../../../../../@types/subgraph/
 import { getOpcFees } from '@utils/subgraph'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function PoolSections() {
   const { asset } = useAsset()
+  const { locale } = useUserPreferences()
   const { poolData, poolInfo, poolInfoUser, poolInfoOwner } = usePool()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { chainId } = useWeb3()
@@ -35,12 +37,18 @@ export default function PoolSections() {
   return (
     <>
       <PoolSection className={styles.dataToken}>
-        <PriceUnit price="1" symbol={poolInfo?.datatokenSymbol} size="large" />{' '}
+        <PriceUnit
+          price="1"
+          symbol={poolInfo?.datatokenSymbol}
+          size="large"
+          locale={locale}
+        />{' '}
         ={' '}
         <PriceUnit
           price={`${poolData?.spotPrice}`}
           symbol={poolInfo?.baseTokenSymbol}
           size="large"
+          locale={locale}
         />
         <Tooltip content={content.pool.tooltips.price} />
         <div className={styles.dataTokenLinks}>

src/components/Asset/AssetActions/UserLiquidity.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './UserLiquidity.module.css'
+import { useUserPreferences } from '@context/UserPreferences'
 
 function UserLiquidityLine({
   title,
@@ -11,10 +12,11 @@ function UserLiquidityLine({
   amount: string
   symbol: string
 }) {
+  const { locale } = useUserPreferences()
   return (
     <div>
       <span>{title}</span>
-      <PriceUnit price={amount} symbol={symbol} size="small" />
+      <PriceUnit price={amount} symbol={symbol} size="small" locale={locale} />
     </div>
   )
 }

src/components/Footer/MarketStats/Tooltip.tsx

@@ -4,6 +4,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import NetworkName from '@shared/NetworkName'
 import styles from './Tooltip.module.css'
 import { StatsValue } from './_types'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function MarketStatsTooltip({
   totalValueLockedInOcean,
@@ -16,6 +17,7 @@ export default function MarketStatsTooltip({
   totalOceanLiquidity: StatsValue
   mainChainIds: number[]
 }): ReactElement {
+  const { locale } = useUserPreferences()
   return (
     <>
       <ul className={styles.statsList}>
@@ -35,6 +37,7 @@ export default function MarketStatsTooltip({
               price={totalOceanLiquidity?.[chainId] || '0'}
               symbol="OCEAN"
               size="small"
+              locale={locale}
             />
           </li>
         ))}

src/components/Footer/MarketStats/Total.tsx

@@ -2,12 +2,14 @@ import React, { ReactElement } from 'react'
 import Conversion from '@shared/Price/Conversion'
 import PriceUnit from '@shared/Price/PriceUnit'
 import { StatsTotal } from './_types'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function MarketStatsTotal({
   total
 }: {
   total: StatsTotal
 }): ReactElement {
+  const { locale } = useUserPreferences()
   return (
     <>
       <p>
@@ -25,6 +27,7 @@ export default function MarketStatsTotal({
         price={`${total.totalOceanLiquidity}`}
         symbol="OCEAN"
         size="small"
+        locale={locale}
       />
       , plus datatokens for each pool.
     </>

src/components/Home/Bookmarks.tsx

@@ -12,6 +12,14 @@ import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { useWeb3 } from '@context/Web3'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
+export function PriceComponent(row: AssetExtended) {
+  const { locale } = useUserPreferences()
+
+  return (
+    <Price accessDetails={row.accessDetails} size="small" locale={locale} />
+  )
+}
+
 const columns = [
   {
     name: 'Data Set',
@@ -36,7 +44,7 @@ const columns = [
   {
     name: 'Price',
     selector: function getAssetRow(row: AssetExtended) {
-      return <Price accessDetails={row.accessDetails} size="small" />
+      return PriceComponent(row)
     },
     right: true
   }

src/components/Home/index.tsx

@@ -14,6 +14,7 @@ import styles from './index.module.css'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { SortTermOptions } from '../../@types/aquarius/SearchQuery'
+import { useWeb3 } from '@context/Web3'
 
 async function getQueryHighest(
   chainIds: number[]
@@ -51,7 +52,8 @@ function SectionQueryResult({
   action?: ReactElement
   queryData?: string[]
 }) {
-  const { chainIds } = useUserPreferences()
+  const { chainIds, locale } = useUserPreferences()
+  const { accountId } = useWeb3()
   const [result, setResult] = useState<PagedAssets>()
   const [loading, setLoading] = useState<boolean>()
   const isMounted = useIsMounted()
@@ -99,6 +101,9 @@ function SectionQueryResult({
         assets={result?.results}
         showPagination={false}
         isLoading={loading || !query}
+        chainIds={chainIds}
+        accountId={accountId}
+        locale={locale}
       />
 
       {action && action}

src/components/Profile/History/PublishedList.tsx

@@ -15,7 +15,7 @@ export default function PublishedList({
   accountId: string
 }): ReactElement {
   const { appConfig } = useMarketMetadata()
-  const { chainIds } = useUserPreferences()
+  const { chainIds, locale } = useUserPreferences()
 
   const [queryResult, setQueryResult] = useState<PagedAssets>()
   const [isLoading, setIsLoading] = useState(false)
@@ -72,6 +72,8 @@ export default function PublishedList({
     access
   ])
 
+  console.log(queryResult?.results)
+
   return accountId ? (
     <>
       <Filters
@@ -92,6 +94,9 @@ export default function PublishedList({
         }}
         className={styles.assets}
         noPublisher
+        chainIds={chainIds}
+        accountId={accountId}
+        locale={locale}
       />
     </>
   ) : (

src/components/Publish/Pricing/Price.tsx

@@ -7,6 +7,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'
 import { getFieldContent } from '../_utils'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function Price({
   firstPrice,
@@ -16,6 +17,7 @@ export default function Price({
   content?: any
 }): ReactElement {
   const [field, meta] = useField('pricing.price')
+  const { locale } = useUserPreferences()
 
   const { values } = useFormikContext<FormPublishData>()
   const { dataTokenOptions } = values.services[0]
@@ -57,6 +59,7 @@ export default function Price({
                 price={Number(firstPrice) > 0 ? firstPrice : '-'}
                 size="small"
                 conversion
+                locale={locale}
               />
             </aside>
           )}

src/components/Search/index.tsx

@@ -8,6 +8,7 @@ import { useUserPreferences } from '@context/UserPreferences'
 import { useCancelToken } from '@hooks/useCancelToken'
 import styles from './index.module.css'
 import { useRouter } from 'next/router'
+import { useWeb3 } from '@context/Web3'
 
 export default function SearchPage({
   setTotalResults,
@@ -18,7 +19,8 @@ export default function SearchPage({
 }): ReactElement {
   const router = useRouter()
   const [parsed, setParsed] = useState<queryString.ParsedQuery<string>>()
-  const { chainIds } = useUserPreferences()
+  const { chainIds, locale } = useUserPreferences()
+  const { accountId } = useWeb3()
   const [queryResult, setQueryResult] = useState<PagedAssets>()
   const [loading, setLoading] = useState<boolean>()
   const [serviceType, setServiceType] = useState<string>()
@@ -106,6 +108,9 @@ export default function SearchPage({
           page={queryResult?.page}
           totalPages={queryResult?.totalPages}
           onPageChange={updatePage}
+          chainIds={chainIds}
+          accountId={accountId}
+          locale={locale}
         />
       </div>
     </>