diff --git a/src/app/components/DisplayTable.tsx b/src/app/components/DisplayTable.tsx index 693a1816..73afe9de 100644 --- a/src/app/components/DisplayTable.tsx +++ b/src/app/components/DisplayTable.tsx @@ -1,6 +1,11 @@ import React, { useMemo } from "react"; import { useAppSelector, useAppDispatch } from "../hooks"; -import { displayTime, displayOrderSide, calculateTotalFees } from "../utils"; +import { + displayTime, + displayOrderSide, + calculateTotalFees, + calculateAvgFilled, +} from "../utils"; import { cancelOrder, selectOpenOrders, @@ -142,7 +147,9 @@ const OpenOrdersRows = ({ data }: TableProps) => { {order.amount} {order.specifiedToken.symbol} - PlaceHolder {order.specifiedToken.symbol} + + {order.price} {order.specifiedToken.symbol} + {order.amountFilled} {order.specifiedToken.symbol} @@ -175,10 +182,13 @@ const OrderHistoryRows = ({ data }: TableProps) => { {order.amount} {order.specifiedToken.symbol} + + {calculateAvgFilled(order.token1Filled, order.token2Filled)}{" "} + {order.specifiedToken.symbol} + {order.price} {order.specifiedToken.symbol} - PlaceHolder {order.specifiedToken.symbol} {calculateTotalFees(order)} {order.unclaimedToken.symbol} @@ -203,10 +213,13 @@ const TradeHistoryTable = ({ data }: TableProps) => { {displayOrderSide(order.side).text} - PlaceHolder {order.specifiedToken.symbol} {order.price} {order.specifiedToken.symbol} + + {calculateAvgFilled(order.token1Filled, order.token2Filled)}{" "} + {order.specifiedToken.symbol} + {order.amountFilled} {order.specifiedToken.symbol} diff --git a/src/app/utils.ts b/src/app/utils.ts index 5b9b273a..4b462ecb 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -313,6 +313,16 @@ export function calculateTotalFees(order: any): number { : totalFees; } +//Calculate the Avg Filled from recieved token amounts +export function calculateAvgFilled(tokenOne: number, tokenTwo: number): number { + if (tokenOne == 0 || tokenTwo == 0) return 0; + const avgFilled = tokenTwo / tokenOne; + const decimalPart = (avgFilled % 1).toString().split(".")[1]; + return decimalPart && decimalPart.length > 8 + ? roundTo(avgFilled, 8, RoundType.NEAREST) + : avgFilled; +} + //Chart Helper Functions export const formatPercentageChange = (percChange: number | null): string => { if (percChange !== null) {