[1460] Working on bugs related to ui

.github/workflows/deploy-to-cf-pages.yaml

@@ -1,5 +1,5 @@
 name: Cloudflare Pages Deploy
-  
+
 on:
   push:
     branches:
@@ -11,16 +11,18 @@ on:
 jobs:
   deploy:
     environment:
-      name: ${{ (github.ref == 'refs/heads/main' && 'production') || (github.ref == 'refs/heads/develop' && 'dev') || 'preview' }}   
+      name:
+        ${{ (github.ref == 'refs/heads/main' && 'production') || (github.ref == 'refs/heads/develop' && 'dev') ||
+        'preview' }}
     permissions:
       actions: read # Only required for private GitHub Repo
       contents: read
       deployments: write
       pull-requests: write
     runs-on: ubuntu-latest
-    timeout-minutes: 5 
+    timeout-minutes: 5
     steps:
-      - name: 'Checkout Github Action'
+      - name: "Checkout Github Action"
         uses: actions/checkout@v4
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -34,18 +36,10 @@ jobs:
       - name: Install Dependencies
         run: |
           pnpm install
-      - name: create env file
-        run: |
-          touch .env
-          echo VITE_CONTRACT_ADDRESSES_MARKET=${{ vars.VITE_CONTRACT_ADDRESSES_MARKET }} >> .env 
-          echo VITE_CONTRACT_ADDRESSES_PYTH=${{ vars.VITE_CONTRACT_ADDRESSES_PYTH }} >> .env 
-          echo VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY=${{ vars.VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY }} >> .env 
-          echo VITE_INDEXER_URL=${{ vars.VITE_INDEXER_URL }} >> .env 
-          cat .env
       - name: Build Project
         run: |
           npm run build
-      - name: 'Deploy to Cloudflare Pages'
+      - name: "Deploy to Cloudflare Pages"
         uses: andykenward/github-actions-cloudflare-pages@v2.3.1
         with:
           cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}

package.json

