Merge pull request #4905 from vegaprotocol/chore/update-develop-with-mainnet-fixes

chore(trading,deal-ticket,market-depth,ci): update develop with mainnet fixes

apps/trading/components/header/header.tsx

@@ -53,7 +53,7 @@ export const HeaderStat = ({
       <div data-testid="item-header" id={id}>
         {heading}
       </div>
-      <Tooltip description={description}>
+      <Tooltip description={description} underline>
         <div
           data-testid="item-value"
           aria-labelledby={id}

apps/trading/pages/styles.css

@@ -110,8 +110,8 @@ html [data-theme='light'] {
   --pennant-color-depth-sell-fill: theme(colors.market.red.DEFAULT);
   --pennant-color-depth-sell-stroke: theme(colors.market.red.650);
 
-  --pennant-color-volume-buy: theme(colors.market.green.300);
-  --pennant-color-volume-sell: theme(colors.market.red.300);
+  --pennant-color-volume-buy: theme(colors.market.green.DEFAULT);
+  --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 }
 
 html [data-theme='dark'] {
@@ -132,7 +132,7 @@ html [data-theme='dark'] {
   --pennant-color-depth-sell-stroke: theme(colors.market.red.DEFAULT);
 
   --pennant-color-volume-buy: theme(colors.market.green.600);
-  --pennant-color-volume-sell: theme(colors.market.red.650);
+  --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 }
 
 /**

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

@@ -12,6 +12,7 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as Schema from '@vegaprotocol/types';
 
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
@@ -37,14 +38,16 @@ export interface DealTicketFeeDetailsProps {
   assetSymbol: string;
   order: OrderSubmissionBody['orderSubmission'];
   market: Market;
+  isMarketInAuction?: boolean;
 }
 
 export const DealTicketFeeDetails = ({
   assetSymbol,
   order,
   market,
+  isMarketInAuction,
 }: DealTicketFeeDetailsProps) => {
-  const feeEstimate = useEstimateFees(order);
+  const feeEstimate = useEstimateFees(order, isMarketInAuction);
   const asset = getAsset(market);
   const { decimals: assetDecimals, quantum } = asset;
 
@@ -63,7 +66,7 @@ export const DealTicketFeeDetails = ({
         <>
           <span>
             {t(
-              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
+              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}. Fees estimated are "taker" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.`
             )}
           </span>
           <FeesBreakdown
@@ -86,6 +89,7 @@ export interface DealTicketMarginDetailsProps {
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   assetSymbol: string;
   positionEstimate: EstimatePositionQuery['estimatePosition'];
+  side: Schema.Side;
 }
 
 export const DealTicketMarginDetails = ({
@@ -95,6 +99,7 @@ export const DealTicketMarginDetails = ({
   market,
   onMarketClick,
   positionEstimate,
+  side,
 }: DealTicketMarginDetailsProps) => {
   const [breakdownDialog, setBreakdownDialog] = useState(false);
   const { pubKey: partyId } = useVegaWallet();
@@ -163,10 +168,7 @@ export const DealTicketMarginDetails = ({
             : '0',
           assetDecimals
         )}
-        formattedValue={formatRange(
-          deductionFromCollateralBestCase > 0
-            ? deductionFromCollateralBestCase.toString()
-            : '0',
+        formattedValue={formatValue(
           deductionFromCollateralWorstCase > 0
             ? deductionFromCollateralWorstCase.toString()
             : '0',
@@ -185,8 +187,7 @@ export const DealTicketMarginDetails = ({
           marginEstimate?.worstCase.initialLevel,
           assetDecimals
         )}
-        formattedValue={formatRange(
-          marginEstimate?.bestCase.initialLevel,
+        formattedValue={formatValue(
           marginEstimate?.worstCase.initialLevel,
           assetDecimals,
           quantum
@@ -198,6 +199,7 @@ export const DealTicketMarginDetails = ({
   }
 
   let liquidationPriceEstimate = emptyValue;
+  let liquidationPriceEstimateRange = emptyValue;
 
   if (liquidationEstimate) {
     const liquidationEstimateBestCaseIncludingBuyOrders = BigInt(
@@ -207,8 +209,7 @@ export const DealTicketMarginDetails = ({
       liquidationEstimate.bestCase.including_sell_orders.replace(/\..*/, '')
     );
     const liquidationEstimateBestCase =
-      liquidationEstimateBestCaseIncludingBuyOrders >
-      liquidationEstimateBestCaseIncludingSellOrders
+      side === Schema.Side.SIDE_BUY
         ? liquidationEstimateBestCaseIncludingBuyOrders
         : liquidationEstimateBestCaseIncludingSellOrders;
 
@@ -219,14 +220,19 @@ export const DealTicketMarginDetails = ({
       liquidationEstimate.worstCase.including_sell_orders.replace(/\..*/, '')
     );
     const liquidationEstimateWorstCase =
-      liquidationEstimateWorstCaseIncludingBuyOrders >
-      liquidationEstimateWorstCaseIncludingSellOrders
+      side === Schema.Side.SIDE_BUY
         ? liquidationEstimateWorstCaseIncludingBuyOrders
         : liquidationEstimateWorstCaseIncludingSellOrders;
 
     // The estimate order query API gives us the liquidation price in formatted by asset decimals.
     // We need to calculate it with asset decimals, but display it with market decimals precision until the API changes.
-    liquidationPriceEstimate = formatRange(
+    liquidationPriceEstimate = formatValue(
+      liquidationEstimateWorstCase.toString(),
+      assetDecimals,
+      undefined,
+      market.decimalPlaces
+    );
+    liquidationPriceEstimateRange = formatRange(
       (liquidationEstimateBestCase < liquidationEstimateWorstCase
         ? liquidationEstimateBestCase
         : liquidationEstimateWorstCase
@@ -249,7 +255,7 @@ export const DealTicketMarginDetails = ({
   const quoteName = getQuoteName(market);
 
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div className="flex flex-col w-full gap-2">
       <Accordion>
         <AccordionPanel
           itemId="margin"
@@ -265,7 +271,7 @@ export const DealTicketMarginDetails = ({
               <div
                 data-testid={`deal-ticket-fee-margin-required`}
                 key={'value-dropdown'}
-                className="flex items-center gap-2 justify-between w-full"
+                className="flex items-center justify-between w-full gap-2"
               >
                 <div className="flex items-center gap-1">
                   <Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
@@ -282,11 +288,9 @@ export const DealTicketMarginDetails = ({
                       assetDecimals
                     ) ?? '-'
                   }
-                  noUnderline
                 >
                   <div className="font-mono text-right">
-                    {formatRange(
-                      marginRequiredBestCase,
+                    {formatValue(
                       marginRequiredWorstCase,
                       assetDecimals,
                       quantum
@@ -298,7 +302,7 @@ export const DealTicketMarginDetails = ({
             </AccordionPrimitive.Trigger>
           }
         >
-          <div className="flex flex-col gap-2 w-full">
+          <div className="flex flex-col w-full gap-2">
             <KeyValue
               label={t('Total margin available')}
               indent
@@ -344,7 +348,7 @@ export const DealTicketMarginDetails = ({
       {projectedMargin}
       <KeyValue
         label={t('Liquidation')}
-        value={liquidationPriceEstimate}
+        value={liquidationPriceEstimateRange}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
         labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}

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

@@ -36,7 +36,12 @@ import {
   formatValue,
 } from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
-import { getAsset, getDerivedPrice, getQuoteName } from '@vegaprotocol/markets';
+import {
+  getAsset,
+  getDerivedPrice,
+  getQuoteName,
+  isMarketInAuction,
+} from '@vegaprotocol/markets';
 import {
   validateExpiration,
   validateMarketState,
@@ -182,6 +187,7 @@ export const DealTicket = ({
   const iceberg = watch('iceberg');
   const peakSize = watch('peakSize');
   const expiresAt = watch('expiresAt');
+  const postOnly = watch('postOnly');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -198,7 +204,7 @@ export const DealTicket = ({
   }, [storedFormValues, dealTicketType, rawPrice, setValue]);
 
   useEffect(() => {
-    const subscription = watch((value, { name, type }) => {
+    const subscription = watch((value) => {
       updateStoredFormValues(market.id, value);
     });
     return () => subscription.unsubscribe();
@@ -211,6 +217,7 @@ export const DealTicket = ({
       size: rawSize,
       timeInForce,
       type,
+      postOnly,
     },
     market.id,
     market.decimalPlaces,
@@ -219,8 +226,7 @@ export const DealTicket = ({
 
   const price =
     normalizedOrder &&
-    marketPrice &&
-    getDerivedPrice(normalizedOrder, marketPrice);
+    getDerivedPrice(normalizedOrder, marketPrice ?? undefined);
 
   const notionalSize = getNotionalSize(
     price,
@@ -459,7 +465,7 @@ export const DealTicket = ({
           )}
         />
       )}
-      <div className="mb-4 flex flex-col gap-2 w-full">
+      <div className="flex flex-col w-full mb-4 gap-2">
         <KeyValue
           label={t('Notional')}
           value={formatValue(notionalSize, market.decimalPlaces)}
@@ -473,6 +479,7 @@ export const DealTicket = ({
           }
           assetSymbol={assetSymbol}
           market={market}
+          isMarketInAuction={isMarketInAuction(marketData.marketTradingMode)}
         />
       </div>
       <Controller
@@ -675,6 +682,7 @@ export const DealTicket = ({
         )}
       </Button>
       <DealTicketMarginDetails
+        side={normalizedOrder.side}
         onMarketClick={onMarketClick}
         assetSymbol={asset.symbol}
         marginAccountBalance={marginAccountBalance}

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

@@ -47,7 +47,7 @@ export const KeyValue = ({
       <Tooltip description={labelDescription}>
         <div className="text-muted">{label}</div>
       </Tooltip>
-      <Tooltip description={`${value ?? '-'} ${symbol || ''}`} noUnderline>
+      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
         {valueElement}
       </Tooltip>
     </div>

libs/deal-ticket/src/hooks/use-estimate-fees.spec.tsx

@@ -0,0 +1,78 @@
+import { renderHook } from '@testing-library/react';
+import { useEstimateFees } from './use-estimate-fees';
+import { Side, OrderTimeInForce, OrderType } from '@vegaprotocol/types';
+
+import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
+
+const data: EstimateFeesQuery = {
+  estimateFees: {
+    totalFeeAmount: '12',
+    fees: {
+      infrastructureFee: '2',
+      liquidityFee: '4',
+      makerFee: '6',
+    },
+  },
+};
+
+const mockUseEstimateFeesQuery = jest.fn((...args) => ({
+  data,
+}));
+
+jest.mock('./__generated__/EstimateOrder', () => ({
+  ...jest.requireActual('@vegaprotocol/data-provider'),
+  useEstimateFeesQuery: jest.fn((...args) => mockUseEstimateFeesQuery(...args)),
+}));
+
+jest.mock('@vegaprotocol/wallet', () => ({
+  useVegaWallet: () => ({ pubKey: 'pubKey' }),
+}));
+
+describe('useEstimateFees', () => {
+  it('returns 0 as estimated values if order is postOnly', () => {
+    const { result } = renderHook(() =>
+      useEstimateFees({
+        marketId: 'marketId',
+        side: Side.SIDE_BUY,
+        size: '1',
+        price: '1',
+        timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+        type: OrderType.TYPE_LIMIT,
+        postOnly: true,
+      })
+    );
+    expect(result.current).toEqual({
+      totalFeeAmount: '0',
+      fees: {
+        infrastructureFee: '0',
+        liquidityFee: '0',
+        makerFee: '0',
+      },
+    });
+    expect(mockUseEstimateFeesQuery.mock.lastCall?.[0].skip).toBeTruthy();
+  });
+
+  it('divide values by 2 if market is in auction', () => {
+    const { result } = renderHook(() =>
+      useEstimateFees(
+        {
+          marketId: 'marketId',
+          side: Side.SIDE_BUY,
+          size: '1',
+          price: '1',
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+          type: OrderType.TYPE_LIMIT,
+        },
+        true
+      )
+    );
+    expect(result.current).toEqual({
+      totalFeeAmount: '6',
+      fees: {
+        infrastructureFee: '1',
+        liquidityFee: '2',
+        makerFee: '3',
+      },
+    });
+  });
+});

libs/deal-ticket/src/hooks/use-estimate-fees.tsx

@@ -1,13 +1,16 @@
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 
+import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
 import { useEstimateFeesQuery } from './__generated__/EstimateOrder';
 
-export const useEstimateFees = (
-  order?: OrderSubmissionBody['orderSubmission']
-) => {
-  const { pubKey } = useVegaWallet();
+const divideByTwo = (n: string) => (BigInt(n) / BigInt(2)).toString();
 
+export const useEstimateFees = (
+  order?: OrderSubmissionBody['orderSubmission'],
+  isMarketInAuction?: boolean
+): EstimateFeesQuery['estimateFees'] | undefined => {
+  const { pubKey } = useVegaWallet();
   const { data } = useEstimateFeesQuery({
     variables: order && {
       marketId: order.marketId,
@@ -19,7 +22,28 @@ export const useEstimateFees = (
       type: order.type,
     },
     fetchPolicy: 'no-cache',
-    skip: !pubKey || !order?.size || !order?.price,
+    skip: !pubKey || !order?.size || !order?.price || order.postOnly,
   });
-  return data?.estimateFees;
+  if (order?.postOnly) {
+    return {
+      totalFeeAmount: '0',
+      fees: {
+        infrastructureFee: '0',
+        liquidityFee: '0',
+        makerFee: '0',
+      },
+    };
+  }
+  return isMarketInAuction && data?.estimateFees
+    ? {
+        totalFeeAmount: divideByTwo(data.estimateFees.totalFeeAmount),
+        fees: {
+          infrastructureFee: divideByTwo(
+            data.estimateFees.fees.infrastructureFee
+          ),
+          liquidityFee: divideByTwo(data.estimateFees.fees.liquidityFee),
+          makerFee: divideByTwo(data.estimateFees.fees.makerFee),
+        },
+      }
+    : data?.estimateFees;
 };

libs/market-depth/src/lib/orderbook.tsx

@@ -175,7 +175,7 @@ export const Orderbook = ({
   );
 
   return (
-    <div className="h-full text-xs grid grid-rows-[1fr_min-content]">
+    <div className="h-full text-xs grid grid-rows-[1fr_min-content] overflow-hidden">
       <div>
         <ReactVirtualizedAutoSizer>
           {({ width, height }) => {

libs/markets/src/lib/components/fees-breakdown/fees-breakdown.tsx

@@ -60,6 +60,7 @@ export const FeesBreakdown = ({
     .plus(fees.infrastructureFee)
     .plus(fees.liquidityFee)
     .toString();
+  if (totalFees === '0') return null;
   const formatValue = (value: string | number | null | undefined): string => {
     return value && !isNaN(Number(value))
       ? addDecimalsFormatNumber(value, decimals)

libs/markets/src/lib/get-price.ts

@@ -33,7 +33,7 @@ export const getDerivedPrice = (
     type: Schema.OrderType;
     price?: string | undefined;
   },
-  marketPrice: string
+  marketPrice?: string
 ) => {
   // If order type is market we should use either the mark price
   // or the uncrossing price. If order type is limit use the price

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -19,14 +19,14 @@ export interface TooltipProps {
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
   sideOffset?: number;
-  noUnderline?: boolean;
+  underline?: boolean;
 }
 
-export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) =>
-  classNames(
-    { 'underline underline-offset-2': !noUnderline },
-    'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'
-  );
+export const TOOLTIP_TRIGGER_CLASS_NAME = (underline?: boolean) =>
+  classNames({
+    'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed':
+      underline,
+  });
 
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
@@ -36,12 +36,12 @@ export const Tooltip = ({
   sideOffset,
   align = 'start',
   side = 'bottom',
-  noUnderline,
+  underline,
 }: TooltipProps) =>
   description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
-        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(noUnderline)}>
+        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}>
           {children}
         </Trigger>
         {description && (