refactor Price component to be more universal

src/components/atoms/Price/Conversion.module.css

@@ -3,4 +3,5 @@
   font-size: var(--font-size-small);
   margin-left: calc(var(--spacer) / 6);
   color: var(--color-secondary);
+  font-weight: var(--font-weight-base);
 }

src/components/atoms/Price/PriceUnit.module.css

@@ -0,0 +1,19 @@
+.price {
+  display: inline-block;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-large);
+  color: var(--brand-grey-dark);
+  line-height: 1;
+}
+
+.price span:first-child {
+  font-weight: var(--font-weight-base);
+  color: var(--color-secondary);
+  font-size: var(--font-size-base);
+}
+
+.small {
+  /* lazy making-conversion-smaller-with-same-markup */
+  transform: scale(0.8);
+  transform-origin: left 80%;
+}

src/components/atoms/Price/PriceUnit.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { formatCurrency } from '@coingecko/cryptoformat'
+import classNames from 'classnames/bind'
+import Conversion from './Conversion'
+import styles from './PriceUnit.module.css'
+
+const cx = classNames.bind(styles)
+
+export default function PriceUnit({
+  price,
+  className,
+  small,
+  conversion,
+  symbol
+}: {
+  price: string
+  className?: string
+  small?: boolean
+  conversion?: boolean
+  symbol?: string
+}): ReactElement {
+  const styleClasses = cx({
+    price: true,
+    small: small,
+    [className]: className
+  })
+
+  return (
+    <div className={styleClasses}>
+      {formatCurrency(Number(price), '', 'en', false, true)}{' '}
+      <span>{symbol || 'OCEAN'}</span>
+      {conversion && <Conversion price={price} />}
+    </div>
+  )
+}

src/components/atoms/Price/index.module.css

@@ -1,23 +1,4 @@
-.price {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-large);
-  color: var(--brand-grey-dark);
-  line-height: 1;
-}
-
-.price span:first-child {
-  font-weight: var(--font-weight-base);
-  color: var(--color-secondary);
-  font-size: var(--font-size-base);
-}
-
 .empty {
   color: var(--color-secondary);
   font-weight: var(--font-weight-bold);
 }
-
-.small {
-  /* lazy making-conversion-smaller-with-same-markup */
-  transform: scale(0.8);
-  transform-origin: left 80%;
-}

src/components/atoms/Price/index.tsx

@@ -1,24 +1,22 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import classNames from 'classnames/bind'
-import PriceConversion from './Conversion'
 import styles from './index.module.css'
-import { formatCurrency } from '@coingecko/cryptoformat'
 import { useMetadata, useOcean } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
 import Loader from '../Loader'
 import Tooltip from '../Tooltip'
