diff --git a/package.json b/package.json index 2997c227..b7a37eb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mars-v2-frontend", - "version": "2.0.1", + "version": "2.0.2", "private": true, "scripts": { "build": "yarn validate-env && next build", diff --git a/src/api/prices/getPythPrices.ts b/src/api/prices/getPythPrices.ts index 2bc251a4..5add3652 100644 --- a/src/api/prices/getPythPrices.ts +++ b/src/api/prices/getPythPrices.ts @@ -1,8 +1,7 @@ +import { cacheFn, pythPriceCache } from 'api/cache' import { ENV } from 'constants/env' import { BN } from 'utils/helpers' -import { cacheFn, pythPriceCache } from '../cache' - export default async function fetchPythPrices(...priceFeedIds: string[]) { try { const pricesUrl = new URL(`${ENV.PYTH_ENDPOINT}/latest_price_feeds`) diff --git a/src/components/Account/AccountDetails/Skeleton.tsx b/src/components/Account/AccountDetails/Skeleton.tsx index 2140910e..683d13de 100644 --- a/src/components/Account/AccountDetails/Skeleton.tsx +++ b/src/components/Account/AccountDetails/Skeleton.tsx @@ -1,4 +1,4 @@ -import { HealthGauge } from 'components/HealthGauge' +import { HealthGauge } from 'components/Account/Health/HealthGauge' import Loading from 'components/Loading' import Text from 'components/Text' @@ -7,7 +7,7 @@ export default function Skeleton() {
- + Health diff --git a/src/components/Account/AccountDetails/index.tsx b/src/components/Account/AccountDetails/index.tsx index f4a26cd9..769a7864 100644 --- a/src/components/Account/AccountDetails/index.tsx +++ b/src/components/Account/AccountDetails/index.tsx @@ -5,12 +5,12 @@ import AccountBalancesTable from 'components/Account/AccountBalancesTable' import AccountComposition from 'components/Account/AccountComposition' import AccountDetailsLeverage from 'components/Account/AccountDetails/AccountDetailsLeverage' import Skeleton from 'components/Account/AccountDetails/Skeleton' +import { HealthGauge } from 'components/Account/Health/HealthGauge' import EscButton from 'components/Button/EscButton' import { glowElement } from 'components/Button/utils' import Card from 'components/Card' import DisplayCurrency from 'components/DisplayCurrency' import { FormattedNumber } from 'components/FormattedNumber' -import { HealthGauge } from 'components/HealthGauge' import { ThreeDots } from 'components/Icons' import Text from 'components/Text' import { DEFAULT_SETTINGS } from 'constants/defaultSettings' @@ -62,8 +62,10 @@ function AccountDetails(props: Props) { ) const updatedAccount = useStore((s) => s.updatedAccount) const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded) - const { health } = useHealthComputer(account) - const { health: updatedHealth } = useHealthComputer(updatedAccount || account) + const { health, healthFactor } = useHealthComputer(account) + const { health: updatedHealth, healthFactor: updatedHealthFactor } = useHealthComputer( + updatedAccount || account, + ) const { data: prices } = usePrices() const accountBalanceValue = useMemo( () => calculateAccountBalanceValue(updatedAccount ?? account, prices), @@ -128,7 +130,12 @@ function AccountDetails(props: Props) { onClick={() => useStore.setState({ accountDetailsExpanded: !accountDetailsExpanded })} >
- + Health diff --git a/src/components/Account/AccountList/AccountStats.tsx b/src/components/Account/AccountList/AccountStats.tsx index 2ff13667..01fbd9f3 100644 --- a/src/components/Account/AccountList/AccountStats.tsx +++ b/src/components/Account/AccountList/AccountStats.tsx @@ -27,7 +27,7 @@ export default function AccountStats(props: Props) { () => (!account ? null : calculateAccountBalanceValue(account, prices)), [account, prices], ) - const { health } = useHealthComputer(account) + const { health, healthFactor } = useHealthComputer(account) const { data } = useBorrowMarketAssetsTableData(false) const borrowAssetsData = useMemo(() => data?.allAssets || [], [data]) const { availableAssets: lendingAvailableAssets, accountLentAssets } = @@ -49,7 +49,12 @@ export default function AccountStats(props: Props) { return (
- + {isActive && setShowMenu && (
- + Health - +
diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx index 57983300..d824ec03 100644 --- a/src/components/Account/AccountSummary.tsx +++ b/src/components/Account/AccountSummary.tsx @@ -4,7 +4,7 @@ import { HTMLAttributes, useCallback, useMemo } from 'react' import Accordion from 'components/Accordion' import AccountBalancesTable from 'components/Account/AccountBalancesTable' import AccountComposition from 'components/Account/AccountComposition' -import HealthBar from 'components/Account/HealthBar' +import HealthBar from 'components/Account/Health/HealthBar' import Card from 'components/Card' import DisplayCurrency from 'components/DisplayCurrency' import { FormattedNumber } from 'components/FormattedNumber' @@ -50,8 +50,9 @@ export default function AccountSummary(props: Props) { () => [...lendingAvailableAssets, ...accountLentAssets], [lendingAvailableAssets, accountLentAssets], ) - const { health } = useHealthComputer(props.account) - const { health: updatedHealth } = useHealthComputer(updatedAccount) + const { health, healthFactor } = useHealthComputer(props.account) + const { health: updatedHealth, healthFactor: updatedHealthFactor } = + useHealthComputer(updatedAccount) const leverage = useMemo( () => (props.account ? calculateAccountLeverage(props.account, prices) : BN_ZERO), [props.account, prices], @@ -109,7 +110,13 @@ export default function AccountSummary(props: Props) { )} - + ( LocalStorageKeys.REDUCE_MOTION, DEFAULT_SETTINGS.reduceMotion, @@ -38,20 +45,19 @@ export default function HealthBar(props: Props) { const updatedWidth = calculateHealth(updatedHealth ?? 0) const isUpdated = updatedWidth > 0 && updatedWidth !== width const isIncrease = isUpdated && updatedWidth > width - const [color, label] = useHealthColorAndLabel(health, 'fill') - const [updatedColor, updatedLabel] = useHealthColorAndLabel(updatedHealth ?? 0, 'fill') + const color = useHealthColor(health, 'fill') + const updatedColor = useHealthColor(updatedHealth ?? 0, 'fill') const [backgroundColor, foreGroundColor] = useMemo( () => getHealthIndicatorColors(color, updatedColor, 'fill', isUpdated, isIncrease), [color, updatedColor, isUpdated, isIncrease], ) return ( - -
+
@@ -119,6 +125,6 @@ export default function HealthBar(props: Props) { )}
- + ) } diff --git a/src/components/Account/Health/HealthGauge.tsx b/src/components/Account/Health/HealthGauge.tsx new file mode 100644 index 00000000..4261496d --- /dev/null +++ b/src/components/Account/Health/HealthGauge.tsx @@ -0,0 +1,289 @@ +import classNames from 'classnames' +import { useMemo } from 'react' + +import HealthIcon from 'components/Account/Health/HealthIcon' +import HealthTooltip from 'components/Account/Health/HealthTooltip' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { LocalStorageKeys } from 'constants/localStorageKeys' +import useHealthColorAndLabel from 'hooks/useHealthColor' +import useLocalStorage from 'hooks/useLocalStorage' +import { computeHealthGaugePercentage } from 'utils/accounts' +import { getHealthIndicatorColors } from 'utils/healthIndicator' + +interface Props { + diameter?: number + health: number + healthFactor: number + updatedHealthFactor?: number + updatedHealth?: number +} + +const RADIUS = 350 +const ROTATION = { + rotate: '-126deg', + transformOrigin: 'center', +} + +export const HealthGauge = ({ + diameter = 40, + health = 0, + updatedHealth = 0, + healthFactor = 0, + updatedHealthFactor = 0, +}: Props) => { + const color = useHealthColorAndLabel(health, 'text') + const updatedColor = useHealthColorAndLabel(updatedHealth ?? 0, 'text') + const [reduceMotion] = useLocalStorage( + LocalStorageKeys.REDUCE_MOTION, + DEFAULT_SETTINGS.reduceMotion, + ) + const percentage = useMemo(() => computeHealthGaugePercentage(health), [health]) + const updatedPercentage = useMemo( + () => computeHealthGaugePercentage(updatedHealth), + [updatedHealth], + ) + const isUpdated = updatedHealthFactor !== 0 && updatedPercentage !== percentage + const isIncrease = isUpdated && updatedPercentage < percentage + const [backgroundColor, foreGroundColor] = useMemo( + () => getHealthIndicatorColors(color, updatedColor, 'text', isUpdated, isIncrease), + [color, updatedColor, isUpdated, isIncrease], + ) + + const currentHealth = useMemo( + () => (isUpdated ? updatedHealth : health), + [isUpdated, updatedHealth, health], + ) + + return ( + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {isUpdated && ( + + )} + +
+
+ + ) +} diff --git a/src/components/Account/Health/HealthIcon.tsx b/src/components/Account/Health/HealthIcon.tsx new file mode 100644 index 00000000..8712f73d --- /dev/null +++ b/src/components/Account/Health/HealthIcon.tsx @@ -0,0 +1,31 @@ +import classNames from 'classnames' + +import { ExclamationMarkCircled, Heart } from 'components/Icons' + +interface Props { + isLoading: boolean + health: number + className: string + colorClass?: string +} + +export default function HealthIcon(props: Props) { + const { isLoading, health, className, colorClass } = props + const color = colorClass ?? 'text-white' + + return ( + <> + {!isLoading && health === 0 ? ( + + ) : ( + + )} + + ) +} diff --git a/src/components/Account/Health/HealthTooltip.tsx b/src/components/Account/Health/HealthTooltip.tsx new file mode 100644 index 00000000..6682990d --- /dev/null +++ b/src/components/Account/Health/HealthTooltip.tsx @@ -0,0 +1,71 @@ +import React, { useMemo } from 'react' + +import { CircularProgress } from 'components/CircularProgress' +import Text from 'components/Text' +import { Tooltip } from 'components/Tooltip' +import { BN } from 'utils/helpers' + +interface Props { + health: number + healthFactor: number + children: React.ReactNode +} + +function HealthTooltipContent({ health, healthFactor }: { health: number; healthFactor: number }) { + const healthStatus = useMemo(() => { + if (health > 30) return 'Healthy' + if (health > 10) return 'Attention' + if (health > 0 && health <= 10) return 'Close to Liquidation' + + return 'Liquidation Risk' + }, [health]) + + if (healthFactor === 0) + return ( +
+ + Loading... + + +
+ ) + + return ( +
+ + Health: {health}% + + + ({healthStatus}) + + + Health Factor: {BN(healthFactor).toPrecision(4)} + + {health > 0 && health <= 10 && ( + + A small price movement can cause your account to be become liquidatable! + + )} + {health === 0 && ( + + Your account is unhealthy and can be liquidated! + + )} +
+ ) +} + +export default function HealthTooltip(props: Props) { + const { health, healthFactor, children } = props + + return ( + } + > + {children} + + ) +} diff --git a/src/components/Gauge.tsx b/src/components/Gauge.tsx index b0f31e58..cd677414 100644 --- a/src/components/Gauge.tsx +++ b/src/components/Gauge.tsx @@ -25,7 +25,6 @@ export const Gauge = ({ percentage = 0, tooltip, icon, - labelClassName, }: Props) => { const [reduceMotion] = useLocalStorage( LocalStorageKeys.REDUCE_MOTION, @@ -48,7 +47,7 @@ export const Gauge = ({ width={diameter} height={diameter} style={{ transform: 'rotate(-90deg)' }} - className='absolute left-0 top-0' + className='absolute top-0 left-0' > {!strokeColor && ( diff --git a/src/components/HealthGauge.tsx b/src/components/HealthGauge.tsx deleted file mode 100644 index c983544d..00000000 --- a/src/components/HealthGauge.tsx +++ /dev/null @@ -1,268 +0,0 @@ -import classNames from 'classnames' -import { useMemo } from 'react' - -import { Heart } from 'components/Icons' -import { Tooltip } from 'components/Tooltip' -import { DEFAULT_SETTINGS } from 'constants/defaultSettings' -import { LocalStorageKeys } from 'constants/localStorageKeys' -import useHealthColorAndLabel from 'hooks/useHealthColorAndLabel' -import useLocalStorage from 'hooks/useLocalStorage' -import { computeHealthGaugePercentage } from 'utils/accounts' -import { getHealthIndicatorColors } from 'utils/healthIndicator' - -interface Props { - diameter?: number - health: number - updatedHealth?: number -} - -const RADIUS = 350 -const ROTATION = { - rotate: '-126deg', - transformOrigin: 'center', -} - -export const HealthGauge = ({ diameter = 40, health = 0, updatedHealth = 0 }: Props) => { - const [color, label] = useHealthColorAndLabel(health, 'text') - const [updatedColor, updatedLabel] = useHealthColorAndLabel(updatedHealth ?? 0, 'text') - const [reduceMotion] = useLocalStorage( - LocalStorageKeys.REDUCE_MOTION, - DEFAULT_SETTINGS.reduceMotion, - ) - const percentage = useMemo(() => computeHealthGaugePercentage(health), [health]) - const updatedPercentage = useMemo( - () => computeHealthGaugePercentage(updatedHealth), - [updatedHealth], - ) - const isUpdated = updatedHealth !== 0 && updatedPercentage !== percentage - const isIncrease = isUpdated && updatedPercentage < percentage - const [backgroundColor, foreGroundColor] = useMemo( - () => getHealthIndicatorColors(color, updatedColor, 'text', isUpdated, isIncrease), - [color, updatedColor, isUpdated, isIncrease], - ) - - const tooltipContent = health === 0 ? 'loading...' : isUpdated ? updatedLabel : label - - return ( - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {isUpdated && ( - - )} - -
- - ) -} diff --git a/src/components/Portfolio/Account/Summary.tsx b/src/components/Portfolio/Account/Summary.tsx index 39b18c1b..dc30eec1 100644 --- a/src/components/Portfolio/Account/Summary.tsx +++ b/src/components/Portfolio/Account/Summary.tsx @@ -19,7 +19,7 @@ interface Props { function Content(props: Props) { const { data: account } = useAccount(props.accountId, true) const { data: prices } = usePrices() - const { health } = useHealthComputer(account) + const { health, healthFactor } = useHealthComputer(account) const { data } = useBorrowMarketAssetsTableData(false) const borrowAssets = useMemo(() => data?.allAssets || [], [data]) const { allAssets: lendingAssets } = useLendingMarketAssetsTableData() @@ -74,12 +74,23 @@ function Content(props: Props) { ] }, [account, borrowAssets, lendingAssets, prices]) - return + return ( + + ) } export default function Summary(props: Props) { return ( - }> + + } + > ) diff --git a/src/components/Portfolio/Card/Skeleton.tsx b/src/components/Portfolio/Card/Skeleton.tsx index b5816805..baf5f322 100644 --- a/src/components/Portfolio/Card/Skeleton.tsx +++ b/src/components/Portfolio/Card/Skeleton.tsx @@ -1,35 +1,42 @@ import React from 'react' -import HealthBar from 'components/Account/HealthBar' +import HealthBar from 'components/Account/Health/HealthBar' +import HealthIcon from 'components/Account/Health/HealthIcon' import Card from 'components/Card' -import { Heart } from 'components/Icons' import Text from 'components/Text' import TitleAndSubCell from 'components/TitleAndSubCell' interface Props { stats: { title: React.ReactNode; sub: string }[] health: number + healthFactor: number accountId: string isCurrent?: boolean } export default function Skeleton(props: Props) { + const { stats, health, healthFactor, accountId, isCurrent } = props return (
- Credit Account {props.accountId} + Credit Account {accountId} - {props.isCurrent && '(current)'} + {isCurrent && '(current)'}
- {props.stats.map(({ title, sub }) => ( - + {stats.map(({ title, sub }) => ( + ))}
- - + +
) diff --git a/src/components/Portfolio/Card/index.tsx b/src/components/Portfolio/Card/index.tsx index b3cd628e..4144955b 100644 --- a/src/components/Portfolio/Card/index.tsx +++ b/src/components/Portfolio/Card/index.tsx @@ -15,7 +15,6 @@ import useHealthComputer from 'hooks/useHealthComputer' import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData' import useLocalStorage from 'hooks/useLocalStorage' import usePrices from 'hooks/usePrices' -import useStore from 'store' import { calculateAccountApr, calculateAccountLeverage, @@ -29,7 +28,7 @@ interface Props { export default function PortfolioCard(props: Props) { const { data: account } = useAccount(props.accountId) - const { health } = useHealthComputer(account) + const { health, healthFactor } = useHealthComputer(account) const { address: urlAddress } = useParams() const { data: prices } = usePrices() const currentAccountId = useAccountId() @@ -40,7 +39,6 @@ export default function PortfolioCard(props: Props) { LocalStorageKeys.REDUCE_MOTION, DEFAULT_SETTINGS.reduceMotion, ) - const address = useStore((s) => s.address) const [deposits, lends, debts, vaults] = useMemo(() => { if (!prices.length || !account) return Array(4).fill(BN_ZERO) @@ -91,7 +89,14 @@ export default function PortfolioCard(props: Props) { }, [account, prices.length, deposits, lends, vaults, debts, leverage, apr]) if (!account) { - return + return ( + + ) } return ( @@ -102,6 +107,7 @@ export default function PortfolioCard(props: Props) { diff --git a/src/components/Portfolio/Overview/Summary.tsx b/src/components/Portfolio/Overview/Summary.tsx index c0404f7a..95fa73c4 100644 --- a/src/components/Portfolio/Overview/Summary.tsx +++ b/src/components/Portfolio/Overview/Summary.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import { useMemo } from 'react' import { useParams } from 'react-router-dom' import DisplayCurrency from 'components/DisplayCurrency' diff --git a/src/components/Portfolio/SummarySkeleton.tsx b/src/components/Portfolio/SummarySkeleton.tsx index 5c30862b..ed6f4083 100644 --- a/src/components/Portfolio/SummarySkeleton.tsx +++ b/src/components/Portfolio/SummarySkeleton.tsx @@ -1,8 +1,8 @@ import React from 'react' -import HealthBar from 'components/Account/HealthBar' +import HealthBar from 'components/Account/Health/HealthBar' +import HealthIcon from 'components/Account/Health/HealthIcon' import Card from 'components/Card' -import { Heart } from 'components/Icons' import Loading from 'components/Loading' import Text from 'components/Text' import TitleAndSubCell from 'components/TitleAndSubCell' @@ -11,19 +11,22 @@ import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants' interface Props { stats?: { title: React.ReactNode | null; sub: string }[] health?: number + healthFactor?: number title: string } export default function SummarySkeleton(props: Props) { + const { health, healthFactor, title } = props const stats = props.stats || DEFAULT_PORTFOLIO_STATS + return (
- {props.title} - {props.health !== undefined && ( + {title} + {health !== undefined && healthFactor !== undefined && (
- - + +
)}
diff --git a/src/components/Table/Row.tsx b/src/components/Table/Row.tsx index 0138f9e4..b300db61 100644 --- a/src/components/Table/Row.tsx +++ b/src/components/Table/Row.tsx @@ -16,6 +16,8 @@ function getBorderColor(row: AccountBalanceRow) { } export default function Row(props: Props) { + const canExpand = !!props.renderExpanded + return ( <> (props: Props) { className={classNames( 'group/row transition-bg', props.renderExpanded && 'hover:cursor-pointer', - props.row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5', + canExpand && props.row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5', )} onClick={(e) => { e.preventDefault() diff --git a/src/components/Tooltip/TooltipContent.tsx b/src/components/Tooltip/TooltipContent.tsx index 2c43407c..56d02c0b 100644 --- a/src/components/Tooltip/TooltipContent.tsx +++ b/src/components/Tooltip/TooltipContent.tsx @@ -7,6 +7,7 @@ import Text from 'components/Text' interface Props { content: ReactNode | string type: TooltipType + hideArrow?: boolean } export default function TooltipContent(props: Props) { @@ -22,7 +23,7 @@ export default function TooltipContent(props: Props) { > {typeof props.content === 'string' ? {props.content} : props.content}
- { + {!props.hideArrow && (
- } + )}
) } diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index c80aed2c..1152c6ee 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -16,6 +16,7 @@ interface Props { delay?: number interactive?: boolean underline?: boolean + hideArrow?: boolean } export const Tooltip = (props: Props) => { @@ -33,7 +34,9 @@ export const Tooltip = (props: Props) => { interactive={props.interactive} animation={false} delay={[props.delay ?? 0, 0]} - render={() => } + render={() => ( + + )} > {props.children ? ( ((s) => s.fundAndWithdrawModal) const throttledEstimateExactIn = useMemo(() => asyncThrottle(estimateExactIn, 250), []) const { simulateTrade, removedLends } = useUpdatedAccount(account) @@ -210,7 +211,8 @@ export default function SwapForm(props: Props) { ? sellAssetAmount.minus(sellSideMarginThreshold) : BN_ZERO - if (removeDepositAmount.isZero() && addDebtAmount.isZero() && buyAssetAmount.isZero()) return + if (removeDepositAmount.isZero() && addDebtAmount.isZero() && buyAssetAmount.isZero() && modal) + return const removeCoin = BNCoin.fromDenomAndBigNumber(sellAsset.denom, removeDepositAmount) const debtCoin = BNCoin.fromDenomAndBigNumber(sellAsset.denom, addDebtAmount) const addCoin = BNCoin.fromDenomAndBigNumber(buyAsset.denom, buyAssetAmount) @@ -223,6 +225,7 @@ export default function SwapForm(props: Props) { buyAsset.denom, sellAsset.denom, debouncedUpdateAccount, + modal, ]) useEffect(() => { diff --git a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx b/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx index c64f0a8a..63916312 100644 --- a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx +++ b/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx @@ -57,7 +57,16 @@ function Content() { navigate(getRoute(page, address, urlAccountId ?? accountIds[0])) useStore.setState({ balances: walletBalances, focusComponent: null }) } - }, [accountIds, baseBalance, navigate, pathname, address, walletBalances, urlAddress]) + }, [ + accountIds, + baseBalance, + navigate, + pathname, + address, + walletBalances, + urlAddress, + urlAccountId, + ]) if (isLoadingAccounts || isLoadingBalances) return if (BN(baseBalance).isLessThan(defaultFee.amount[0].amount)) return diff --git a/src/hooks/useBorrowMarketAssetsTableData.ts b/src/hooks/useBorrowMarketAssetsTableData.ts index 6d4f26d0..75347144 100644 --- a/src/hooks/useBorrowMarketAssetsTableData.ts +++ b/src/hooks/useBorrowMarketAssetsTableData.ts @@ -1,5 +1,6 @@ import useSWR from 'swr' +import useBorrowEnabledMarkets from 'hooks/useBorrowEnabledMarkets' import useCurrentAccountDebts from 'hooks/useCurrentAccountDebts' import useMarketBorrowings from 'hooks/useMarketBorrowings' import useMarketDeposits from 'hooks/useMarketDeposits' @@ -8,8 +9,6 @@ import { byDenom } from 'utils/array' import { getAssetByDenom } from 'utils/assets' import { BN } from 'utils/helpers' -import useBorrowEnabledMarkets from './useBorrowEnabledMarkets' - export default function useBorrowMarketAssetsTableData(suspense = true) { const markets = useBorrowEnabledMarkets() const accountDebts = useCurrentAccountDebts() diff --git a/src/hooks/useHealthColor.ts b/src/hooks/useHealthColor.ts new file mode 100644 index 00000000..6d1d629c --- /dev/null +++ b/src/hooks/useHealthColor.ts @@ -0,0 +1,6 @@ +export default function useHealthColor(health: number, colorPrefix: 'fill' | 'text') { + if (health > 30) return `${colorPrefix}-violet-500` + if (health > 10) return `${colorPrefix}-yellow-300` + + return `${colorPrefix}-martian-red` +} diff --git a/src/hooks/useHealthColorAndLabel.ts b/src/hooks/useHealthColorAndLabel.ts deleted file mode 100644 index ed49fb43..00000000 --- a/src/hooks/useHealthColorAndLabel.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default function useHealthColorAndLabel(health: number, colorPrefix: 'fill' | 'text') { - if (health > 30) return [`${colorPrefix}-violet-500`, `${health}% (Healthy)`] - if (health > 10) return [`${colorPrefix}-yellow-300`, `${health}% (Attention)`] - - return [`${colorPrefix}-martian-red`, `${health}% (Liquidation risk)`] -} diff --git a/src/hooks/useHealthComputer.tsx b/src/hooks/useHealthComputer.tsx index 4c7e6571..dd9719d2 100644 --- a/src/hooks/useHealthComputer.tsx +++ b/src/hooks/useHealthComputer.tsx @@ -182,11 +182,15 @@ export default function useHealthComputer(account?: Account) { [healthComputer], ) const health = useMemo(() => { - if (healthFactor > 10) return 100 - if (healthFactor < 0) return 0 - return BN(healthFactor * 10) + const convertedHealth = BN(Math.log(healthFactor)) + .dividedBy(Math.log(3.5)) + .multipliedBy(100) .integerValue() .toNumber() + + if (convertedHealth > 100) return 100 + if (convertedHealth < 0) return 0 + return convertedHealth }, [healthFactor]) return {