Feat: new market logic (#319)

Author: Anton-rock

package.json

@@ -17,7 +17,7 @@
     "pnpm": ">=10.4.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.16.1.tgz",
+    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.16.2.tgz",
     "@compolabs/tradingview-chart": "^1.0.21",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0",
+  "version": "1.8.1",
   "isMainnet": true,
   "contractVer": 1539,
   "tokens": [
@@ -320,4 +320,4 @@
   "networkUrl": "https://mainnet.fuel.network/v1/graphql",
   "explorerUrl": "https://app.fuel.network",
   "sentioUrl": "https://app.sentio.xyz/api/v1/analytics/zhpv96/spark-processor/sql/execute"
-}
+}

src/config.json

@@ -38,7 +38,7 @@ export class SpotMarketOrder {
 
   constructor(order: SpotMarketOrderParams) {
     const bcNetwork = FuelNetwork.getInstance();
-    const activeMarket = CONFIG.MARKETS.find((el) => el.contractId === order.market);
+    const activeMarket = CONFIG.ALL_MARKETS.find((el) => el.contractId === order.market); // TODO: If the market was already hidden and you traded on it, you need to display the history correctly
 
     const baseToken = order.quoteAssetId ? order.asset : (activeMarket?.baseAssetId ?? "");
     const quoteToken = order.quoteAssetId ?? activeMarket?.quoteAssetId ?? "";

src/entity/SpotMarketOrder.ts

@@ -33,7 +33,7 @@ import { ACTIVE_INPUT, ORDER_MODE, ORDER_TYPE, useCreateOrderVM } from "./Create
 import { OrderTypeSheet, OrderTypeTooltip, OrderTypeTooltipIcon } from "./OrderTypeTooltip";
 
 export const ORDER_OPTIONS = [
-  // { title: "Market", key: ORDER_TYPE.Market, timeInForce: LimitType.FOK },
+  { title: "Market", key: ORDER_TYPE.Market, timeInForce: LimitType.MKT },
   { title: "Limit", key: ORDER_TYPE.Limit, timeInForce: LimitType.GTC },
   // { title: "Limit (IOC)", key: ORDER_TYPE.LimitIOC, timeInForce: LimitType.IOC },
   // { title: "Limit (FOK)", key: ORDER_TYPE.LimitFOK, timeInForce: LimitType.FOK },

src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx

@@ -310,11 +310,11 @@ class CreateOrderVM {
     const fee = getRealFee(market, tradeStore.matcherFee, tradeStore.exchangeFee, !isBuy);
 
     const depositAmount = isBuy ? this.inputTotal : this.inputAmount;
-    const depositAmountWithFee = fee.exchangeFee.plus(fee.matcherFee);
+    const feeAmount = fee.exchangeFee.plus(fee.matcherFee);
 
     const deposit: DepositInfo = {
       amountToSpend: depositAmount.toString(),
-      amountFee: depositAmountWithFee.toString(),
+      amountFee: feeAmount.toString(),
       depositAssetId: isBuy ? market.quoteToken.assetId : market.baseToken.assetId,
       feeAssetId: market.quoteToken.assetId,
       assetType: isBuy ? AssetType.Quote : AssetType.Base,
@@ -349,8 +349,8 @@ class CreateOrderVM {
     try {
       let hash: Undefinable<string> = "";
 
-      if (timeInForce === LimitType.GTC) {
-        hash = await this.createGTCOrder(type, deposit, compactMarkets);
+      if (timeInForce === LimitType.GTC || timeInForce === LimitType.MKT) {
+        hash = await this.createGTCOrder(type, deposit, compactMarkets, timeInForce);
       } else {
         hash = await this.createMarketOrLimitOrder(type, market, deposit, compactMarkets);
       }
@@ -386,22 +386,44 @@ class CreateOrderVM {
     this.isLoading = false;
   };
 
+  applySlippage = (value: BN, slippagePercent: BN, isPositive = true) => {
+    const factor = new BN(1).plus(isPositive ? slippagePercent.div(100) : slippagePercent.div(100).negated());
+
+    return value.multipliedBy(factor).decimalPlaces(0).toString();
+  };
+
   // Extracted function for creating GTC orders with deposits
   private createGTCOrder = async (
     type: OrderType,
     deposit: DepositInfo,
     markets: CompactMarketInfo[],
+    timeInForce: LimitType,
   ): Promise<string> => {
     const bcNetwork = FuelNetwork.getInstance();
 
+    let price = this.inputPrice.toString();
+    const amount = this.inputAmount.toString();
+
+    let amountToSpend = deposit.amountToSpend;
+
+    if (timeInForce === LimitType.MKT) {
+      const isBuy = type === OrderType.Buy;
+      price = this.applySlippage(this.inputPrice, this.slippage, isBuy);
+
+      amountToSpend = isBuy
+        ? this.applySlippage(new BN(amountToSpend), this.slippage.plus(1), isBuy)
+        : amountToSpend.toString();
+    }
+
     const order: CreateOrderWithDepositParams = {
       type,
-      amount: this.inputAmount.toString(),
-      price: this.inputPrice.toString(),
+      price,
+      amount,
       ...deposit,
+      amountToSpend,
     };
 
-    const data = await bcNetwork.createSpotOrderWithDeposit(order, markets);
+    const data = await bcNetwork.createSpotOrderWithDeposit(order, markets, timeInForce);
     return data.transactionId;
   };
 

src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM.tsx

@@ -63,7 +63,7 @@ class SettingsStore {
   orderType: ORDER_TYPE = ORDER_TYPE.Limit;
   setOrderType = (v: ORDER_TYPE) => (this.orderType = v);
 
-  timeInForce: LimitType = LimitType.GTC;
+  timeInForce: LimitType = LimitType.MKT;
   setTimeInForce = (v: LimitType) => (this.timeInForce = v);
 
   serialize = (): ISerializedSettingStore => ({

src/stores/SettingsStore.ts

@@ -21,7 +21,7 @@ export interface Market {
 }
 
 function createConfig() {
-  const CURRENT_CONFIG_VER = "1.8.0";
+  const CURRENT_CONFIG_VER = "1.8.1";
   const configJSON = configProdJSON;
   assert(configJSON.version === CURRENT_CONFIG_VER, "Version mismatch");
 
@@ -51,6 +51,7 @@ function createConfig() {
   return {
     APP: configJSON,
     MARKETS: markets,
+    ALL_MARKETS: configJSON.markets,
     TOKENS: tokens,
     TOKENS_BY_SYMBOL: tokensBySymbol,
     TOKENS_BY_ASSET_ID: tokensByAssetId,