✨Added leverage change to Trade (#457)

src/components/Account/AccountDetails/AccountDetailsLeverage.tsx

@@ -0,0 +1,54 @@
+import classNames from 'classnames'
+
+import { FormattedNumber } from 'components/FormattedNumber'
+import { ArrowRight } from 'components/Icons'
+
+interface Props {
+  leverage: BigNumber
+  updatedLeverage: BigNumber | null
+}
+
+export default function AccountDetailsLeverage(props: Props) {
+  const { leverage, updatedLeverage } = props
+
+  if (!updatedLeverage) {
+    return (
+      <FormattedNumber
+        className={'w-full text-center text-2xs'}
+        amount={isNaN(leverage.toNumber()) ? 0 : leverage.toNumber()}
+        options={{
+          maxDecimals: 2,
+          minDecimals: 2,
+          suffix: 'x',
+        }}
+        animate
+      />
+    )
+  }
+
+  return (
+    <div className='flex'>
+      <FormattedNumber
+        className={'w-full text-center text-2xs'}
+        amount={isNaN(leverage.toNumber()) ? 0 : leverage.toNumber()}
+        options={{
+          maxDecimals: 1,
+          minDecimals: 1,
+          rounded: true,
+        }}
+        animate
+      />
+      <ArrowRight width={12} />
+      <FormattedNumber
+        className={classNames(
+          'w-full text-center text-2xs',
+          updatedLeverage.gt(leverage) && 'text-loss',
+          updatedLeverage.lt(leverage) && 'text-profit',
+        )}
+        amount={isNaN(updatedLeverage.toNumber()) ? 0 : updatedLeverage.toNumber()}
+        options={{ maxDecimals: 1, minDecimals: 1, rounded: true }}
+        animate
+      />
+    </div>
+  )
+}

src/components/Account/AccountDetails/index.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 
 import AccountBalancesTable from 'components/Account/AccountBalancesTable'
 import AccountComposition from 'components/Account/AccountComposition'
+import AccountDetailsLeverage from 'components/Account/AccountDetails/AccountDetailsLeverage'
 import { glowElement } from 'components/Button/utils'
 import Card from 'components/Card'
 import DisplayCurrency from 'components/DisplayCurrency'
@@ -55,10 +56,15 @@ function AccountDetails(props: Props) {
     [updatedAccount, account, prices],
   )
   const coin = BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalanceValue)
-  const leverage = useMemo(
-    () => calculateAccountLeverage(updatedAccount ?? account, prices),
-    [account, updatedAccount, prices],
-  )
+  const leverage = useMemo(() => calculateAccountLeverage(account, prices), [account, prices])
+  const updatedLeverage = useMemo(() => {
+    if (!updatedAccount) return null
+    const updatedLeverage = calculateAccountLeverage(updatedAccount, prices)
+
+    if (updatedLeverage.eq(leverage)) return null
+    return updatedLeverage
+  }, [updatedAccount, prices, leverage])
+
   const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
     useBorrowMarketAssetsTableData()
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
@@ -75,6 +81,7 @@ function AccountDetails(props: Props) {
     () => calculateAccountApr(account, borrowAssetsData, lendingAssetsData, prices),
     [account, borrowAssetsData, lendingAssetsData, prices],
   )
+
   return (
     <div
       data-testid='account-details'
@@ -104,12 +111,7 @@ function AccountDetails(props: Props) {
           <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
             Leverage
           </Text>
-          <FormattedNumber
-            className={'w-full text-center text-2xs'}
-            amount={isNaN(leverage.toNumber()) ? 0 : leverage.toNumber()}
-            options={{ maxDecimals: 2, minDecimals: 2, suffix: 'x' }}
-            animate
-          />
+          <AccountDetailsLeverage leverage={leverage} updatedLeverage={updatedLeverage} />
         </div>
         <div className='w-full py-4 border-t border-white/20'>
           <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>

src/components/Modals/BorrowModal.tsx

@@ -26,7 +26,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { formatPercent, formatValue } from 'utils/formatters'
 import { BN } from 'utils/helpers'
-import {getDebtAmountWithInterest} from 'utils/tokens'
+import { getDebtAmountWithInterest } from 'utils/tokens'
 
 function getDebtAmount(modal: BorrowModal) {
   return BN((modal.marketData as BorrowMarketTableData)?.debt ?? 0).toString()
@@ -264,4 +264,4 @@ function BorrowModal(props: Props) {
       </div>
     </Modal>
   )
-}
+}

src/utils/tokens.ts

@@ -23,4 +23,4 @@ export function getTokenPrice(denom: string, prices: BNCoin[]): BigNumber {
 
 export function getDebtAmountWithInterest(debt: BigNumber, apr: number) {
   return debt.times(1 + apr / 365 / 24).integerValue()
-}
+}