Overlapping graph with extreme values

src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx

@@ -44,6 +44,15 @@ export type SetOverlappingParams = (
   max: string
 ) => Promise<StrategyPrices | undefined>;
 
+const getInitialPrice = (marketPrice: SafeDecimal, quote: Token) => {
+  const min = marketPrice.times(0.999).toFixed(quote.decimals);
+  const max = marketPrice.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
 ) => {
@@ -121,10 +130,14 @@ 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);
-      if (isValidRange(min, max)) setOverlappingParams(min, max);
+      const { min, max } = getInitialPrice(new SafeDecimal(marketPrice), quote);
+      if (isValidRange(min, max)) {
+        setOverlappingParams(min, max).then(() => {
+          // Need to reset min/max after params in non strict mode
+          if (!order0.min) order0.setMin(min);
+          if (!order1.max) order1.setMax(max);
+        });
+      }
     } else {
       const min = order0.min;
       const max = order1.max;

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;