refined conversion number formatting, add more currencies (#184)

* fix conversion number formatting
* switch to symbol formatting for fiat
* hack in consistent visual symbol formatting
* add more fiat currencies
* no need for custom isFiat regex
* consistent number column formatting

app.config.js

@@ -11,7 +11,21 @@ module.exports = {
     '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
   // Used for conversion display, can be whatever coingecko API supports
   // see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies
-  currencies: ['EUR', 'USD', 'ETH', 'BTC'],
+  currencies: [
+    'EUR',
+    'USD',
+    'CAD',
+    'GBP',
+    'SGD',
+    'HKD',
+    'CNY',
+    'JPY',
+    'INR',
+    'RUB',
+    'ETH',
+    'BTC',
+    'LINK'
+  ],
 
   // Config for https://github.com/donavon/use-dark-mode
   darkModeConfig: {

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

@@ -5,3 +5,9 @@
   color: var(--color-secondary);
   font-weight: var(--font-weight-base);
 }
+
+/* fiat currency symbol */
+.conversion strong span {
+  font-weight: var(--font-weight-base);
+  color: var(--color-secondary);
+}

src/components/atoms/Price/Conversion.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, ReactElement } from 'react'
 import styles from './Conversion.module.css'
 import classNames from 'classnames/bind'
-import { formatCurrency } from '@coingecko/cryptoformat'
+import { formatCurrency, isCrypto } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { usePrices } from '../../../providers/Prices'
 
@@ -18,6 +18,10 @@ export default function Conversion({
   const { currency, locale } = useUserPreferences()
 
   const [priceConverted, setPriceConverted] = useState('0.00')
+  // detect fiat, only have those kick in full @coingecko/cryptoformat formatting
+  const isFiat = !isCrypto(currency)
+  // isCrypto() only checks for BTC & ETH & unknown but seems sufficient for now
+  // const isFiat = /(EUR|USD|CAD|SGD|HKD|CNY|JPY|GBP|INR|RUB)/g.test(currency)
 
   const styleClasses = cx({
     conversion: true,
@@ -30,24 +34,33 @@ export default function Conversion({
       return
     }
 
-    const fiatValue = (prices as any)[currency.toLowerCase()]
-    const converted = fiatValue * Number(price)
+    const conversionValue = (prices as any)[currency.toLowerCase()]
+    const converted = conversionValue * Number(price)
     const convertedFormatted = formatCurrency(
       converted,
-      currency,
+      // No passing of `currency` for non-fiat so symbol conversion
+      // doesn't get triggered.
+      isFiat ? currency : '',
       locale,
-      true,
+      false,
       { decimalPlaces: 2 }
     )
-    setPriceConverted(convertedFormatted)
-  }, [price, prices, currency, locale])
+    // It's a hack! Wrap everything in the string which is not a number or `.` or `,`
+    // with a span for consistent visual symbol formatting.
+    const convertedFormattedHTMLstring = convertedFormatted.replace(
+      /([^.,0-9]+)/g,
+      (match) => `<span>${match}</span>`
+    )
+    setPriceConverted(convertedFormattedHTMLstring)
+  }, [price, prices, currency, locale, isFiat])
 
   return (
     <span
       className={styleClasses}
       title="Approximation based on current OCEAN spot price on Coingecko"
     >
-      ≈ <strong>{priceConverted}</strong> {currency}
+      ≈ <strong dangerouslySetInnerHTML={{ __html: priceConverted }} />{' '}
+      {!isFiat && currency}
     </span>
   )
 }

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

@@ -10,7 +10,7 @@
   white-space: nowrap;
 }
 
-.price span:first-child {
+.symbol {
   font-weight: var(--font-weight-base);
   color: var(--color-secondary);
   font-size: var(--font-size-base);
@@ -21,7 +21,7 @@
   font-size: var(--font-size-base);
 }
 
-.price.small span:first-child {
+.price.small .symbol {
   font-size: var(--font-size-small);
 }
 

src/components/atoms/Price/PriceUnit.tsx

@@ -42,7 +42,7 @@ export default function PriceUnit({
               // See https://github.com/oceanprotocol/market/issues/70
               significantFigures: 4
             })}{' '}
-        <span>{symbol || 'OCEAN'}</span>
+        <span className={styles.symbol}>{symbol || 'OCEAN'}</span>
         {type && type === 'pool' && (
           <Badge label="pool" className={styles.badge} />
         )}

src/components/molecules/Wallet/Details.module.css

@@ -14,7 +14,7 @@
   white-space: nowrap;
 }
 
-.balance span {
+.symbol {
   width: 20%;
   text-align: right;
   font-weight: var(--font-weight-base);

src/components/molecules/Wallet/Details.tsx

@@ -17,7 +17,7 @@ export default function Details(): ReactElement {
       <ul>
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
-            <span>{key.toUpperCase()}</span>{' '}
+            <span className={styles.symbol}>{key.toUpperCase()}</span>{' '}
             {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
             })}

src/components/pages/History/PoolShares.tsx

@@ -41,13 +41,15 @@ const columns = [
     name: 'Your Pool Shares',
     selector: function getAssetRow(row: Asset) {
       return <PriceUnit price={row.shares} symbol="pool shares" small />
-    }
+    },
+    right: true
   },
   {
     name: 'Total Pool Liquidity',
     selector: function getAssetRow(row: Asset) {
       return <TotalLiquidity ddo={row.ddo} />
-    }
+    },
+    right: true
   }
 ]