mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
5b2bb3045e
* 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
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { formatCurrency } from '@coingecko/cryptoformat'
|
|
import Conversion from './Conversion'
|
|
import styles from './PriceUnit.module.css'
|
|
import { useUserPreferences } from '@context/UserPreferences'
|
|
|
|
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
|
|
significantFigures: 4
|
|
})
|
|
}
|
|
|
|
export default function PriceUnit({
|
|
price,
|
|
className,
|
|
size = 'small',
|
|
conversion,
|
|
symbol,
|
|
type
|
|
}: {
|
|
price: number
|
|
type?: string
|
|
className?: string
|
|
size?: 'small' | 'mini' | 'large'
|
|
conversion?: boolean
|
|
symbol?: string
|
|
}): ReactElement {
|
|
const { locale } = useUserPreferences()
|
|
|
|
return (
|
|
<div className={`${styles.price} ${styles[size]} ${className}`}>
|
|
{type === 'free' ? (
|
|
<div>Free</div>
|
|
) : (
|
|
<>
|
|
<div>
|
|
{Number.isNaN(price) ? '-' : formatPrice(price, locale)}{' '}
|
|
<span className={styles.symbol}>{symbol}</span>
|
|
</div>
|
|
{conversion && <Conversion price={price} symbol={symbol} />}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|