From 3a3feda675680f0796ee86a4223a9a96d4fdc3a4 Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Mon, 6 Jun 2022 14:25:17 +0300
Subject: [PATCH] some more fixes regarding currency and prices use

---
 .storybook/__mockdata__/index.tsx                    | 10 ++++++++++
 .../@shared/AssetList/AssetComputeList/index.tsx     |  9 ++++++++-
 src/components/@shared/AssetList/index.tsx           |  9 ++++++++-
 src/components/@shared/AssetTeaser/index.stories.tsx |  9 ++++++++-
 src/components/@shared/AssetTeaser/index.tsx         |  9 ++++++++-
 .../@shared/FormFields/AssetSelection/index.tsx      | 12 ++++++++++--
 .../@shared/Price/Conversion/index.stories.tsx       | 12 ++++++++++--
 .../@shared/Price/PriceUnit/index.stories.tsx        | 10 ++++++++--
 src/components/@shared/Price/index.stories.tsx       |  6 ++++--
 src/components/@shared/Price/index.tsx               |  9 ++++++++-
 src/components/@shared/Token/index.tsx               |  8 +++++++-
 .../Asset/AssetActions/Pool/Sections/index.tsx       |  8 +++++++-
 src/components/Home/Bookmarks.tsx                    | 12 ++++++++++--
 src/components/Home/index.tsx                        |  6 +++++-
 src/components/Profile/History/PublishedList.tsx     |  6 +++++-
 src/components/Search/index.tsx                      |  6 +++++-
 16 files changed, 121 insertions(+), 20 deletions(-)

diff --git a/.storybook/__mockdata__/index.tsx b/.storybook/__mockdata__/index.tsx
index da018a1e6..b1caf70d6 100644
--- a/.storybook/__mockdata__/index.tsx
+++ b/.storybook/__mockdata__/index.tsx
@@ -1,9 +1,19 @@
+import { Prices } from '@context/Prices'
 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 currency: string = 'USD'
