feat: make it more clear there's more pages

cowprotocol · Dec 17, 2024 · fd5eb5f · fd5eb5f
1 parent 6c135a7
commit fd5eb5f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 10 deletions.
diff --git 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<RowProps> = ({ order, isPriceInverted, showCanceledAndExpired, showPreSigning }) => {
   const { creationDate, buyToken, buyAmount, sellToken, sellAmount, kind, partiallyFilled, uid, filledPercentage } =
     order
@@ -159,16 +189,19 @@ const RowOrder: React.FC<RowProps> = ({ order, isPriceInverted, showCanceledAndE
 }
 
 const OrdersUserDetailsTable: React.FC<Props> = (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)
 
   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> = (props) => {
       }
       body={
         <>
-          {!areOrdersAllHidden ? (
+          {!areOrdersAllHidden &&
             orders.map((item) => (
               <RowOrder
                 key={item.uid}
@@ -240,12 +273,24 @@ const OrdersUserDetailsTable: React.FC<Props> = (props) => {
                 showCanceledAndExpired={showCanceledAndExpired}
                 showPreSigning={showPreSigning}
               />
-            ))
-          ) : (
-            <NoOrdersContainer>
-              <p>No orders found.</p>
-              <p>You can toggle the filters to show the {orders.length} hidden orders.</p>
-            </NoOrdersContainer>
+            ))}
+
+          {hiddenOrdersCount > 0 && (
+            <HiddenOrdersLegend>
+              <td colSpan={8}>
+                <p>
+                  Showing {orders.length - hiddenOrdersCount} out of {orders.length}&nbsp; orders for the current page.
+                </p>
+                <p>
+                  {hiddenOrdersCount} orders are hidden, you can make them visible using the filters above
+                  {tableState.hasNextPage && (
+                    <span>
+                      , or go to&nbsp;<a onClick={handleNextPage}>next page</a>&nbsp;for more orders.
+                    </span>
+                  )}
+                </p>
+              </td>
+            </HiddenOrdersLegend>
           )}
         </>
       }

diff --git 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 = () => {
   ) : (
     <OrdersTable
       orders={orders}
+      tableState={tableState}
+      handleNextPage={handleNextPage}
       messageWhenEmpty={
         <EmptyOrdersMessage
           isLoading={searchInAnotherNetworkState}