diff --git a/apps/web/src/app/components/home/CollateralPanel.tsx b/apps/web/src/app/components/home/CollateralPanel.tsx index 3ac55bc3c..2f4788cd7 100644 --- a/apps/web/src/app/components/home/CollateralPanel.tsx +++ b/apps/web/src/app/components/home/CollateralPanel.tsx @@ -22,6 +22,7 @@ import { Typography } from '@/app/theme'; import IconUnstakeSICX from '@/assets/icons/timer-color.svg'; import IconKeepSICX from '@/assets/icons/wallet-tick-color.svg'; import { NETWORK_ID } from '@/constants/config'; +import { SLIDER_RANGE_MAX_BOTTOM_THRESHOLD } from '@/constants/index'; import { MODAL_ID, modalActions } from '@/hooks/useModalStore'; import useWidth from '@/hooks/useWidth'; import { useICXUnstakingTime } from '@/store/application/hooks'; @@ -31,14 +32,7 @@ import { useCollateralTokens, useDerivedCollateralInfo, useIsHandlingICX, - useSupportedCollateralTokens, } from '@/store/collateral/hooks'; -import { - getActionMaximum, - getSafeSliderBounds, - isCollateralEnabled, - isIncreaseAllowed, -} from '@/store/collateral/eligibility'; import { Field } from '@/store/collateral/reducer'; import { useLoanActionHandlers, useLockedCollateralAmount } from '@/store/loan/hooks'; import { useRatio } from '@/store/ratio/hooks'; @@ -157,26 +151,6 @@ const CollateralPanel = () => { const ratio = useRatio(); const isHandlingICX = useIsHandlingICX(); const { data: collateralTokens } = useCollateralTokens(); - const { data: supportedCollateralTokens } = useSupportedCollateralTokens(); - const contractSymbol = useWrongSymbol(collateralType); - const increaseEnabled = isCollateralEnabled(supportedCollateralTokens, contractSymbol); - const actionMaximum = getActionMaximum(collateralDeposit, collateralTotal, increaseEnabled); - const lockedCollateral = useLockedCollateralAmount(); - const shouldShowLock = !lockedCollateral.isZero(); - - // add small amount of collateral to lock to avoid tx errors. - const tLockedAmount = React.useMemo( - () => BigNumber.min(lockedCollateral.times(shouldShowLock ? 1.005 : 1), collateralDeposit), - [lockedCollateral, collateralDeposit, shouldShowLock], - ); - const collateralSliderBounds = getSafeSliderBounds( - collateralDeposit, - actionMaximum, - tLockedAmount, - collateralDecimalPlaces, - ); - const canAdjustCollateral = collateralSliderBounds.hasMovableRange; - const percent = collateralTotal.isZero() ? 0 : tLockedAmount.div(collateralTotal).times(100).toNumber(); const [ICXWithdrawOption, setICXWithdrawOption] = useState(ICXWithdrawOptions.KEEPSICX); const { data: icxUnstakingTime } = useICXUnstakingTime(); const isSuperSmall = useMedia(`(max-width: 359px)`); @@ -203,7 +177,6 @@ const CollateralPanel = () => { }); const handleEnableAdjusting = () => { - if (!canAdjustCollateral) return; adjust(true); adjustLoan(false); }; @@ -220,11 +193,6 @@ const CollateralPanel = () => { const isCrossChain = !(sourceChain === '0x1.icon' || sourceChain === '0x2.icon'); const toggleOpen = () => { - if (open) { - setOpen(false); - return; - } - if (!isIncreaseAllowed(collateralDeposit, parsedAmount[Field.LEFT], increaseEnabled)) return; if (isCrossChain) { setStoredModalValues({ amount: `${differenceAmount.dp(collateralDecimalPlaces).toFormat()} ${formatSymbol(collateralType)}`, @@ -241,12 +209,9 @@ const CollateralPanel = () => { const addTransaction = useTransactionAdder(); const handleCollateralConfirm = async () => { - if (shouldDeposit && !increaseEnabled) return; - const collateralTokenAddress = collateralTokens?.[contractSymbol]; - if (!collateralTokenAddress) return; - window.addEventListener('beforeunload', showMessageOnBeforeUnload); - const cx = bnJs.inject({ account }).getContract(collateralTokenAddress); + const collateralTokenAddress = collateralTokens && collateralTokens[useWrongSymbol(collateralType)]; + const cx = bnJs.inject({ account }).getContract(collateralTokenAddress!); const decimals: string = await cx.decimals(); if (shouldDeposit) { @@ -385,6 +350,17 @@ const CollateralPanel = () => { ); }, [collateralDecimalPlaces, sliderInstance.current]); + const lockedCollateral = useLockedCollateralAmount(); + const shouldShowLock = !lockedCollateral.isZero(); + + // add small amount of collateral to lock to avoid tx errors. + const tLockedAmount = React.useMemo( + () => BigNumber.min(lockedCollateral.times(shouldShowLock ? 1.005 : 1), collateralTotal), + [lockedCollateral, collateralTotal, shouldShowLock], + ); + + const percent = collateralTotal.isZero() ? 0 : tLockedAmount.div(collateralTotal).times(100).toNumber(); + const hasEnoughICX = useHasEnoughICX(); const [ref, width] = useWidth(); @@ -414,7 +390,7 @@ const CollateralPanel = () => { - {account && collateralTotal?.isGreaterThan(0) && canAdjustCollateral && ( + {account && collateralTotal?.isGreaterThan(0) && ( {isAdjusting ? ( <> @@ -426,11 +402,7 @@ const CollateralPanel = () => { > Cancel - @@ -471,13 +443,17 @@ const CollateralPanel = () => { { if (instance) { @@ -498,14 +474,14 @@ const CollateralPanel = () => { value={formattedAmounts[Field.LEFT]} decimalPlaces={collateralDecimalPlaces} currency={isHandlingICX ? 'ICX' : formatSymbol(collateralType)} - maxValue={actionMaximum} + maxValue={collateralTotal} onUserInput={onFieldAInput} /> { @@ -641,9 +616,7 @@ const CollateralPanel = () => { onClick={handleCollateralConfirm} fontSize={14} disabled={ - !hasEnoughICX || - (shouldDeposit && !increaseEnabled) || - (isHandlingICX && !shouldDeposit && ICXWithdrawOption === ICXWithdrawOptions.EMPTY) + !hasEnoughICX || (isHandlingICX && !shouldDeposit && ICXWithdrawOption === ICXWithdrawOptions.EMPTY) } > {shouldDeposit ? t`Deposit` : t`Withdraw`} diff --git a/apps/web/src/app/components/home/LoanPanel.tsx b/apps/web/src/app/components/home/LoanPanel.tsx index c0223fb93..740821d91 100644 --- a/apps/web/src/app/components/home/LoanPanel.tsx +++ b/apps/web/src/app/components/home/LoanPanel.tsx @@ -11,19 +11,10 @@ import LockBar from '@/app/components/LockBar'; import Modal from '@/app/components/Modal'; import { BoxPanel, BoxPanelWrap } from '@/app/components/Panel'; import { Typography } from '@/app/theme'; +import { SLIDER_RANGE_MAX_BOTTOM_THRESHOLD } from '@/constants/index'; import { useActiveLocale } from '@/hooks/useActiveLocale'; import useInterval from '@/hooks/useInterval'; -import { - useCollateralActionHandlers, - useDerivedCollateralInfo, - useSupportedCollateralTokens, -} from '@/store/collateral/hooks'; -import { - getActionMaximum, - getSafeSliderBounds, - isCollateralEnabled, - isIncreaseAllowed, -} from '@/store/collateral/eligibility'; +import { useCollateralActionHandlers, useDerivedCollateralInfo } from '@/store/collateral/hooks'; import { useActiveLoanAddress, useDerivedLoanInfo, @@ -65,13 +56,6 @@ const LoanPanel = () => { totalBorrowableAmount, bnUSDAmount, } = useDerivedLoanInfo(); - const { data: supportedCollateralTokens } = useSupportedCollateralTokens(); - const increaseEnabled = isCollateralEnabled(supportedCollateralTokens, useWrongSymbol(collateralType)); - const actionMaximum = getActionMaximum(borrowedAmount, borrowableAmountWithReserve, increaseEnabled); - const activeLoanAccount = useActiveLoanAddress(); - const usedAmount = useLoanUsedAmount(activeLoanAccount); - const loanSliderBounds = getSafeSliderBounds(borrowedAmount, actionMaximum, usedAmount, 2); - const canAdjustLoan = loanSliderBounds.hasMovableRange; const { isAdjusting, inputType } = useLoanState(); @@ -111,7 +95,6 @@ const LoanPanel = () => { const addTransaction = useTransactionAdder(); const handleEnableAdjusting = () => { - if (!canAdjustLoan) return; adjust(true); adjustCollateral(false); }; @@ -141,11 +124,6 @@ const LoanPanel = () => { (loanNetwork !== ICON_XCALL_NETWORK_ID || sourceChain !== ICON_XCALL_NETWORK_ID); const toggleOpen = () => { - if (open) { - setOpen(false); - return; - } - if (!isIncreaseAllowed(borrowedAmount, parsedAmount[Field.LEFT], increaseEnabled)) return; if (isCrossChain) { setStoredModalValues({ amount: roundedDisplayDiffAmount.dp(2).toFormat(), @@ -161,7 +139,6 @@ const LoanPanel = () => { }; const handleLoanConfirm = () => { - if (shouldBorrow && !increaseEnabled) return; if (!iconAccount) return; window.addEventListener('beforeunload', showMessageOnBeforeUnload); @@ -241,6 +218,8 @@ const LoanPanel = () => { const roundedDisplayDiffAmount = parsedAmount[Field.LEFT].minus(borrowedAmount.dp(2)); + const activeLoanAccount = useActiveLoanAddress(); + const usedAmount = useLoanUsedAmount(activeLoanAccount); const percent = borrowableAmountWithReserve.isZero() ? 0 : usedAmount.div(borrowableAmountWithReserve).times(100).toNumber(); @@ -282,7 +261,7 @@ const LoanPanel = () => { Loan - {account && canAdjustLoan && ( + {account && ( {isAdjusting ? ( <> @@ -297,7 +276,6 @@ const LoanPanel = () => { diff --git a/apps/web/src/app/components/home/_components/xCollateralModal/index.tsx b/apps/web/src/app/components/home/_components/xCollateralModal/index.tsx index 51a777f8f..793773450 100644 --- a/apps/web/src/app/components/home/_components/xCollateralModal/index.tsx +++ b/apps/web/src/app/components/home/_components/xCollateralModal/index.tsx @@ -34,7 +34,6 @@ export enum XCollateralAction { type XCollateralModalProps = { modalId?: MODAL_ID; account: string | undefined; - increaseEnabled: boolean; sourceChain: XChainId; storedModalValues: { amount: string; @@ -49,7 +48,6 @@ const XCollateralModal = ({ modalId = MODAL_ID.XCOLLATERAL_CONFIRM_MODAL, account, currencyAmount, - increaseEnabled, sourceChain, storedModalValues, }: XCollateralModalProps) => { @@ -104,7 +102,6 @@ const XCollateralModal = ({ const sendXTransaction = useSendXTransaction(); const handleXCollateralAction = async () => { - if (storedModalValues.action === XCollateralAction.DEPOSIT && !increaseEnabled) return; if (!account) return; if (!xCallFee) return; if (!_inputAmount) return; @@ -143,7 +140,6 @@ const XCollateralModal = ({ useLoanWalletServiceHandler(); const { isWrongChain, handleSwitchChain } = useEvmSwitchChain(sourceChain); - const increaseDisabled = storedModalValues.action === XCollateralAction.DEPOSIT && !increaseEnabled; return ( <> @@ -220,10 +216,7 @@ const XCollateralModal = ({ ) : ( <> {approvalState !== ApprovalState.APPROVED ? ( -