Merge pull request #184 from nguvictor/alphadex-package-update

Alphadex package update

package.json

@@ -16,7 +16,7 @@
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "alphadex-sdk-js": "^0.11.6",
+    "alphadex-sdk-js": "^0.12.0",
     "autoprefixer": "10.4.14",
     "eslint-config-next": "13.4.7",
     "lightweight-charts": "^4.0.1",

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) => {
         <td>
           {order.amount} {order.specifiedToken.symbol}
         </td>
-        <td>PlaceHolder {order.specifiedToken.symbol}</td>
+        <td>
+          {order.price} {order.specifiedToken.symbol}
+        </td>
         <td>
           {order.amountFilled} {order.specifiedToken.symbol}
         </td>
@@ -175,10 +182,13 @@ const OrderHistoryRows = ({ data }: TableProps) => {
         <td>
           {order.amount} {order.specifiedToken.symbol}
         </td>
+        <td>
+          {calculateAvgFilled(order.token1Filled, order.token2Filled)}{" "}
+          {order.specifiedToken.symbol}
+        </td>
         <td>
           {order.price} {order.specifiedToken.symbol}
         </td>
-        <td>PlaceHolder {order.specifiedToken.symbol}</td>
         <td>
           {calculateTotalFees(order)} {order.unclaimedToken.symbol}
         </td>
@@ -203,10 +213,13 @@ const TradeHistoryTable = ({ data }: TableProps) => {
         <td className={displayOrderSide(order.side).className}>
           {displayOrderSide(order.side).text}
         </td>
-        <td>PlaceHolder {order.specifiedToken.symbol}</td>
         <td>
           {order.price} {order.specifiedToken.symbol}
         </td>
+        <td>
+          {calculateAvgFilled(order.token1Filled, order.token2Filled)}{" "}
+          {order.specifiedToken.symbol}
+        </td>
         <td>
           {order.amountFilled} {order.specifiedToken.symbol}
         </td>

src/app/subscriptions.ts

@@ -48,7 +48,7 @@ export function initializeSubscriptions(store: AppStore) {
   setRdt(rdtInstance);
   // TODO: "black" on the light theme
   rdtInstance.buttonApi.setTheme("white");
-  adex.init();
+  adex.init("stokenet");
   subs.push(
     adex.clientState.stateChanged$.subscribe((newState) => {
       const serializedState: adex.StaticState = JSON.parse(

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) {