Merge pull request #131 from compolabs/feat/1578-orderbook

[1578] Bug with orderbook

Author: EchoDex

package.json

@@ -15,7 +15,7 @@
     "pnpm": ">=9.7.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "^1.6.5",
+    "@compolabs/spark-orderbook-ts-sdk": "^1.6.6",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.9.1",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ export class SpotMarketOrder {
   initialQuoteAmount: BN;
   currentQuoteAmount: BN;
 
+  filledAmount: BN;
+  filledQuoteAmount: BN;
+
   constructor(order: SpotMarketOrderParams) {
     const bcNetwork = FuelNetwork.getInstance();
 
@@ -49,6 +52,9 @@ export class SpotMarketOrder {
     this.currentAmount = new BN(order.amount);
     this.currentQuoteAmount = this.getQuoteAmount(this.currentAmount, this.price);
 
+    this.filledAmount = this.getFilledAmount(this.initialAmount, this.currentAmount);
+    this.filledQuoteAmount = this.getQuoteAmount(this.filledAmount, this.price);
+
     this.timestamp = dayjs(order.timestamp);
   }
 
@@ -68,6 +74,10 @@ export class SpotMarketOrder {
     return BN.formatUnits(this.currentAmount, this.baseToken.decimals);
   }
 
+  get filledAmountUnits(): BN {
+    return BN.formatUnits(this.filledAmount, this.baseToken.decimals);
+  }
+
   get initialQuoteAmountUnits(): BN {
     return BN.formatUnits(this.initialQuoteAmount, this.quoteToken.decimals);
   }
@@ -76,6 +86,10 @@ export class SpotMarketOrder {
     return BN.formatUnits(this.currentQuoteAmount, this.quoteToken.decimals);
   }
 
+  get filledQuoteAmountUnits(): BN {
+    return BN.formatUnits(this.filledQuoteAmount, this.quoteToken.decimals);
+  }
+
   get formatPrice() {
     return this.priceUnits.toSignificant(2);
   }
@@ -89,20 +103,21 @@ export class SpotMarketOrder {
   }
 
   get formatFilledAmount() {
-    return this.initialAmount
-      .minus(this.currentAmount)
-      .dividedBy(Math.pow(10, this.baseToken.decimals))
-      .toSignificant(this.baseToken.decimals - 4);
+    return this.filledAmountUnits.toSignificant(2);
   }
 
   addInitialAmount = (amount: BN) => {
     this.initialAmount = this.initialAmount.plus(amount);
     this.initialQuoteAmount = this.getQuoteAmount(this.initialAmount, this.price);
+
+    this.filledAmount = this.getFilledAmount(this.initialAmount, this.currentAmount);
   };
 
   addCurrentAmount = (amount: BN) => {
     this.currentAmount = this.currentAmount.plus(amount);
     this.currentQuoteAmount = this.getQuoteAmount(this.currentAmount, this.price);
+
+    this.filledAmount = this.getFilledAmount(this.initialAmount, this.currentAmount);
   };
 
   private getQuoteAmount = (amount: BN, price: BN) => {
@@ -117,6 +132,10 @@ export class SpotMarketOrder {
     return new BN(result);
   };
 
+  private getFilledAmount = (initialAmount: BN, currentAmount: BN) => {
+    return initialAmount.minus(currentAmount);
+  };
+
   debug = () => {
     return {
       initialAmount: this.initialAmount.toString(),

src/entity/SpotMarketOrder.ts

@@ -43,7 +43,7 @@ class SpotTableVM {
   constructor(rootStore: RootStore) {
     makeAutoObservable(this);
     this.rootStore = rootStore;
-    const { accountStore, tradeStore, balanceStore } = this.rootStore;
+    const { accountStore, tradeStore } = this.rootStore;
 
     reaction(
       () => [tradeStore.market, this.rootStore.initialized, accountStore.isConnected],

src/screens/TradeScreen/BottomTables/SpotTable/SpotTableVM.tsx

@@ -129,9 +129,9 @@ export const SpotOrderBook: 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.currentAmountUnits.toFormat(3)}</Text>
+        <Text primary>{o.currentAmountUnits.toFormat(4)}</Text>
         <TextOverflow color={color}>{o.priceUnits.toFormat(vm.decimalGroup)}</TextOverflow>
-        <Text primary>{numeral(o.initialQuoteAmountUnits).format(`0.${"0".repeat(vm.decimalGroup)}a`)}</Text>
+        <Text primary>{numeral(o.currentQuoteAmountUnits).format(`0.${"0".repeat(vm.decimalGroup)}a`)}</Text>
       </OrderRow>
     ));
   };

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

@@ -2,7 +2,6 @@ import { DEFAULT_DECIMALS } from "@src/constants";
 import { SpotMarketOrder } from "@src/entity";
 
 import BN from "./BN";
-import { CONFIG } from "./getConfig";
 
 const roundPrice = (price: BN, decimals: number): BN => {
   const factor = new BN(10).pow(decimals);
@@ -26,13 +25,13 @@ export const groupOrders = (orders: SpotMarketOrder[], decimals: number): SpotMa
         initial_amount: BN.ZERO.toString(),
         order_type: order.orderType,
         asset: order.baseToken.assetId,
-        quoteAssetId: CONFIG.TOKENS_BY_SYMBOL.USDC.assetId,
+        quoteAssetId: order.quoteToken.assetId,
         timestamp: order.timestamp.toString(),
       });
     }
 
     groupedOrders[price].addInitialAmount(order.initialAmount);
-    groupedOrders[price].addCurrentAmount(order.initialAmount);
+    groupedOrders[price].addCurrentAmount(order.currentAmount);
   });
 
   return Object.values(groupedOrders);

src/utils/groupOrders.ts

@@ -26,7 +26,8 @@ export const handleWalletErrors = (
   let extendedErrorText;
 
   try {
-    extendedErrorText = getHumanReadableError(error.metadata.logs[0]);
+    extendedErrorText = getHumanReadableError(error.metadata.logs);
+    console.error("Detail info: ", error.metadata.logs);
   } catch (error) {
     console.error("Failed to parse error: ", error);
   }