SOV-1867: Fix margin long slippage form (#2508)

* Fix margin long slippage form * Fix slippage price for Close dialog * Rename calculateMinReturn method
DistributedCollective · Mar 22, 2023 · 096291d · 096291d
1 parent f5a768c
commit 096291d
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 24 deletions.
diff --git a/src/app/hooks/trading/useTrading_resolvePairTokens.ts b/src/app/hooks/trading/useTrading_resolvePairTokens.ts
@@ -8,6 +8,7 @@ interface PairTokensResponse {
   collateralToken: Asset;
   useLoanTokens: boolean;
   useCollateralTokens: boolean;
+  quoteToken: Asset;
 }
 
 export function useTrading_resolvePairTokens(
@@ -33,5 +34,6 @@ export function useTrading_resolvePairTokens(
     collateralToken,
     useLoanTokens: loanToken === collateral,
     useCollateralTokens: loanToken !== collateral,
+    quoteToken: pair.longAsset,
   };
 }
diff --git a/src/app/hooks/useCacheCall.ts b/src/app/hooks/useCacheCall.ts
@@ -40,7 +40,7 @@ export function useCacheCall<T = any>(
   // @dev: generating id from contractName, methodName and args
   // @dev: ignoring account because contract response is the same for all accounts unless account is part of the args
   const hashedArgs = useMemo(
-    () => idHash([getContract(contractName).address, methodName, args]),
+    () => idHash([getContract(contractName)?.address, methodName, args]),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [contractName, methodName, JSON.stringify(args)],
   );

diff --git a/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx b/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx
@@ -26,7 +26,7 @@ import { CollateralAssets } from '../CollateralAssets';
 import { AssetRenderer } from 'app/components/AssetRenderer';
 import { TxFeeCalculator } from '../TxFeeCalculator';
 import { ErrorBadge } from 'app/components/Form/ErrorBadge';
-import { calculateMinimumReturn } from '../../utils/marginUtils';
+import { calculateSlippagePrice } from '../../utils/marginUtils';
 import { SlippageForm } from '../SlippageForm';
 import settingIcon from 'assets/images/settings-blue.svg';
 import { ActionButton } from 'app/components/Form/ActionButton';
@@ -151,7 +151,10 @@ export const ClosePositionDialog: React.FC<IClosePositionDialogProps> = ({
     ...args,
   );
 
-  const { minReturn } = calculateMinimumReturn(value.withdrawAmount, slippage);
+  const { minimumPrice } = calculateSlippagePrice(
+    value.withdrawAmount,
+    slippage,
+  );
 
   const token = useMemo(
     () => assetByTokenAddress(value.withdrawToken) || collateral,
@@ -268,8 +271,8 @@ export const ClosePositionDialog: React.FC<IClosePositionDialogProps> = ({
                 <div className="tw-font-semibold">
                   <LoadableValue
                     loading={loadingValue}
-                    value={weiToAssetNumberFormat(minReturn, token)}
-                    tooltip={weiToNumberFormat(minReturn, 18)}
+                    value={weiToAssetNumberFormat(minimumPrice, token)}
+                    tooltip={weiToNumberFormat(minimumPrice, 18)}
                   />{' '}
                   <AssetRenderer asset={token} />
                 </div>

diff --git a/src/app/pages/MarginTradePage/components/SlippageForm/index.tsx b/src/app/pages/MarginTradePage/components/SlippageForm/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { translations } from 'locales/i18n';
@@ -7,10 +7,15 @@ import { FormGroup } from 'app/components/Form/FormGroup';
 import { AssetRenderer } from 'app/components/AssetRenderer';
 import { Slider } from 'app/components/Form/Slider';
 import { DummyInput } from 'app/components/Form/Input';
-import { calculateMinimumReturn } from '../../utils/marginUtils';
+import { calculateSlippagePrice } from '../../utils/marginUtils';
 import styles from './dialog.module.scss';
 import { weiToAssetNumberFormat } from 'utils/display-text/format';
 import { sliderDefaultLabelValues } from 'app/components/Form/Slider/sliderDefaultLabelValues';
+import { useSelector } from 'react-redux';
+import { selectMarginTradePage } from '../../selectors';
+import { TradingPosition } from 'types/trading-position';
+
+const DEFAULT_ASSET = Asset.SOV;
 
 interface ISlippageFormProps {
   onClose: () => void;
@@ -30,7 +35,17 @@ export const SlippageForm: React.FC<ISlippageFormProps> = ({
   isTrade,
 }) => {
   const { t } = useTranslation();
-  const { minReturn } = calculateMinimumReturn(amount, value);
+  const { position } = useSelector(selectMarginTradePage);
+  const { minimumPrice, maximumPrice } = calculateSlippagePrice(amount, value);
+
+  const isLongPosition = useMemo(() => position === TradingPosition.LONG, [
+    position,
+  ]);
+
+  const slippagePrice = useMemo(
+    () => (isLongPosition && isTrade ? maximumPrice : minimumPrice),
+    [isLongPosition, isTrade, maximumPrice, minimumPrice],
+  );
 
   return (
     <div className="tw-rounded-3xl tw-absolute tw-inset-0 tw-bg-black tw-p-4">
@@ -61,11 +76,15 @@ export const SlippageForm: React.FC<ISlippageFormProps> = ({
 
         {isTrade ? (
           <LabelValuePair
-            label={t(translations.marginTradePage.tradeDialog.minEntry)}
+            label={t(
+              translations.marginTradePage.tradeDialog[
+                isLongPosition ? 'maxEntry' : 'minEntry'
+              ],
+            )}
             value={
               <>
-                {weiToAssetNumberFormat(minReturn, asset || Asset.SOV)}{' '}
-                <AssetRenderer asset={asset || Asset.SOV} />
+                {weiToAssetNumberFormat(slippagePrice, asset || DEFAULT_ASSET)}{' '}
+                <AssetRenderer asset={asset || DEFAULT_ASSET} />
               </>
             }
             className="tw-mt-5"
@@ -78,9 +97,14 @@ export const SlippageForm: React.FC<ISlippageFormProps> = ({
           >
             <DummyInput
               value={
-                <>{weiToAssetNumberFormat(minReturn, asset || Asset.SOV)}</>
+                <>
+                  {weiToAssetNumberFormat(
+                    slippagePrice,
+                    asset || DEFAULT_ASSET,
+                  )}
+                </>
               }
-              appendElem={<AssetRenderer asset={asset || Asset.SOV} />}
+              appendElem={<AssetRenderer asset={asset || DEFAULT_ASSET} />}
               className="tw-h-10 tw-truncate"
               data-action-id="margin-reviewTransaction-minimumEntryPrice"
             />

diff --git a/src/app/pages/MarginTradePage/components/TradeForm/index.tsx b/src/app/pages/MarginTradePage/components/TradeForm/index.tsx
@@ -85,6 +85,7 @@ export const TradeForm: React.FC<ITradeFormProps> = ({ pairType }) => {
     loanToken,
     collateralToken,
     useLoanTokens,
+    quoteToken,
   } = useTrading_resolvePairTokens(pair, position, collateral);
   const {
     value: estimations,
@@ -485,7 +486,7 @@ export const TradeForm: React.FC<ITradeFormProps> = ({ pairType }) => {
             onClose={() => setOpenSlippage(false)}
             amount={toWei(price)}
             value={slippage}
-            asset={collateralToken}
+            asset={quoteToken}
             onChange={setSlippage}
             isTrade={true}
           />

diff --git a/src/app/pages/MarginTradePage/utils/marginUtils.ts b/src/app/pages/MarginTradePage/utils/marginUtils.ts
@@ -81,15 +81,16 @@ export const getExitTransactionHash = (
   }
 };
 
-export const calculateMinimumReturn = (
+export const calculateSlippagePrice = (
   amount: string,
   slippage: number = 0.1,
-) => {
-  return {
-    amount,
-    slippage,
-    minReturn: bignumber(amount)
-      .sub(bignumber(amount).mul(slippage / 100))
-      .toFixed(0),
-  };
-};
+) => ({
+  amount,
+  slippage,
+  minimumPrice: bignumber(amount)
+    .sub(bignumber(amount).mul(slippage / 100))
+    .toFixed(0),
+  maximumPrice: bignumber(amount)
+    .add(bignumber(amount).mul(slippage / 100))
+    .toFixed(0),
+});
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1740,6 +1740,7 @@
       "liquidationPrice": "Est. Liquidation price:",
       "entryPrice": "Position Entry Price:",
       "minEntry": "Minimum Entry Price: ",
+      "maxEntry": "Maximum Entry Price: ",
       "minLiq": "Minimum Liquidation Price: ",
       "interestAPR": "Interest APY",
       "renewalDate": "Renewal Date:",