Fix/1763 trade futures (#1948)

* feat: #1763 display the product type in select market lists

* fix: #1763 add on top of deal ticket button notice that you are buying product type contracts

* fix: #1763 remove message above deal-ticket button

* fix: #1763 left align product type title

* fix: #1763 header align left for product type

apps/trading/components/select-market/select-market-columns.tsx

@@ -86,6 +86,7 @@ export enum ColumnKind {
   LastPrice,
   Change24,
   Asset,
+  ProductType,
   Sparkline,
   High24,
   Low24,
@@ -111,6 +112,12 @@ const headers: Column[] = [
     className: cellClassNames,
     onlyOnDetailed: false,
   },
+  {
+    kind: ColumnKind.ProductType,
+    value: t('Type'),
+    className: `py-2 text-left hidden sm:table-cell`,
+    onlyOnDetailed: false,
+  },
   {
     kind: ColumnKind.LastPrice,
     value: t('Last price'),
@@ -231,6 +238,12 @@ export const columns = (
       className: cellClassNames,
       onlyOnDetailed: false,
     },
+    {
+      kind: ColumnKind.ProductType,
+      value: market.tradableInstrument.instrument.product.__typename,
+      className: `py-2 text-left hidden sm:table-cell`,
+      onlyOnDetailed: false,
+    },
     {
       kind: ColumnKind.LastPrice,
       value: market.data?.markPrice ? (
@@ -406,6 +419,12 @@ export const columnsPositionMarkets = (
       className: cellClassNames,
       onlyOnDetailed: false,
     },
+    {
+      kind: ColumnKind.ProductType,
+      value: market.tradableInstrument.instrument.product.__typename,
+      className: `py-2 first:text-left hidden sm:table-cell`,
+      onlyOnDetailed: false,
+    },
     {
       kind: ColumnKind.LastPrice,
       value: market.data?.markPrice ? (

apps/trading/components/select-market/select-market-table.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
-import type { Column } from './select-market-columns';
+
 import { columnHeaders } from './select-market-columns';
 
+import type { Column } from './select-market-columns';
+
 export const SelectMarketTableHeader = ({
   detailed = false,
   headers = columnHeaders,

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

@@ -1,10 +1,11 @@
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
-import type { DealTicketErrorMessage } from './deal-ticket-error';
+import { Button } from '@vegaprotocol/ui-toolkit';
-import { DealTicketError } from './deal-ticket-error';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { DEAL_TICKET_SECTION } from '../constants';
 
+import { DEAL_TICKET_SECTION } from '../constants';
+import { DealTicketError } from './deal-ticket-error';
+
+import type { DealTicketErrorMessage } from './deal-ticket-error';
 interface Props {
   transactionStatus: 'default' | 'pending';
   isDisabled: boolean;

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -1,10 +1,12 @@
-import { FormGroup, Input, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { formatNumber, t, toDecimal } from '@vegaprotocol/react-helpers';
-import type { DealTicketAmountProps } from './deal-ticket-amount';
+import { FormGroup, Input, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { validateSize } from '../deal-ticket-validation/validate-size';
+
-import { isMarketInAuction } from '../deal-ticket-validation/use-order-validation';
-import { DealTicketError } from './deal-ticket-error';
 import { DEAL_TICKET_SECTION } from '../constants';
+import { isMarketInAuction } from '../deal-ticket-validation/use-order-validation';
+import { validateSize } from '../deal-ticket-validation/validate-size';
+import { DealTicketError } from './deal-ticket-error';
+
+import type { DealTicketAmountProps } from './deal-ticket-amount';
 
 export type DealTicketMarketAmountProps = Omit<
   DealTicketAmountProps,
@@ -55,7 +57,7 @@ export const DealTicketMarketAmount = ({
                 'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
               )}
             >
-              <div className="absolute top-0 right-0 text-sm">
+              <div className="absolute top-0 right-0 text-xs">
                 {t(`Estimated uncrossing price`)}
               </div>
             </Tooltip>

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

@@ -1,25 +1,27 @@
-import { useCallback, useEffect, useState } from 'react';
+import { addDecimal, removeDecimal } from '@vegaprotocol/react-helpers';
-import { useForm, Controller } from 'react-hook-form';
-import { removeDecimal, addDecimal } from '@vegaprotocol/react-helpers';
-import { TypeSelector } from './type-selector';
-import { SideSelector } from './side-selector';
-import { DealTicketAmount } from './deal-ticket-amount';
-import { TimeInForceSelector } from './time-in-force-selector';
-import type { DealTicketMarketFragment } from './__generated___/DealTicket';
-import { ExpirySelector } from './expiry-selector';
-import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { Schema } from '@vegaprotocol/types';
+import { useCallback, useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import {
+  getFeeDetailsValues,
+  useFeeDealTicketDetails,
+} from '../../hooks/use-fee-deal-ticket-details';
 import { getDefaultOrder } from '../deal-ticket-validation';
 import {
   isMarketInAuction,
   useOrderValidation,
 } from '../deal-ticket-validation/use-order-validation';
-import { DealTicketFeeDetails } from './deal-ticket-fee-details';
+import { DealTicketAmount } from './deal-ticket-amount';
-import {
-  useFeeDealTicketDetails,
-  getFeeDetailsValues,
-} from '../../hooks/use-fee-deal-ticket-details';
 import { DealTicketButton } from './deal-ticket-button';
+import { DealTicketFeeDetails } from './deal-ticket-fee-details';
+import { ExpirySelector } from './expiry-selector';
+import { SideSelector } from './side-selector';
+import { TimeInForceSelector } from './time-in-force-selector';
+import { TypeSelector } from './type-selector';
+
+import type { DealTicketMarketFragment } from './__generated___/DealTicket';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import type { DealTicketErrorMessage } from './deal-ticket-error';
 
 export type TransactionStatus = 'default' | 'pending';