Merge pull request #1762 from balancednetwork/fix/fix-network-issues

Fix collateral handling after governance

Author: hetfly

apps/web/src/app/components/home/CollateralPanel.tsx

@@ -29,10 +29,12 @@ import { useICXUnstakingTime } from '@/store/application/hooks';
 import {
   useCollateralActionHandlers,
   useCollateralState,
+  useCollateralTokens,
   useDerivedCollateralInfo,
   useIsHandlingICX,
   useSupportedCollateralTokens,
 } from '@/store/collateral/hooks';
+import { getActionMaximum, 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';
@@ -150,7 +152,12 @@ const CollateralPanel = () => {
   const { isAdjusting, inputType } = useCollateralState();
   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 canAdjustCollateral = increaseEnabled || collateralDeposit.isGreaterThan(0);
   const [ICXWithdrawOption, setICXWithdrawOption] = useState<ICXWithdrawOptions>(ICXWithdrawOptions.KEEPSICX);
   const { data: icxUnstakingTime } = useICXUnstakingTime();
   const isSuperSmall = useMedia(`(max-width: 359px)`);
@@ -177,6 +184,7 @@ const CollateralPanel = () => {
   });
 
   const handleEnableAdjusting = () => {
+    if (!canAdjustCollateral) return;
     adjust(true);
     adjustLoan(false);
   };
@@ -193,6 +201,11 @@ 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)}`,
@@ -209,10 +222,12 @@ const CollateralPanel = () => {
   const addTransaction = useTransactionAdder();
 
   const handleCollateralConfirm = async () => {
+    if (shouldDeposit && !increaseEnabled) return;
+    const collateralTokenAddress = collateralTokens?.[contractSymbol];
+    if (!collateralTokenAddress) return;
+
     window.addEventListener('beforeunload', showMessageOnBeforeUnload);
-    const collateralTokenAddress =
-      supportedCollateralTokens && supportedCollateralTokens[useWrongSymbol(collateralType)];
-    const cx = bnJs.inject({ account }).getContract(collateralTokenAddress!);
+    const cx = bnJs.inject({ account }).getContract(collateralTokenAddress);
     const decimals: string = await cx.decimals();
 
     if (shouldDeposit) {
@@ -356,8 +371,8 @@ const CollateralPanel = () => {
 
   // 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],
+    () => BigNumber.min(lockedCollateral.times(shouldShowLock ? 1.005 : 1), actionMaximum),
+    [lockedCollateral, actionMaximum, shouldShowLock],
   );
 
   const percent = collateralTotal.isZero() ? 0 : tLockedAmount.div(collateralTotal).times(100).toNumber();
@@ -391,7 +406,7 @@ const CollateralPanel = () => {
               <CollateralTypeSwitcher width={width} containerRef={ref.current} />
             </CollateralTypeSwitcherWrap>
 
-            {account && collateralTotal?.isGreaterThan(0) && (
+            {account && collateralTotal?.isGreaterThan(0) && canAdjustCollateral && (
               <Flex flexDirection={isSuperSmall ? 'column' : 'row'} ml="auto" paddingTop={isSuperSmall ? '4px' : '0'}>
                 {isAdjusting ? (
                   <>
@@ -403,7 +418,11 @@ const CollateralPanel = () => {
                     >
                       <Trans>Cancel</Trans>
                     </TextButton>
-                    <Button onClick={toggleOpen} fontSize={14} disabled={!isSliderStateChanged}>
+                    <Button
+                      onClick={toggleOpen}
+                      fontSize={14}
+                      disabled={!isSliderStateChanged || (shouldDeposit && !increaseEnabled)}
+                    >
                       <Trans>Confirm</Trans>
                     </Button>
                   </>
@@ -451,9 +470,9 @@ const CollateralPanel = () => {
                   range={{
                     min: [0],
                     max: [
-                      collateralTotal.isZero()
+                      actionMaximum.isZero()
                         ? SLIDER_RANGE_MAX_BOTTOM_THRESHOLD
-                        : collateralTotal.dp(collateralDecimalPlaces).toNumber(),
+                        : actionMaximum.dp(collateralDecimalPlaces).toNumber(),
                     ],
                   }}
                   instanceRef={instance => {
@@ -475,14 +494,14 @@ const CollateralPanel = () => {
                     value={formattedAmounts[Field.LEFT]}
                     decimalPlaces={collateralDecimalPlaces}
                     currency={isHandlingICX ? 'ICX' : formatSymbol(collateralType)}
-                    maxValue={collateralTotal}
+                    maxValue={actionMaximum}
                     onUserInput={onFieldAInput}
                   />
                 </PanelInfoItem>
 
                 <PanelInfoItem>
                   <CurrencyField
-                    editable={isAdjusting}
+                    editable={isAdjusting && increaseEnabled}
                     isActive={false}
                     label="Wallet"
                     tooltipText={
@@ -510,6 +529,7 @@ const CollateralPanel = () => {
       <XCollateralModal
         account={account}
         currencyAmount={xTokenAmount}
+        increaseEnabled={increaseEnabled}
         sourceChain={sourceChain}
         storedModalValues={storedModalValues}
       />
@@ -617,7 +637,9 @@ const CollateralPanel = () => {
               onClick={handleCollateralConfirm}
               fontSize={14}
               disabled={
-                !hasEnoughICX || (isHandlingICX && !shouldDeposit && ICXWithdrawOption === ICXWithdrawOptions.EMPTY)
+                !hasEnoughICX ||
+                (shouldDeposit && !increaseEnabled) ||
+                (isHandlingICX && !shouldDeposit && ICXWithdrawOption === ICXWithdrawOptions.EMPTY)
               }
             >
               {shouldDeposit ? t`Deposit` : t`Withdraw`}

apps/web/src/app/components/home/LoanPanel.tsx

@@ -14,7 +14,12 @@ 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 } from '@/store/collateral/hooks';
+import {
+  useCollateralActionHandlers,
+  useDerivedCollateralInfo,
+  useSupportedCollateralTokens,
+} from '@/store/collateral/hooks';
+import { getActionMaximum, isCollateralEnabled, isIncreaseAllowed } from '@/store/collateral/eligibility';
 import {
   useActiveLoanAddress,
   useDerivedLoanInfo,
@@ -56,6 +61,10 @@ const LoanPanel = () => {
     totalBorrowableAmount,
     bnUSDAmount,
   } = useDerivedLoanInfo();
+  const { data: supportedCollateralTokens } = useSupportedCollateralTokens();
+  const increaseEnabled = isCollateralEnabled(supportedCollateralTokens, useWrongSymbol(collateralType));
+  const actionMaximum = getActionMaximum(borrowedAmount, borrowableAmountWithReserve, increaseEnabled);
+  const canAdjustLoan = increaseEnabled || borrowedAmount.isGreaterThan(0);
 
   const { isAdjusting, inputType } = useLoanState();
 
@@ -95,6 +104,7 @@ const LoanPanel = () => {
   const addTransaction = useTransactionAdder();
 
   const handleEnableAdjusting = () => {
+    if (!canAdjustLoan) return;
     adjust(true);
     adjustCollateral(false);
   };
@@ -124,6 +134,11 @@ 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(),
@@ -139,6 +154,7 @@ const LoanPanel = () => {
   };
 
   const handleLoanConfirm = () => {
+    if (shouldBorrow && !increaseEnabled) return;
     if (!iconAccount) return;
     window.addEventListener('beforeunload', showMessageOnBeforeUnload);
 
@@ -261,7 +277,7 @@ const LoanPanel = () => {
             <Typography variant="h2">
               <Trans>Loan</Trans>
             </Typography>
-            {account && (
+            {account && canAdjustLoan && (
               <Flex flexDirection={isSuperSmall ? 'column' : 'row'} paddingTop={isSuperSmall ? '4px' : '0'}>
                 {isAdjusting ? (
                   <>
@@ -276,6 +292,7 @@ const LoanPanel = () => {
                     <Button
                       disabled={
                         !isSliderStateChanged ||
+                        (shouldBorrow && !increaseEnabled) ||
                         (borrowedAmount.isLessThanOrEqualTo(0)
                           ? currentValue >= 0 && currentValue < 10
                           : currentValue < 0)
@@ -311,10 +328,9 @@ const LoanPanel = () => {
                 min: [0],
                 // https://github.com/balancednetwork/balanced-network-interface/issues/50
                 max: [
-                  Number.isNaN(borrowableAmountWithReserve.dp(2).toNumber()) ||
-                  borrowableAmountWithReserve.dp(2).isZero()
+                  Number.isNaN(borrowableAmountWithReserve.dp(2).toNumber()) || actionMaximum.dp(2).isZero()
                     ? SLIDER_RANGE_MAX_BOTTOM_THRESHOLD
-                    : borrowableAmountWithReserve.dp(2).toNumber(),
+                    : actionMaximum.dp(2).toNumber(),
                 ],
               }}
               instanceRef={instance => {
@@ -337,6 +353,7 @@ const LoanPanel = () => {
                   noticeText={'10 bnUSD minimum'}
                   value={formattedAmounts[Field.LEFT]}
                   currency={'bnUSD'}
+                  maxValue={actionMaximum}
                   onUserInput={onFieldAInput}
                 />
               ) : (
@@ -347,14 +364,15 @@ const LoanPanel = () => {
                   tooltipText="Your collateral balance. It earns interest from staking, but is also sold over time to repay your loan."
                   value={formattedAmounts[Field.LEFT]}
                   currency={'bnUSD'}
+                  maxValue={actionMaximum}
                   onUserInput={onFieldAInput}
                 />
               )}
             </PanelInfoItem>
 
             <PanelInfoItem>
               <CurrencyField
-                editable={isAdjusting}
+                editable={isAdjusting && increaseEnabled}
                 isActive={false}
                 label="Available"
                 tooltipText="The amount of ICX available to deposit from your wallet."
@@ -375,6 +393,7 @@ const LoanPanel = () => {
       <XLoanModal
         collateralAccount={account}
         bnUSDAmount={bnUSDAmount}
+        increaseEnabled={increaseEnabled}
         sourceChain={sourceChain}
         interestRate={interestRate}
         storedModalValues={storedModalValues}
@@ -430,7 +449,11 @@ const LoanPanel = () => {
             <TextButton onClick={toggleOpen} fontSize={14}>
               <Trans>Cancel</Trans>
             </TextButton>
-            <Button disabled={!hasEnoughICX} onClick={handleLoanConfirm} fontSize={14}>
+            <Button
+              disabled={!hasEnoughICX || (shouldBorrow && !increaseEnabled)}
+              onClick={handleLoanConfirm}
+              fontSize={14}
+            >
               <Trans>{shouldBorrow ? t`Borrow` : t`Repay`}</Trans>
             </Button>
           </Flex>

apps/web/src/app/components/home/_components/xCollateralModal/index.tsx

@@ -34,6 +34,7 @@ export enum XCollateralAction {
 type XCollateralModalProps = {
   modalId?: MODAL_ID;
   account: string | undefined;
+  increaseEnabled: boolean;
   sourceChain: XChainId;
   storedModalValues: {
     amount: string;
@@ -48,6 +49,7 @@ const XCollateralModal = ({
   modalId = MODAL_ID.XCOLLATERAL_CONFIRM_MODAL,
   account,
   currencyAmount,
+  increaseEnabled,
   sourceChain,
   storedModalValues,
 }: XCollateralModalProps) => {
@@ -102,6 +104,7 @@ const XCollateralModal = ({
 
   const sendXTransaction = useSendXTransaction();
   const handleXCollateralAction = async () => {
+    if (storedModalValues.action === XCollateralAction.DEPOSIT && !increaseEnabled) return;
     if (!account) return;
     if (!xCallFee) return;
     if (!_inputAmount) return;
@@ -140,6 +143,7 @@ const XCollateralModal = ({
 
   useLoanWalletServiceHandler();
   const { isWrongChain, handleSwitchChain } = useEvmSwitchChain(sourceChain);
+  const increaseDisabled = storedModalValues.action === XCollateralAction.DEPOSIT && !increaseEnabled;
 
   return (
     <>
@@ -216,7 +220,10 @@ const XCollateralModal = ({
                     ) : (
                       <>
                         {approvalState !== ApprovalState.APPROVED ? (
-                          <Button onClick={approveCallback} disabled={approvalState === ApprovalState.PENDING}>
+                          <Button
+                            onClick={approveCallback}
+                            disabled={approvalState === ApprovalState.PENDING || increaseDisabled}
+                          >
                             {approvalState === ApprovalState.PENDING ? (
                               <Trans>Approving</Trans>
                             ) : (
@@ -226,7 +233,7 @@ const XCollateralModal = ({
                         ) : (
                           <StyledButton
                             onClick={handleXCollateralAction}
-                            disabled={!gasChecker.hasEnoughGas || isWalletPrompting}
+                            disabled={!gasChecker.hasEnoughGas || isWalletPrompting || increaseDisabled}
                           >
                             {isWalletPrompting ? (
                               <Trans>Waiting for wallet...</Trans>

apps/web/src/app/components/home/_components/xLoanModal/index.tsx

@@ -36,6 +36,7 @@ export enum XLoanAction {
 type XLoanModalProps = {
   modalId?: MODAL_ID;
   collateralAccount: string | undefined;
+  increaseEnabled: boolean;
   sourceChain: XChainId;
   storedModalValues: {
     amount: string;
@@ -52,6 +53,7 @@ const XLoanModal = ({
   modalId = MODAL_ID.XLOAN_CONFIRM_MODAL,
   collateralAccount,
   bnUSDAmount,
+  increaseEnabled,
   sourceChain,
   interestRate,
   storedModalValues,
@@ -116,6 +118,7 @@ const XLoanModal = ({
 
   const sendXTransaction = useSendXTransaction();
   const handleXLoanAction = async () => {
+    if (storedModalValues.action === XLoanAction.BORROW && !increaseEnabled) return;
     if (!collateralAccount) return;
     if (!loanNetworkAddress) return;
     if (!xCallFee) return;
@@ -147,6 +150,7 @@ const XLoanModal = ({
   const gasChecker = useXCallGasChecker(activeChain, _inputAmount);
 
   const { isWrongChain, handleSwitchChain } = useEvmSwitchChain(activeChain);
+  const increaseDisabled = storedModalValues.action === XLoanAction.BORROW && !increaseEnabled;
 
   return (
     <>
@@ -247,7 +251,7 @@ const XLoanModal = ({
                     ) : (
                       <StyledButton
                         onClick={handleXLoanAction}
-                        disabled={!gasChecker.hasEnoughGas || isWalletPrompting}
+                        disabled={!gasChecker.hasEnoughGas || isWalletPrompting || increaseDisabled}
                       >
                         {isWalletPrompting ? (
                           <Trans>Waiting for wallet...</Trans>

apps/web/src/store/collateral/eligibility.ts

@@ -0,0 +1,30 @@
+import BigNumber from 'bignumber.js';
+
+export type CollateralTokenMap = Record<string, string>;
+
+export function hasPositiveDebtCeiling(ceiling: string | null | undefined): boolean {
+  return ceiling != null && new BigNumber(ceiling).isGreaterThan(0);
+}
+
+export function selectEnabledCollateralTokens(
+  tokens: CollateralTokenMap,
+  enabledSymbols: ReadonlySet<string>,
+): CollateralTokenMap {
+  return Object.fromEntries(Object.entries(tokens).filter(([symbol]) => enabledSymbols.has(symbol)));
+}
+
+export function isCollateralEnabled(tokens: CollateralTokenMap | undefined, symbol: string): boolean {
+  return Boolean(tokens?.[symbol]);
+}
+
+export function getActionMaximum(
+  currentAmount: BigNumber,
+  availableMaximum: BigNumber,
+  increaseEnabled: boolean,
+): BigNumber {
+  return increaseEnabled ? availableMaximum : currentAmount;
+}
+
+export function isIncreaseAllowed(currentAmount: BigNumber, nextAmount: BigNumber, increaseEnabled: boolean): boolean {
+  return increaseEnabled || nextAmount.isLessThanOrEqualTo(currentAmount);
+}