Merge pull request #56 from hyle-team/feature/fix-my-orders-prices-dev

feat: fix prices in My Orders page

src/interfaces/responses/orders/GetUserOrdersRes.ts

@@ -1,7 +1,28 @@
 import CurrencyRow from '@/interfaces/common/CurrencyRow';
 import OfferType from '@/interfaces/common/OfferType';
 
-interface UserOrderData {
+export type GetUserOrdersResCurrency = {
+	id: number;
+	name: string;
+	code: string;
+	type: string;
+	asset_id: string;
+	auto_parsed: boolean;
+	asset_info?: {
+		asset_id: string;
+		logo: string;
+		price_url: string;
+		ticker: string;
+		full_name: string;
+		total_max_supply: string;
+		current_supply: string;
+		decimal_point: number;
+		meta_info: string;
+	};
+	whitelisted: boolean;
+};
+
+export interface UserOrderData {
 	id: string;
 	type: OfferType;
 	timestamp: string;
@@ -15,6 +36,21 @@ interface UserOrderData {
 	left: number;
 	first_currency: CurrencyRow;
 	second_currency: CurrencyRow;
+
+	pair: {
+		id: number;
+		first_currency_id: number;
+		second_currency_id: number;
+		rate?: number;
+		coefficient?: number;
+		high?: number;
+		low?: number;
+		volume: number;
+		featured: boolean;
+
+		first_currency: GetUserOrdersResCurrency;
+		second_currency: GetUserOrdersResCurrency;
+	};
 }
 
 interface GetUserOrdersRes {
@@ -24,5 +60,3 @@ interface GetUserOrdersRes {
 }
 
 export default GetUserOrdersRes;
-
-export type { UserOrderData };

src/pages/dex/orders/OrdersTable/OrdersTable.tsx

@@ -8,7 +8,8 @@ import OrdersTableProps from '@/interfaces/props/pages/dex/orders/OrdersTable/Or
 import { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes';
 import Decimal from 'decimal.js';
 import Tooltip from '@/components/UI/Tooltip/Tooltip';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import { Store } from '@/store/store-reducer';
 import styles from './OrdersTable.module.scss';
 
 function OrdersTable(props: OrdersTableProps) {
@@ -19,23 +20,50 @@ function OrdersTable(props: OrdersTableProps) {
 	const isActive = category === 'active-orders';
 
 	function Row(props: { orderData: UserOrderData }) {
+		const { state } = useContext(Store);
 		const { orderData } = props;
 
 		const firstCurrencyName = orderData?.first_currency?.name || '';
 		const secondCurrencyName = orderData?.second_currency?.name || '';
 
+		const secondCurrencyId = orderData.second_currency.asset_id ?? undefined;
+
 		const timestampDate = new Date(parseInt(orderData.timestamp, 10));
 
-		const amount = (
-			isActive
-				? new Decimal(orderData.amount)
-				: new Decimal(orderData.amount).minus(orderData.left)
-		).toString();
-		const total = (
-			isActive
-				? new Decimal(orderData.total)
-				: new Decimal(orderData.amount).minus(orderData.left).mul(orderData.price)
-		).toString();
+		const secondAssetUsdPriceNumber = secondCurrencyId
+			? state.assetsRates.get(secondCurrencyId)
+			: undefined;
+		const secondAssetUsdPrice = secondAssetUsdPriceNumber
+			? new Decimal(secondAssetUsdPriceNumber)
+			: undefined;
+
+		const pairRateNumber = orderData.pair.rate;
+		const pairRate = pairRateNumber !== undefined ? new Decimal(pairRateNumber) : undefined;
+
+		const firstCurrencyUsdPrice =
+			pairRate && secondAssetUsdPrice ? pairRate.mul(secondAssetUsdPrice) : undefined;
+
+		const actualAmount = isActive
+			? new Decimal(orderData.amount)
+			: new Decimal(orderData.amount).minus(orderData.left);
+
+		const actualTotal = isActive
+			? new Decimal(orderData.total)
+			: new Decimal(orderData.amount).minus(orderData.left).mul(orderData.price);
+
+		const amountUSD = firstCurrencyUsdPrice
+			? firstCurrencyUsdPrice.mul(actualAmount)
+			: undefined;
+		const priceUSD = secondAssetUsdPrice ? secondAssetUsdPrice.mul(orderData.price) : undefined;
+		const totalUSD = secondAssetUsdPrice ? secondAssetUsdPrice.mul(actualTotal) : undefined;
+
+		const amountPresentation: string = notationToString(actualAmount.toFixed());
+		const pricePresentation: string = notationToString(orderData.price);
+		const totalPresentation: string = notationToString(actualTotal.toFixed());
+
+		const amountUSDPresentation: string = amountUSD ? amountUSD.toFixed(2) : 'N/A';
+		const priceUSDPresentation: string = priceUSD ? priceUSD.toFixed(2) : 'N/A';
+		const totalUSDPresentation: string = totalUSD ? totalUSD.toFixed(2) : 'N/A';
 
 		function CurrencyTableData({
 			header,
@@ -102,21 +130,21 @@ function OrdersTable(props: OrdersTableProps) {
 				</td>
 
 				<CurrencyTableData
-					price={notationToString(5.23)}
+					price={priceUSDPresentation}
 					header="Price"
-					value={notationToString(orderData.price)}
+					value={pricePresentation}
 					currency={secondCurrencyName}
 				/>
 				<CurrencyTableData
-					price={notationToString(5.23)}
+					price={amountUSDPresentation}
 					header="Amount"
-					value={notationToString(amount)}
+					value={amountPresentation}
 					currency={firstCurrencyName}
 				/>
 				<CurrencyTableData
-					price={notationToString(5.23)}
+					price={totalUSDPresentation}
 					header="Total"
-					value={notationToString(total)}
+					value={totalPresentation}
 					currency={secondCurrencyName}
 				/>
 				{isActive && (