Feat: fix market orders (#140)

Author: Anton-rock

package.json

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

pnpm-lock.yaml

@@ -130,13 +130,14 @@ export class FuelNetwork {
   };
 
   withdrawSpotBalance = async (
-    ...params: Parameters<typeof this.orderbookSdk.withdraw>
+    ...params: Parameters<typeof this.orderbookSdk.withdrawAssets>
   ): Promise<WriteTransactionResponse> => {
-    return this.orderbookSdk.withdraw(...params);
+    return this.orderbookSdk.withdrawAssets(...params);
   };
 
-  withdrawSpotBalanceAll = async (...params: Parameters<typeof this.orderbookSdk.withdrawAll>): Promise<void> => {
-    await this.orderbookSdk.withdrawAll(...params);
+  withdrawSpotBalanceAll = async (...params: Parameters<typeof this.orderbookSdk.withdrawAllAssets>): Promise<void> => {
+    console.log("params", params);
+    await this.orderbookSdk.withdrawAllAssets(...params);
   };
 
   depositSpotBalance = async (

src/blockchain/FuelNetwork.ts

@@ -36,19 +36,15 @@ const MainAssets = observer(({ setStep }: MainAssets) => {
   const bcNetwork = FuelNetwork.getInstance();
   const isShowDepositInfo = !settingsStore?.isShowDepositInfo.includes(accountStore.address ?? "");
   const balanceList = swapStore.getFormatedContractBalance();
-  const hasPositiveBalance = balanceList.some((item) => !new BN(item.contractBalance).isZero());
+  const hasPositiveBalance = balanceList.some((item) => !new BN(item.balance).isZero());
   const accumulateBalanceContract = balanceList.reduce((acc, account) => {
     const price = BN.formatUnits(oracleStore.getTokenIndexPrice(account.asset.priceFeed), DEFAULT_DECIMALS);
-    return acc.plus(new BN(account.contractBalance).multipliedBy(price));
+    return acc.plus(new BN(account.balance).multipliedBy(price));
   }, BN.ZERO);
 
   const handleWithdraw = async () => {
-    const assets = balanceList.map((el) => ({
-      assetId: el.assetId,
-      balance: BN.parseUnits(el.contractBalance, el.asset.decimals).toString(),
-    }));
     setIsLoading(true);
-    await balanceStore.withdrawBalanceAll(assets);
+    await balanceStore.withdrawBalanceAll();
     setIsLoading(false);
   };
   const closeAssets = () => {
@@ -70,7 +66,7 @@ const MainAssets = observer(({ setStep }: MainAssets) => {
       <SmartFlex alignItems="center" justifyContent="space-between" column>
         <HeaderBlock alignItems="center" gap="10px" justifyContent="space-between">
           <TextTitle type={TEXT_TYPES.TITLE_MODAL} primary>
-            Deposited Assets
+            Assets
           </TextTitle>
           <CloseButton alt="icon close" src={closeThin} onClick={closeAssets} />
         </HeaderBlock>
@@ -81,7 +77,7 @@ const MainAssets = observer(({ setStep }: MainAssets) => {
                 <>
                   {balanceList.map((el) => (
                     <AssetItem key={el.assetId}>
-                      <AssetBlock options={{ showBalance: "contractBalance" }} token={el} />
+                      <AssetBlock options={{ showBalance: "balance" }} token={el} />
                     </AssetItem>
                   ))}
                   <OverallBlock justifyContent="space-between">
@@ -120,11 +116,21 @@ const MainAssets = observer(({ setStep }: MainAssets) => {
       {!hasPositiveBalance && isConnected && (
         <DepositedAssets alignItems="center" gap="20px" justifyContent="center" column>
           <DepositAssets />
-          <TextTitleDeposit>Trade fast to trade fast and cheap.</TextTitleDeposit>
+          <TextTitleDeposit>
+            It looks like your wallet is empty. Tap the{" "}
+            <LinkStyled
+              href="/#/faucet"
+              onClick={() => {
+                quickAssetsStore.setQuickAssets(false);
+              }}
+            >
+              faucet
+            </LinkStyled>{" "}
+            to grab some tokens.
+          </TextTitleDeposit>
         </DepositedAssets>
       )}
       <BottomColumn justifyContent="space-between">
-        {isShowDepositInfo && isConnected && <InfoBlockAssets />}
         {!isConnected && (
           <SizedBoxStyled width={150}>
             <Text type={TEXT_TYPES.BUTTON}>Connect wallet to see your assets and trade</Text>
@@ -137,7 +143,7 @@ const MainAssets = observer(({ setStep }: MainAssets) => {
         )}
         {accumulateBalanceContract.gt(0) && (
           <SmartFlexBlock>
-            <ButtonConfirm fitContent onClick={() => setStep(2)}>
+            <ButtonConfirm fitContent onClick={() => setStep(1)}>
               Withdraw
             </ButtonConfirm>
             <ButtonConfirm disabled={isLoading} fitContent onClick={handleWithdraw}>
@@ -223,3 +229,11 @@ const CloseButton = styled.img`
     cursor: pointer;
   }
 `;
+
+const LinkStyled = styled.a`
+  color: ${({ theme }) => theme.colors.greenLight};
+  text-decoration: underline;
+  &:hover {
+    cursor: pointer;
+  }
+`;

src/screens/Assets/MainAssets/MainAssets.tsx

@@ -38,6 +38,7 @@ const SideManageAssets = observer(() => {
   const [isFirstOpen, setIsFirstOpen] = useState(true);
   const [isBack, setIsBack] = useState(true);
   const setStep = (step: number) => {
+    console.log("step", step);
     setIsBack(step > quickAssetsStore.currentStep);
     setIsFirstOpen(false);
     setTimeout(() => {

src/screens/Assets/SideManageAssets/SideManageAssets.tsx

@@ -14,10 +14,8 @@ import closeThin from "@src/assets/icons/closeThin.svg";
 import DataBase from "@src/assets/icons/dataBase.svg?react";
 import Spinner from "@src/assets/icons/spinner.svg?react";
 import WalletIcon from "@src/assets/icons/wallet.svg?react";
-import { FuelNetwork } from "@src/blockchain";
 import { DEFAULT_DECIMALS } from "@src/constants";
 import BN from "@src/utils/BN";
-import { CONFIG } from "@src/utils/getConfig";
 import { useStores } from "@stores";
 
 interface WithdrawAssets {
@@ -38,7 +36,6 @@ const WithdrawAssets = observer(({ setStep }: WithdrawAssets) => {
   const [amount, setAmount] = useState(BN.ZERO);
   const [isLoading, setIsLoading] = useState(false);
   const { quickAssetsStore, balanceStore, swapStore } = useStores();
-  const bcNetwork = FuelNetwork.getInstance();
   const closeAssets = () => {
     quickAssetsStore.setCurrentStep(0);
     quickAssetsStore.setQuickAssets(false);

src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx

@@ -182,6 +182,10 @@ export class BalanceStore {
 
   withdrawBalance = async (assetId: string, amount: string) => {
     const { notificationStore } = this.rootStore;
+    const markets = CONFIG.APP.markets
+      .filter((el) => el.baseAssetId === assetId || el.quoteAssetId === assetId)
+      .map((el) => el.contractId);
+
     const bcNetwork = FuelNetwork.getInstance();
 
     const token = bcNetwork.getTokenByAssetId(assetId);
@@ -192,10 +196,10 @@ export class BalanceStore {
       });
     }
     const { type } = this.getContractBalanceInfo(assetId);
-    const amountFormatted = BN.formatUnits(amount, token.decimals).toSignificant(2);
+    const amountFormatted = amount;
 
     try {
-      const tx = await bcNetwork?.withdrawSpotBalance(amount, type);
+      const tx = await bcNetwork?.withdrawSpotBalance(type, markets, amountFormatted);
       notificationStore.success({
         text: getActionMessage(ACTION_MESSAGE_TYPE.WITHDRAWING_TOKENS)(amountFormatted, token.symbol),
         hash: tx.transactionId,
@@ -211,21 +215,15 @@ export class BalanceStore {
     }
   };
 
-  withdrawBalanceAll = async (withdrawAssets: any) => {
+  withdrawBalanceAll = async () => {
     const { notificationStore } = this.rootStore;
     const bcNetwork = FuelNetwork.getInstance();
     if (bcNetwork?.getIsExternalWallet()) {
       notificationStore.info({ text: "Please, confirm operation in your wallet" });
     }
-    const amountFormatted = withdrawAssets.map((el: { assetId: string; balance: number }) => {
-      const { type } = this.getContractBalanceInfo(el.assetId);
-      return {
-        amount: el.balance,
-        assetType: type,
-      };
-    });
+    const markets = CONFIG.APP.markets.map((el) => el.contractId);
     try {
-      await bcNetwork?.withdrawSpotBalanceAll(amountFormatted);
+      await bcNetwork?.withdrawSpotBalanceAll(markets);
       notificationStore.success({
         text: getActionMessage(ACTION_MESSAGE_TYPE.WITHDRAWING_ALL_TOKENS)(),
         hash: "",