diff --git a/app.config.js b/app.config.js
index 6e13d96dc..6801d707d 100644
--- a/app.config.js
+++ b/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: {
diff --git a/src/components/atoms/Price/Conversion.module.css b/src/components/atoms/Price/Conversion.module.css
index 55e9d3cfd..e7df076f4 100644
--- a/src/components/atoms/Price/Conversion.module.css
+++ b/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);
+}
diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx
index 57d20b131..cbab887b0 100644
--- a/src/components/atoms/Price/Conversion.tsx
+++ b/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) => `${match}`
+ )
+ setPriceConverted(convertedFormattedHTMLstring)
+ }, [price, prices, currency, locale, isFiat])
return (
- ≈ {priceConverted} {currency}
+ ≈ {' '}
+ {!isFiat && currency}
)
}
diff --git a/src/components/atoms/Price/PriceUnit.module.css b/src/components/atoms/Price/PriceUnit.module.css
index 72aa7e255..332aa7224 100644
--- a/src/components/atoms/Price/PriceUnit.module.css
+++ b/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);
}
diff --git a/src/components/atoms/Price/PriceUnit.tsx b/src/components/atoms/Price/PriceUnit.tsx
index 490cab444..21e5055ed 100644
--- a/src/components/atoms/Price/PriceUnit.tsx
+++ b/src/components/atoms/Price/PriceUnit.tsx
@@ -42,7 +42,7 @@ export default function PriceUnit({
// See https://github.com/oceanprotocol/market/issues/70
significantFigures: 4
})}{' '}
- {symbol || 'OCEAN'}
+ {symbol || 'OCEAN'}
{type && type === 'pool' && (