added N/A for negative values as well as missing data (#1691)

* added N/A for negative values as well as missing data

* added N/A in teaser for negative orders count

* added N/A to profile and asset teaser

* change typing on Conversion and PriceUnit

* remove log

* removed unnecessary check on price value

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

@@ -37,7 +37,7 @@ export default function AssetComputeSelection({
                   </Dotdotdot>
                 </div>
                 <PriceUnit
-                  price={asset.price}
+                  price={Number(asset.price)}
                   size="small"
                   className={styles.price}
                 />

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

@@ -29,11 +29,13 @@ export default function AssetType({
         {type === 'dataset' ? 'dataset' : 'algorithm'}
       </div>
 
-      {totalSales ? (
+      {(totalSales || totalSales === 0) && (
         <div className={styles.typeLabel}>
-          {`${totalSales} ${totalSales === 1 ? 'sale' : 'sales'}`}
+          {totalSales < 0
+            ? 'N/A'
+            : `${totalSales} ${totalSales === 1 ? 'sale' : 'sales'}`}
         </div>
-      ) : null}
+      )}
     </div>
   )
 }

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

@@ -108,7 +108,7 @@ export default function AssetSelection({
                 </label>
 
                 <PriceUnit
-                  price={asset.price}
+                  price={Number(asset.price)}
                   type={asset.price === '0' ? 'free' : undefined}
                   size="small"
                   className={styles.price}

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

@@ -10,7 +10,7 @@ export default function Conversion({
   className,
   hideApproximateSymbol
 }: {
-  price: string // expects price in OCEAN, not wei
+  price: number // expects price in OCEAN, not wei
   symbol: string
   className?: string
   hideApproximateSymbol?: boolean
@@ -28,18 +28,12 @@ export default function Conversion({
   const priceTokenId = getCoingeckoTokenId(symbol)
 
   useEffect(() => {
-    if (
-      !prices ||
-      !price ||
-      price === '0' ||
-      !priceTokenId ||
-      !prices[priceTokenId]
-    ) {
+    if (!prices || !price || !priceTokenId || !prices[priceTokenId]) {
       return
     }
 
     const conversionValue = prices[priceTokenId][currency.toLowerCase()]
-    const converted = conversionValue * Number(price)
+    const converted = conversionValue * price
     const convertedFormatted = formatCurrency(
       converted,
       // No passing of `currency` for non-fiat so symbol conversion
@@ -58,7 +52,7 @@ export default function Conversion({
     setPriceConverted(convertedFormattedHTMLstring)
   }, [price, prices, currency, locale, isFiat, priceTokenId])
 
-  return Number(price) > 0 ? (
+  return price > 0 ? (
     <span
       className={`${styles.conversion} ${className || ''}`}
       title="Approximation based on the current spot price on Coingecko"

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

@@ -3,10 +3,9 @@ import { formatCurrency } from '@coingecko/cryptoformat'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '@context/UserPreferences'
-import Badge from '@shared/atoms/Badge'
 
-export function formatPrice(price: string, locale: string): string {
-  return formatCurrency(Number(price), '', locale, false, {
+export function formatPrice(price: number, locale: string): string {
+  return formatCurrency(price, '', locale, false, {
     // Not exactly clear what `significant figures` are for this library,
     // but setting this seems to give us the formatting we want.
     // See https://github.com/oceanprotocol/market/issues/70
@@ -22,7 +21,7 @@ export default function PriceUnit({
   symbol,
   type
 }: {
-  price: string
+  price: number
   type?: string
   className?: string
   size?: 'small' | 'mini' | 'large'
@@ -38,7 +37,7 @@ export default function PriceUnit({
       ) : (
         <>
           <div>
-            {Number.isNaN(Number(price)) ? '-' : formatPrice(price, locale)}{' '}
+            {Number.isNaN(price) ? '-' : formatPrice(price, locale)}{' '}
             <span className={styles.symbol}>{symbol}</span>
           </div>
           {conversion && <Conversion price={price} symbol={symbol} />}

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

@@ -16,10 +16,11 @@ export default function Price({
 }): ReactElement {
   const isSupported =
     accessDetails?.type === 'fixed' || accessDetails?.type === 'free'
+  const price = `${orderPriceAndFees?.price || accessDetails?.price}`
 
   return isSupported ? (
     <PriceUnit
-      price={`${orderPriceAndFees?.price || accessDetails?.price}`}
+      price={Number(price)}
       symbol={accessDetails.baseToken?.symbol}
       className={className}
       size={size}

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

@@ -7,7 +7,9 @@ export default function AssetStats() {
 
   return (
     <footer className={styles.stats}>
-      {!asset || !asset?.stats || asset?.stats?.orders === 0 ? (
+      {!asset || !asset?.stats || asset?.stats?.orders < 0 ? (
+        'N/A'
+      ) : asset?.stats?.orders === 0 ? (
         'No sales yet'
       ) : (
         <>

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

@@ -45,7 +45,7 @@ function Row({
       <div className={styles.type}>{type}</div>
       <div>
         <PriceUnit
-          price={hasPreviousOrder || hasDatatoken ? '0' : `${price}`}
+          price={hasPreviousOrder || hasDatatoken ? 0 : Number(price)}
           symbol={symbol}
           size="small"
           className={styles.price}
@@ -81,7 +81,7 @@ export default function PriceOutput({
   return (
     <div className={styles.priceComponent}>
       You will pay{' '}
-      <PriceUnit price={`${totalPrice}`} symbol={symbol} size="small" />
+      <PriceUnit price={Number(totalPrice)} symbol={symbol} size="small" />
       <Tooltip
         content={
           <div className={styles.calculation}>

src/components/Header/Wallet/Details.tsx

@@ -56,7 +56,7 @@ export default function Details(): ReactElement {
             </span>
             <Conversion
               className={styles.conversion}
-              price={value}
+              price={Number(value)}
               symbol={key}
             />
           </li>

src/components/Profile/Header/Stats.tsx

@@ -15,7 +15,7 @@ export default function Stats({
   const { chainIds } = useUserPreferences()
   const { assets, assetsTotal, sales } = useProfile()
 
-  const [totalSales, setTotalSales] = useState('0')
+  const [totalSales, setTotalSales] = useState(0)
 
   useEffect(() => {
     if (!assets || !accountId || !chainIds) return
@@ -30,7 +30,7 @@ export default function Stats({
               parseInt(priceInfo.accessDetails.price) * priceInfo.stats.orders
           }
         }
-        setTotalSales(JSON.stringify(count))
+        setTotalSales(count)
       } catch (error) {
         LoggerInstance.error(error.message)
       }
@@ -43,14 +43,21 @@ export default function Stats({
       <NumberUnit
         label="Total Sales"
         value={
-          <Conversion
-            price={totalSales}
-            symbol={'ocean'}
-            hideApproximateSymbol
-          />
+          totalSales > 0 ? (
+            <Conversion
+              price={totalSales}
+              symbol={'ocean'}
+              hideApproximateSymbol
+            />
+          ) : (
+            '0'
+          )
         }
       />
-      <NumberUnit label={`Sale${sales === 1 ? '' : 's'}`} value={sales} />
+      <NumberUnit
+        label={`Sale${sales === 1 ? '' : 's'}`}
+        value={sales < 0 ? 0 : sales}
+      />
       <NumberUnit label="Published" value={assetsTotal} />
     </div>
   )