[bugfixes] health percentage, trade slider, animation ++ (#369)

* [bugfixes] health percentage, trade slider, animation ++

* Update src/hooks/useHealthComputer.tsx

Co-authored-by: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>

---------

Co-authored-by: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>

src/components/Account/AccountDetails.tsx

@@ -58,7 +58,7 @@ function AccountDetails(props: Props) {
           <FormattedNumber
             className={'w-full text-center text-xs'}
             amount={health}
-            options={{ maxDecimals: 1, minDecimals: 0 }}
+            options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
             animate
           />
           {updatedHealth && health !== updatedHealth && (
@@ -70,7 +70,7 @@ function AccountDetails(props: Props) {
               <FormattedNumber
                 className={'w-full text-center text-xs'}
                 amount={updatedHealth}
-                options={{ maxDecimals: 1, minDecimals: 0 }}
+                options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
                 animate
               />
             </>

src/components/Modals/Settings/index.tsx

@@ -96,7 +96,7 @@ export default function SettingsModal() {
 
   const handleReduceMotion = useCallback(
     (value: boolean) => {
-      setReduceMotion(!value)
+      setReduceMotion(value)
     },
     [setReduceMotion],
   )

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 })}
       </div>
     </>
   )

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}
         />
-        <InputOverlay
-          max={max}
-          marginThreshold={marginThreshold}
-          value={parseFloat(value.toFixed(2))}
-        />
+        <InputOverlay max={max} marginThreshold={marginThreshold} value={value} />
       </div>
       <div className={className.legendWrapper}>
         <span>{markPosPercent > LEFT_MARGIN ? 0 : ''}</span>

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() {
         <Route path='/lend' element={<LendPage />} />
         <Route path='/borrow' element={<BorrowPage />} />
         <Route path='/portfolio' element={<PortfolioPage />} />
-        <Route path='/council' element={<CouncilPage />} />
         <Route path='/mobile' element={<MobilePage />} />
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
@@ -34,7 +32,6 @@ export default function Routes() {
             <Route path='lend' element={<LendPage />} />
             <Route path='borrow' element={<BorrowPage />} />
             <Route path='portfolio' element={<PortfolioPage />} />
-            <Route path='council' element={<CouncilPage />} />
             <Route path='' element={<TradePage />} />
           </Route>
           <Route path='trade' element={<TradePage />} />
@@ -42,7 +39,6 @@ export default function Routes() {
           <Route path='lend' element={<LendPage />} />
           <Route path='borrow' element={<BorrowPage />} />
           <Route path='portfolio' element={<PortfolioPage />} />
-          <Route path='council' element={<CouncilPage />} />
           <Route path='' element={<TradePage />} />
         </Route>
       </Route>

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

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

src/pages/CouncilPage.tsx

@@ -1,5 +0,0 @@
-import Overview from 'components/Council/Overview'
-
-export default function CouncilPage() {
-  return <Overview />
-}