From 84746b1027f48fd10c755a7b97c68de12f413589 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 31 Oct 2020 20:18:45 +0100 Subject: [PATCH] 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 | 16 +++++++++- .../atoms/Price/Conversion.module.css | 6 ++++ src/components/atoms/Price/Conversion.tsx | 29 ++++++++++++++----- .../atoms/Price/PriceUnit.module.css | 4 +-- src/components/atoms/Price/PriceUnit.tsx | 2 +- .../molecules/Wallet/Details.module.css | 2 +- src/components/molecules/Wallet/Details.tsx | 2 +- src/components/pages/History/PoolShares.tsx | 6 ++-- 8 files changed, 51 insertions(+), 16 deletions(-) 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' && ( )} diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css index 6998987d1..8178e2f8e 100644 --- a/src/components/molecules/Wallet/Details.module.css +++ b/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); diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx index a84a9dca9..f09cbdb36 100644 --- a/src/components/molecules/Wallet/Details.tsx +++ b/src/components/molecules/Wallet/Details.tsx @@ -17,7 +17,7 @@ export default function Details(): ReactElement {
    {Object.entries(balance).map(([key, value]) => (
  • - {key.toUpperCase()}{' '} + {key.toUpperCase()}{' '} {formatCurrency(Number(value), '', locale, false, { significantFigures: 4 })} diff --git a/src/components/pages/History/PoolShares.tsx b/src/components/pages/History/PoolShares.tsx index c0264e1ab..15129b8ca 100644 --- a/src/components/pages/History/PoolShares.tsx +++ b/src/components/pages/History/PoolShares.tsx @@ -41,13 +41,15 @@ const columns = [ name: 'Your Pool Shares', selector: function getAssetRow(row: Asset) { return - } + }, + right: true }, { name: 'Total Pool Liquidity', selector: function getAssetRow(row: Asset) { return - } + }, + right: true } ]