Merge branch 'main' into issue-#702

bancorprotocol · Jan 18, 2024 · 3e6a688 · 3e6a688
2 parents e1a7e2b + 6a6272d
commit 3e6a688
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 30 deletions.
diff --git a/e2e/tests/strategy/overlapping/create.ts b/e2e/tests/strategy/overlapping/create.ts
@@ -28,7 +28,11 @@ export const createOverlappingStrategy = (testCase: CreateStrategyTestCase) => {
     await createForm.selectSetting('overlapping');
     await createForm.nextStep();
 
-    const overlappingForm = await createForm.fillOverlapping();
+    const overlappingForm = createForm.getOverlappingForm();
+    // Make so form has value before filling it
+    expect(overlappingForm.min()).toHaveValue(/\S+/);
+    expect(overlappingForm.max()).toHaveValue(/\S+/);
+    await createForm.fillOverlapping();
     expect(overlappingForm.max()).toHaveValue(sell.max.toString());
 
     const mainMenu = new MainMenuDriver(page);
@@ -43,7 +47,7 @@ export const createOverlappingStrategy = (testCase: CreateStrategyTestCase) => {
     await checkApproval(page, [base, quote]);
     await page.waitForURL('/', { timeout: 10_000 });
 
-    // Verfiy notification
+    // Verify notification
     const notif = new NotificationDriver(page, 'create-strategy');
     await expect(notif.getTitle()).toHaveText('Success');
     await expect(notif.getDescription()).toHaveText(

diff --git a/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx b/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx
@@ -44,12 +44,22 @@ export type SetOverlappingParams = (
   max: string
 ) => Promise<StrategyPrices | undefined>;
 
+const getInitialPrice = (marketPrice: string | number, quote: Token) => {
+  const currentPrice = new SafeDecimal(marketPrice);
+  const min = currentPrice.times(0.999).toFixed(quote.decimals);
+  const max = currentPrice.times(1.001).toFixed(quote.decimals);
+  if (min !== max) return { min, max };
+  // TODO(#988) Workaround if market price is close to 1wei
+  const wei = new SafeDecimal(min);
+  return { min, max: wei.times(10).toString() };
+};
+
 export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
   props
 ) => {
   const { base, quote, order0, order1, spread, setSpread } = props;
   const marketPrice = useMarketPrice({ base, quote });
-  const [anchoredOrder, setAnchoderOrder] = useState<'buy' | 'sell'>('buy');
+  const [anchoredOrder, setAnchoredOrder] = useState<'buy' | 'sell'>('buy');
   const { marketPricePercentage } = useMarketIndication({
     base,
     quote,
@@ -63,15 +73,15 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
   });
 
   const setOverlappingParams = async (min: string, max: string) => {
-    order0.setMin(min);
-    order1.setMax(max);
     const params = await carbonSDK.calculateOverlappingStrategyPrices(
       quote!.address,
       min,
       max,
       marketPrice.toString(),
       spread.toString()
     );
+    order0.setMin(min);
+    order1.setMax(max);
     order0.setMax(params.buyPriceHigh);
     order0.setMarginalPrice(params.buyPriceMarginal);
     order1.setMin(params.sellPriceLow);
@@ -121,9 +131,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
   useEffect(() => {
     if (!quote || !base || marketPrice <= 0) return;
     if (!order0.min && !order1.max) {
-      const _marketPrice = new SafeDecimal(marketPrice);
-      const min = _marketPrice.times(0.999).toFixed(quote.decimals);
-      const max = _marketPrice.times(1.001).toFixed(quote.decimals);
+      const { min, max } = getInitialPrice(marketPrice, quote);
       if (isValidRange(min, max)) setOverlappingParams(min, max);
     } else {
       const min = order0.min;
@@ -133,10 +141,10 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           const buyOrder = { min, marginalPrice: params.buyPriceMarginal };
           const sellOrder = { max, marginalPrice: params.sellPriceMarginal };
           if (isMinAboveMarket(buyOrder, quote)) {
-            setAnchoderOrder('sell');
+            setAnchoredOrder('sell');
             setBuyBudget(order1.budget, min, max);
           } else if (isMaxBelowMarket(sellOrder, quote)) {
-            setAnchoderOrder('buy');
+            setAnchoredOrder('buy');
             setSellBudget(order0.budget, min, max);
           } else {
             if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -157,7 +165,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
       setOverlappingParams(min, max).then((params) => {
         const marginalPrice = params.buyPriceMarginal;
         if (isMinAboveMarket({ min, marginalPrice }, quote)) {
-          setAnchoderOrder('sell');
+          setAnchoredOrder('sell');
           setBuyBudget(order1.budget, min, max);
         } else {
           if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -185,7 +193,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
       setOverlappingParams(min, max).then((params) => {
         const marginalPrice = params.sellPriceMarginal;
         if (isMaxBelowMarket({ max, marginalPrice }, quote)) {
-          setAnchoderOrder('buy');
+          setAnchoredOrder('buy');
           setSellBudget(order0.budget, min, max);
         } else {
           if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -299,7 +307,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           {...props}
           marketPrice={marketPrice}
           anchoredOrder={anchoredOrder}
-          setAnchoderOrder={setAnchoderOrder}
+          setAnchoredOrder={setAnchoredOrder}
           setBuyBudget={setBuyBudget}
           setSellBudget={setSellBudget}
         />

diff --git a/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx b/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx
@@ -11,7 +11,7 @@ import { isValidRange } from 'components/strategies/utils';
 interface Props extends OverlappingStrategyProps {
   marketPrice: number;
   anchoredOrder: 'buy' | 'sell';
-  setAnchoderOrder: (value: 'buy' | 'sell') => any;
+  setAnchoredOrder: (value: 'buy' | 'sell') => any;
   setBuyBudget: (sellBudget: string, min: string, max: string) => any;
   setSellBudget: (buyBudget: string, min: string, max: string) => any;
 }
@@ -24,7 +24,7 @@ export const CreateOverlappingStrategyBudget: FC<Props> = (props) => {
     order1,
     token0BalanceQuery,
     token1BalanceQuery,
-    setAnchoderOrder,
+    setAnchoredOrder,
     setBuyBudget,
     setSellBudget,
   } = props;
@@ -56,12 +56,12 @@ export const CreateOverlappingStrategyBudget: FC<Props> = (props) => {
 
   const onBuyBudgetChange = (value: string) => {
     order0.setBudget(value);
-    setAnchoderOrder('buy');
+    setAnchoredOrder('buy');
     setSellBudget(value, order0.min, order1.max);
   };
   const onSellBudgetChange = (value: string) => {
     order1.setBudget(value);
-    setAnchoderOrder('sell');
+    setAnchoredOrder('sell');
     setBuyBudget(value, order0.min, order1.max);
   };
 

diff --git a/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx b/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx
@@ -23,7 +23,7 @@ interface Props {
   order1: OrderCreate;
   marketPrice: number;
   anchoredOrder: 'buy' | 'sell';
-  setAnchoderOrder: (value: 'buy' | 'sell') => any;
+  setAnchoredOrder: (value: 'buy' | 'sell') => any;
   setBuyBudget: (sellBudget: string, min: string, max: string) => any;
   setSellBudget: (buyBudget: string, min: string, max: string) => any;
   setOverlappingError: (error: string) => void;
@@ -41,7 +41,7 @@ export const EditOverlappingStrategyBudget: FC<Props> = (props) => {
     order0,
     order1,
     marketPrice,
-    setAnchoderOrder,
+    setAnchoredOrder,
     setBuyBudget,
     setSellBudget,
     setOverlappingError,
@@ -124,12 +124,12 @@ export const EditOverlappingStrategyBudget: FC<Props> = (props) => {
 
   const onBuyBudgetChange = (value: string) => {
     order0.setBudget(value);
-    setAnchoderOrder('buy');
+    setAnchoredOrder('buy');
     setSellBudget(value, order0.min, order1.max);
   };
   const onSellBudgetChange = (value: string) => {
     order1.setBudget(value);
-    setAnchoderOrder('sell');
+    setAnchoredOrder('sell');
     setBuyBudget(value, order0.min, order1.max);
   };
 

diff --git a/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx b/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx
@@ -40,7 +40,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
   });
 
   const [spread, setSpread] = useState(getRoundedSpread(strategy));
-  const [anchoredOrder, setAnchoderOrder] = useState<'buy' | 'sell'>('buy');
+  const [anchoredOrder, setAnchoredOrder] = useState<'buy' | 'sell'>('buy');
   const [mounted, setMounted] = useState(false);
 
   const setOverlappingParams = async (min: string, max: string) => {
@@ -107,10 +107,10 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
         const buyOrder = { min, marginalPrice: params.buyPriceMarginal };
         const sellOrder = { max, marginalPrice: params.sellPriceMarginal };
         if (isMinAboveMarket(buyOrder, quote)) {
-          setAnchoderOrder('sell');
+          setAnchoredOrder('sell');
           setBuyBudget(order1.budget, min, max);
         } else if (isMaxBelowMarket(sellOrder, quote)) {
-          setAnchoderOrder('buy');
+          setAnchoredOrder('buy');
           setSellBudget(order0.budget, min, max);
         } else {
           if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -131,7 +131,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
       setOverlappingParams(min, max).then((params) => {
         const marginalPrice = params.buyPriceMarginal;
         if (isMinAboveMarket({ min, marginalPrice }, quote)) {
-          setAnchoderOrder('sell');
+          setAnchoredOrder('sell');
           setBuyBudget(order1.budget, min, max);
         } else {
           if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -158,7 +158,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
       setOverlappingParams(min, max).then((params) => {
         const marginalPrice = params.sellPriceMarginal;
         if (isMaxBelowMarket({ max, marginalPrice }, quote)) {
-          setAnchoderOrder('buy');
+          setAnchoredOrder('buy');
           setSellBudget(order0.budget, min, max);
         } else {
           if (anchoredOrder === 'buy') setSellBudget(order0.budget, min, max);
@@ -233,7 +233,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
         {...props}
         marketPrice={marketPrice}
         anchoredOrder={anchoredOrder}
-        setAnchoderOrder={setAnchoderOrder}
+        setAnchoredOrder={setAnchoredOrder}
         setBuyBudget={setBuyBudget}
         setSellBudget={setSellBudget}
       />

diff --git a/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx b/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx
@@ -155,16 +155,22 @@ const getMarginalSellPoint = (config: PointConfig) => {
   }
 };
 
+// Make sure the distance is always large enough to avoid blurry behavior
+const getXFactor = (min: number, max: number, marketPrice: number) => {
+  const lowest = Math.min(min, max, marketPrice);
+  const highest = Math.max(min, max, marketPrice);
+  const delta = highest - lowest || 1;
+  return 1 / delta;
+};
+
 export const OverlappingStrategyGraph: FC<Props> = (props) => {
   const svg = useRef<SVGSVGElement>(null);
   const [zoom, setZoom] = useState(0.4);
   const [dragging, setDragging] = useState('');
   const { quote, order0, order1, spread } = props;
   const baseMin = Number(formatNumber(order0.min));
   const baseMax = Number(formatNumber(order1.max));
-  // Make sure the distance is always large enough to avoid blurry behavior
-  const delta = baseMax - baseMin || 1;
-  const xFactor = delta <= 1 ? 1 / delta : 1;
+  const xFactor = getXFactor(baseMin, baseMax, props.marketPrice);
 
   const marketPrice = props.marketPrice * xFactor;