From e49ad9da6a461d4ae07e94f0565169c7a83d1df4 Mon Sep 17 00:00:00 2001 From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com> Date: Wed, 14 Dec 2022 07:59:59 -0500 Subject: [PATCH] feat(#2273): orders and fills on trading page to be market specific (#2395) * feat(#2273): make orders and fills tabs market specific in trade grid * feat(#2273): fix order navigation and show orders for this market only checkbox * fix(#2273): fills container should not require market * feat(#2273): add marketId as hook dependency * fix: use data-testid in trading orders * fix(#2273): default to false --- .../src/integration/trading-orders.cy.ts | 36 +-- .../client-pages/market/trade-grid.tsx | 209 ++++++++++-------- libs/candles-chart/src/lib/candles-chart.tsx | 4 +- libs/fills/src/lib/fills-container.tsx | 4 +- libs/fills/src/lib/fills-manager.tsx | 4 +- libs/fills/src/lib/use-fills-list.ts | 10 +- libs/liquidity/src/lib/liquidity-table.tsx | 1 + .../order-data-provider/Orders.graphql | 4 +- .../__generated__/Orders.ts | 8 +- .../lib/components/order-list-container.tsx | 4 +- .../order-list-manager/order-list-manager.tsx | 8 +- .../order-list-manager/use-order-list-data.ts | 29 ++- .../lib/components/order-list/order-list.tsx | 8 +- 13 files changed, 182 insertions(+), 147 deletions(-) diff --git a/apps/trading-e2e/src/integration/trading-orders.cy.ts b/apps/trading-e2e/src/integration/trading-orders.cy.ts index 9866cf31b..b41cd4d74 100644 --- a/apps/trading-e2e/src/integration/trading-orders.cy.ts +++ b/apps/trading-e2e/src/integration/trading-orders.cy.ts @@ -141,10 +141,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_ACTIVE, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Active' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active'); }); it('must see an expired order', () => { // 7002-SORD-042 @@ -152,10 +149,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_EXPIRED, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Expired' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired'); }); it('must see a cancelled order', () => { @@ -165,10 +159,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_CANCELLED, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Cancelled' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled'); }); it('must see a stopped order', () => { @@ -178,10 +169,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_STOPPED, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Stopped' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped'); }); it('must see a partially filled order', () => { @@ -192,11 +180,11 @@ describe('subscribe orders', { tags: '@smoke' }, () => { size: '5', remaining: '1', }); - cy.get(`[data-testid=order-status-${orderId}]`).should( + cy.getByTestId(`order-status-${orderId}`).should( 'have.text', 'PartiallyFilled' ); - cy.get(`[data-testid=order-status-${orderId}]`) + cy.getByTestId(`order-status-${orderId}`) .parent() .siblings(`[col-id=${orderRemaining}]`) .should('have.text', '4/5'); @@ -209,10 +197,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_FILLED, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Filled' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled'); }); it('must see a rejected order', () => { @@ -222,7 +207,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { status: Schema.OrderStatus.STATUS_REJECTED, rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( + cy.getByTestId(`order-status-${orderId}`).should( 'have.text', 'Rejected: Internal error' ); @@ -235,9 +220,6 @@ describe('subscribe orders', { tags: '@smoke' }, () => { id: orderId, status: Schema.OrderStatus.STATUS_PARKED, }); - cy.get(`[data-testid=order-status-${orderId}]`).should( - 'have.text', - 'Parked' - ); + cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Parked'); }); }); diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx index 7c879c3e1..c2a986594 100644 --- a/apps/trading/client-pages/market/trade-grid.tsx +++ b/apps/trading/client-pages/market/trade-grid.tsx @@ -71,100 +71,123 @@ const MainGrid = ({ }: { marketId: string; onSelect?: (marketId: string) => void; -}) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - { - onSelect?.(id); - }} +}) => { + const [showMarketOnly, setShowMarketOnly] = useState(false); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + { + onSelect?.(id); + }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); + + + + + + + + + + + + + + + + + + ); +}; const MainGridWrapped = memo(MainGrid); export const TradeGrid = ({ market, onSelect }: TradeGridProps) => { diff --git a/libs/candles-chart/src/lib/candles-chart.tsx b/libs/candles-chart/src/lib/candles-chart.tsx index 6deb8db22..c59c688d3 100644 --- a/libs/candles-chart/src/lib/candles-chart.tsx +++ b/libs/candles-chart/src/lib/candles-chart.tsx @@ -61,7 +61,9 @@ export const CandlesChartContainer = ({
- {t('Interval')} + + {t(`Interval: ${intervalLabels[interval]}`)} + { +export const FillsContainer = ({ marketId }: { marketId?: string }) => { const { pubKey } = useVegaWallet(); if (!pubKey) { @@ -14,5 +14,5 @@ export const FillsContainer = () => { ); } - return ; + return ; }; diff --git a/libs/fills/src/lib/fills-manager.tsx b/libs/fills/src/lib/fills-manager.tsx index dba47bbc7..c26cfed72 100644 --- a/libs/fills/src/lib/fills-manager.tsx +++ b/libs/fills/src/lib/fills-manager.tsx @@ -7,13 +7,15 @@ import { useFillsList } from './use-fills-list'; interface FillsManagerProps { partyId: string; + marketId?: string; } -export const FillsManager = ({ partyId }: FillsManagerProps) => { +export const FillsManager = ({ partyId, marketId }: FillsManagerProps) => { const gridRef = useRef(null); const scrolledToTop = useRef(true); const { data, error, loading, addNewRows, getRows } = useFillsList({ partyId, + marketId, gridRef, scrolledToTop, }); diff --git a/libs/fills/src/lib/use-fills-list.ts b/libs/fills/src/lib/use-fills-list.ts index 26d6afc87..2358f5dbf 100644 --- a/libs/fills/src/lib/use-fills-list.ts +++ b/libs/fills/src/lib/use-fills-list.ts @@ -10,11 +10,17 @@ import { fillsWithMarketProvider } from './fills-data-provider'; interface Props { partyId: string; + marketId?: string; gridRef: RefObject; scrolledToTop: RefObject; } -export const useFillsList = ({ partyId, gridRef, scrolledToTop }: Props) => { +export const useFillsList = ({ + partyId, + marketId, + gridRef, + scrolledToTop, +}: Props) => { const dataRef = useRef<(TradeEdge | null)[] | null>(null); const totalCountRef = useRef(undefined); const newRows = useRef(0); @@ -72,7 +78,7 @@ export const useFillsList = ({ partyId, gridRef, scrolledToTop }: Props) => { [] ); - const variables = useMemo(() => ({ partyId }), [partyId]); + const variables = useMemo(() => ({ partyId, marketId }), [partyId, marketId]); const { data, error, loading, load, totalCount } = useDataProvider< (TradeEdge | null)[], diff --git a/libs/liquidity/src/lib/liquidity-table.tsx b/libs/liquidity/src/lib/liquidity-table.tsx index 24284c56e..3209c6b9f 100644 --- a/libs/liquidity/src/lib/liquidity-table.tsx +++ b/libs/liquidity/src/lib/liquidity-table.tsx @@ -67,6 +67,7 @@ export const LiquidityTable = forwardRef( tooltipComponent: TooltipCellComponent, sortable: true, }} + enableCellTextSelection={true} rowData={data} > ; }>; @@ -121,8 +122,8 @@ export type OrdersQueryHookResult = ReturnType; export type OrdersLazyQueryHookResult = ReturnType; export type OrdersQueryResult = Apollo.QueryResult; export const OrdersUpdateDocument = gql` - subscription OrdersUpdate($partyId: ID!) { - orders(partyId: $partyId) { + subscription OrdersUpdate($partyId: ID!, $marketId: ID) { + orders(partyId: $partyId, marketId: $marketId) { ...OrderUpdateFields } } @@ -141,6 +142,7 @@ export const OrdersUpdateDocument = gql` * const { data, loading, error } = useOrdersUpdateSubscription({ * variables: { * partyId: // value for 'partyId' + * marketId: // value for 'marketId' * }, * }); */ @@ -149,4 +151,4 @@ export function useOrdersUpdateSubscription(baseOptions: Apollo.SubscriptionHook return Apollo.useSubscription(OrdersUpdateDocument, options); } export type OrdersUpdateSubscriptionHookResult = ReturnType; -export type OrdersUpdateSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file +export type OrdersUpdateSubscriptionResult = Apollo.SubscriptionResult; diff --git a/libs/orders/src/lib/components/order-list-container.tsx b/libs/orders/src/lib/components/order-list-container.tsx index d83e2a581..1647b966a 100644 --- a/libs/orders/src/lib/components/order-list-container.tsx +++ b/libs/orders/src/lib/components/order-list-container.tsx @@ -3,12 +3,12 @@ import { Splash } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { OrderListManager } from './order-list-manager'; -export const OrderListContainer = () => { +export const OrderListContainer = ({ marketId }: { marketId?: string }) => { const { pubKey } = useVegaWallet(); if (!pubKey) { return {t('Please connect Vega wallet')}; } - return ; + return ; }; diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index 28305bdfa..89da1aff7 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx @@ -15,9 +15,13 @@ import type { Filter, Sort } from './use-order-list-data'; export interface OrderListManagerProps { partyId: string; + marketId?: string; } -export const OrderListManager = ({ partyId }: OrderListManagerProps) => { +export const OrderListManager = ({ + partyId, + marketId, +}: OrderListManagerProps) => { const gridRef = useRef(null); const scrolledToTop = useRef(true); const [sort, setSort] = useState(); @@ -25,6 +29,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => { const { data, error, loading, addNewRows, getRows } = useOrderListData({ partyId, + marketId, sort, filter, gridRef, @@ -74,6 +79,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => { onBodyScroll={onBodyScroll} onFilterChanged={onFilterChanged} onSortChanged={onSortChange} + marketId={marketId} />
; @@ -40,6 +44,7 @@ interface Props { export const useOrderListData = ({ partyId, + marketId, sort, filter, gridRef, @@ -49,9 +54,11 @@ export const useOrderListData = ({ const totalCountRef = useRef(undefined); const newRows = useRef(0); - const variables = useMemo( - () => ({ partyId, dateRange: filter?.updatedAt?.value }), - [partyId, filter] + const variables = useMemo< + OrdersQueryVariables & OrdersUpdateSubscriptionVariables + >( + () => ({ partyId, dateRange: filter?.updatedAt?.value, marketId }), + [partyId, marketId, filter] ); const addNewRows = useCallback(() => { @@ -85,11 +92,14 @@ export const useOrderListData = ({ (dataRef.current?.length && data?.length) || (!dataRef.current?.length && !data?.length) ); - dataRef.current = data; + dataRef.current = + !!marketId && !!data + ? data.filter((d) => d?.node.market?.id === marketId) + : data; gridRef.current?.api?.refreshInfiniteCache(); return avoidRerender; }, - [gridRef, scrolledToTop] + [gridRef, scrolledToTop, marketId] ); const insert = useCallback( @@ -100,11 +110,14 @@ export const useOrderListData = ({ data: (OrderEdge | null)[] | null; totalCount?: number; }) => { - dataRef.current = data; + dataRef.current = + !!marketId && !!data + ? data.filter((d) => d?.node.market?.id === marketId) + : data; totalCountRef.current = totalCount; return true; }, - [] + [marketId] ); const { data, error, loading, load, totalCount } = useDataProvider({ diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx index 3a934ff7f..463f245ee 100644 --- a/libs/orders/src/lib/components/order-list/order-list.tsx +++ b/libs/orders/src/lib/components/order-list/order-list.tsx @@ -36,7 +36,7 @@ import type { AgGridReact } from 'ag-grid-react'; import type { Order } from '../order-data-provider'; import type { OrderEventFieldsFragment } from '../../order-hooks'; -type OrderListProps = TypedDataAgGrid; +type OrderListProps = TypedDataAgGrid & { marketId?: string }; export const TransactionComplete = ({ transaction, @@ -84,7 +84,7 @@ export const OrderList = forwardRef( { - orderCancel.cancel({}); + orderCancel.cancel({ marketId: props.marketId }); }} cancel={(order: Order) => { if (!order.market) return; @@ -174,9 +174,7 @@ export const OrderListTable = forwardRef( 'market.tradableInstrument.instrument.code' >) => data?.market?.id ? ( - - {value} - + {value} ) : ( value )