MP-3540: added liquidity warning (#605)

src/components/AvailableLiquidityMessage.tsx

@@ -0,0 +1,34 @@
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
+
+interface Props {
+  availableLiquidity: BigNumber
+  asset: BorrowAsset
+}
+
+export default function AvailableLiquidityMessage(props: Props) {
+  const { availableLiquidity, asset } = props
+  return (
+    <div className='flex items-start p-4 bg-white/5'>
+      <div className='flex flex-col gap-2'>
+        <Text size='sm'>Not enough Liquidty!</Text>
+        <Text size='xs' className='text-white/40'>
+          {`This transaction would exceed the amount of ${asset.symbol} currently available for borrowing on Mars.`}
+        </Text>
+
+        <div className='flex gap-1'>
+          <Text size='xs'>Available Liquidity:</Text>
+          <FormattedNumber
+            amount={availableLiquidity.toNumber()}
+            options={{
+              abbreviated: true,
+              decimals: asset.decimals,
+              suffix: ` ${asset.symbol}`,
+            }}
+            className='text-xs text-white/60'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/DepositCapMessage.tsx

@@ -19,8 +19,8 @@ export default function DepositCapMessage(props: Props) {
   return (
     <div className={classNames('flex items-start', props.className)}>
       {props.showIcon && <InfoCircle width={26} className='mr-5' />}
-      <div className='flex-col gap-2 flex'>
-        <Text size='sm'>Deposit Cap Reached</Text>
+      <div className='flex flex-col gap-2'>
+        <Text size='sm'>Deposit Cap Reached!</Text>
         <Text size='xs' className='text-white/40'>{`Unfortunately you're not able to ${
           props.action
         } more than the following amount${props.coins.length > 1 ? 's' : ''}:`}</Text>
@@ -39,7 +39,7 @@ export default function DepositCapMessage(props: Props) {
                   decimals: asset.decimals,
                   suffix: ` ${asset.symbol}`,
                 }}
-                className='text-white/60 text-xs'
+                className='text-xs text-white/60'
               />
             </div>
           )

src/components/Trade/TradeModule/SwapForm/index.tsx

@@ -2,6 +2,7 @@ import debounce from 'lodash.debounce'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import estimateExactIn from 'api/swap/estimateExactIn'
+import AvailableLiquidityMessage from 'components/AvailableLiquidityMessage'
 import DepositCapMessage from 'components/DepositCapMessage'
 import Divider from 'components/Divider'
 import RangeInput from 'components/RangeInput'
@@ -251,6 +252,19 @@ export default function SwapForm(props: Props) {
     if (buyAssetAmount.isEqualTo(maxBuyableAmountEstimation)) setSellAssetAmount(maxSellAmount)
   }, [sellAssetAmount, maxSellAmount, buyAssetAmount, maxBuyableAmountEstimation])
 
+  const borrowAmount = useMemo(
+    () =>
+      sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
+        ? sellAssetAmount.minus(sellSideMarginThreshold)
+        : BN_ZERO,
+    [sellAssetAmount, sellSideMarginThreshold],
+  )
+
+  const availableLiquidity = useMemo(
+    () => borrowAsset?.liquidity?.amount ?? BN_ZERO,
+    [borrowAsset?.liquidity?.amount],
+  )
+
   return (
     <>
       <Divider />
@@ -287,6 +301,13 @@ export default function SwapForm(props: Props) {
 
         <DepositCapMessage action='buy' coins={depositCapReachedCoins} className='p-4 bg-white/5' />
 
+        {borrowAsset && borrowAmount.isGreaterThanOrEqualTo(availableLiquidity) && (
+          <AvailableLiquidityMessage
+            availableLiquidity={borrowAsset?.liquidity?.amount ?? BN_ZERO}
+            asset={borrowAsset}
+          />
+        )}
+
         <AssetAmountInput
           label='Sell'
           max={maxSellAmount}
@@ -302,14 +323,14 @@ export default function SwapForm(props: Props) {
           sellAsset={sellAsset}
           borrowRate={borrowAsset?.borrowRate}
           buyAction={handleBuyClick}
-          buyButtonDisabled={sellAssetAmount.isZero() || depositCapReachedCoins.length > 0}
+          buyButtonDisabled={
+            sellAssetAmount.isZero() ||
+            depositCapReachedCoins.length > 0 ||
+            borrowAmount.isGreaterThanOrEqualTo(availableLiquidity)
+          }
           showProgressIndicator={isConfirming}
           isMargin={isMarginChecked}
-          borrowAmount={
-            sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
-              ? sellAssetAmount.minus(sellSideMarginThreshold)
-              : BN_ZERO
-          }
+          borrowAmount={borrowAmount}
           estimatedFee={estimatedFee}
         />
       </div>