diff --git a/src/components/dex/InputPanelItem/index.tsx b/src/components/dex/InputPanelItem/index.tsx index 6f8eac7..8a13902 100644 --- a/src/components/dex/InputPanelItem/index.tsx +++ b/src/components/dex/InputPanelItem/index.tsx @@ -5,7 +5,7 @@ import RangeInput from '@/components/UI/RangeInput/RangeInput'; import ConnectButton from '@/components/UI/ConnectButton/ConnectButton'; import Button from '@/components/UI/Button/Button'; import { useRouter } from 'next/router'; -import { classes, formatDollarValue } from '@/utils/utils'; +import { classes, formatDollarValue, notationToString } from '@/utils/utils'; import InputPanelItemProps from '@/interfaces/props/pages/dex/trading/InputPanelItem/InputPanelItemProps'; import CreateOrderData from '@/interfaces/fetch-data/create-order/CreateOrderData'; import Decimal from 'decimal.js'; @@ -197,7 +197,7 @@ function InputPanelItem(props: InputPanelItemProps) {
undefined} currency={secondCurrencyName} label="Total" diff --git a/src/components/dex/OrdersPool/index.tsx b/src/components/dex/OrdersPool/index.tsx index 7f3632a..bd680ee 100644 --- a/src/components/dex/OrdersPool/index.tsx +++ b/src/components/dex/OrdersPool/index.tsx @@ -29,6 +29,7 @@ const tabsData: tabsType[] = [ const OrdersPool = (props: OrdersPoolProps) => { const { ordersBuySell, + OrdersHistory, setOrdersBuySell, currencyNames, ordersLoading, @@ -44,7 +45,7 @@ const OrdersPool = (props: OrdersPoolProps) => { const [infoTooltipPos, setInfoTooltipPos] = useState({ x: 0, y: 0 }); const [ordersInfoTooltip, setOrdersInfoTooltip] = useState(null); const [currentOrder, setCurrentOrder] = useState(tabsData[0]); - const { maxBuyLeftValue, maxSellLeftValue } = filteredOrdersHistory.reduce( + const { maxBuyLeftValue, maxSellLeftValue } = OrdersHistory.reduce( (acc, order) => { const left = parseFloat(String(order.left)) || 0; if (order.type === 'buy') acc.maxBuyLeftValue = Math.max(acc.maxBuyLeftValue, left); @@ -200,7 +201,7 @@ const OrdersPool = (props: OrdersPoolProps) => {
{renderTable()} - {currentOrder.type === 'orders' && ( + {currentOrder.type === 'orders' && totalLeft > 0 && (
{ : '#FF6767', }} > - {notationToString(ordersInfoTooltip?.price)} + {ordersInfoTooltip?.price}

~ {secondAssetUsdPrice && ordersInfoTooltip?.price !== undefined ? (() => { - const total = - secondAssetUsdPrice * ordersInfoTooltip.price; - const formatted = - ordersInfoTooltip.price < 0.9 - ? `$${total.toFixed(5)}` - : `$${total.toFixed(2)}`; - return formatted; + const total = new Decimal(secondAssetUsdPrice).mul( + ordersInfoTooltip.price, + ); + + if (total.abs().lt(0.01)) { + return `$${total + .toFixed(8) + .replace(/(\.\d*?[1-9])0+$/, '$1') + .replace(/\.0+$/, '')}`; + } + + return `$${total.toFixed(2).replace(/\.0+$/, '')}`; })() : 'undefined'} diff --git a/src/components/dex/OrdersPool/types.ts b/src/components/dex/OrdersPool/types.ts index 21406a3..3b42068 100644 --- a/src/components/dex/OrdersPool/types.ts +++ b/src/components/dex/OrdersPool/types.ts @@ -13,6 +13,7 @@ export interface OrdersPoolProps { secondCurrencyName: string; }; ordersLoading: boolean; + OrdersHistory: PageOrderData[]; filteredOrdersHistory: PageOrderData[]; trades: Trade[]; tradesLoading: boolean; diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx index cd02895..1b9d8f3 100644 --- a/src/pages/dex/trading/[id].tsx +++ b/src/pages/dex/trading/[id].tsx @@ -163,11 +163,12 @@ function Trading() { ordersBuySell={ordersBuySell} ordersLoading={ordersLoading} filteredOrdersHistory={filteredOrdersHistory} - trades={trades} + trades={trades.slice(0, 100)} tradesLoading={tradesLoading} setOrdersBuySell={setOrdersBuySell} takeOrderClick={onHandleTakeOrder} matrixAddresses={matrixAddresses} + OrdersHistory={ordersHistory} />
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 65a5d3f..38df361 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -90,10 +90,10 @@ export const notationToString = (notation: number | string, fixed?: number) => { const decimalValue = new Decimal(notation || '0'); if (fixed !== undefined) { - return decimalValue.toDecimalPlaces(fixed).toString(); + return decimalValue.toFixed(fixed).replace(/\.?0+$/, ''); } - return decimalValue.toString(); + return decimalValue.toFixed(); }; export const localeTimeLeft = (now: number | null, timestamp: number) => {