Skip to content

Commit

Permalink
feat: improve orders table when hidden orders (#5226)
Browse files Browse the repository at this point in the history 
* feat: show pagination also in the bottom

* feat: make it more clear there's more pages

* fix: improve messages

* fix: use relative path

* feat: improve handling of hidden orders and responsiveness

* feat: show a message when all orders are being shown
  • Loading branch information
@anxolin
anxolin authored Dec 18, 2024
1 parent 64e3f40 commit a4aaff9
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 52 deletions.
6 changes: 3 additions & 3 deletions apps/explorer/src/components/common/Tabs/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -129,10 +129,10 @@ const Tabs: React.FC<Props> = (props) => {
tabTheme={tabTheme}
/>
))}
{extraPosition === 'top' && <ExtraContent extra={tabBarExtraContent} />}
{['top', 'both'].includes(extraPosition) && <ExtraContent extra={tabBarExtraContent} />}
</TabList>
<TabContent tabItems={tabItems} activeTab={selectedTab} />
{extraPosition === 'bottom' && <ExtraContent extra={tabBarExtraContent} />}
{['bottom', 'both'].includes(extraPosition) && <ExtraContent extra={tabBarExtraContent} />}
</Wrapper>
)
}
Expand Down
145 changes: 103 additions & 42 deletions apps/explorer/src/components/orders/OrdersUserDetailsTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']

Expand Down Expand Up @@ -53,6 +55,8 @@ const Wrapper = styled.div`

export type Props = SimpleTableProps & {
orders: Order[] | undefined
tableState: TableState
handleNextPage: Command
messageWhenEmpty?: string | React.ReactNode
}

Expand All @@ -68,23 +72,48 @@ 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.div`
p {
text-align: center;
}
a {
text-decoration: underline;
}
a:hover {
color: ${({ theme }) => theme.textSecondary2};
}
`

const RowOrder: React.FC<RowProps> = ({ order, isPriceInverted, showCanceledAndExpired, showPreSigning }) => {
Expand Down Expand Up @@ -159,16 +188,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)
Expand All @@ -182,31 +214,6 @@ const OrdersUserDetailsTable: React.FC<Props> = (props) => {
<SimpleTable
header={
<>
{showFilter && (
<FilterRow>
<th colSpan={8}>
{canceledAndExpiredCount > 0 && (
<ToggleFilter
checked={showCanceledAndExpired}
onChange={() => setShowCanceledAndExpired((previousValue) => !previousValue)}
label={(showCanceledAndExpired ? 'Hide' : 'Show') + ' canceled/expired'}
count={canceledAndExpiredCount}
/>
)}
{preSigningCount > 0 && (
<>
<ToggleFilter
checked={showPreSigning}
onChange={() => setShowPreSigning((previousValue) => !previousValue)}
label={(showPreSigning ? 'Hide' : 'Show') + ' unsigned'}
count={preSigningCount}
/>
{showPreSigning && <UnsignedOrderWarning />}
</>
)}
</th>
</FilterRow>
)}
{!areOrdersAllHidden && (
<tr>
<th>
Expand All @@ -227,11 +234,20 @@ const OrdersUserDetailsTable: React.FC<Props> = (props) => {
<th>Status</th>
</tr>
)}
{showPreSigning && (
<FilterRow>
<td colSpan={8}>
<div>
<UnsignedOrderWarning />
</div>
</td>
</FilterRow>
)}
</>
}
body={
<>
{!areOrdersAllHidden ? (
{!areOrdersAllHidden &&
orders.map((item) => (
<RowOrder
key={item.uid}
Expand All @@ -240,12 +256,57 @@ 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>
))}

{showFilter && (
<FilterRow>
<td colSpan={8}>
<div>
<HiddenOrdersLegend>
{hiddenOrdersCount > 0 ? (
<>
<p>
Showing {orders.length - hiddenOrdersCount} out of {orders.length} orders for the current
page.
</p>
<p>
{hiddenOrdersCount} orders are hidden, you can make them visible using the filters below
{tableState.hasNextPage ? (
<span>
, or go to&nbsp;<a onClick={handleNextPage}>next page</a>&nbsp;for more orders.
</span>
) : (
'.'
)}
</p>
</>
) : (
<p>Showing all {orders.length} orders for the current page.</p>
)}
</HiddenOrdersLegend>
<Filters>
{canceledAndExpiredCount > 0 && (
<ToggleFilter
checked={showCanceledAndExpired}
onChange={() => setShowCanceledAndExpired((previousValue) => !previousValue)}
label={(showCanceledAndExpired ? 'Hide' : 'Show') + ' canceled/expired'}
count={canceledAndExpiredCount}
/>
)}
{preSigningCount > 0 && (
<>
<ToggleFilter
checked={showPreSigning}
onChange={() => setShowPreSigning((previousValue) => !previousValue)}
label={(showPreSigning ? 'Hide' : 'Show') + ' unsigned'}
count={preSigningCount}
/>
</>
)}
</Filters>
</div>
</td>
</FilterRow>
)}
</>
}
Expand Down
4 changes: 4 additions & 0 deletions apps/explorer/src/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -46,6 +48,8 @@ export const OrdersTableWithData: React.FC = () => {
) : (
<OrdersTable
orders={orders}
tableState={tableState}
handleNextPage={handleNextPage}
messageWhenEmpty={
<EmptyOrdersMessage
isLoading={searchInAnotherNetworkState}
Expand Down
2 changes: 1 addition & 1 deletion apps/explorer/src/explorer/components/OrdersTableWidget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
>
<ConnectionStatus />
{error && <Notification type={error.type} message={error.message} />}
<StyledExplorerTabs tabItems={tabItems(isLoading)} extra={ExtraComponentNode} />
<StyledExplorerTabs tabItems={tabItems(isLoading)} extra={ExtraComponentNode} extraPosition="both" />
</OrdersTableContext.Provider>
)
}
Expand Down
8 changes: 2 additions & 6 deletions apps/explorer/src/explorer/components/common/ExplorerTabs/ExplorerTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -56,7 +52,7 @@ const tabCustomThemeConfig = getTabTheme({
indicatorTabSize: IndicatorTabSize.big,
})

type ExplorerTabsProps = Omit<TabsProps, 'tabTheme'> & { extraPosition?: 'top' | 'bottom' }
type ExplorerTabsProps = Omit<TabsProps, 'tabTheme'> & { extraPosition?: 'top' | 'bottom' | 'both' }

const ExplorerTabs: React.FC<ExplorerTabsProps> = (props) => {
return (
Expand Down

0 comments on commit a4aaff9

Please sign in to comment.