mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
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
This commit is contained in:
parent
d6ad504c51
commit
84746b1027
@ -11,7 +11,21 @@ module.exports = {
|
|||||||
'0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
|
'0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
|
||||||
// Used for conversion display, can be whatever coingecko API supports
|
// Used for conversion display, can be whatever coingecko API supports
|
||||||
// see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies
|
// 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
|
// Config for https://github.com/donavon/use-dark-mode
|
||||||
darkModeConfig: {
|
darkModeConfig: {
|
||||||
|
@ -5,3 +5,9 @@
|
|||||||
color: var(--color-secondary);
|
color: var(--color-secondary);
|
||||||
font-weight: var(--font-weight-base);
|
font-weight: var(--font-weight-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* fiat currency symbol */
|
||||||
|
.conversion strong span {
|
||||||
|
font-weight: var(--font-weight-base);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState, ReactElement } from 'react'
|
import React, { useEffect, useState, ReactElement } from 'react'
|
||||||
import styles from './Conversion.module.css'
|
import styles from './Conversion.module.css'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { formatCurrency } from '@coingecko/cryptoformat'
|
import { formatCurrency, isCrypto } from '@coingecko/cryptoformat'
|
||||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||||
import { usePrices } from '../../../providers/Prices'
|
import { usePrices } from '../../../providers/Prices'
|
||||||
|
|
||||||
@ -18,6 +18,10 @@ export default function Conversion({
|
|||||||
const { currency, locale } = useUserPreferences()
|
const { currency, locale } = useUserPreferences()
|
||||||
|
|
||||||
const [priceConverted, setPriceConverted] = useState('0.00')
|
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({
|
const styleClasses = cx({
|
||||||
conversion: true,
|
conversion: true,
|
||||||
@ -30,24 +34,33 @@ export default function Conversion({
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const fiatValue = (prices as any)[currency.toLowerCase()]
|
const conversionValue = (prices as any)[currency.toLowerCase()]
|
||||||
const converted = fiatValue * Number(price)
|
const converted = conversionValue * Number(price)
|
||||||
const convertedFormatted = formatCurrency(
|
const convertedFormatted = formatCurrency(
|
||||||
converted,
|
converted,
|
||||||
currency,
|
// No passing of `currency` for non-fiat so symbol conversion
|
||||||
|
// doesn't get triggered.
|
||||||
|
isFiat ? currency : '',
|
||||||
locale,
|
locale,
|
||||||
true,
|
false,
|
||||||
{ decimalPlaces: 2 }
|
{ decimalPlaces: 2 }
|
||||||
)
|
)
|
||||||
setPriceConverted(convertedFormatted)
|
// It's a hack! Wrap everything in the string which is not a number or `.` or `,`
|
||||||
}, [price, prices, currency, locale])
|
// 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 (
|
return (
|
||||||
<span
|
<span
|
||||||
className={styleClasses}
|
className={styleClasses}
|
||||||
title="Approximation based on current OCEAN spot price on Coingecko"
|
title="Approximation based on current OCEAN spot price on Coingecko"
|
||||||
>
|
>
|
||||||
≈ <strong>{priceConverted}</strong> {currency}
|
≈ <strong dangerouslySetInnerHTML={{ __html: priceConverted }} />{' '}
|
||||||
|
{!isFiat && currency}
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price span:first-child {
|
.symbol {
|
||||||
font-weight: var(--font-weight-base);
|
font-weight: var(--font-weight-base);
|
||||||
color: var(--color-secondary);
|
color: var(--color-secondary);
|
||||||
font-size: var(--font-size-base);
|
font-size: var(--font-size-base);
|
||||||
@ -21,7 +21,7 @@
|
|||||||
font-size: var(--font-size-base);
|
font-size: var(--font-size-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.price.small span:first-child {
|
.price.small .symbol {
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@ export default function PriceUnit({
|
|||||||
// See https://github.com/oceanprotocol/market/issues/70
|
// See https://github.com/oceanprotocol/market/issues/70
|
||||||
significantFigures: 4
|
significantFigures: 4
|
||||||
})}{' '}
|
})}{' '}
|
||||||
<span>{symbol || 'OCEAN'}</span>
|
<span className={styles.symbol}>{symbol || 'OCEAN'}</span>
|
||||||
{type && type === 'pool' && (
|
{type && type === 'pool' && (
|
||||||
<Badge label="pool" className={styles.badge} />
|
<Badge label="pool" className={styles.badge} />
|
||||||
)}
|
)}
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance span {
|
.symbol {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-weight: var(--font-weight-base);
|
font-weight: var(--font-weight-base);
|
||||||
|
@ -17,7 +17,7 @@ export default function Details(): ReactElement {
|
|||||||
<ul>
|
<ul>
|
||||||
{Object.entries(balance).map(([key, value]) => (
|
{Object.entries(balance).map(([key, value]) => (
|
||||||
<li className={styles.balance} key={key}>
|
<li className={styles.balance} key={key}>
|
||||||
<span>{key.toUpperCase()}</span>{' '}
|
<span className={styles.symbol}>{key.toUpperCase()}</span>{' '}
|
||||||
{formatCurrency(Number(value), '', locale, false, {
|
{formatCurrency(Number(value), '', locale, false, {
|
||||||
significantFigures: 4
|
significantFigures: 4
|
||||||
})}
|
})}
|
||||||
|
@ -41,13 +41,15 @@ const columns = [
|
|||||||
name: 'Your Pool Shares',
|
name: 'Your Pool Shares',
|
||||||
selector: function getAssetRow(row: Asset) {
|
selector: function getAssetRow(row: Asset) {
|
||||||
return <PriceUnit price={row.shares} symbol="pool shares" small />
|
return <PriceUnit price={row.shares} symbol="pool shares" small />
|
||||||
}
|
},
|
||||||
|
right: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Total Pool Liquidity',
|
name: 'Total Pool Liquidity',
|
||||||
selector: function getAssetRow(row: Asset) {
|
selector: function getAssetRow(row: Asset) {
|
||||||
return <TotalLiquidity ddo={row.ddo} />
|
return <TotalLiquidity ddo={row.ddo} />
|
||||||
}
|
},
|
||||||
|
right: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user