MP-3445: added leverage change to AccountSummary (#521)

src/components/Account/AccountSummary.tsx

@@ -8,6 +8,7 @@ import HealthBar from 'components/Account/HealthBar'
 import Card from 'components/Card'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
+import { ArrowRight } from 'components/Icons'
 import Text from 'components/Text'
 import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
@@ -39,6 +40,7 @@ export default function AccountSummary(props: Props) {
     useBorrowMarketAssetsTableData()
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()
+
   const borrowAssetsData = useMemo(
     () => [...borrowAvailableAssets, ...accountBorrowedAssets],
     [borrowAvailableAssets, accountBorrowedAssets],
@@ -50,10 +52,17 @@ export default function AccountSummary(props: Props) {
   const { health } = useHealthComputer(props.account)
   const { health: updatedHealth } = useHealthComputer(updatedAccount)
   const leverage = useMemo(
-    () =>
+    () => (props.account ? calculateAccountLeverage(props.account, prices) : BN_ZERO),
-      props.account ? calculateAccountLeverage(updatedAccount ?? props.account, prices) : BN_ZERO,
+    [props.account, prices],
-    [props.account, updatedAccount, prices],
   )
+  const updatedLeverage = useMemo(() => {
+    if (!updatedAccount) return null
+    const updatedLeverage = calculateAccountLeverage(updatedAccount, prices)
+
+    if (updatedLeverage.eq(leverage)) return null
+    return updatedLeverage
+  }, [updatedAccount, prices, leverage])
+
   if (!props.account) return null
   return (
     <div className='h-[546px] min-w-92.5 basis-92.5 max-w-screen overflow-y-scroll scrollbar-hide'>
@@ -61,18 +70,38 @@ export default function AccountSummary(props: Props) {
         <Item label='Net worth' classes='flex-1'>
           <DisplayCurrency
             coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalance)}
-            className='text-sm'
+            className='text-2xs'
           />
         </Item>
-        <Item label='Leverage' classes='flex-1'>
+        <Item label='Leverage' classes='flex-1 w-[93px]'>
           <FormattedNumber
-            className='text-sm'
+            className={'w-full text-center text-2xs'}
             amount={isNaN(leverage.toNumber()) ? 0 : leverage.toNumber()}
-            options={{ minDecimals: 2, suffix: 'x' }}
+            options={{
+              maxDecimals: 2,
+              minDecimals: 2,
+              suffix: 'x',
+            }}
+            animate
           />
+          {updatedLeverage && (
+            <>
+              <ArrowRight width={12} />
+              <FormattedNumber
+                className={classNames(
+                  'w-full text-center text-2xs',
+                  updatedLeverage?.isGreaterThan(leverage) && 'text-loss',
+                  updatedLeverage?.isLessThan(leverage) && 'text-profit',
+                )}
+                amount={isNaN(updatedLeverage.toNumber()) ? 0 : updatedLeverage?.toNumber()}
+                options={{ maxDecimals: 2, minDecimals: 2, suffix: 'x' }}
+                animate
+              />
+            </>
+          )}
         </Item>
         <Item label='Account health'>
-          <HealthBar health={health} updatedHealth={updatedHealth} className='w-[184px] h-1' />
+          <HealthBar health={health} updatedHealth={updatedHealth} className='h-1' />
         </Item>
       </Card>
       <Accordion