From e4990808c002e363f26292cd1d2f12947f072426 Mon Sep 17 00:00:00 2001 From: abdulhaseeb13mar Date: Mon, 25 Sep 2023 18:25:58 +0500 Subject: [PATCH 1/9] feat: account history component style and code revamp --- src/app/components/AccountHistory.tsx | 106 +++++---- src/app/components/DisplayTable.tsx | 323 ++++++++++++++------------ 2 files changed, 226 insertions(+), 203 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index 3e3a8367..071cf3bd 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -1,34 +1,60 @@ -import React, { useEffect, useCallback } from "react"; -import { useAppDispatch, useAppSelector } from "../hooks"; +import React, { useEffect } from "react"; +import { useAppDispatch, useAppSelector } from "hooks"; import { - fetchAccountHistory, Tables, + fetchAccountHistory, + selectOpenOrders, setSelectedTable, - selectTables, -} from "../redux/accountHistorySlice"; +} from "redux/accountHistorySlice"; import { DisplayTable } from "./DisplayTable"; -interface ButtonProps { - label: string; - value: Tables; - selectedValue: Tables; - onClick: (value: Tables) => void; -} +function OrdersTabs() { + const dispatch = useAppDispatch(); + const { selectedTable, tables } = useAppSelector( + (state) => state.accountHistory + ); + const openOrders = useAppSelector(selectOpenOrders); -const Button: React.FC = ({ - label, - value, - selectedValue, - onClick, -}) => ( - -); + function tabClass(isActive: boolean) { + return ( + "flex-1 tab no-underline h-full text-base font-bold py-3 tab-border-1" + + (isActive ? " tab-active tab-bordered" : "") + ); + } + + return ( +
+
+ {tables.map((tableName) => ( +
dispatch(setSelectedTable(tableName))} + > + {tableName}{" "} + {tableName === Tables.OPEN_ORDERS && openOrders.length && ( + + {openOrders.length} + + )} +
+ ))} + {/*
dispatch(actions.setActiveTab(OrderTab.MARKET))} + > + Market +
+
dispatch(actions.setActiveTab(OrderTab.LIMIT))} + > + Limit +
*/} +
+
+ ); +} export function AccountHistory() { const dispatch = useAppDispatch(); @@ -36,37 +62,17 @@ export function AccountHistory() { (state) => state.radix?.walletData.accounts[0]?.address ); const pairAddress = useAppSelector((state) => state.pairSelector.address); - const selectedTable = useAppSelector( - (state) => state.accountHistory.selectedTable - ); - const tables = useAppSelector(selectTables); useEffect(() => { dispatch(fetchAccountHistory()); }, [dispatch, account, pairAddress]); - const handleButtonClick = useCallback( - (table: Tables) => { - dispatch(setSelectedTable(table)); - }, - [dispatch] - ); - return (
-
- {tables.map((table) => ( - */} + {/*
*/} +
+
-
); } diff --git a/src/app/components/DisplayTable.tsx b/src/app/components/DisplayTable.tsx index c7bbe0bf..3e7e92bf 100644 --- a/src/app/components/DisplayTable.tsx +++ b/src/app/components/DisplayTable.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import { useAppSelector, useAppDispatch } from "../hooks"; import { displayTime, displayOrderSide, calculateTotalFees } from "../utils"; import { @@ -12,6 +12,42 @@ interface TableProps { data: AccountHistoryState["orderHistory"]; } +const headers = { + [Tables.OPEN_ORDERS]: [ + "Pair", + "Order Type", + "Direction", + "Time Ordered", + "Amount", + "Order Price", + "Filled Qty", + "Completed %", + "Action", + ], + [Tables.ORDER_HISTORY]: [ + "Pair", + "Order Type", + "Direction", + "Status", + "Filled Qty", + "Order Qty", + "Avg Filled Price", + "Order Price", + "Order Fee", + "Time Ordered", + "Action", + ], + [Tables.TRADE_HISTORY]: [ + "Pair", + "Direction", + "Order Price", + "Avg Filled Price", + "Filled Qty", + "Order Fee", + "Time Completed", + ], +}; + function ActionButton({ order, }: { @@ -45,166 +81,145 @@ export function DisplayTable() { const orderHistory = useAppSelector(selectOrderHistory); const tradeHistory = useAppSelector(selectTradeHistory); - switch (selectedTable) { - case Tables.OPEN_ORDERS: - return ; - case Tables.ORDER_HISTORY: - return ; - case Tables.TRADE_HISTORY: - return ; - default: - return null; - } -} + const tableToShow = useMemo(() => { + switch (selectedTable) { + case Tables.OPEN_ORDERS: + return { + headers: headers[Tables.OPEN_ORDERS], + rows: , + }; + + case Tables.ORDER_HISTORY: + return { + headers: headers[Tables.ORDER_HISTORY], + rows: , + }; + + case Tables.TRADE_HISTORY: + return { + headers: headers[Tables.TRADE_HISTORY], + rows: , + }; + + default: + return { + headers: [], + rows: <>, + }; + } + }, [openOrders, orderHistory, selectedTable, tradeHistory]); -//TABLE FUNCTIONS -function OpenOrdersTable({ data }: TableProps) { return ( - - - - - - - - - - - - - - - - {data.length === 0 ? ( +
+
PairOrder TypeDirectionTime OrderedAmountOrder PriceFilled QtyCompleted %Action
+ - + {tableToShow.headers.map((header, i) => ( + + ))} - ) : ( - data.map((order) => ( - - - - - - - - - - - - )) - )} - -
No Active Orders + {header} +
{order.pairName}{order.orderType} - {displayOrderSide(order.side).text} - {displayTime(order.timeSubmitted, "full")} - {order.amount} {order.specifiedToken.symbol} - PlaceHolder {order.specifiedToken.symbol} - {order.amountFilled} {order.specifiedToken.symbol} - {order.completedPerc}% - -
+ + {tableToShow.rows} + + ); } -function OrderHistoryTable({ data }: TableProps) { - return ( - - - - - - - - - - - - - - - - - - {data.length === 0 ? ( - - - - ) : ( - data.map((order) => ( - - - - - - - - - - - - - - )) - )} - -
PairOrder TypeDirectionStatusFilled QtyOrder QtyAvg Filled PriceOrder PriceOrder FeeTime OrderedAction
No Order History to display
{order.pairName}{order.orderType} - {displayOrderSide(order.side).text} - {order.status} - {order.amountFilled} {order.specifiedToken.symbol} - - {order.amount} {order.specifiedToken.symbol} - - {order.price} {order.specifiedToken.symbol} - PlaceHolder {order.specifiedToken.symbol} - {calculateTotalFees(order)} {order.unclaimedToken.symbol} - {displayTime(order.timeSubmitted, "full")} - -
+const OpenOrdersRows = ({ data }: TableProps) => { + return data.length ? ( + data.map((order) => ( + + {order.pairName} + {order.orderType} + + {displayOrderSide(order.side).text} + + {displayTime(order.timeSubmitted, "full")} + + {order.amount} {order.specifiedToken.symbol} + + PlaceHolder {order.specifiedToken.symbol} + + {order.amountFilled} {order.specifiedToken.symbol} + + {order.completedPerc}% + + + + + )) + ) : ( + + No Active Orders + ); -} +}; -function TradeHistoryTable({ data }: TableProps) { - return ( - - - - - - - - - - - - - - {data.length === 0 ? ( - - - - ) : ( - data.map((order) => ( - - - - - - - - - - )) - )} - -
PairDirectionOrder PriceAvg Filled PriceFilled QtyOrder FeeTime Completed
No Trade History to display
{order.pairName} - {displayOrderSide(order.side).text} - PlaceHolder {order.specifiedToken.symbol} - {order.price} {order.specifiedToken.symbol} - - {order.amountFilled} {order.specifiedToken.symbol} - - {calculateTotalFees(order)} {order.unclaimedToken.symbol} - {displayTime(order.timeCompleted, "full")}
+const OrderHistoryRows = ({ data }: TableProps) => { + return data.length ? ( + data.map((order) => ( + + {order.pairName} + {order.orderType} + + {displayOrderSide(order.side).text} + + {order.status} + + {order.amountFilled} {order.specifiedToken.symbol} + + + {order.amount} {order.specifiedToken.symbol} + + + {order.price} {order.specifiedToken.symbol} + + PlaceHolder {order.specifiedToken.symbol} + + {calculateTotalFees(order)} {order.unclaimedToken.symbol} + + {displayTime(order.timeSubmitted, "full")} + + + + + )) + ) : ( + + No Order History + ); -} +}; + +const TradeHistoryTable = ({ data }: TableProps) => { + return data.length ? ( + data.map((order) => ( + + {order.pairName} + + {displayOrderSide(order.side).text} + + PlaceHolder {order.specifiedToken.symbol} + + {order.price} {order.specifiedToken.symbol} + + + {order.amountFilled} {order.specifiedToken.symbol} + + + {calculateTotalFees(order)} {order.unclaimedToken.symbol} + + {displayTime(order.timeCompleted, "full")} + + )) + ) : ( + + No Trade History + + ); +}; From 67a3e1812a451383ba0faf2813b6239ba21e7282 Mon Sep 17 00:00:00 2001 From: abdulhaseeb13mar Date: Mon, 25 Sep 2023 18:42:34 +0500 Subject: [PATCH 2/9] fix: hide badge when no open order --- src/app/components/AccountHistory.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index 071cf3bd..8524ab96 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -32,11 +32,11 @@ function OrdersTabs() { onClick={() => dispatch(setSelectedTable(tableName))} > {tableName}{" "} - {tableName === Tables.OPEN_ORDERS && openOrders.length && ( + {tableName === Tables.OPEN_ORDERS && openOrders.length ? ( {openOrders.length} - )} + ) : null} ))} {/*
Date: Tue, 26 Sep 2023 18:26:20 +0500 Subject: [PATCH 3/9] fix: open order counter style --- src/app/components/AccountHistory.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index 8524ab96..cb8ec3c5 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -17,14 +17,14 @@ function OrdersTabs() { function tabClass(isActive: boolean) { return ( - "flex-1 tab no-underline h-full text-base font-bold py-3 tab-border-1" + + "tab w-max no-underline h-full text-base font-bold py-3 tab-border-1" + (isActive ? " tab-active tab-bordered" : "") ); } return (
-
+
{tables.map((tableName) => (
Date: Mon, 2 Oct 2023 15:47:32 +0400 Subject: [PATCH 4/9] fixes table colors and sizes --- src/app/components/AccountHistory.tsx | 34 +++------------------------ src/app/components/DisplayTable.tsx | 15 +++++------- src/app/utils.ts | 5 ++-- 3 files changed, 11 insertions(+), 43 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index cb8ec3c5..f7c59509 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -17,14 +17,14 @@ function OrdersTabs() { function tabClass(isActive: boolean) { return ( - "tab w-max no-underline h-full text-base font-bold py-3 tab-border-1" + + "tab w-max no-underline h-full py-3 tab-border-1 uppercase" + (isActive ? " tab-active tab-bordered" : "") ); } return (
-
+
{tables.map((tableName) => (
{tableName}{" "} {tableName === Tables.OPEN_ORDERS && openOrders.length ? ( - + {openOrders.length} ) : null}
))} - {/*
dispatch(actions.setActiveTab(OrderTab.MARKET))} - > - Market -
-
dispatch(actions.setActiveTab(OrderTab.LIMIT))} - > - Limit -
*/}
); @@ -70,22 +58,6 @@ export function AccountHistory() { return (
- {/* //---COMMENTED OUT BUTTONS FOR SHOW ALL ORDERS AND EXPORT - //TO NOT CONFUSE THE TESTERS----------------------------- */} - {/* - - className="btn btn-ghost normal-case text-xl" - aria-label="Export as CSV" - > - Export as CSV - */} - {/*
*/}
diff --git a/src/app/components/DisplayTable.tsx b/src/app/components/DisplayTable.tsx index 3e7e92bf..6d9a48e1 100644 --- a/src/app/components/DisplayTable.tsx +++ b/src/app/components/DisplayTable.tsx @@ -64,7 +64,7 @@ function ActionButton({ cancelOrder({ orderId: order.id, pairAddress: order.pairAddress }) ); }} - className="text-lime-400 px-4 py-2 rounded hover:bg-lime-400 hover:text-black transition" + className="text-error py-2 hover:underline transition" > Cancel @@ -111,14 +111,11 @@ export function DisplayTable() { return (
- +
{tableToShow.headers.map((header, i) => ( - ))} @@ -133,7 +130,7 @@ export function DisplayTable() { const OpenOrdersRows = ({ data }: TableProps) => { return data.length ? ( data.map((order) => ( - + + +
+ {header}
{order.pairName} {order.orderType} @@ -163,7 +160,7 @@ const OpenOrdersRows = ({ data }: TableProps) => { const OrderHistoryRows = ({ data }: TableProps) => { return data.length ? ( data.map((order) => ( -
{order.pairName} {order.orderType} @@ -199,7 +196,7 @@ const OrderHistoryRows = ({ data }: TableProps) => { const TradeHistoryTable = ({ data }: TableProps) => { return data.length ? ( data.map((order) => ( -
{order.pairName} {displayOrderSide(order.side).text} diff --git a/src/app/utils.ts b/src/app/utils.ts index 7d23d44a..5e5af9c9 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -265,15 +265,14 @@ export function displayTime( } // Styling changes for Direction(side) in table -// I think this would be unaffected by dark/light mode export function displayOrderSide(side: string): { text: string; className: string; } { if (side === "BUY") { - return { text: "Buy", className: "text-green-500" }; + return { text: "Buy", className: "text-success" }; } else if (side === "SELL") { - return { text: "Sell", className: "text-red-500" }; + return { text: "Sell", className: "text-error" }; } else { return { text: "-", className: "" }; } From ea474235530ec74a3b62a16b3fcf335e92c23acd Mon Sep 17 00:00:00 2001 From: Evgeniia Vakarina <27793901+EvgeniiaVak@users.noreply.github.com> Date: Mon, 2 Oct 2023 19:18:17 +0400 Subject: [PATCH 5/9] fixes bg colors for table and all the page --- .gitignore | 2 + .prettierignore | 10 ++++- src/app/components/AccountHistory.tsx | 4 +- src/app/components/DisplayTable.tsx | 4 +- src/app/components/PairSelector.tsx | 7 +-- src/app/styles/globals.css | 6 +++ src/app/styles/table.css | 20 +++++++++ tailwind.config.js | 65 ++++++++++++++++++--------- 8 files changed, 86 insertions(+), 32 deletions(-) create mode 100644 src/app/styles/table.css diff --git a/.gitignore b/.gitignore index 9d706fac..ea546958 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ next-env.d.ts /test-results/ /playwright-report/ /playwright/.cache/ + +localhost:3000/ diff --git a/.prettierignore b/.prettierignore index 95ee8ea2..2f4d2f7a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -37,5 +37,11 @@ yarn-error.log* *.tsbuildinfo next-env.d.ts -logs/* -playwright-report/* +/logs/ +.swc/ +/test-results/ +/playwright-report/ +/playwright/.cache/ + +localhost:3000/ + diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index f7c59509..060367ea 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -23,7 +23,7 @@ function OrdersTabs() { } return ( -
+
{tables.map((tableName) => (
-
+
diff --git a/src/app/components/DisplayTable.tsx b/src/app/components/DisplayTable.tsx index 6d9a48e1..0ae0e1f5 100644 --- a/src/app/components/DisplayTable.tsx +++ b/src/app/components/DisplayTable.tsx @@ -12,6 +12,8 @@ interface TableProps { data: AccountHistoryState["orderHistory"]; } +import "../styles/table.css"; + const headers = { [Tables.OPEN_ORDERS]: [ "Pair", @@ -111,7 +113,7 @@ export function DisplayTable() { return (
- +
{tableToShow.headers.map((header, i) => ( diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx index 5d19ab1d..30100c4e 100644 --- a/src/app/components/PairSelector.tsx +++ b/src/app/components/PairSelector.tsx @@ -9,10 +9,7 @@ export function PairSelector() { }; return (
-