2024-07-26 14:16:59 +02:00
|
|
|
import { type PriceCoingecko, useLocale, usePrices } from '@/features/prices'
|
2024-04-16 12:20:29 +02:00
|
|
|
import { formatFiat } from '@/lib'
|
2024-07-26 14:16:59 +02:00
|
|
|
import styles from './Price.module.css'
|
|
|
|
import { PriceChange } from './PriceChange'
|
2024-04-09 14:46:15 +02:00
|
|
|
|
2024-04-14 12:52:37 +02:00
|
|
|
export function Price({ price }: { price: PriceCoingecko }) {
|
2024-04-09 14:46:15 +02:00
|
|
|
const { isValidating, isLoading } = usePrices()
|
2024-04-16 12:20:29 +02:00
|
|
|
const locale = useLocale()
|
2024-04-09 14:46:15 +02:00
|
|
|
|
|
|
|
const feedbackClasses = isLoading
|
|
|
|
? 'isLoading'
|
|
|
|
: isValidating
|
|
|
|
? 'isValidating'
|
|
|
|
: ''
|
|
|
|
|
|
|
|
return (
|
|
|
|
<p className={styles.price}>
|
2024-04-16 12:20:29 +02:00
|
|
|
<span className={`${styles.fiat} ${feedbackClasses}`}>
|
2024-09-21 03:06:44 +02:00
|
|
|
{formatFiat(price?.usd, 'USD', locale)}
|
2024-04-16 12:20:29 +02:00
|
|
|
</span>
|
2024-04-14 12:52:37 +02:00
|
|
|
{price?.usd_24h_change ? (
|
|
|
|
<PriceChange priceChange={price.usd_24h_change} />
|
|
|
|
) : null}
|
2024-04-09 14:46:15 +02:00
|
|
|
</p>
|
|
|
|
)
|
|
|
|
}
|