From 9c3a6a04823173df3d43a81b4844792a127126c1 Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Tue, 15 Aug 2023 08:19:37 -0300 Subject: [PATCH] [bugfixes] health percentage, trade slider, animation ++ (#369) * [bugfixes] health percentage, trade slider, animation ++ * Update src/hooks/useHealthComputer.tsx Co-authored-by: Yusuf Seyrek --------- Co-authored-by: Yusuf Seyrek --- src/components/Account/AccountDetails.tsx | 4 ++-- src/components/Modals/Settings/index.tsx | 2 +- src/components/RangeInput/InputOverlay.tsx | 3 ++- src/components/RangeInput/index.tsx | 11 ++++------ src/components/Routes.tsx | 4 ---- .../Trade/TradeModule/SwapForm/index.tsx | 13 +++++++----- src/hooks/useHealthComputer.tsx | 21 ++++++++++++++++--- src/pages/CouncilPage.tsx | 5 ----- 8 files changed, 35 insertions(+), 28 deletions(-) delete mode 100644 src/pages/CouncilPage.tsx diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx index 7ebeb862..c2af854b 100644 --- a/src/components/Account/AccountDetails.tsx +++ b/src/components/Account/AccountDetails.tsx @@ -58,7 +58,7 @@ function AccountDetails(props: Props) { {updatedHealth && health !== updatedHealth && ( @@ -70,7 +70,7 @@ function AccountDetails(props: Props) { diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index c42658ae..93b1e948 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/src/components/Modals/Settings/index.tsx @@ -96,7 +96,7 @@ export default function SettingsModal() { const handleReduceMotion = useCallback( (value: boolean) => { - setReduceMotion(!value) + setReduceMotion(value) }, [setReduceMotion], ) diff --git a/src/components/RangeInput/InputOverlay.tsx b/src/components/RangeInput/InputOverlay.tsx index 3af15fea..a0f0c58f 100644 --- a/src/components/RangeInput/InputOverlay.tsx +++ b/src/components/RangeInput/InputOverlay.tsx @@ -1,4 +1,5 @@ import { VerticalThreeLine } from 'components/Icons' +import { formatValue } from 'utils/formatters' interface Props { value: number @@ -46,7 +47,7 @@ function InputOverlay({ max, value, marginThreshold }: Props) { className={className.inputThumbOverlay} style={{ left: `calc(${thumbPosPercent}% - ${thumbPadRight}px)` }} > - {value} + {formatValue(value, { maxDecimals: 2, abbreviated: true, rounded: true })} ) diff --git a/src/components/RangeInput/index.tsx b/src/components/RangeInput/index.tsx index 365db867..171ca188 100644 --- a/src/components/RangeInput/index.tsx +++ b/src/components/RangeInput/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useCallback, useMemo } from 'react' +import { ChangeEvent, useCallback } from 'react' import classNames from 'classnames' import InputOverlay from 'components/RangeInput/InputOverlay' @@ -38,16 +38,13 @@ function RangeInput(props: Props) { className={className.input} type='range' value={value.toFixed(2)} - step={max / 100} + step={max / 101} + min={0} max={max} onChange={handleOnChange} onBlur={onBlur} /> - +
{markPosPercent > LEFT_MARGIN ? 0 : ''} diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx index 2219ef86..546e5138 100644 --- a/src/components/Routes.tsx +++ b/src/components/Routes.tsx @@ -1,7 +1,6 @@ import { Outlet, Route, Routes as RoutesWrapper } from 'react-router-dom' import BorrowPage from 'pages/BorrowPage' -import CouncilPage from 'pages/CouncilPage' import FarmPage from 'pages/FarmPage' import LendPage from 'pages/LendPage' import MobilePage from 'pages/MobilePage' @@ -24,7 +23,6 @@ export default function Routes() { } /> } /> } /> - } /> } /> } /> @@ -34,7 +32,6 @@ export default function Routes() { } /> } /> } /> - } /> } /> } /> @@ -42,7 +39,6 @@ export default function Routes() { } /> } /> } /> - } /> } /> diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index 76be4dcb..48b5b9e7 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/src/components/Trade/TradeModule/SwapForm/index.tsx @@ -150,11 +150,6 @@ export default function SwapForm(props: Props) { swap, ]) - useEffect(() => { - setBuyAssetAmount(BN_ZERO) - setSellAssetAmount(BN_ZERO) - }, [buyAsset.denom, sellAsset.denom]) - const debouncedUpdateAccount = useMemo( () => debounce((removeCoin: BNCoin, addCoin: BNCoin, debtCoin: BNCoin) => { @@ -165,6 +160,14 @@ export default function SwapForm(props: Props) { [removeDeposits, addDeposits, addDebt], ) + useEffect(() => { + setBuyAssetAmount(BN_ZERO) + setSellAssetAmount(BN_ZERO) + removeDeposits([]) + addDeposits([]) + addDebt([]) + }, [buyAsset.denom, sellAsset.denom, removeDeposits, addDeposits, addDebt]) + useEffect(() => { const removeDepositAmount = sellAssetAmount.isGreaterThanOrEqualTo(marginThreshold) ? marginThreshold diff --git a/src/hooks/useHealthComputer.tsx b/src/hooks/useHealthComputer.tsx index 101966bd..f9ad677e 100644 --- a/src/hooks/useHealthComputer.tsx +++ b/src/hooks/useHealthComputer.tsx @@ -31,7 +31,7 @@ export default function useHealthComputer(account?: Account) { const { data: vaultConfigs } = useVaultConfigs() const baseCurrency = useStore((s) => s.baseCurrency) - const [health, setHealth] = useState(0) + const [healthFactor, setHealthFactor] = useState(0) const positions: Positions | null = useMemo(() => { if (!account) return null return convertAccountToPositions(account) @@ -41,6 +41,7 @@ export default function useHealthComputer(account?: Account) { [prices, baseCurrency.denom], ) + const vaultPositionValues = useMemo(() => { if (!account?.vaults) return null return account.vaults.reduce( @@ -133,7 +134,7 @@ export default function useHealthComputer(account?: Account) { useEffect(() => { if (!healthComputer) return - setHealth(Number(compute_health_js(healthComputer).max_ltv_health_factor) || 0) + setHealthFactor(Number(compute_health_js(healthComputer).max_ltv_health_factor) || 10) }, [healthComputer]) const computeMaxBorrowAmount = useCallback( @@ -164,5 +165,19 @@ export default function useHealthComputer(account?: Account) { [healthComputer], ) - return { health, computeMaxBorrowAmount, computeMaxWithdrawAmount, computeMaxSwapAmount } + const health = useMemo(() => { + if (healthFactor > 10) return 100 + if (healthFactor < 0) return 0 + return BN(healthFactor * 10) + .integerValue() + .toNumber() + }, [healthFactor]) + + return { + health, + healthFactor, + computeMaxBorrowAmount, + computeMaxWithdrawAmount, + computeMaxSwapAmount, + } } diff --git a/src/pages/CouncilPage.tsx b/src/pages/CouncilPage.tsx deleted file mode 100644 index 153f25ac..00000000 --- a/src/pages/CouncilPage.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Overview from 'components/Council/Overview' - -export default function CouncilPage() { - return -}