47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import useOraclePrice from '../hooks/useOraclePrice'
|
|
import { formatUsdValue } from '../utils'
|
|
import { MarketDataLoader } from './MarketDetails'
|
|
|
|
interface DayHighLowProps {
|
|
high: number
|
|
low: number
|
|
isTableView?: boolean
|
|
}
|
|
|
|
const DayHighLow = ({ high, low, isTableView }: DayHighLowProps) => {
|
|
const price = useOraclePrice()
|
|
let rangePercent = 0
|
|
let latestPrice = 0
|
|
|
|
if (price) {
|
|
latestPrice = price?.toNumber()
|
|
}
|
|
|
|
if (high) {
|
|
rangePercent = ((latestPrice - low) * 100) / (high - low)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-between md:block">
|
|
<div className="flex items-center">
|
|
<div className={`pr-2 text-th-fgd-2 ${!isTableView && 'md:text-xs'}`}>
|
|
{low ? formatUsdValue(low) : <MarketDataLoader />}
|
|
</div>
|
|
<div className="flex h-1.5 w-12 rounded bg-th-bkg-3 sm:w-16">
|
|
<div
|
|
style={{
|
|
width: `${rangePercent}%`,
|
|
}}
|
|
className="flex rounded bg-th-primary"
|
|
></div>
|
|
</div>
|
|
<div className={`pl-2 text-th-fgd-2 ${!isTableView && 'md:text-xs'}`}>
|
|
{high ? formatUsdValue(high) : <MarketDataLoader />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DayHighLow
|