diff --git a/src/components/AvailableLiquidityMessage.tsx b/src/components/AvailableLiquidityMessage.tsx new file mode 100644 index 00000000..6d57ab70 --- /dev/null +++ b/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 ( +
+
+ Not enough Liquidty! + + {`This transaction would exceed the amount of ${asset.symbol} currently available for borrowing on Mars.`} + + +
+ Available Liquidity: + +
+
+
+ ) +} diff --git a/src/components/DepositCapMessage.tsx b/src/components/DepositCapMessage.tsx index 4ae8cebd..655c0441 100644 --- a/src/components/DepositCapMessage.tsx +++ b/src/components/DepositCapMessage.tsx @@ -19,8 +19,8 @@ export default function DepositCapMessage(props: Props) { return (
{props.showIcon && } -
- Deposit Cap Reached +
+ Deposit Cap Reached! {`Unfortunately you're not able to ${ props.action } more than the following amount${props.coins.length > 1 ? 's' : ''}:`} @@ -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' />
) diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index 4f33c18f..8c00edea 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/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 ( <> @@ -287,6 +301,13 @@ export default function SwapForm(props: Props) { + {borrowAsset && borrowAmount.isGreaterThanOrEqualTo(availableLiquidity) && ( + + )} + 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} />