@@ -11,11 +11,11 @@
     "deploy": "gh-pages -d build"
   },
   "engines": {
-    "node": "20.x",
-    "pnpm": "9.7.x"
+    "node": ">=20.11.0",
+    "pnpm": ">=9.7.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "^1.4.8",
+    "@compolabs/spark-orderbook-ts-sdk": "^1.6.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.9.1",

public/config.json

@@ -0,0 +1,55 @@
+{
+  "version": "1.0.0",
+  "contractVer": 257,
+  "tokens": [
+    {
+      "name": "Ethereum",
+      "symbol": "ETH",
+      "decimals": 9,
+      "assetId": "0xf8f8b6283d7fa5b672b530cbb84fcccb4ff8dc40f8176ef4544ddb1f1952ad07",
+      "priceFeed": "0xff61491a931112ddf1bd8147cd1b641375f79f5825126d665480874634fd0ace",
+      "precision": 9
+    },
+    {
+      "name": "Bitcoin",
+      "symbol": "BTC",
+      "decimals": 8,
+      "assetId": "0x38e4ca985b22625fff93205e997bfc5cc8453a953da638ad297ca60a9f2600bc",
+      "priceFeed": "0xe62df6c8b4a85fe1a67db44dc12de5db330f7ac66b72dc658afedf0f4a415b43",
+      "precision": 8
+    },
+    {
+      "name": "USDC",
+      "symbol": "USDC",
+      "decimals": 6,
+      "assetId": "0x336b7c06352a4b736ff6f688ba6885788b3df16e136e95310ade51aa32dc6f05",
+      "priceFeed": "0xeaa020c61cc479712813461ce153894a96a6c00b21ed0cfc2798d1f9a9e9c94a",
+      "precision": 2
+    }
+  ],
+  "markets": [
+    {
+      "marketName": "BTCUSDC",
+      "owner": "0xf47e0ef744ac8c993550e03d17f1c4844494553a12cac11ab8c568c8999fdbbf",
+      "baseAssetId": "0x38e4ca985b22625fff93205e997bfc5cc8453a953da638ad297ca60a9f2600bc",
+      "baseAssetDecimals": 8,
+      "quoteAssetId": "0x336b7c06352a4b736ff6f688ba6885788b3df16e136e95310ade51aa32dc6f05",
+      "quoteAssetDecimals": 6,
+      "priceDecimals": 9,
+      "feeAssetId": "0xf8f8b6283d7fa5b672b530cbb84fcccb4ff8dc40f8176ef4544ddb1f1952ad07",
+      "contractId": "0x58959d086d8a6ee8cf8eeb572b111edb21661266be4b4885383748d11b72d0aa"
+    }
+  ],
+  "indexers": {
+    "0x58959d086d8a6ee8cf8eeb572b111edb21661266be4b4885383748d11b72d0aa": {
+      "httpUrl": "https://indexer.bigdevenergy.link/c940d97/v1/graphql",
+      "wsUrl": "wss://indexer.bigdevenergy.link/c940d97/v1/graphql"
+    }
+  },
+  "contracts": {
+    "orderbook": "0x0713334e61ed73ba9421a3a49891953f9ccb7353828566b569752a82a39803e8",
+    "multiAsset": "0xdc527289bdef8ec452f350c9b2d36d464a9ebed88eb389615e512a78e26e3509"
+  },
+  "networkUrl": "https://testnet.fuel.network/v1/graphql",
+  "explorerUrl": "https://app.fuel.network"
+}

src/blockchain/FuelNetwork.ts

@@ -12,50 +12,41 @@ import { Account, B256Address, Bech32Address } from "fuels";
 import { makeObservable } from "mobx";
 import { Nullable } from "tsdef";
 
-import { PerpMarket, PerpOrder, PerpPosition, SpotMarketOrder, Token } from "@src/entity";
-import { PerpMarketTrade } from "@src/entity/PerpMarketTrade";
-import { FAUCET_AMOUNTS } from "@src/stores/FaucetStore";
+import { PerpMarket, PerpMarketTrade, PerpOrder, PerpPosition, SpotMarketOrder, Token } from "@src/entity";
 import BN from "@src/utils/BN";
+import { CONFIG } from "@src/utils/getConfig";
 
-import {
-  CONTRACT_ADDRESSES,
-  INDEXER_HTTP_URL,
-  INDEXER_WS_URL,
-  NETWORK,
-  PYTH_URL,
-  TOKENS_BY_ASSET_ID,
-  TOKENS_BY_SYMBOL,
-  TOKENS_LIST,
-} from "./constants";
 import {
   Balances,
   FetchTradesParams,
-  MarketCreateEvent,
   PerpMaxAbsPositionSize,
   PerpPendingFundingPayment,
   SpotMarketVolume,
 } from "./types";
 import { WalletManager } from "./WalletManager";
 
+const MARKET = "0x58959d086d8a6ee8cf8eeb572b111edb21661266be4b4885383748d11b72d0aa";
+
 export class FuelNetwork {
   private static instance: Nullable<FuelNetwork> = null;
 
   private walletManager = new WalletManager();
   orderbookSdk: SparkOrderBookSdk;
 
-  public network = NETWORK;
-
   private constructor() {
     makeObservable(this.walletManager);
 
     this.orderbookSdk = new SparkOrderBookSdk({
-      networkUrl: NETWORK.url,
-      contractAddresses: CONTRACT_ADDRESSES,
+      networkUrl: CONFIG.APP.networkUrl,
+      contractAddresses: {
+        market: MARKET, // Temporary solution
+        orderbook: CONFIG.APP.contracts.orderbook,
+        multiAsset: CONFIG.APP.contracts.multiAsset,
+      },
       indexerConfig: {
-        httpUrl: INDEXER_HTTP_URL,
-        wsUrl: INDEXER_WS_URL,
+        httpUrl: CONFIG.APP.indexers[MARKET].httpUrl,
+        wsUrl: CONFIG.APP.indexers[MARKET].wsUrl,
       },
-      pythUrl: PYTH_URL,
     });
   }
 
@@ -66,6 +57,10 @@ export class FuelNetwork {
     return FuelNetwork.instance;
   }
 
+  setActiveMarket = (marketAddress: string) => {
+    this.orderbookSdk.setActiveMarketAddress(marketAddress);
+  };
+
   getAddress = (): Nullable<B256Address> => {
     return this.walletManager.address;
   };
@@ -86,15 +81,15 @@ export class FuelNetwork {
   getIsExternalWallet = () => false;
 
   getTokenList = (): Token[] => {
-    return TOKENS_LIST;
+    return CONFIG.TOKENS;
   };
 
   getTokenBySymbol = (symbol: string): Token => {
-    return TOKENS_BY_SYMBOL[symbol];
+    return CONFIG.TOKENS_BY_SYMBOL[symbol];
   };
 
   getTokenByAssetId = (assetId: string): Token => {
-    return TOKENS_BY_ASSET_ID[assetId.toLowerCase()];
+    return CONFIG.TOKENS_BY_ASSET_ID[assetId.toLowerCase()];
   };
 
   connect = async (wallet: Account): Promise<void> => {
@@ -108,9 +103,9 @@ export class FuelNetwork {
     this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined);
   };
 
-  disconnectWallet = (): void => {
-    this.walletManager.disconnect();
-    this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined);
+  disconnectWallet = async (): Promise<void> => {
+    await this.walletManager.disconnect();
+    this.orderbookSdk.setActiveWallet(undefined);
   };
 
   addAssetToWallet = async (assetId: string): Promise<void> => {
@@ -125,25 +120,23 @@ export class FuelNetwork {
     return this.orderbookSdk.fulfillOrderMany(order);
   };
 
-  cancelSpotOrder = async (order: SpotMarketOrder): Promise<void> => {
-    await this.orderbookSdk.cancelOrder(order.id);
+  cancelSpotOrder = async (order: SpotMarketOrder): Promise<WriteTransactionResponse> => {
+    return this.orderbookSdk.cancelOrder(order.id);
   };
 
-  mintToken = async (assetAddress: string): Promise<void> => {
+  mintToken = async (amount: string, assetAddress: string): Promise<WriteTransactionResponse> => {
     const token = this.getTokenByAssetId(assetAddress);
     const asset = this.getAssetFromToken(token);
 
-    const amount = FAUCET_AMOUNTS[token.symbol].toString();
-
-    await this.orderbookSdk.mintToken(asset, amount);
+    return this.orderbookSdk.mintToken(asset, amount);
   };
 
-  withdrawSpotBalance = async (amount: string, assetType: AssetType): Promise<void> => {
-    await this.orderbookSdk.withdraw(amount, assetType);
+  withdrawSpotBalance = async (amount: string, assetType: AssetType): Promise<WriteTransactionResponse> => {
+    return this.orderbookSdk.withdraw(amount, assetType);
   };
 
-  depositSpotBalance = async (amount: string, asset: Asset): Promise<void> => {
-    await this.orderbookSdk.deposit(asset, amount);
+  depositSpotBalance = async (amount: string, asset: Asset): Promise<WriteTransactionResponse> => {
+    return this.orderbookSdk.deposit(asset, amount);
   };
 
   depositPerpCollateral = async (assetAddress: string, amount: string): Promise<void> => {
@@ -189,10 +182,6 @@ export class FuelNetwork {
     // await this.sdk.fulfillPerpOrder(gasAsset, orderId, amount, tokenPriceFeed);
   };
 
-  fetchSpotMarkets = async (limit: number): Promise<MarketCreateEvent[]> => {
-    return this.orderbookSdk.fetchMarkets(limit);
-  };
-
   fetchSpotMarketPrice = async (baseTokenAddress: string): Promise<BN> => {
     const token = this.getTokenByAssetId(baseTokenAddress);
     const asset = this.getAssetFromToken(token);
@@ -206,7 +195,7 @@ export class FuelNetwork {
     const formatOrder = (order: Order) =>
       new SpotMarketOrder({
         ...order,
-        quoteAssetId: TOKENS_BY_SYMBOL.USDC.assetId,
+        quoteAssetId: CONFIG.TOKENS_BY_SYMBOL.USDC.assetId,
       });
 
     if ("ActiveSellOrder" in data) {
@@ -254,7 +243,7 @@ export class FuelNetwork {
     const asset = this.getAssetFromToken(token);
 
     // return this.sdk.fetchPerpCollateralBalance(accountAddress, asset);
-    return new BN("0");
+    return BN.ZERO;
   };
 
   fetchPerpAllTraderPositions = async (
@@ -307,7 +296,7 @@ export class FuelNetwork {
     const asset = this.getAssetFromToken(token);
 
     // return this.sdk.fetchPerpFundingRate(asset);
-    return new BN("0");
+    return BN.ZERO;
   };
 
   fetchPerpMaxAbsPositionSize = async (
@@ -319,7 +308,7 @@ export class FuelNetwork {
     const asset = this.getAssetFromToken(token);
 
     // return this.sdk.fetchPerpMaxAbsPositionSize(accountAddress, asset, tradePrice);
-    return { shortSize: new BN("0"), longSize: new BN("0") };
+    return { shortSize: BN.ZERO, longSize: BN.ZERO };
   };
 
   fetchPerpPendingFundingPayment = async (
@@ -330,15 +319,15 @@ export class FuelNetwork {
     const asset = this.getAssetFromToken(token);
 
     // return this.sdk.fetchPerpPendingFundingPayment(accountAddress, asset);
-    return { fundingGrowthPayment: new BN("0"), fundingPayment: new BN("0") };
+    return { fundingGrowthPayment: BN.ZERO, fundingPayment: BN.ZERO };
   };
 
   fetchPerpMarkPrice = async (assetAddress: string): Promise<BN> => {
     const token = this.getTokenByAssetId(assetAddress);
     const asset = this.getAssetFromToken(token);
 
     // return this.sdk.fetchPerpMarkPrice(asset);
-    return new BN("0");
+    return BN.ZERO;
   };
 
   private getAssetFromToken = (token: Token) => {

src/blockchain/WalletManager.ts

@@ -3,8 +3,8 @@ import { makeAutoObservable } from "mobx";
 import { Nullable } from "tsdef";
 
 import { FUEL_CONFIG } from "@src/constants";
+import { CONFIG } from "@src/utils/getConfig";
 
-import { TOKENS_BY_ASSET_ID } from "./constants";
 import { NETWORK_ERROR, NetworkError } from "./NetworkError";
 import { Balances } from "./types";
 
@@ -42,7 +42,7 @@ export class WalletManager {
       throw new NetworkError(NETWORK_ERROR.NOT_CONNECTED);
     }
 
-    const token = TOKENS_BY_ASSET_ID[assetId];
+    const token = CONFIG.TOKENS_BY_ASSET_ID[assetId];
 
     if (!token) {
       throw new NetworkError(NETWORK_ERROR.INVALID_TOKEN);
@@ -81,10 +81,11 @@ export class WalletManager {
     }, {});
   };
 
-  disconnect = () => {
+  disconnect = async () => {
     this.address = null;
     this.privateKey = null;
+    this.wallet = null;
 
-    void this.fuel.disconnect();
+    await this.fuel.disconnect();
   };
 }