From 6c135a7c2937464252243f4b8c9b393e6d5f847e Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 17 Dec 2024 19:20:17 +0000 Subject: [PATCH 1/6] feat: show pagination also in the bottom --- apps/explorer/src/components/common/Tabs/Tabs.tsx | 6 +++--- .../src/explorer/components/OrdersTableWidget/index.tsx | 2 +- .../components/common/ExplorerTabs/ExplorerTabs.tsx | 8 ++------ 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/apps/explorer/src/components/common/Tabs/Tabs.tsx b/apps/explorer/src/components/common/Tabs/Tabs.tsx index 26de10ba31..9413ff2e3b 100644 --- a/apps/explorer/src/components/common/Tabs/Tabs.tsx +++ b/apps/explorer/src/components/common/Tabs/Tabs.tsx @@ -42,7 +42,7 @@ export interface Props { readonly tabTheme: TabTheme readonly selectedTab?: TabId readonly extra?: TabBarExtraContent - readonly extraPosition?: 'top' | 'bottom' + readonly extraPosition?: 'top' | 'bottom' | 'both' readonly updateSelectedTab?: (activeId: TabId) => void } @@ -129,10 +129,10 @@ const Tabs: React.FC = (props) => { tabTheme={tabTheme} /> ))} - {extraPosition === 'top' && } + {['top', 'both'].includes(extraPosition) && } - {extraPosition === 'bottom' && } + {['bottom', 'both'].includes(extraPosition) && } ) } diff --git a/apps/explorer/src/explorer/components/OrdersTableWidget/index.tsx b/apps/explorer/src/explorer/components/OrdersTableWidget/index.tsx index f74cf0359e..5f0266c933 100644 --- a/apps/explorer/src/explorer/components/OrdersTableWidget/index.tsx +++ b/apps/explorer/src/explorer/components/OrdersTableWidget/index.tsx @@ -91,7 +91,7 @@ const OrdersTableWidget: React.FC = ({ ownerAddress, networkId }) => { > {error && } - + ) } diff --git a/apps/explorer/src/explorer/components/common/ExplorerTabs/ExplorerTabs.tsx b/apps/explorer/src/explorer/components/common/ExplorerTabs/ExplorerTabs.tsx index cd5f1c712f..9e791b962b 100644 --- a/apps/explorer/src/explorer/components/common/ExplorerTabs/ExplorerTabs.tsx +++ b/apps/explorer/src/explorer/components/common/ExplorerTabs/ExplorerTabs.tsx @@ -5,11 +5,7 @@ import { Media } from '@cowprotocol/ui' import styled from 'styled-components/macro' import { DARK_COLOURS } from 'theme' -import Tabs, { - getTabTheme, - Props as TabsProps, - IndicatorTabSize, -} from '../../../../components/common/Tabs/Tabs' +import Tabs, { getTabTheme, Props as TabsProps, IndicatorTabSize } from '../../../../components/common/Tabs/Tabs' const StyledTabs = styled.div` display: flex; @@ -56,7 +52,7 @@ const tabCustomThemeConfig = getTabTheme({ indicatorTabSize: IndicatorTabSize.big, }) -type ExplorerTabsProps = Omit & { extraPosition?: 'top' | 'bottom' } +type ExplorerTabsProps = Omit & { extraPosition?: 'top' | 'bottom' | 'both' } const ExplorerTabs: React.FC = (props) => { return ( From fd5eb5ff0f9fbb75f51df0975a3c6054b7755130 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 17 Dec 2024 20:07:18 +0000 Subject: [PATCH 2/6] feat: make it more clear there's more pages --- .../orders/OrdersUserDetailsTable/index.tsx | 65 ++++++++++++++++--- .../OrdersTableWidget/OrdersTableWithData.tsx | 4 ++ 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx index 14d92dd28b..e98eb57d0d 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx @@ -26,6 +26,8 @@ import { ToggleFilter } from './ToggleFilter' import { SimpleTable, SimpleTableProps } from '../../common/SimpleTable' import { StatusLabel } from '../StatusLabel' import { UnsignedOrderWarning } from '../UnsignedOrderWarning' +import { TableState } from 'explorer/components/TokensTableWidget/useTable' +import { Command } from '@cowprotocol/types' const EXPIRED_CANCELED_STATES: OrderStatus[] = ['cancelled', 'cancelling', 'expired'] @@ -53,6 +55,8 @@ const Wrapper = styled.div` export type Props = SimpleTableProps & { orders: Order[] | undefined + tableState: TableState + handleNextPage: Command messageWhenEmpty?: string | React.ReactNode } @@ -87,6 +91,32 @@ const NoOrdersContainer = styled.div` padding: 2rem; ` +const HiddenOrdersLegend = styled.tr` + p { + text-align: center; + } + + &:hover, + td:hover { + background-color: ${({ theme }) => theme.paper}; + color: ${({ theme }) => theme.textSecondary1}; + } + + td { + padding: 0; + font-size: 1.2rem; + color: ${({ theme }) => theme.textSecondary1}; + + a { + text-decoration: underline; + } + + a:hover { + color: ${({ theme }) => theme.textSecondary2}; + } + } +` + const RowOrder: React.FC = ({ order, isPriceInverted, showCanceledAndExpired, showPreSigning }) => { const { creationDate, buyToken, buyAmount, sellToken, sellAmount, kind, partiallyFilled, uid, filledPercentage } = order @@ -159,7 +189,7 @@ const RowOrder: React.FC = ({ order, isPriceInverted, showCanceledAndE } const OrdersUserDetailsTable: React.FC = (props) => { - const { orders, messageWhenEmpty } = props + const { orders, messageWhenEmpty, tableState, handleNextPage } = props const [isPriceInverted, setIsPriceInverted] = useState(false) const [showCanceledAndExpired, setShowCanceledAndExpired] = useState(false) const [showPreSigning, setShowPreSigning] = useState(false) @@ -167,8 +197,11 @@ const OrdersUserDetailsTable: React.FC = (props) => { const canceledAndExpiredCount = orders?.filter(isExpiredOrCanceled).length || 0 const preSigningCount = orders?.filter((order) => order.status === 'signing').length || 0 const showFilter = canceledAndExpiredCount > 0 || preSigningCount > 0 - const areOrdersAllHidden = - orders?.length === (showPreSigning ? 0 : preSigningCount) + (showCanceledAndExpired ? 0 : canceledAndExpiredCount) + + const hiddenOrdersCount = + (showPreSigning ? 0 : preSigningCount) + (showCanceledAndExpired ? 0 : canceledAndExpiredCount) + + const areOrdersAllHidden = orders?.length === hiddenOrdersCount const invertLimitPrice = (): void => { setIsPriceInverted((previousValue) => !previousValue) @@ -231,7 +264,7 @@ const OrdersUserDetailsTable: React.FC = (props) => { } body={ <> - {!areOrdersAllHidden ? ( + {!areOrdersAllHidden && orders.map((item) => ( = (props) => { showCanceledAndExpired={showCanceledAndExpired} showPreSigning={showPreSigning} /> - )) - ) : ( - -

No orders found.

-

You can toggle the filters to show the {orders.length} hidden orders.

- + ))} + + {hiddenOrdersCount > 0 && ( + + +

+ Showing {orders.length - hiddenOrdersCount} out of {orders.length}  orders for the current page. +

+

+ {hiddenOrdersCount} orders are hidden, you can make them visible using the filters above + {tableState.hasNextPage && ( + + , or go to next page for more orders. + + )} +

+ + )} } diff --git a/apps/explorer/src/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx b/apps/explorer/src/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx index 69bfaad2c1..bec399a58a 100644 --- a/apps/explorer/src/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx +++ b/apps/explorer/src/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx @@ -12,6 +12,8 @@ export const OrdersTableWithData: React.FC = () => { const { data: orders, addressAccountParams: { ownerAddress, networkId }, + tableState, + handleNextPage, } = useContext(OrdersTableContext) const isFirstRender = useFirstRender() const [isFirstLoading, setIsFirstLoading] = useState(true) @@ -46,6 +48,8 @@ export const OrdersTableWithData: React.FC = () => { ) : ( Date: Tue, 17 Dec 2024 20:16:44 +0000 Subject: [PATCH 3/6] fix: improve messages --- .../src/components/orders/OrdersUserDetailsTable/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx index e98eb57d0d..6cb7d317f9 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx @@ -279,14 +279,16 @@ const OrdersUserDetailsTable: React.FC = (props) => {

- Showing {orders.length - hiddenOrdersCount} out of {orders.length}  orders for the current page. + Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current page.

{hiddenOrdersCount} orders are hidden, you can make them visible using the filters above - {tableState.hasNextPage && ( + {tableState.hasNextPage ? ( , or go to next page for more orders. + ) : ( + '.' )}

From e4d9078f344de3f34659ff8a7490fc7d1aacf09d Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Wed, 18 Dec 2024 11:02:29 +0000 Subject: [PATCH 4/6] fix: use relative path --- .../src/components/orders/OrdersUserDetailsTable/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx index 6cb7d317f9..2c85a4da5c 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx @@ -26,7 +26,7 @@ import { ToggleFilter } from './ToggleFilter' import { SimpleTable, SimpleTableProps } from '../../common/SimpleTable' import { StatusLabel } from '../StatusLabel' import { UnsignedOrderWarning } from '../UnsignedOrderWarning' -import { TableState } from 'explorer/components/TokensTableWidget/useTable' +import { TableState } from '../../../explorer/components/TokensTableWidget/useTable' import { Command } from '@cowprotocol/types' const EXPIRED_CANCELED_STATES: OrderStatus[] = ['cancelled', 'cancelling', 'expired'] From 3c1bb00da2179cb93c184f5cba3473c13a9559fa Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Wed, 18 Dec 2024 12:00:24 +0000 Subject: [PATCH 5/6] feat: improve handling of hidden orders and responsiveness --- .../orders/OrdersUserDetailsTable/index.tsx | 137 ++++++++++-------- 1 file changed, 73 insertions(+), 64 deletions(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx index 2c85a4da5c..232d3fbf94 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx @@ -72,48 +72,47 @@ interface RowProps { const FilterRow = styled.tr` background-color: ${({ theme }) => theme.background}; - th { + @media (max-width: 1155px) { + div:first-child { + max-width: 90vw; + } + } + + td { + padding: 2rem; text-align: right; padding-right: 10px; - + max-width: 100%; & > * { margin-left: 10px; } } + + p { + word-wrap: break-word; + white-space: normal; + } ` -const NoOrdersContainer = styled.div` +const Filters = styled.div` display: flex; - flex-wrap: wrap; - align-items: center; justify-content: center; - flex-direction: column; - padding: 2rem; + flex-wrap: wrap; + flex-direction: row; + gap: 1rem; ` -const HiddenOrdersLegend = styled.tr` +const HiddenOrdersLegend = styled.div` p { text-align: center; } - &:hover, - td:hover { - background-color: ${({ theme }) => theme.paper}; - color: ${({ theme }) => theme.textSecondary1}; + a { + text-decoration: underline; } - td { - padding: 0; - font-size: 1.2rem; - color: ${({ theme }) => theme.textSecondary1}; - - a { - text-decoration: underline; - } - - a:hover { - color: ${({ theme }) => theme.textSecondary2}; - } + a:hover { + color: ${({ theme }) => theme.textSecondary2}; } ` @@ -215,31 +214,6 @@ const OrdersUserDetailsTable: React.FC = (props) => { - {showFilter && ( - - - {canceledAndExpiredCount > 0 && ( - setShowCanceledAndExpired((previousValue) => !previousValue)} - label={(showCanceledAndExpired ? 'Hide' : 'Show') + ' canceled/expired'} - count={canceledAndExpiredCount} - /> - )} - {preSigningCount > 0 && ( - <> - setShowPreSigning((previousValue) => !previousValue)} - label={(showPreSigning ? 'Hide' : 'Show') + ' unsigned'} - count={preSigningCount} - /> - {showPreSigning && } - - )} - - - )} {!areOrdersAllHidden && ( @@ -260,6 +234,15 @@ const OrdersUserDetailsTable: React.FC = (props) => { Status )} + {showPreSigning && ( + + +
+ +
+ + + )} } body={ @@ -275,24 +258,50 @@ const OrdersUserDetailsTable: React.FC = (props) => { /> ))} - {hiddenOrdersCount > 0 && ( - + {showFilter && ( + -

- Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current page. -

-

- {hiddenOrdersCount} orders are hidden, you can make them visible using the filters above - {tableState.hasNextPage ? ( - - , or go to next page for more orders. - - ) : ( - '.' +

+ {hiddenOrdersCount > 0 && ( + +

+ Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current page. +

+

+ {hiddenOrdersCount} orders are hidden, you can make them visible using the filters below + {tableState.hasNextPage ? ( + + , or go to next page for more orders. + + ) : ( + '.' + )} +

+ )} -

+ + {canceledAndExpiredCount > 0 && ( + setShowCanceledAndExpired((previousValue) => !previousValue)} + label={(showCanceledAndExpired ? 'Hide' : 'Show') + ' canceled/expired'} + count={canceledAndExpiredCount} + /> + )} + {preSigningCount > 0 && ( + <> + setShowPreSigning((previousValue) => !previousValue)} + label={(showPreSigning ? 'Hide' : 'Show') + ' unsigned'} + count={preSigningCount} + /> + + )} + +
- + )} } From f35937e1710e28a9f0d352b28ca910d253d364d5 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Wed, 18 Dec 2024 12:02:49 +0000 Subject: [PATCH 6/6] feat: show a message when all orders are being shown --- .../orders/OrdersUserDetailsTable/index.tsx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx index 232d3fbf94..0efd2ec7e8 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx @@ -262,23 +262,28 @@ const OrdersUserDetailsTable: React.FC = (props) => {
- {hiddenOrdersCount > 0 && ( - -

- Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current page. -

-

- {hiddenOrdersCount} orders are hidden, you can make them visible using the filters below - {tableState.hasNextPage ? ( - - , or go to next page for more orders. - - ) : ( - '.' - )} -

- - )} + + {hiddenOrdersCount > 0 ? ( + <> +

+ Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current + page. +

+

+ {hiddenOrdersCount} orders are hidden, you can make them visible using the filters below + {tableState.hasNextPage ? ( + + , or go to next page for more orders. + + ) : ( + '.' + )} +

+ + ) : ( +

Showing all {orders.length} orders for the current page.

+ )} + {canceledAndExpiredCount > 0 && (