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
-}