From 68206ae14c194af975b5b00826134a477c00c729 Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 17 Jan 2024 10:49:17 +0100
Subject: [PATCH] Deposit cap highlighting (#735)

* feat: added depositCap highlighting

* feat: added depositCap highlighting
---
 src/components/common/DepositCapCell.tsx              | 7 ++++++-
 src/components/common/DepositCapMessage.tsx           | 2 ++
 src/components/earn/lend/Table/Columns/DepositCap.tsx | 4 ++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/DepositCapCell.tsx b/src/components/common/DepositCapCell.tsx
index 7b93d8a0..cd8946d9 100644
--- a/src/components/common/DepositCapCell.tsx
+++ b/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
         />
       }
diff --git a/src/components/common/DepositCapMessage.tsx b/src/components/common/DepositCapMessage.tsx
index b3fb4ae0..0ee66bda 100644
--- a/src/components/common/DepositCapMessage.tsx
+++ b/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'
diff --git a/src/components/earn/lend/Table/Columns/DepositCap.tsx b/src/components/earn/lend/Table/Columns/DepositCap.tsx
index 160fc468..efd92d05 100644
--- a/src/components/earn/lend/Table/Columns/DepositCap.tsx
+++ b/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' : '',
+          )}
         />
       }
     />