-
-const cx = classNames.bind(styles)
+import PriceUnit from './PriceUnit'
 
 export default function Price({
   ddo,
   className,
   small,
+  conversion,
   setPriceOutside
 }: {
   ddo: DDO
   className?: string
   small?: boolean
+  conversion?: boolean
   setPriceOutside?: (price: string) => void
 }): ReactElement {
   const { ocean, chainId, accountId } = useOcean()
@@ -35,27 +33,15 @@ export default function Price({
     init()
   }, [chainId, accountId, ocean])
 
-  const styleClasses = cx({
-    price: true,
-    small: small,
-    [className]: className
-  })
-
-  const isFree = price === '0'
-
-  const displayPrice = isFree ? (
-    'Free'
-  ) : (
-    <>
-      <span>OCEAN</span> {formatCurrency(Number(price), '', 'en', false, true)}
-      <PriceConversion price={price} />
-    </>
-  )
-
   return !ocean ? (
     <div className={styles.empty}>Please connect your wallet to view price</div>
   ) : price ? (
-    <div className={styleClasses}>{displayPrice}</div>
+    <PriceUnit
+      price={price}
+      className={className}
+      small={small}
+      conversion={conversion}
+    />
   ) : price === '' ? (
     <div className={styles.empty}>
       No price found{' '}

src/components/organisms/AssetActions/Compute.tsx

@@ -89,7 +89,7 @@ export default function Compute({
 
   return (
     <div className={styles.compute}>
-      <Price ddo={ddo} setPriceOutside={setPrice} />
+      <Price ddo={ddo} setPriceOutside={setPrice} conversion />
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -49,7 +49,7 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          <Price ddo={ddo} setPriceOutside={setPrice} />
+          <Price ddo={ddo} setPriceOutside={setPrice} conversion />
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/Pool/Token.module.css

@@ -13,14 +13,14 @@
   display: inline-block;
   border: 1px solid var(--brand-grey-lighter);
   border-radius: 50%;
-  padding: 0.4rem;
+  padding: 0.3rem;
   vertical-align: middle;
   margin-right: calc(var(--spacer) / 8);
 }
 
 .icon svg {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
+  width: var(--font-size-base);
+  height: var(--font-size-base);
 }
 
 /* Data Token Icon Style */

src/components/organisms/AssetActions/Pool/Token.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import styles from './Token.module.css'
 import { ReactComponent as Logo } from '../../../../images/logo.svg'
-import { formatCurrency } from '@coingecko/cryptoformat'
+import PriceUnit from '../../../atoms/Price/PriceUnit'
 
 export default function Token({
   symbol,
@@ -15,8 +15,7 @@ export default function Token({
       <figure className={`${styles.icon} ${symbol}`}>
         <Logo />
       </figure>
-      {formatCurrency(Number(balance), '', 'en', false, true)}{' '}
-      <span className={styles.symbol}>{symbol}</span>
+      <PriceUnit price={balance} symbol={symbol} small />
     </div>
   )
 }

src/components/organisms/AssetActions/Pool/index.module.css

@@ -1,8 +1,25 @@
-.title {
+.dataToken {
+  margin-bottom: var(--spacer);
+  padding-bottom: calc(var(--spacer) / 1.5);
   font-size: var(--font-size-large);
-  margin-bottom: calc(var(--spacer) / 4);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-left: var(--spacer);
+  padding-right: var(--spacer);
+  text-align: center;
+}
+
+.poolTokens {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: 1fr 1fr;
+}
+
+.title {
+  font-size: var(--font-size-base);
+  margin-bottom: calc(var(--spacer) / 1.5);
 }
 
 .tokens {
-  margin-bottom: var(--spacer);
 }

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

@@ -1,9 +1,9 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
-import { formatCurrency } from '@coingecko/cryptoformat'
 import styles from './index.module.css'
 import Token from './Token'
+import PriceUnit from '../../../atoms/Price/PriceUnit'
 
 interface Balance {
   ocean: string
@@ -14,7 +14,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const { ocean, accountId } = useOcean()
   const { getBestPool } = useMetadata()
   const [totalBalance, setTotalBalance] = useState<Balance>()
-  const [poolPrice, setPoolPrice] = useState<string>()
   const [dtPrice, setDtPrice] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
@@ -22,8 +21,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   useEffect(() => {
     async function init() {
       try {
-        const { poolAddress, poolPrice } = await getBestPool(ddo.dataToken)
-        setPoolPrice(poolPrice)
+        const { poolAddress } = await getBestPool(ddo.dataToken)
 
         const dtSymbol = await ocean.datatokens.getSymbol(
           ddo.dataToken,
@@ -64,36 +62,28 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <>
-      <h3 className={styles.title}>Your Pooled Tokens</h3>
-      {userBalance && (
-        <div className={styles.tokens}>
-          <Token symbol="OCEAN" balance={userBalance.ocean} />
-          <Token symbol={dtSymbol} balance={userBalance.dt} />
-        </div>
-      )}
+      <div className={styles.dataToken}>
+        <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
+        <PriceUnit price={dtPrice} />
+      </div>
 
-      <h3 className={styles.title}>Total Pooled Tokens</h3>
-      {totalBalance && (
-        <div className={styles.tokens}>
-          <Token symbol="OCEAN" balance={totalBalance.ocean} />
-          <Token symbol={dtSymbol} balance={totalBalance.dt} />
-        </div>
-      )}
+      <div className={styles.poolTokens}>
+        {userBalance && (
+          <div className={styles.tokens}>
+            <h3 className={styles.title}>Your Pooled Tokens</h3>
+            <Token symbol="OCEAN" balance={userBalance.ocean} />
+            <Token symbol={dtSymbol} balance={userBalance.dt} />
+          </div>
+        )}
 
-      {poolPrice && (
-        <p>
-          Pool Price: <br />
-          <span className={styles.symbol}>OCEAN</span>{' '}
-          {formatCurrency(Number(poolPrice), '', 'en', false, true)}
-        </p>
-      )}
-      {dtPrice && (
-        <p>
-          Data Token Price: <br />
-          <span className={styles.symbol}>OCEAN</span>{' '}
-          {formatCurrency(Number(dtPrice), '', 'en', false, true)}
-        </p>
-      )}
+        {totalBalance && (
+          <div className={styles.tokens}>
+            <h3 className={styles.title}>Total Pooled Tokens</h3>
+            <Token symbol="OCEAN" balance={totalBalance.ocean} />
+            <Token symbol={dtSymbol} balance={totalBalance.dt} />
+          </div>
+        )}
+      </div>
     </>
   )
 }