[HotFix] Fix pair in order history and fix accordion (#242)

Author: Anton-rock

package.json

@@ -25,7 +25,7 @@
     "@fuels/react": "^0.36.1",
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@pythnetwork/pyth-evm-js": "^1.33.0",
-    "@szhsin/react-accordion": "^1.2.3",
+    "@szhsin/react-accordion": "^1.3.0",
     "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-table": "^8.13.2",
     "@testing-library/jest-dom": "^5.17.0",

pnpm-lock.yaml

@@ -18,13 +18,17 @@ const AccordionItem: React.FC<Props> = ({ header, ...rest }) => (
     }}
     className="item"
     contentProps={{ className: "itemContent" }}
+    header={header}
     panelProps={{ className: "itemPanel" }}
   />
 );
 
 export default AccordionItem;
 
-const AccordionItemRoot = styled(RawAccordionItem)<{ hideBottomBorder?: boolean; header?: React.JSX.Element }>`
+const AccordionItemRoot = styled(RawAccordionItem)<{
+  hideBottomBorder?: boolean;
+  header?: AccordionItemProps["header"];
+}>`
   ${({ hideBottomBorder, theme }) =>
     hideBottomBorder ? "" : `border-bottom: 1px solid ${theme.colors.borderSecondary}`};
   padding: 12px 0;

src/components/AccordionItem.tsx

@@ -4,13 +4,14 @@ import { Order } from "@compolabs/spark-orderbook-ts-sdk";
 
 import { DEFAULT_DECIMALS } from "@constants";
 import BN from "@utils/BN";
