feat: #876 add explicit time in force labels (#877)

* feat: #876 add explicit time in force labels

* fix: update GTC and GTT

* fix: update GTC and GTT

* fix: deal ticket test update

libs/deal-ticket/src/components/deal-ticket.spec.tsx

@@ -7,8 +7,8 @@ import { addDecimal } from '@vegaprotocol/react-helpers';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import { DealTicket } from './deal-ticket';
 import type { DealTicketQuery_market } from './__generated__/DealTicketQuery';
-import type { Order } from '../utils/get-default-order';
 import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import type { Order } from '@vegaprotocol/orders';
 
 const market: DealTicketQuery_market = {
   __typename: 'Market',
@@ -59,109 +59,111 @@ function generateJsx(order?: Order) {
   );
 }
 
-it('Displays ticket defaults', () => {
+describe('DealTicket', () => {
-  render(generateJsx());
+  it('Displays ticket defaults', () => {
+    render(generateJsx());
 
-  // Assert defaults are used
+    // Assert defaults are used
-  expect(
+    expect(
-    screen.getByTestId(`order-type-${VegaWalletOrderType.Market}-selected`)
+      screen.getByTestId(`order-type-${VegaWalletOrderType.Market}-selected`)
-  ).toBeInTheDocument();
+    ).toBeInTheDocument();
-  expect(
+    expect(
-    screen.queryByTestId('order-side-SIDE_BUY-selected')
+      screen.queryByTestId('order-side-SIDE_BUY-selected')
-  ).toBeInTheDocument();
+    ).toBeInTheDocument();
-  expect(
+    expect(
-    screen.queryByTestId('order-side-SIDE_SELL-selected')
+      screen.queryByTestId('order-side-SIDE_SELL-selected')
-  ).not.toBeInTheDocument();
+    ).not.toBeInTheDocument();
-  expect(screen.getByTestId('order-size')).toHaveDisplayValue(
+    expect(screen.getByTestId('order-size')).toHaveDisplayValue(
-    String(1 / Math.pow(10, market.positionDecimalPlaces))
+      String(1 / Math.pow(10, market.positionDecimalPlaces))
-  );
+    );
-  expect(screen.getByTestId('order-tif')).toHaveValue(
+    expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.IOC
+      VegaWalletOrderTimeInForce.IOC
-  );
+    );
 
-  // Assert last price is shown
+    // Assert last price is shown
-  expect(screen.getByTestId('last-price')).toHaveTextContent(
+    expect(screen.getByTestId('last-price')).toHaveTextContent(
-    // eslint-disable-next-line
+      // eslint-disable-next-line
-    `~${addDecimal(market.depth.lastTrade!.price, market.decimalPlaces)} ${
+      `~${addDecimal(market.depth.lastTrade!.price, market.decimalPlaces)} ${
-      market.tradableInstrument.instrument.product.quoteName
+        market.tradableInstrument.instrument.product.quoteName
-    }`
+      }`
-  );
+    );
-});
+  });
 
-it('Can edit deal ticket', async () => {
+  it('Can edit deal ticket', async () => {
-  render(generateJsx());
+    render(generateJsx());
 
-  // BUY is selected by default
+    // BUY is selected by default
-  screen.getByTestId('order-side-SIDE_BUY-selected');
+    screen.getByTestId('order-side-SIDE_BUY-selected');
 
-  await act(async () => {
+    await act(async () => {
-    fireEvent.change(screen.getByTestId('order-size'), {
+      fireEvent.change(screen.getByTestId('order-size'), {
-      target: { value: '200' },
+        target: { value: '200' },
+      });
     });
+
+    expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
+
+    fireEvent.change(screen.getByTestId('order-tif'), {
+      target: { value: VegaWalletOrderTimeInForce.IOC },
+    });
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      VegaWalletOrderTimeInForce.IOC
+    );
+
+    // Switch to limit order
+    fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
+
+    // Assert price input shown with default value
+    expect(screen.getByTestId('order-price')).toHaveDisplayValue('0');
+
+    // Check all TIF options shown
+    expect(screen.getByTestId('order-tif').children).toHaveLength(
+      Object.keys(VegaWalletOrderTimeInForce).length
+    );
   });
 
-  expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
+  it('Handles TIF select box dependent on order type', () => {
+    render(generateJsx());
 
-  fireEvent.change(screen.getByTestId('order-tif'), {
+    // Check only IOC and
-    target: { value: VegaWalletOrderTimeInForce.IOC },
+    expect(
+      Array.from(screen.getByTestId('order-tif').children).map(
+        (o) => o.textContent
+      )
+    ).toEqual(['Immediate or Cancel (IOC)', 'Fill or Kill (FOK)']);
+
+    // Switch to limit order and check all TIF options shown
+    fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
+    expect(screen.getByTestId('order-tif').children).toHaveLength(
+      Object.keys(VegaWalletOrderTimeInForce).length
+    );
+
+    // Change to GTC
+    fireEvent.change(screen.getByTestId('order-tif'), {
+      target: { value: VegaWalletOrderTimeInForce.GTC },
+    });
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      VegaWalletOrderTimeInForce.GTC
+    );
+
+    // Switch back to market order and TIF should now be IOC
+    fireEvent.click(screen.getByTestId('order-type-TYPE_MARKET'));
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      VegaWalletOrderTimeInForce.IOC
+    );
+
+    // Switch tif to FOK
+    fireEvent.change(screen.getByTestId('order-tif'), {
+      target: { value: VegaWalletOrderTimeInForce.FOK },
+    });
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      VegaWalletOrderTimeInForce.FOK
+    );
+
+    // Change back to limit and check we are still on FOK
+    fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      VegaWalletOrderTimeInForce.FOK
+    );
   });
-  expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.IOC
-  );
-
-  // Switch to limit order
-  fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
-
-  // Assert price input shown with default value
-  expect(screen.getByTestId('order-price')).toHaveDisplayValue('0');
-
-  // Check all TIF options shown
-  expect(screen.getByTestId('order-tif').children).toHaveLength(
-    Object.keys(VegaWalletOrderTimeInForce).length
-  );
-});
-
-it('Handles TIF select box dependent on order type', () => {
-  render(generateJsx());
-
-  // Check only IOC and
-  expect(
-    Array.from(screen.getByTestId('order-tif').children).map(
-      (o) => o.textContent
-    )
-  ).toEqual(['IOC', 'FOK']);
-
-  // Switch to limit order and check all TIF options shown
-  fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
-  expect(screen.getByTestId('order-tif').children).toHaveLength(
-    Object.keys(VegaWalletOrderTimeInForce).length
-  );
-
-  // Change to GTC
-  fireEvent.change(screen.getByTestId('order-tif'), {
-    target: { value: VegaWalletOrderTimeInForce.GTC },
-  });
-  expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.GTC
-  );
-
-  // Switch back to market order and TIF should now be IOC
-  fireEvent.click(screen.getByTestId('order-type-TYPE_MARKET'));
-  expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.IOC
-  );
-
-  // Switch tif to FOK
-  fireEvent.change(screen.getByTestId('order-tif'), {
-    target: { value: VegaWalletOrderTimeInForce.FOK },
-  });
-  expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.FOK
-  );
-
-  // Change back to limit and check we are still on FOK
-  fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
-  expect(screen.getByTestId('order-tif')).toHaveValue(
-    VegaWalletOrderTimeInForce.FOK
-  );
 });

