LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(958): add cancel all orders button (#1861)

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-10-28 17:15:21 +02:00 committed by GitHub
parent 13a77d1583
commit ef07536159
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 208 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console-lite/src/app/components/portfolio/orders/orders.tsx
View File

@ -65,8 +65,8 @@ const OrdersManager = () => {
defaultColDef={defaultColDef} defaultColDef={defaultColDef}
/> />
<orderCancel.Dialog <orderCancel.Dialog
title={getCancelDialogTitle(orderCancel.cancelledOrder?.status)} title={getCancelDialogTitle(orderCancel)}
intent={getCancelDialogIntent(orderCancel.cancelledOrder?.status)} intent={getCancelDialogIntent(orderCancel)}
content={{ content={{
Complete: ( Complete: (
<OrderFeedback <OrderFeedback

9
apps/console-lite/src/app/components/portfolio/orders/use-column-definitions.tsx
View File

@ -11,11 +11,8 @@ import {
positiveClassNames, positiveClassNames,
t, t,
} from '@vegaprotocol/react-helpers'; } from '@vegaprotocol/react-helpers';
import type { import type { OrderFieldsFragment, Order } from '@vegaprotocol/orders';
OrderFieldsFragment, import type { OrderCancellationBody } from '@vegaprotocol/wallet';
Order,
CancelOrderArgs,
} from '@vegaprotocol/orders';
import { isOrderActive } from '@vegaprotocol/orders'; import { isOrderActive } from '@vegaprotocol/orders';
import { import {
OrderRejectionReasonMapping, OrderRejectionReasonMapping,
@ -34,7 +31,7 @@ type OrderTimeKey = keyof typeof OrderTimeInForceMapping;
interface Props { interface Props {
setEditOrder: (order: Order) => void; setEditOrder: (order: Order) => void;
orderCancel: { orderCancel: {
cancel: (args: CancelOrderArgs) => void; cancel: (args: OrderCancellationBody['orderCancellation']) => void;
[key: string]: unknown; [key: string]: unknown;
}; };
} }

66
apps/trading-e2e/src/integration/trading-orders.cy.ts
View File

@ -14,6 +14,7 @@ const orderPrice = 'price';
const orderTimeInForce = 'timeInForce'; const orderTimeInForce = 'timeInForce';
const orderCreatedAt = 'createdAt'; const orderCreatedAt = 'createdAt';
const cancelOrderBtn = 'cancel'; const cancelOrderBtn = 'cancel';
const cancelAllOrdersBtn = 'cancelAll';
const editOrderBtn = 'edit'; const editOrderBtn = 'edit';
describe('orders list', { tags: '@smoke' }, () => { describe('orders list', { tags: '@smoke' }, () => {
@ -29,50 +30,49 @@ describe('orders list', { tags: '@smoke' }, () => {
cy.wait('@Orders').then(() => { cy.wait('@Orders').then(() => {
expect(subscriptionMocks.OrdersUpdate).to.be.calledOnce; expect(subscriptionMocks.OrdersUpdate).to.be.calledOnce;
}); });
cy.wait('@Markets');
}); });
it('renders orders', () => { it('renders orders', () => {
cy.getByTestId('tab-orders').should('be.visible'); cy.getByTestId('tab-orders').should('be.visible');
cy.getByTestId(cancelAllOrdersBtn).should('be.visible');
cy.getByTestId(cancelOrderBtn).should('have.length.at.least', 1);
cy.getByTestId(editOrderBtn).should('have.length.at.least', 1);
cy.getByTestId('tab-orders').within(() => { cy.getByTestId('tab-orders').within(() => {
cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => { cy.get(`[role='rowgroup']`)
cy.wrap($symbol).invoke('text').should('not.be.empty'); .first()
}); .within(() => {
cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {
cy.wrap($symbol).invoke('text').should('not.be.empty');
});
cy.get(`[col-id='${orderSize}']`).each(($size) => { cy.get(`[col-id='${orderSize}']`).each(($size) => {
cy.wrap($size).invoke('text').should('not.be.empty'); cy.wrap($size).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderType}']`).each(($type) => { cy.get(`[col-id='${orderType}']`).each(($type) => {
cy.wrap($type).invoke('text').should('not.be.empty'); cy.wrap($type).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderStatus}']`).each(($status) => { cy.get(`[col-id='${orderStatus}']`).each(($status) => {
cy.wrap($status).invoke('text').should('not.be.empty'); cy.wrap($status).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => { cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => {
cy.wrap($remaining).invoke('text').should('not.be.empty'); cy.wrap($remaining).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderPrice}']`).each(($price) => { cy.get(`[col-id='${orderPrice}']`).each(($price) => {
cy.wrap($price).invoke('text').should('not.be.empty'); cy.wrap($price).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => { cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => {
cy.wrap($timeInForce).invoke('text').should('not.be.empty'); cy.wrap($timeInForce).invoke('text').should('not.be.empty');
}); });
cy.get(`[col-id='${orderCreatedAt}']`).each(($dateTime) => { cy.get(`[col-id='${orderCreatedAt}']`).each(($dateTime) => {
cy.wrap($dateTime).invoke('text').should('not.be.empty'); cy.wrap($dateTime).invoke('text').should('not.be.empty');
}); });
});
cy.getByTestId(cancelOrderBtn)
.should('be.visible')
.and('have.length.at.least', 1);
cy.getByTestId(editOrderBtn)
.should('be.visible')
.and('have.length.at.least', 1);
}); });
}); });

9
libs/orders/src/lib/components/order-list/order-list.spec.tsx
View File

@ -25,6 +25,7 @@ const defaultProps: OrderListTableProps = {
rowData: [], rowData: [],
setEditOrder: jest.fn(), setEditOrder: jest.fn(),
cancel: jest.fn(), cancel: jest.fn(),
cancelAll: jest.fn(),
}; };
const generateJsx = ( const generateJsx = (
@ -87,8 +88,8 @@ describe('OrderListTable', () => {
'-', '-',
'Edit', 'Edit',
]; ];
cells.forEach((cell, i) => expectedValues.forEach((expectedValue, i) =>
expect(cell).toHaveTextContent(expectedValues[i]) expect(cells[i]).toHaveTextContent(expectedValue)
); );
}); });
@ -112,8 +113,8 @@ describe('OrderListTable', () => {
'-', '-',
'Edit', 'Edit',
]; ];
cells.forEach((cell, i) => expectedValues.forEach((expectedValue, i) =>
expect(cell).toHaveTextContent(expectedValues[i]) expect(cells[i]).toHaveTextContent(expectedValue)
); );
}); });

2
libs/orders/src/lib/components/order-list/order-list.stories.tsx
View File

@ -19,6 +19,7 @@ const Template: Story = (args) => {
<OrderListTable <OrderListTable
rowData={args.data} rowData={args.data}
cancel={cancel} cancel={cancel}
cancelAll={cancel}
setEditOrder={() => { setEditOrder={() => {
return; return;
}} }}
@ -47,6 +48,7 @@ const Template2: Story = (args) => {
<OrderListTable <OrderListTable
rowData={args.data} rowData={args.data}
cancel={cancel} cancel={cancel}
cancelAll={cancel}
setEditOrder={setEditOrder} setEditOrder={setEditOrder}
/> />
</div> </div>

161
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -1,3 +1,4 @@
import { useEnvironment } from '@vegaprotocol/environment';
import { import {
addDecimalsFormatNumber, addDecimalsFormatNumber,
getDateTimeFormat, getDateTimeFormat,
@ -5,6 +6,7 @@ import {
negativeClassNames, negativeClassNames,
positiveClassNames, positiveClassNames,
t, t,
truncateByChars,
} from '@vegaprotocol/react-helpers'; } from '@vegaprotocol/react-helpers';
import { import {
OrderRejectionReasonMapping, OrderRejectionReasonMapping,
@ -19,10 +21,12 @@ import {
Intent, Intent,
Link, Link,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import type { TransactionResult } from '@vegaprotocol/wallet';
import type { VegaTxState } from '@vegaprotocol/wallet';
import { AgGridColumn } from 'ag-grid-react'; import { AgGridColumn } from 'ag-grid-react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { forwardRef, useState } from 'react'; import { forwardRef, useState } from 'react';
import type { TypedDataAgGrid } from '@vegaprotocol/ui-toolkit';
import { useOrderCancel } from '../../order-hooks/use-order-cancel'; import { useOrderCancel } from '../../order-hooks/use-order-cancel';
import { useOrderEdit } from '../../order-hooks/use-order-edit'; import { useOrderEdit } from '../../order-hooks/use-order-edit';
import { OrderFeedback } from '../order-feedback'; import { OrderFeedback } from '../order-feedback';
@ -32,9 +36,46 @@ import type {
VegaICellRendererParams, VegaICellRendererParams,
VegaValueFormatterParams, VegaValueFormatterParams,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact, AgGridReactProps } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react';
import type { Order } from '../'; import type { Order } from '../order-data-provider';
type OrderListProps = AgGridReactProps; import type { OrderEventFieldsFragment } from '../../order-hooks';
type OrderListProps = TypedDataAgGrid<Order>;
export const TransactionComplete = ({
transaction,
transactionResult,
}: {
transaction: VegaTxState;
transactionResult?: TransactionResult;
}) => {
const { VEGA_EXPLORER_URL } = useEnvironment();
if (!transactionResult) return null;
return (
<>
{transactionResult.status ? (
<p>{t('Transaction successful')}</p>
) : (
<p className="text-vega-red">
{t('Transaction failed')}: {transactionResult.error}
</p>
)}
{transaction.txHash && (
<>
<p className="font-semibold mt-4">{t('Transaction')}</p>
<p>
<Link
href={`${VEGA_EXPLORER_URL}/txs/${transaction.txHash}`}
target="_blank"
>
{truncateByChars(transaction.txHash)}
</Link>
</p>
</>
)}
</>
);
};
export const OrderList = forwardRef<AgGridReact, OrderListProps>( export const OrderList = forwardRef<AgGridReact, OrderListProps>(
(props, ref) => { (props, ref) => {
@ -46,7 +87,10 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
<> <>
<OrderListTable <OrderListTable
{...props} {...props}
cancel={(order) => { cancelAll={() => {
orderCancel.cancel({});
}}
cancel={(order: Order) => {
if (!order.market) return; if (!order.market) return;
orderCancel.cancel({ orderCancel.cancel({
orderId: order.id, orderId: order.id,
@ -57,14 +101,16 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
setEditOrder={setEditOrder} setEditOrder={setEditOrder}
/> />
<orderCancel.Dialog <orderCancel.Dialog
title={getCancelDialogTitle(orderCancel.cancelledOrder?.status)} title={getCancelDialogTitle(orderCancel)}
intent={getCancelDialogIntent(orderCancel.cancelledOrder?.status)} intent={getCancelDialogIntent(orderCancel)}
content={{ content={{
Complete: ( Complete: orderCancel.cancelledOrder ? (
<OrderFeedback <OrderFeedback
transaction={orderCancel.transaction} transaction={orderCancel.transaction}
order={orderCancel.cancelledOrder} order={orderCancel.cancelledOrder}
/> />
) : (
<TransactionComplete {...orderCancel} />
), ),
}} }}
/> />
@ -97,13 +143,14 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
} }
); );
export type OrderListTableProps = AgGridReactProps & { export type OrderListTableProps = OrderListProps & {
cancel: (order: Order) => void; cancel: (order: Order) => void;
cancelAll: () => void;
setEditOrder: (order: Order) => void; setEditOrder: (order: Order) => void;
}; };
export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>( export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
({ cancel, setEditOrder, ...props }, ref) => { ({ cancel, cancelAll, setEditOrder, ...props }, ref) => {
return ( return (
<AgGrid <AgGrid
ref={ref} ref={ref}
@ -112,6 +159,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
style={{ width: '100%', height: '100%' }} style={{ width: '100%', height: '100%' }}
getRowId={({ data }) => data.id} getRowId={({ data }) => data.id}
rowHeight={34} rowHeight={34}
pinnedBottomRowData={[{}]}
{...props} {...props}
> >
<AgGridColumn <AgGridColumn
@ -147,7 +195,11 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
valueFormatter={({ valueFormatter={({
value, value,
data, data,
node,
}: VegaValueFormatterParams<Order, 'size'>) => { }: VegaValueFormatterParams<Order, 'size'>) => {
if (node?.rowPinned) {
return '';
}
if (!data?.market || !isNumeric(value)) { if (!data?.market || !isNumeric(value)) {
return '-'; return '-';
} }
@ -167,7 +219,11 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
valueFormatter={({ valueFormatter={({
data: order, data: order,
value, value,
node,
}: VegaValueFormatterParams<Order, 'type'>) => { }: VegaValueFormatterParams<Order, 'type'>) => {
if (node?.rowPinned) {
return '';
}
if (!value) return '-'; if (!value) return '-';
if (order?.peggedOrder) return t('Pegged'); if (order?.peggedOrder) return t('Pegged');
if (order?.liquidityProvision) return t('Liquidity provision'); if (order?.liquidityProvision) return t('Liquidity provision');
@ -197,7 +253,11 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
valueFormatter={({ valueFormatter={({
data, data,
value, value,
node,
}: VegaValueFormatterParams<Order, 'remaining'>) => { }: VegaValueFormatterParams<Order, 'remaining'>) => {
if (node?.rowPinned) {
return '';
}
if (!data?.market || !isNumeric(value) || !isNumeric(data.size)) { if (!data?.market || !isNumeric(value) || !isNumeric(data.size)) {
return '-'; return '-';
} }
@ -218,7 +278,11 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
valueFormatter={({ valueFormatter={({
value, value,
data, data,
node,
}: VegaValueFormatterParams<Order, 'price'>) => { }: VegaValueFormatterParams<Order, 'price'>) => {
if (node?.rowPinned) {
return '';
}
if ( if (
!data?.market || !data?.market ||
data.type === Schema.OrderType.TYPE_MARKET || data.type === Schema.OrderType.TYPE_MARKET ||
@ -260,7 +324,11 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
field="updatedAt" field="updatedAt"
valueFormatter={({ valueFormatter={({
value, value,
node,
}: VegaValueFormatterParams<Order, 'updatedAt'>) => { }: VegaValueFormatterParams<Order, 'updatedAt'>) => {
if (node?.rowPinned) {
return '';
}
return value ? getDateTimeFormat().format(new Date(value)) : '-'; return value ? getDateTimeFormat().format(new Date(value)) : '-';
}} }}
/> />
@ -268,10 +336,23 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
colId="amend" colId="amend"
headerName="" headerName=""
field="status" field="status"
cellRenderer={({ data }: VegaICellRendererParams<Order>) => { cellRenderer={({ data, node }: VegaICellRendererParams<Order>) => {
if (node?.rowPinned) {
return (
<div className="flex gap-2 items-center h-full justify-end">
<Button
size="xs"
data-testid="cancelAll"
onClick={() => cancelAll()}
>
{t('Cancel all')}
</Button>
</div>
);
}
if (isOrderAmendable(data)) { if (isOrderAmendable(data)) {
return data ? ( return data ? (
<div className="flex gap-2"> <div className="flex gap-2 items-center h-full justify-end">
<Button <Button
data-testid="edit" data-testid="edit"
onClick={() => setEditOrder(data)} onClick={() => setEditOrder(data)}
@ -353,32 +434,46 @@ export const getEditDialogTitle = (
} }
}; };
export const getCancelDialogIntent = ( export const getCancelDialogIntent = ({
status?: Schema.OrderStatus cancelledOrder,
): Intent | undefined => { transactionResult,
if (!status) { }: {
return; cancelledOrder: OrderEventFieldsFragment | null;
} transactionResult?: TransactionResult;
}): Intent | undefined => {
switch (status) { if (cancelledOrder) {
case Schema.OrderStatus.STATUS_CANCELLED: if (cancelledOrder.status === Schema.OrderStatus.STATUS_CANCELLED) {
return Intent.Success; return Intent.Success;
default: }
return Intent.Danger;
}
if (transactionResult) {
if ('error' in transactionResult && transactionResult.error) {
return Intent.Danger; return Intent.Danger;
}
return Intent.Success;
} }
return;
}; };
export const getCancelDialogTitle = ( export const getCancelDialogTitle = ({
status?: Schema.OrderStatus cancelledOrder,
): string | undefined => { transactionResult,
if (!status) { }: {
return; cancelledOrder: OrderEventFieldsFragment | null;
} transactionResult?: TransactionResult;
}): string | undefined => {
switch (status) { if (cancelledOrder) {
case Schema.OrderStatus.STATUS_CANCELLED: if (cancelledOrder.status === Schema.OrderStatus.STATUS_CANCELLED) {
return t('Order cancelled'); return t('Order cancelled');
default: }
return t('Order cancellation failed'); return t('Order cancellation failed');
} }
if (transactionResult) {
if (transactionResult.status) {
return t('Orders cancelled');
}
return t('Orders not cancelled');
}
return;
}; };

50
libs/orders/src/lib/order-hooks/use-order-cancel.tsx
View File

@ -1,19 +1,24 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useVegaWallet, useVegaTransaction } from '@vegaprotocol/wallet'; import {
useVegaWallet,
useVegaTransaction,
useTransactionResult,
} from '@vegaprotocol/wallet';
import type {
OrderCancellationBody,
TransactionResult,
} from '@vegaprotocol/wallet';
import type { OrderEventFieldsFragment } from './'; import type { OrderEventFieldsFragment } from './';
import * as Sentry from '@sentry/react'; import * as Sentry from '@sentry/react';
import { useOrderEvent } from './use-order-event'; import { useOrderEvent } from './use-order-event';
export interface CancelOrderArgs {
orderId: string;
marketId: string;
}
export const useOrderCancel = () => { export const useOrderCancel = () => {
const { pubKey } = useVegaWallet(); const { pubKey } = useVegaWallet();
const [cancelledOrder, setCancelledOrder] = const [cancelledOrder, setCancelledOrder] =
useState<OrderEventFieldsFragment | null>(null); useState<OrderEventFieldsFragment | null>(null);
const [transactionResult, setTransactionResult] =
useState<TransactionResult>();
const { const {
send, send,
@ -24,6 +29,7 @@ export const useOrderCancel = () => {
} = useVegaTransaction(); } = useVegaTransaction();
const waitForOrderEvent = useOrderEvent(transaction); const waitForOrderEvent = useOrderEvent(transaction);
const waitForTransactionResult = useTransactionResult();
const reset = useCallback(() => { const reset = useCallback(() => {
resetTransaction(); resetTransaction();
@ -31,7 +37,7 @@ export const useOrderCancel = () => {
}, [resetTransaction]); }, [resetTransaction]);
const cancel = useCallback( const cancel = useCallback(
async (args: CancelOrderArgs) => { async (orderCancellation: OrderCancellationBody['orderCancellation']) => {
if (!pubKey) { if (!pubKey) {
return; return;
} }
@ -39,26 +45,36 @@ export const useOrderCancel = () => {
setCancelledOrder(null); setCancelledOrder(null);
try { try {
await send(pubKey, { const res = await send(pubKey, {
orderCancellation: { orderCancellation,
orderId: args.orderId,
marketId: args.marketId,
},
}); });
if (orderCancellation.orderId) {
const cancelledOrder = await waitForOrderEvent(args.orderId, pubKey); const cancelledOrder = await waitForOrderEvent(
setCancelledOrder(cancelledOrder); orderCancellation.orderId,
setComplete(); pubKey
);
setCancelledOrder(cancelledOrder);
setComplete();
} else if (res) {
const txResult = await waitForTransactionResult(
res.transactionHash,
pubKey
);
setTransactionResult(txResult);
setComplete();
}
return res;
} catch (e) { } catch (e) {
Sentry.captureException(e); Sentry.captureException(e);
return; return;
} }
}, },
[pubKey, send, setComplete, waitForOrderEvent] [pubKey, send, setComplete, waitForOrderEvent, waitForTransactionResult]
); );
return { return {
transaction, transaction,
transactionResult,
cancelledOrder, cancelledOrder,
Dialog, Dialog,
cancel, cancel,

4
libs/wallet/src/connectors/vega-connector.ts
View File

@ -27,8 +27,8 @@ interface OrderSubmission {
} }
interface OrderCancellation { interface OrderCancellation {
orderId: string; orderId?: string;
marketId: string; marketId?: string;
} }
interface OrderAmendment { interface OrderAmendment {