+
+export const prices: Prices = {
+  eur: 0.0,
+  usd: 0.0,
+  eth: 0.0,
+  btc: 0.0
+}
+
 export const mockWallet: string = '0x02f28391AAECE3654F4ece783d777dde4300d5ef' // dummy account for stories
 
 export const asset: Asset = {
diff --git a/src/components/@shared/AssetList/AssetComputeList/index.tsx b/src/components/@shared/AssetList/AssetComputeList/index.tsx
index d3d6efcd0..84f29a61c 100644
--- a/src/components/@shared/AssetList/AssetComputeList/index.tsx
+++ b/src/components/@shared/AssetList/AssetComputeList/index.tsx
@@ -5,6 +5,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import Loader from '@shared/atoms/Loader'
 import styles from './index.module.css'
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
+import { Prices } from '@context/Prices'
 
 function Empty() {
   return <div className={styles.empty}>No assets found.</div>
@@ -13,11 +14,15 @@ function Empty() {
 export interface AssetComputeListProps {
   assets: AssetSelectionAsset[]
   locale: string
+  currency: string
+  prices: Prices
 }
 
 export default function AssetComputeSelection({
   assets,
-  locale
+  locale,
+  currency,
+  prices
 }: AssetComputeListProps): JSX.Element {
   return (
     <div className={styles.display}>
@@ -45,6 +50,8 @@ export default function AssetComputeSelection({
                   size="small"
                   className={styles.price}
                   locale={locale}
+                  currency={currency}
+                  prices={prices}
                 />
               </a>
             </Link>
diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx
index 3d69a38c0..aa0a97930 100644
--- a/src/components/@shared/AssetList/index.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -9,6 +9,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { Asset } from '@oceanprotocol/lib'
 import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
+import { Prices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
@@ -32,6 +33,8 @@ export interface AssetListProps {
   chainIds: number[]
   accountId: string
   locale: string
+  currency: string
+  prices: Prices
 }
 
 export default function AssetList({
@@ -45,7 +48,9 @@ export default function AssetList({
   noPublisher,
   chainIds,
   accountId,
-  locale
+  locale,
+  currency,
+  prices
 }: AssetListProps): ReactElement {
   const [assetsWithPrices, setAssetsWithPrices] = useState<AssetExtended[]>()
   const [loading, setLoading] = useState<boolean>(isLoading)
@@ -90,6 +95,8 @@ export default function AssetList({
               key={`${assetWithPrice.id}_${i}`}
               noPublisher={noPublisher}
               locale={locale}
+              currency={currency}
+              prices={prices}
             />
           ))
         ) : (
diff --git a/src/components/@shared/AssetTeaser/index.stories.tsx b/src/components/@shared/AssetTeaser/index.stories.tsx
index ea0cc988d..006250ea1 100644
--- a/src/components/@shared/AssetTeaser/index.stories.tsx
+++ b/src/components/@shared/AssetTeaser/index.stories.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { assetExtended, locale } from '../../../../.storybook/__mockdata__'
+import {
+  assetExtended,
+  locale,
+  currency,
+  prices
+} from '../../../../.storybook/__mockdata__'
 import AssetTeaser, { AssetTeaserProps } from '@shared/AssetTeaser'
 
 export default {
@@ -21,5 +26,7 @@ interface Props {
 export const Default: Props = Template.bind({})
 Default.args = {
   locale,
+  currency,
+  prices,
   asset: assetExtended
 }
diff --git a/src/components/@shared/AssetTeaser/index.tsx b/src/components/@shared/AssetTeaser/index.tsx
index 60d0f7699..a4206f9d8 100644
--- a/src/components/@shared/AssetTeaser/index.tsx
+++ b/src/components/@shared/AssetTeaser/index.tsx
@@ -9,17 +9,22 @@ import NetworkName from '@shared/NetworkName'
 import styles from './index.module.css'
 import { getServiceByName } from '@utils/ddo'
 import { AssetExtended } from 'src/@types/AssetExtended'
+import { Prices } from '@context/Prices'
 
 export interface AssetTeaserProps {
   asset: AssetExtended
   noPublisher?: boolean
   locale: string
+  prices: Prices
+  currency: string
 }
 
 export default function AssetTeaser({
   asset,
   noPublisher,
-  locale
+  locale,
+  prices,
+  currency
 }: AssetTeaserProps): ReactElement {
   const { name, type, description } = asset.metadata
   const { datatokens } = asset
@@ -57,6 +62,8 @@ export default function AssetTeaser({
               accessDetails={asset.accessDetails}
               size="small"
               locale={locale}
+              prices={prices}
+              currency={currency}
             />
             <NetworkName networkId={asset.chainId} className={styles.network} />
           </footer>
diff --git a/src/components/@shared/FormFields/AssetSelection/index.tsx b/src/components/@shared/FormFields/AssetSelection/index.tsx
index 8cbc27365..1f08ee584 100644
--- a/src/components/@shared/FormFields/AssetSelection/index.tsx
+++ b/src/components/@shared/FormFields/AssetSelection/index.tsx
@@ -7,7 +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'
+import { Prices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
@@ -21,6 +21,9 @@ export interface AssetSelectionAsset {
 
 export interface AssetSelectionProps {
   assets: AssetSelectionAsset[]
+  currency: string
+  locale: string
+  prices: Prices
   multiple?: boolean
   disabled?: boolean
 }
@@ -33,10 +36,13 @@ export default function AssetSelection({
   assets,
   multiple,
   disabled,
+  currency,
+  locale,
+  prices,
   ...props
 }: AssetSelectionProps): JSX.Element {
   const [searchValue, setSearchValue] = useState('')
-  const { locale } = useUserPreferences()
+  // const { locale } = useUserPreferences()
 
   const styleClassesInput = cx({
     input: true,
@@ -117,6 +123,8 @@ export default function AssetSelection({
                   size="small"
                   className={styles.price}
                   locale={locale}
+                  prices={prices}
+                  currency={currency}
                 />
               </div>
             ))
diff --git a/src/components/@shared/Price/Conversion/index.stories.tsx b/src/components/@shared/Price/Conversion/index.stories.tsx
index 3eba21546..c6dc8b334 100644
--- a/src/components/@shared/Price/Conversion/index.stories.tsx
+++ b/src/components/@shared/Price/Conversion/index.stories.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Conversion, { ConversionProps } from '@shared/Price/Conversion'
-import { locale } from '../../../../../.storybook/__mockdata__'
+import {
+  locale,
+  currency,
+  prices
+} from '../../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price/Conversion',
@@ -19,12 +23,16 @@ interface Props {
 export const Default: Props = Template.bind({})
 Default.args = {
   price: '11.12333',
-  locale
+  locale,
+  currency,
+  prices
 }
 
 export const HideApproximateSymbol: Props = Template.bind({})
 HideApproximateSymbol.args = {
   price: '11.12333',
   locale,
+  currency,
+  prices,
   hideApproximateSymbol: true
 }
diff --git a/src/components/@shared/Price/PriceUnit/index.stories.tsx b/src/components/@shared/Price/PriceUnit/index.stories.tsx
index 5aef1d176..02614e25c 100644
--- a/src/components/@shared/Price/PriceUnit/index.stories.tsx
+++ b/src/components/@shared/Price/PriceUnit/index.stories.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import PriceUnit, { PriceUnitProps } from '@shared/Price/PriceUnit'
-import { locale } from '../../../../../.storybook/__mockdata__'
+import {
+  locale,
+  currency,
+  prices
+} from '../../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price/PriceUnit',
@@ -19,5 +23,7 @@ interface Props {
 export const Default: Props = Template.bind({})
 Default.args = {
   price: '11.12333',
-  locale
+  locale,
+  currency,
+  prices
 }
diff --git a/src/components/@shared/Price/index.stories.tsx b/src/components/@shared/Price/index.stories.tsx
index f33bd1a7e..0a598735f 100644
--- a/src/components/@shared/Price/index.stories.tsx
+++ b/src/components/@shared/Price/index.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Price, { PriceProps } from '@shared/Price'
 import { AccessDetails } from 'src/@types/Price'
-import { locale } from '../../../../.storybook/__mockdata__'
+import { locale, currency, prices } from '../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price',
@@ -41,5 +41,7 @@ const accessDetailsData = {
 export const Default: Props = Template.bind({})
 Default.args = {
   accessDetails: accessDetailsData as AccessDetails,
-  locale
+  locale,
+  currency,
+  prices
 }
diff --git a/src/components/@shared/Price/index.tsx b/src/components/@shared/Price/index.tsx
index b6d55c522..ac338774e 100644
--- a/src/components/@shared/Price/index.tsx
+++ b/src/components/@shared/Price/index.tsx
@@ -4,6 +4,7 @@ import Loader from '../atoms/Loader'
 import Tooltip from '../atoms/Tooltip'
 import PriceUnit from './PriceUnit'
 import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
+import { Prices } from '@context/Prices'
 
 export interface PriceProps {
   accessDetails: AccessDetails
@@ -12,6 +13,8 @@ export interface PriceProps {
   conversion?: boolean
   size?: 'small' | 'mini' | 'large'
   locale: string
+  currency: string
+  prices: Prices
 }
 
 export default function Price({
@@ -20,7 +23,9 @@ export default function Price({
   className,
   size,
   conversion,
-  locale
+  locale,
+  currency,
+  prices
 }: PriceProps): ReactElement {
   return accessDetails?.price || accessDetails?.type === 'free' ? (
     <PriceUnit
@@ -31,6 +36,8 @@ export default function Price({
       conversion={conversion}
       type={accessDetails.type}
       locale={locale}
+      currency={currency}
+      prices={prices}
     />
   ) : !accessDetails || accessDetails?.type === '' ? (
     <div className={styles.empty}>
diff --git a/src/components/@shared/Token/index.tsx b/src/components/@shared/Token/index.tsx
index 0e8436ee6..735be389e 100644
--- a/src/components/@shared/Token/index.tsx
+++ b/src/components/@shared/Token/index.tsx
@@ -4,6 +4,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import Logo from '@shared/atoms/Logo'
 import Conversion from '@shared/Price/Conversion'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function Token({
   symbol,
@@ -18,7 +19,8 @@ export default function Token({
   noIcon?: boolean
   size?: 'small' | 'mini'
 }): ReactElement {
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   return (
     <>
       <div className={`${styles.token} ${size ? styles[size] : ''}`}>
@@ -32,6 +34,8 @@ export default function Token({
           symbol={symbol}
           size={size}
           locale={locale}
+          prices={prices}
+          currency={currency}
         />
       </div>
       {conversion && (
@@ -39,6 +43,8 @@ export default function Token({
           price={balance}
           className={`${styles.conversion}`}
           locale={locale}
+          prices={prices}
+          currency={currency}
         />
       )}
     </>
diff --git a/src/components/Asset/AssetActions/Pool/Sections/index.tsx b/src/components/Asset/AssetActions/Pool/Sections/index.tsx
index 866249946..9d54e7ed2 100644
--- a/src/components/Asset/AssetActions/Pool/Sections/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/Sections/index.tsx
@@ -16,10 +16,12 @@ import { getOpcFees } from '@utils/subgraph'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function PoolSections() {
   const { asset } = useAsset()
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { poolData, poolInfo, poolInfoUser, poolInfoOwner } = usePool()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { chainId } = useWeb3()
@@ -42,6 +44,8 @@ export default function PoolSections() {
           symbol={poolInfo?.datatokenSymbol}
           size="large"
           locale={locale}
+          currency={currency}
+          prices={prices}
         />{' '}
         ={' '}
         <PriceUnit
@@ -49,6 +53,8 @@ export default function PoolSections() {
           symbol={poolInfo?.baseTokenSymbol}
           size="large"
           locale={locale}
+          currency={currency}
+          prices={prices}
         />
         <Tooltip content={content.pool.tooltips.price} />
         <div className={styles.dataTokenLinks}>
diff --git a/src/components/Home/Bookmarks.tsx b/src/components/Home/Bookmarks.tsx
index 04d96f50f..6b89bbd72 100644
--- a/src/components/Home/Bookmarks.tsx
+++ b/src/components/Home/Bookmarks.tsx
@@ -11,12 +11,20 @@ import { AssetExtended } from 'src/@types/AssetExtended'
 import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { useWeb3 } from '@context/Web3'
 import { useMarketMetadata } from '@context/MarketMetadata'
+import { usePrices } from '@context/Prices'
 
 export function PriceComponent(row: AssetExtended) {
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
 
   return (
-    <Price accessDetails={row.accessDetails} size="small" locale={locale} />
+    <Price
+      accessDetails={row.accessDetails}
+      size="small"
+      locale={locale}
+      currency={currency}
+      prices={prices}
+    />
   )
 }
 
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 0d51ba3c5..0a901b0a2 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -15,6 +15,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { SortTermOptions } from '../../@types/aquarius/SearchQuery'
 import { useWeb3 } from '@context/Web3'
+import { usePrices } from '@context/Prices'
 
 async function getQueryHighest(
   chainIds: number[]
@@ -52,7 +53,8 @@ function SectionQueryResult({
   action?: ReactElement
   queryData?: string[]
 }) {
-  const { chainIds, locale } = useUserPreferences()
+  const { chainIds, locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { accountId } = useWeb3()
   const [result, setResult] = useState<PagedAssets>()
   const [loading, setLoading] = useState<boolean>()
@@ -104,6 +106,8 @@ function SectionQueryResult({
         chainIds={chainIds}
         accountId={accountId}
         locale={locale}
+        currency={currency}
+        prices={prices}
       />
 
       {action && action}
diff --git a/src/components/Profile/History/PublishedList.tsx b/src/components/Profile/History/PublishedList.tsx
index a00435063..a892e9b8d 100644
--- a/src/components/Profile/History/PublishedList.tsx
+++ b/src/components/Profile/History/PublishedList.tsx
@@ -8,6 +8,7 @@ import { useCancelToken } from '@hooks/useCancelToken'
 import Filters from '../../Search/Filters'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import { CancelToken } from 'axios'
+import { usePrices } from '@context/Prices'
 
 export default function PublishedList({
   accountId
@@ -15,7 +16,8 @@ export default function PublishedList({
   accountId: string
 }): ReactElement {
   const { appConfig } = useMarketMetadata()
-  const { chainIds, locale } = useUserPreferences()
+  const { chainIds, locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
 
   const [queryResult, setQueryResult] = useState<PagedAssets>()
   const [isLoading, setIsLoading] = useState(false)
@@ -97,6 +99,8 @@ export default function PublishedList({
         chainIds={chainIds}
         accountId={accountId}
         locale={locale}
+        currency={currency}
+        prices={prices}
       />
     </>
   ) : (
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 10ece2dcf..9620901b1 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -9,6 +9,7 @@ import { useCancelToken } from '@hooks/useCancelToken'
 import styles from './index.module.css'
 import { useRouter } from 'next/router'
 import { useWeb3 } from '@context/Web3'
+import { usePrices } from '@context/Prices'
 
 export default function SearchPage({
   setTotalResults,
@@ -19,7 +20,8 @@ export default function SearchPage({
 }): ReactElement {
   const router = useRouter()
   const [parsed, setParsed] = useState<queryString.ParsedQuery<string>>()
-  const { chainIds, locale } = useUserPreferences()
+  const { chainIds, locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { accountId } = useWeb3()
   const [queryResult, setQueryResult] = useState<PagedAssets>()
   const [loading, setLoading] = useState<boolean>()
@@ -111,6 +113,8 @@ export default function SearchPage({
           chainIds={chainIds}
           accountId={accountId}
           locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </div>
     </>