libs/deal-ticket/src/components/time-in-force-selector.tsx

@@ -11,6 +11,26 @@ interface TimeInForceSelectorProps {
   onSelect: (tif: VegaWalletOrderTimeInForce) => void;
 }
 
+// More detail in https://docs.vega.xyz/docs/mainnet/graphql/enums/order-time-in-force
+export const timeInForceLabel = (tif: string) => {
+  switch (tif) {
+    case VegaWalletOrderTimeInForce.GTC:
+      return t(`Good 'til Cancelled`);
+    case VegaWalletOrderTimeInForce.IOC:
+      return t('Immediate or Cancel');
+    case VegaWalletOrderTimeInForce.FOK:
+      return t('Fill or Kill');
+    case VegaWalletOrderTimeInForce.GTT:
+      return t(`Good 'til Time`);
+    case VegaWalletOrderTimeInForce.GFN:
+      return t('Good for Normal');
+    case VegaWalletOrderTimeInForce.GFA:
+      return t('Good for Auction');
+    default:
+      return t(tif);
+  }
+};
+
 export const TimeInForceSelector = ({
   value,
   orderType,
@@ -37,7 +57,7 @@ export const TimeInForceSelector = ({
         {options.map(([key, value]) => {
           return (
             <option key={key} value={value}>
-              {key}
+              {`${timeInForceLabel(value)} (${key})`}
             </option>
           );
         })}