fix: orders

src/components/dex/OrdersPool/index.tsx

@@ -1,5 +1,11 @@
 import React, { useMemo, useRef, useState } from 'react';
-import { classes, cutAddress, formatDollarValue, notationToString } from '@/utils/utils';
+import {
+	classes,
+	createOrderSorter,
+	cutAddress,
+	formatDollarValue,
+	notationToString,
+} from '@/utils/utils';
 import { nanoid } from 'nanoid';
 import Decimal from 'decimal.js';
 import Tooltip from '@/components/UI/Tooltip/Tooltip';
@@ -80,6 +86,11 @@ const OrdersPool = (props: OrdersPoolProps) => {
 		[firstCurrencyName, secondCurrencyName],
 	);
 
+	const sortedTrades = createOrderSorter<PageOrderData>({
+		getPrice: (e) => e.price,
+		getSide: (e) => e.type,
+	});
+
 	const renderTable = () => {
 		switch (currentOrder.type) {
 			case 'orders':
@@ -93,10 +104,7 @@ const OrdersPool = (props: OrdersPoolProps) => {
 									tbodyClassName={styles.table__body}
 									theadClassName={styles.table__header}
 									columns={ordersPool}
-									data={filteredOrdersHistory.sort((a, b) => {
-										if (a.type === b.type) return 0;
-										return a.type === 'buy' ? -1 : 1;
-									})}
+									data={filteredOrdersHistory.sort(sortedTrades)}
 									getRowKey={(r) => r.id}
 									getRowProps={(row) => ({
 										className: styles[row.type],
@@ -201,32 +209,62 @@ const OrdersPool = (props: OrdersPoolProps) => {
 				<div className={styles.ordersPool__content}>
 					{renderTable()}
 
-					{currentOrder.type === 'orders' && totalLeft > 0 && (
-						<div className={styles.ordersPool__content_stats}>
-							<div
-								style={
-									{
-										'--width': `${(maxBuyLeftValue / totalLeft) * 100}%`,
-									} as React.CSSProperties
-								}
-								className={classes(styles.stat_item, styles.buy)}
-							>
-								<div className={styles.stat_item__badge}>B</div>{' '}
-								{notationToString((maxBuyLeftValue / totalLeft) * 100, 0)}%
-							</div>
-							<div
-								style={
-									{
-										'--width': `${(maxSellLeftValue / totalLeft) * 100}%`,
-									} as React.CSSProperties
-								}
-								className={classes(styles.stat_item, styles.sell)}
-							>
-								{notationToString((maxSellLeftValue / totalLeft) * 100, 0)}%{' '}
-								<div className={styles.stat_item__badge}>S</div>
-							</div>
-						</div>
-					)}
+					{currentOrder.type === 'orders' &&
+						totalLeft > 0 &&
+						(() => {
+							const buy = new Decimal(maxBuyLeftValue || 0);
+							const sell = new Decimal(maxSellLeftValue || 0);
+							const total = new Decimal(totalLeft);
+
+							let buyPct = total.gt(0) ? buy.mul(100).div(total) : new Decimal(0);
+							let sellPct = total.gt(0) ? sell.mul(100).div(total) : new Decimal(0);
+
+							if (buy.isZero() && sell.gt(0)) {
+								buyPct = new Decimal(0);
+								sellPct = new Decimal(100);
+							} else if (sell.isZero() && buy.gt(0)) {
+								sellPct = new Decimal(0);
+								buyPct = new Decimal(100);
+							}
+
+							const clamp = (d: Decimal) => Decimal.max(0, Decimal.min(100, d));
+
+							const buyPctClamped = clamp(buyPct);
+							const sellPctClamped = clamp(sellPct);
+
+							const buyLabel = buyPctClamped
+								.toDecimalPlaces(0, Decimal.ROUND_DOWN)
+								.toString();
+							const sellLabel = sellPctClamped
+								.toDecimalPlaces(0, Decimal.ROUND_DOWN)
+								.toString();
+
+							return (
+								<div className={styles.ordersPool__content_stats}>
+									<div
+										style={
+											{
+												'--width': `${buyPctClamped.toNumber()}%`,
+											} as React.CSSProperties
+										}
+										className={classes(styles.stat_item, styles.buy)}
+									>
+										<div className={styles.stat_item__badge}>B</div> {buyLabel}%
+									</div>
+									<div
+										style={
+											{
+												'--width': `${sellPctClamped.toNumber()}%`,
+											} as React.CSSProperties
+										}
+										className={classes(styles.stat_item, styles.sell)}
+									>
+										{sellLabel}%{' '}
+										<div className={styles.stat_item__badge}>S</div>
+									</div>
+								</div>
+							);
+						})()}
 				</div>
 			</div>
 

src/components/dex/OrdersPool/styles.module.scss

@@ -1,6 +1,6 @@
 .ordersPool {
 	position: relative;
-	max-width: 415px;
+	max-width: 440px;
 	width: 100%;
 	height: 100%;
 	padding: 5px;
@@ -229,4 +229,4 @@
 		font-size: 11px;
 		font-weight: 400;
 	}
-}
+}

src/pages/dex/trading/[id].tsx

@@ -163,7 +163,7 @@ function Trading() {
 						ordersBuySell={ordersBuySell}
 						ordersLoading={ordersLoading}
 						filteredOrdersHistory={filteredOrdersHistory}
-						trades={trades.slice(0, 100)}
+						trades={trades}
 						tradesLoading={tradesLoading}
 						setOrdersBuySell={setOrdersBuySell}
 						takeOrderClick={onHandleTakeOrder}

src/utils/utils.ts

@@ -174,6 +174,27 @@ export const getAssetIcon = (assetId: string): string => {
 	return '/tokens/token.png';
 };
 
+type Getters<T> = {
+	getSide: (_item: T) => 'buy' | 'sell';
+	getPrice: (_item: T) => string | number | Decimal;
+};
+
+export function createOrderSorter<T>({ getSide, getPrice }: Getters<T>) {
+	return (a: T, b: T) => {
+		const aSide = getSide(a);
+		const bSide = getSide(b);
+		if (aSide !== bSide) return aSide === 'buy' ? -1 : 1;
+
+		const ap = new Decimal(getPrice(a));
+		const bp = new Decimal(getPrice(b));
+
+		if (aSide === 'buy') {
+			return bp.comparedTo(ap);
+		}
+		return ap.comparedTo(bp);
+	};
+}
+
 export const ZANO_ASSET_ID = 'd6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a';
 
 const knownCurrencies = ['zano', 'xmr', 'btc', 'firo', 'usd', 'eur', 'cad', 'jpy'];