chore: consolidate persisted order entries (#2673)
This commit is contained in:
parent
bcbc3bb146
commit
346af6118d
@ -52,7 +52,9 @@ function generateJsx(order?: OrderSubmissionBody['orderSubmission']) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe('DealTicket', () => {
|
describe('DealTicket', () => {
|
||||||
beforeEach(() => window.localStorage.clear());
|
beforeEach(() => {
|
||||||
|
window.localStorage.clear();
|
||||||
|
});
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
window.localStorage.clear();
|
window.localStorage.clear();
|
||||||
jest.clearAllMocks();
|
jest.clearAllMocks();
|
||||||
@ -87,38 +89,6 @@ describe('DealTicket', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('can edit deal ticket', async () => {
|
|
||||||
render(generateJsx());
|
|
||||||
|
|
||||||
// BUY is selected by default
|
|
||||||
expect(
|
|
||||||
screen.getByTestId('order-side-SIDE_BUY')?.querySelector('input')
|
|
||||||
).toBeChecked();
|
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
fireEvent.change(screen.getByTestId('order-size'), {
|
|
||||||
target: { value: '200' },
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
|
|
||||||
|
|
||||||
fireEvent.change(screen.getByTestId('order-tif'), {
|
|
||||||
target: { value: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC },
|
|
||||||
});
|
|
||||||
expect(screen.getByTestId('order-tif')).toHaveValue(
|
|
||||||
Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
|
|
||||||
);
|
|
||||||
|
|
||||||
// Switch to limit order
|
|
||||||
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
|
|
||||||
|
|
||||||
// Check all TIF options shown
|
|
||||||
expect(screen.getByTestId('order-tif').children).toHaveLength(
|
|
||||||
Object.keys(Schema.OrderTimeInForce).length
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('handles TIF select box dependent on order type', () => {
|
it('handles TIF select box dependent on order type', () => {
|
||||||
render(generateJsx());
|
render(generateJsx());
|
||||||
|
|
||||||
@ -221,4 +191,36 @@ describe('DealTicket', () => {
|
|||||||
).toHaveTextContent('Wrong trading mode');
|
).toHaveTextContent('Wrong trading mode');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('can edit deal ticket', async () => {
|
||||||
|
render(generateJsx());
|
||||||
|
|
||||||
|
// BUY is selected by default
|
||||||
|
expect(
|
||||||
|
screen.getByTestId('order-side-SIDE_BUY')?.querySelector('input')
|
||||||
|
).toBeChecked();
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.change(screen.getByTestId('order-size'), {
|
||||||
|
target: { value: '200' },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByTestId('order-tif'), {
|
||||||
|
target: { value: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC },
|
||||||
|
});
|
||||||
|
expect(screen.getByTestId('order-tif')).toHaveValue(
|
||||||
|
Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
|
||||||
|
);
|
||||||
|
|
||||||
|
// Switch to limit order
|
||||||
|
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
|
||||||
|
|
||||||
|
// Check all TIF options shown
|
||||||
|
expect(screen.getByTestId('order-tif').children).toHaveLength(
|
||||||
|
Object.keys(Schema.OrderTimeInForce).length
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -15,7 +15,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
|
|||||||
import { InputError } from '@vegaprotocol/ui-toolkit';
|
import { InputError } from '@vegaprotocol/ui-toolkit';
|
||||||
import { useOrderMarginValidation } from '../../hooks/use-order-margin-validation';
|
import { useOrderMarginValidation } from '../../hooks/use-order-margin-validation';
|
||||||
import { MarginWarning } from '../deal-ticket-validation/margin-warning';
|
import { MarginWarning } from '../deal-ticket-validation/margin-warning';
|
||||||
import { usePersistedOrder } from '../../hooks/use-persisted-order';
|
import { usePersistedOrderStore } from '../../hooks/use-persisted-order';
|
||||||
import {
|
import {
|
||||||
getDefaultOrder,
|
getDefaultOrder,
|
||||||
validateMarketState,
|
validateMarketState,
|
||||||
@ -43,7 +43,13 @@ export type DealTicketFormFields = OrderSubmissionBody['orderSubmission'] & {
|
|||||||
|
|
||||||
export const DealTicket = ({ market, submit }: DealTicketProps) => {
|
export const DealTicket = ({ market, submit }: DealTicketProps) => {
|
||||||
const { pubKey } = useVegaWallet();
|
const { pubKey } = useVegaWallet();
|
||||||
const [persistedOrder, setPersistedOrder] = usePersistedOrder(market);
|
// const [persistedOrder, setPersistedOrder] = usePersistedOrder(market);
|
||||||
|
const { getPersistedOrder, setPersistedOrder } = usePersistedOrderStore(
|
||||||
|
(store) => ({
|
||||||
|
getPersistedOrder: store.getOrder,
|
||||||
|
setPersistedOrder: store.setOrder,
|
||||||
|
})
|
||||||
|
);
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
control,
|
control,
|
||||||
@ -53,7 +59,7 @@ export const DealTicket = ({ market, submit }: DealTicketProps) => {
|
|||||||
clearErrors,
|
clearErrors,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<DealTicketFormFields>({
|
} = useForm<DealTicketFormFields>({
|
||||||
defaultValues: persistedOrder || getDefaultOrder(market),
|
defaultValues: getPersistedOrder(market.id) || getDefaultOrder(market),
|
||||||
});
|
});
|
||||||
|
|
||||||
const order = watch();
|
const order = watch();
|
||||||
|
@ -1,20 +1,43 @@
|
|||||||
import { useLocalStorage } from '@vegaprotocol/react-helpers';
|
|
||||||
import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
|
import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
|
||||||
import { useCallback, useMemo } from 'react';
|
import produce from 'immer';
|
||||||
|
import create from 'zustand';
|
||||||
|
import { persist } from 'zustand/middleware';
|
||||||
|
|
||||||
type OrderData = OrderSubmissionBody['orderSubmission'] | null;
|
type OrderData = OrderSubmissionBody['orderSubmission'] | null;
|
||||||
|
|
||||||
export const usePersistedOrder = (market: {
|
type PersistedOrderStore = {
|
||||||
id: string;
|
orders: OrderData[];
|
||||||
}): [OrderData, (value: OrderData) => void] => {
|
getOrder: (marketId: string) => OrderData | undefined;
|
||||||
const [value, setValue] = useLocalStorage(`deal-ticket-order-${market.id}`);
|
setOrder: (order: OrderData) => void;
|
||||||
const order = value != null ? (JSON.parse(value) as OrderData) : null;
|
clear: () => void;
|
||||||
const setOrder = useCallback(
|
|
||||||
(order: OrderData) => setValue(JSON.stringify(order)),
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
return useMemo<[OrderData, (value: OrderData) => void]>(
|
|
||||||
() => [order, setOrder],
|
|
||||||
[order, setOrder]
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const usePersistedOrderStore = create(
|
||||||
|
persist<PersistedOrderStore>(
|
||||||
|
(set, get) => ({
|
||||||
|
orders: [],
|
||||||
|
getOrder: (marketId) => {
|
||||||
|
const persisted = get().orders.find((o) => o?.marketId === marketId);
|
||||||
|
return persisted;
|
||||||
|
},
|
||||||
|
setOrder: (order) => {
|
||||||
|
set(
|
||||||
|
produce((store: PersistedOrderStore) => {
|
||||||
|
const persisted = store.orders.find(
|
||||||
|
(o) => o?.marketId === order?.marketId
|
||||||
|
);
|
||||||
|
if (persisted) {
|
||||||
|
Object.assign(persisted, order);
|
||||||
|
} else {
|
||||||
|
store.orders.push(order);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
clear: () => set({ orders: [] }),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'VEGA_DEAL_TICKET_ORDER_STORE',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user