Deposit cap highlighting (#735)

* feat: added depositCap highlighting

* feat: added depositCap highlighting

src/components/common/DepositCapCell.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { FormattedNumber } from 'components/common/FormattedNumber'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import { VAULT_DEPOSIT_BUFFER } from 'constants/vaults'
@@ -29,7 +31,10 @@ export default function DepositCapCell(props: Props) {
         <FormattedNumber
           amount={depositCapUsed}
           options={{ minDecimals: 2, maxDecimals: 2, suffix: '% Filled' }}
-          className='text-xs'
+          className={classNames(
+            'text-xs',
+            depositCapUsed >= 100 ? 'text-loss/60' : depositCapUsed > 90 ? 'text-info/60' : '',
+          )}
           animate
         />
       }

src/components/common/DepositCapMessage.tsx

@@ -38,6 +38,7 @@ interface AmountMessageProps {
 function AmountMessage(props: AmountMessageProps) {
   const asset = useAsset(props.coin.denom)
   if (!asset) return null
+  console.log(props.coin.amount.toNumber())
 
   return (
     <div key={props.coin.denom} className='flex gap-1'>
@@ -46,6 +47,7 @@ function AmountMessage(props: AmountMessageProps) {
         amount={Math.max(0, props.coin.amount.toNumber())}
         options={{
           decimals: asset.decimals,
+          maxDecimals: asset.decimals,
           suffix: ` ${asset.symbol}`,
         }}
         className='text-xs text-white/60'

src/components/earn/lend/Table/Columns/DepositCap.tsx

@@ -1,4 +1,5 @@
 import { Row } from '@tanstack/react-table'
+import classNames from 'classnames'
 
 import { FormattedNumber } from 'components/common/FormattedNumber'
 import Loading from 'components/common/Loading'
@@ -50,6 +51,9 @@ export default function DepositCap(props: Props) {
           amount={depositCapUsed}
           options={{ minDecimals: 2, maxDecimals: 2, suffix: '% used' }}
           animate
+          className={classNames(
+            depositCapUsed >= 100 ? 'text-loss/60' : depositCapUsed > 90 ? 'text-info/60' : '',
+          )}
         />
       }
     />