bbbdca6950
* added icon for atom and tokenInfo data update * borrow page initial commit * feat: borrow funds to ca and wallet * close borrow module on tx success * feat: repay funds initial setup * repay funds action hook * repay slider. module state on borrow page component * styling: minor tweak to text colors * limit manual input on repay to max value * borrow funds component slider initial * style: max button typography * AssetRow extracted to separate file. organize imports * ContainerSecondary component added * loading indicator for pending actions * style: progress bar colors * tanstack table added * tanstack react-table dependency missing * table cleanup and layout adjustments * fix account stats formula and update market data to match spreadsheet * calculate max borrow amount hook * reset borrow and repay components on account change * max borrow amount decimals. memorized return * hook tanstack data with real data * redefine borrowedAssetsMap to map * update max borrow amount formulas * remove unnecessary table component. refactor borrow table
31 lines
739 B
TypeScript
31 lines
739 B
TypeScript
import React from 'react'
|
|
|
|
type Props = {
|
|
value: number
|
|
}
|
|
|
|
const ProgressBar = ({ value }: Props) => {
|
|
const percentageValue = `${(value * 100).toFixed(0)}%`
|
|
|
|
let bgColorClass = 'bg-green-500'
|
|
if (value < 1 / 3) {
|
|
bgColorClass = 'bg-red-500'
|
|
} else if (value < 2 / 3) {
|
|
bgColorClass = 'bg-yellow-500'
|
|
}
|
|
|
|
return (
|
|
<div className="relative z-0 h-4 w-[130px] rounded-full bg-black">
|
|
<div
|
|
className={`absolute z-10 h-4 rounded-full ${bgColorClass}`}
|
|
style={{ width: percentageValue }}
|
|
/>
|
|
<div className="absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white">
|
|
{percentageValue}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProgressBar
|