Merge pull request #66 from compolabs/feat/1119-group-order

[1119] Group orders by decimal

Author: EchoDex

src/entity/SpotMarketOrder.ts

@@ -24,15 +24,15 @@ export class SpotMarketOrder {
   readonly baseToken: Token;
   readonly quoteToken = TOKENS_BY_SYMBOL.USDC; // TODO: Переписать пробрасывать через аргументы;
   readonly trader: string;
-  readonly baseSize: BN;
-  readonly baseSizeUnits: BN;
-  readonly quoteSize: BN;
-  readonly quoteSizeUnits: BN;
   readonly price: BN;
   readonly priceUnits: BN;
   readonly priceScale = 1e9;
   readonly priceDecimals = DEFAULT_DECIMALS;
   readonly type: "BUY" | "SELL";
+  baseSize: BN;
+  baseSizeUnits: BN;
+  quoteSize: BN;
+  quoteSizeUnits: BN;
 
   constructor(order: SpotMarketOrderParams) {
     this.id = order.id;
@@ -65,4 +65,16 @@ export class SpotMarketOrder {
   get marketSymbol() {
     return `${this.baseToken.symbol}-${this.quoteToken.symbol}`;
   }
+
+  addBaseSize = (amount: BN) => {
+    this.baseSize = this.baseSize.plus(amount);
+
+    this.baseSizeUnits = BN.formatUnits(this.baseSize, this.baseToken.decimals);
+    this.quoteSize = this.baseSize
+      .abs()
+      .times(this.price)
+      .times(Math.pow(10, this.quoteToken.decimals))
+      .div(Math.pow(10, this.baseToken.decimals) * this.priceScale);
+    this.quoteSizeUnits = BN.formatUnits(this.quoteSize, this.quoteToken.decimals);
+  };
 }

src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBookImpl.tsx

@@ -34,9 +34,9 @@ export enum SPOT_ORDER_FILTER {
   BUY = 2,
 }
 
-export const SPOT_DECIMAL_OPTIONS = [2, 3, 4, 5];
+const SPOT_DECIMAL_OPTIONS = [0, 1, 2, 3];
 
-export const SPOT_SETTINGS_ICONS = {
+const SPOT_SETTINGS_ICONS = {
   [SPOT_ORDER_FILTER.SELL_AND_BUY]: sellAndBuyIcon,
   [SPOT_ORDER_FILTER.SELL]: sellIcon,
   [SPOT_ORDER_FILTER.BUY]: buyIcon,
@@ -113,7 +113,12 @@ const SpotOrderBookImpl: React.FC<IProps> = observer(() => {
     );
   };
 
-  const decimals = SPOT_DECIMAL_OPTIONS[+vm.decimalKey];
+  const indexOfDecimal = SPOT_DECIMAL_OPTIONS.indexOf(vm.decimalGroup);
+
+  const handleDecimalSelect = (index: string) => {
+    const value = SPOT_DECIMAL_OPTIONS[Number(index)];
+    vm.setDecimalGroup(value);
+  };
 
   const renderOrders = (orders: SpotMarketOrder[], type: "sell" | "buy") => {
     const orderMode = type === "sell" ? ORDER_MODE.BUY : ORDER_MODE.SELL;
@@ -124,9 +129,9 @@ const SpotOrderBookImpl: React.FC<IProps> = observer(() => {
     return orders.map((o, index) => (
       <OrderRow key={index + "order"} type={type} onClick={() => orderSpotVm.selectOrderbookOrder(o, orderMode)}>
         <VolumeBar type={type} volumePercent={volumePercent(o).times(100).toNumber()} />
-        <Text primary>{o.baseSizeUnits.toSignificant(decimals)}</Text>
-        <TextOverflow color={color}>{BN.formatUnits(o.price, 9).toFormat(decimals)}</TextOverflow>
-        <Text primary>{numeral(o.quoteSizeUnits).format(`0.${"0".repeat(decimals)}a`)}</Text>
+        <Text primary>{o.baseSizeUnits.toFormat(3)}</Text>
+        <TextOverflow color={color}>{BN.formatUnits(o.price, 9).toFormat(vm.decimalGroup)}</TextOverflow>
+        <Text primary>{numeral(o.quoteSizeUnits).format(`0.${"0".repeat(vm.decimalGroup)}a`)}</Text>
       </OrderRow>
     ));
   };
@@ -139,8 +144,8 @@ const SpotOrderBookImpl: React.FC<IProps> = observer(() => {
             title: new BN(10).pow(-v).toString(),
             key: index.toString(),
           }))}
-          selected={vm.decimalKey}
-          onSelect={({ key }) => vm.setDecimalKey(key)}
+          selected={String(indexOfDecimal)}
+          onSelect={({ key }) => handleDecimalSelect(key)}
         />
         {renderSettingsIcons()}
       </SettingsContainer>
@@ -185,10 +190,10 @@ const SpotOrderBookImpl: React.FC<IProps> = observer(() => {
           decimals={SPOT_DECIMAL_OPTIONS}
           filterIcons={Object.entries(SPOT_SETTINGS_ICONS).map(([key, value]) => value)}
           isOpen={isSettingsOpen}
-          selectedDecimal={vm.decimalKey}
+          selectedDecimal={String(indexOfDecimal)}
           selectedFilter={vm.orderFilter}
           onClose={closeSettings}
-          onDecimalSelect={vm.setDecimalKey}
+          onDecimalSelect={handleDecimalSelect}
           onFilterSelect={vm.setOrderFilter}
         />
       </OrderbookContainer>

src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx

@@ -6,6 +6,7 @@ import { DEFAULT_DECIMALS } from "@src/constants";
 import { SpotMarketOrder } from "@src/entity";
 import useVM from "@src/hooks/useVM";
 import BN from "@src/utils/BN";
+import { groupOrders } from "@src/utils/groupOrders";
 import { IntervalUpdater } from "@src/utils/IntervalUpdater";
 import { RootStore, useStores } from "@stores";
 
@@ -26,8 +27,8 @@ export const SpotOrderbookVMProvider: React.FC<IProps> = ({ children }) => {
 export const useSpotOrderbookVM = () => useVM(ctx);
 
 type TOrderbookData = {
-  buy: Array<SpotMarketOrder>;
-  sell: Array<SpotMarketOrder>;
+  buy: SpotMarketOrder[];
+  sell: SpotMarketOrder[];
   spreadPercent: string;
   spreadPrice: string;
 };
@@ -37,13 +38,16 @@ const UPDATE_INTERVAL = 2 * 1000;
 class SpotOrderbookVM {
   rootStore: RootStore;
 
+  allBuyOrders: SpotMarketOrder[] = [];
+  allSellOrders: SpotMarketOrder[] = [];
+
   orderbook: TOrderbookData = {
     buy: [],
     sell: [],
     spreadPercent: "0.00",
     spreadPrice: "",
   };
-  decimalKey: string = "0";
+  decimalGroup = 2;
   orderFilter: SPOT_ORDER_FILTER = SPOT_ORDER_FILTER.SELL_AND_BUY;
   amountOfOrders: number = 0;
 
@@ -115,7 +119,17 @@ class SpotOrderbookVM {
 
   setAmountOfOrders = (value: number) => (this.amountOfOrders = value);
 
-  setDecimalKey = (value: string) => (this.decimalKey = value);
+  setDecimalGroup = (value: number) => {
+    this.decimalGroup = value;
+
+    const buyOrdersCombinedByDecimal = groupOrders(this.allBuyOrders, value);
+    const sellOrdersCombinedByDecimal = groupOrders(this.allSellOrders, value);
+
+    this.setOrderbook({
+      buy: buyOrdersCombinedByDecimal,
+      sell: sellOrdersCombinedByDecimal,
+    });
+  };
 
   setOrderFilter = (value: SPOT_ORDER_FILTER) => (this.orderFilter = value);
 
@@ -127,7 +141,7 @@ class SpotOrderbookVM {
     if (!this.rootStore.initialized || !market) return;
 
     const bcNetwork = FuelNetwork.getInstance();
-    const limit = 100;
+    const limit = 200;
 
     this.isOrderBookLoading = true;
 
@@ -136,28 +150,46 @@ class SpotOrderbookVM {
       bcNetwork!.fetchSpotOrders({ baseToken: market.baseToken.assetId, type: "SELL", limit }),
     ]);
 
-    //bid = max of buy
-    const buyPrices = buy.map((order) => order.price);
-    const maxBuyPrice = buyPrices.reduce((max, current) => (current.gt(max) ? current : max), buyPrices[0]);
+    this.allBuyOrders = buy;
+    this.allSellOrders = sell;
 
-    //ask = min of sell
-    const sellPrices = sell.map((order) => order.price);
-    const minSellPrice = sellPrices.reduce((min, current) => (current.lt(min) ? current : min), sellPrices[0]);
+    const buyOrdersCombinedByDecimal = groupOrders(this.allBuyOrders, this.decimalGroup);
+    const sellOrdersCombinedByDecimal = groupOrders(this.allSellOrders, this.decimalGroup);
+
+    const getPrice = (orders: SpotMarketOrder[], priceType: "max" | "min"): BN => {
+      const compareType = priceType === "max" ? "gt" : "lt";
+      return orders.reduce((value, order) => (order.price[compareType](value) ? order.price : value), orders[0].price);
+    };
+
+    const maxBuyPrice = getPrice(this.allBuyOrders, "max");
+    const minSellPrice = getPrice(this.allSellOrders, "min");
 
     if (maxBuyPrice && minSellPrice) {
       // spread = ask - bid
       const spread = minSellPrice.minus(maxBuyPrice);
       const formattedSpread = BN.formatUnits(spread, DEFAULT_DECIMALS).toSignificant(2);
-
-      const spreadPercent = minSellPrice.minus(maxBuyPrice).div(maxBuyPrice).times(100);
-      this.setOrderbook({ buy, sell, spreadPercent: spreadPercent.toFormat(2), spreadPrice: formattedSpread });
+      const spreadPercent = spread.div(maxBuyPrice).times(100);
+
+      this.setOrderbook({
+        buy: buyOrdersCombinedByDecimal,
+        sell: sellOrdersCombinedByDecimal,
+        spreadPercent: spreadPercent.toFormat(2),
+        spreadPrice: formattedSpread,
+      });
       this.isOrderBookLoading = false;
       return;
     }
 
-    this.setOrderbook({ buy, sell, spreadPercent: "0.00", spreadPrice: "0.00" });
+    this.setOrderbook({
+      buy: buyOrdersCombinedByDecimal,
+      sell: sellOrdersCombinedByDecimal,
+      spreadPercent: "0.00",
+      spreadPrice: "0.00",
+    });
     this.isOrderBookLoading = false;
   };
 
-  private setOrderbook = (orderbook: TOrderbookData) => (this.orderbook = orderbook);
+  private setOrderbook = (orderbook: Partial<TOrderbookData>) => {
+    this.orderbook = { ...this.orderbook, ...orderbook };
+  };
 }

src/utils/groupOrders.ts

@@ -0,0 +1,32 @@
+import { DEFAULT_DECIMALS } from "@src/constants";
+import { SpotMarketOrder } from "@src/entity";
+
+import BN from "./BN";
+
+const roundPrice = (price: BN, decimals: number): BN => {
+  const factor = new BN(10).pow(decimals);
+  return new BN(price.dividedBy(factor).integerValue(BN.ROUND_HALF_UP).multipliedBy(factor));
+};
+
+export const groupOrders = (orders: SpotMarketOrder[], decimals: number): SpotMarketOrder[] => {
+  const groupedOrders: { [key: string]: SpotMarketOrder } = {};
+
+  orders.forEach((order) => {
+    const roundedPrice = roundPrice(order.price, DEFAULT_DECIMALS - decimals);
+    const price = roundedPrice.toString();
+
+    if (!groupedOrders[price]) {
+      groupedOrders[price] = new SpotMarketOrder({
+        id: order.id,
+        baseToken: order.baseToken.assetId,
+        trader: order.trader,
+        baseSize: BN.ZERO,
+        orderPrice: roundedPrice,
+        blockTimestamp: order.timestamp.unix(),
+      });
+    }
+    groupedOrders[price].addBaseSize(order.baseSize);
+  });
+
+  return Object.values(groupedOrders);
+};