+import { CONFIG } from "@utils/getConfig.ts";
 
 import { FuelNetwork } from "@blockchain";
 
 import { Token } from "./Token";
 
 export type SpotMarketOrderParams = {
-  quoteAssetId: string;
+  quoteAssetId?: string;
 } & Order;
 
 export class SpotMarketOrder {
@@ -37,13 +38,16 @@ export class SpotMarketOrder {
 
   constructor(order: SpotMarketOrderParams) {
     const bcNetwork = FuelNetwork.getInstance();
+    const activeMarket = CONFIG.MARKETS.find((el) => el.contractId === order.market);
+
+    const baseToken = order.quoteAssetId ? order.asset : (activeMarket?.baseAssetId ?? "");
+    const quoteToken = order.quoteAssetId ?? activeMarket?.quoteAssetId ?? "";
 
     this.id = order.id;
     this.user = order.user;
     this.status = order.status;
-
-    this.baseToken = bcNetwork.getTokenByAssetId(order.asset);
-    this.quoteToken = bcNetwork.getTokenByAssetId(order.quoteAssetId);
+    this.baseToken = bcNetwork.getTokenByAssetId(baseToken);
+    this.quoteToken = bcNetwork.getTokenByAssetId(quoteToken);
 
     this.orderType = order.orderType;
 

src/entity/SpotMarketOrder.ts

@@ -132,8 +132,7 @@ const SpotTableImpl: React.FC = observer(() => {
   const [page, setPage] = useState(startPage);
   const historyOrders = (vm.userOrdersStats?.closed ?? 0) + (vm.userOrdersStats?.canceled ?? 0);
   const openOrders = vm.userOrdersStats?.active ?? 0;
-  const closeOrders = (vm.userOrdersStats?.closed ?? 0) + (vm.userOrdersStats?.canceled ?? 0);
-  const PAGINATION_LENGTH = [openOrders, closeOrders];
+  const PAGINATION_LENGTH = [openOrders, historyOrders];
   const TABS = [
     { title: "ORDERS", disabled: false, rowCount: openOrders },
     { title: "HISTORY", disabled: false, rowCount: historyOrders },

src/screens/SpotScreen/BottomTables/SpotTable/SpotTableImpl.tsx

@@ -12,7 +12,7 @@ import { ACTION_MESSAGE_TYPE, getActionMessage } from "@utils/getActionMessage";
 import { handleWalletErrors } from "@utils/handleWalletErrors";
 
 import { FuelNetwork } from "@blockchain";
-import { SpotMarket, SpotMarketOrder } from "@entity";
+import { SpotMarketOrder } from "@entity";
 
 import { Subscription } from "@src/typings/utils";
 
@@ -85,7 +85,7 @@ class SpotTableVM {
           return;
         }
 
-        this.subscribeToOrders(market);
+        this.subscribeToOrders();
       },
       { fireImmediately: true },
     );
@@ -156,7 +156,7 @@ class SpotTableVM {
     this.withdrawingAssetId = null;
   };
 
-  private subscribeToOpenOrders = (market: SpotMarket) => {
+  private subscribeToOpenOrders = () => {
     const { accountStore } = this.rootStore;
     const bcNetwork = FuelNetwork.getInstance();
 
@@ -174,7 +174,7 @@ class SpotTableVM {
         next: ({ data }) => {
           if (!data) return;
 
-          const sortedOrder = formatSpotMarketOrders(data.Order, market.quoteToken.assetId).sort(sortDesc);
+          const sortedOrder = formatSpotMarketOrders(data.Order).sort(sortDesc);
           this.setUserOrders(sortedOrder);
 
           if (!this.isOpenOrdersLoaded) {
@@ -184,7 +184,7 @@ class SpotTableVM {
       });
   };
 
-  private subscribeToHistoryOrders = (market: SpotMarket) => {
+  private subscribeToHistoryOrders = () => {
     const { accountStore } = this.rootStore;
     const bcNetwork = FuelNetwork.getInstance();
 
@@ -201,7 +201,7 @@ class SpotTableVM {
         next: ({ data }) => {
           if (!data) return;
 
-          const sortedOrdersHistory = formatSpotMarketOrders(data.Order, market.quoteToken.assetId).sort(sortDesc);
+          const sortedOrdersHistory = formatSpotMarketOrders(data.Order).sort(sortDesc);
           this.setUserOrdersHistory(sortedOrdersHistory);
 
           if (!this.isHistoryOrdersLoaded) {
@@ -211,9 +211,9 @@ class SpotTableVM {
       });
   };
 
-  private subscribeToOrders = (market: SpotMarket) => {
-    this.subscribeToOpenOrders(market);
-    this.subscribeToHistoryOrders(market);
+  private subscribeToOrders = () => {
+    this.subscribeToOpenOrders();
+    this.subscribeToHistoryOrders();
     this.subscribeUserInfo();
   };
 

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

@@ -51,7 +51,7 @@ const MarketStatisticsBar: React.FC<IProps> = observer(({ isChartOpen, onSwitchC
 
     return (
       <>
-        <Icon alt={tradeStore.market?.baseToken.symbol} src={tradeStore.market?.baseToken.logo} />
+        <MainIcon alt={tradeStore.market?.baseToken.symbol} src={tradeStore.market?.baseToken.logo} />
         <Icon
           alt={tradeStore.market?.quoteToken.symbol}
           src={tradeStore.market?.quoteToken.logo}
@@ -123,8 +123,8 @@ const Icon = styled.img`
 `;
 
 const StyledArrow = styled.img`
-  width: 24;
-  height: 24;
+  width: 24px;
+  height: 24px;
 `;
 
 const MarketSelect = styled.div<{
@@ -197,3 +197,7 @@ const SwitchContainer = styled(SmartFlex)<{ isVisible?: boolean }>`
     transition: opacity 250ms;
   }
 `;
+
+const MainIcon = styled(Icon)`
+  z-index: 9;
+`;

src/screens/SpotScreen/MarketStatisticsBar.tsx

@@ -15,7 +15,7 @@ export const MarketTitle = ({ market, iconSize = 16 }: IProps) => {
   return (
     <MarketTitleContainer size={iconSize * 2}>
       <SmartFlex width="fit-content">
-        <Icon alt="logo" size={iconSize} src={market.baseToken?.logo} />
+        <MainIcon alt="logo" size={iconSize} src={market.baseToken?.logo} />
         <StyleIcon alt="logo" size={iconSize} src={market.quoteToken?.logo} />
       </SmartFlex>
       <StyledText color="primary" type={TEXT_TYPES.H}>
@@ -50,3 +50,7 @@ const StyledText = styled(Text)`
   overflow: hidden;
   white-space: nowrap;
 `;
+
+const MainIcon = styled(Icon)`
+  z-index: 9;
+`;

src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx

@@ -2,7 +2,7 @@ import { Order } from "@compolabs/spark-orderbook-ts-sdk";
 
 import { SpotMarketOrder } from "@entity";
 
-export const formatSpotMarketOrders = (orders: Order[], quoteAssetId: string) => {
+export const formatSpotMarketOrders = (orders: Order[], quoteAssetId?: string) => {
   return orders.map(
     (order) =>
       new SpotMarketOrder({