fix: comment margin breakdown

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

@@ -0,0 +1,70 @@
+import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+
+export interface MarginLevels {
+  initialLevel?: string;
+  searchLevel?: string;
+  maintenanceLevel?: string;
+  collateralReleaseLevel?: string;
+}
+
+export const MarginBreakdown = ({
+  marginLevels,
+  assetDecimalPlaces,
+  assetSymbol,
+}: {
+  marginLevels?: MarginLevels;
+  assetDecimalPlaces: number;
+  assetSymbol: string;
+}) => {
+  if (!marginLevels) return null;
+  const formatNumberWithAssetDp = (value: string | number | null | undefined) =>
+    value && !isNaN(Number(value))
+      ? `${addDecimalsFormatNumber(value, assetDecimalPlaces)} ${assetSymbol}`
+      : '-';
+
+  return (
+    <dl className="grid grid-cols-8">
+      <Tooltip
+        description={t(
+          'This is the minimum margin required for a party to place a new order on the network'
+        )}
+      >
+        {<dt className="col-span-3">{t('Initial level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.initialLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'If the margin is between maintenance and search, the network will initiate a collateral search'
+        )}
+      >
+        {<dt className="col-span-3">{t('Search level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.searchLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'Minimal margin for the position to be maintained in the network'
+        )}
+      >
+        {<dt className="col-span-3">{t('Maintenance level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.maintenanceLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'If the margin of the party is greater than this level, then collateral will be released from the margin account into the general account of the party for the given asset.'
+        )}
+      >
+        {<dt className="col-span-3">{t('Collateral release level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.collateralReleaseLevel)}
+      </dd>
+    </dl>
+  );
+};

libs/deal-ticket/src/hooks/EstimateOrder.graphql

@@ -24,7 +24,35 @@ query EstimateOrder(
       liquidityFee
     }
     marginLevels {
+      market {
+        id
+        state
+        tradableInstrument {
+          instrument {
+            code
+            name
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+      }
+      asset {
+        id
+        name
+      }
+      party {
+        id
+      }
       initialLevel
+      searchLevel
+      maintenanceLevel
+      collateralReleaseLevel
+      timestamp
     }
     totalFeeAmount
   }

libs/deal-ticket/src/hooks/__generated__/EstimateOrder.ts

@@ -15,7 +15,7 @@ export type EstimateOrderQueryVariables = Types.Exact<{
 }>;
 
 
-export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', totalFeeAmount: string, fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string } } };
+export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', totalFeeAmount: string, fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string, searchLevel: string, maintenanceLevel: string, collateralReleaseLevel: string, timestamp: any, market: { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, name: string }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null } }, asset: { __typename?: 'Asset', id: string, name: string }, party: { __typename?: 'Party', id: string } } } };
 
 
 export const EstimateOrderDocument = gql`
@@ -36,7 +36,35 @@ export const EstimateOrderDocument = gql`
       liquidityFee
     }
     marginLevels {
+      market {
+        id
+        state
+        tradableInstrument {
+          instrument {
+            code
+            name
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+      }
+      asset {
+        id
+        name
+      }
+      party {
+        id
+      }
       initialLevel
+      searchLevel
+      maintenanceLevel
+      collateralReleaseLevel
+      timestamp
     }
     totalFeeAmount
   }

libs/deal-ticket/src/hooks/use-fee-deal-ticket-details.tsx

@@ -21,6 +21,8 @@ import { useOrderCloseOut } from './use-order-closeout';
 import { useOrderMargin } from './use-order-margin';
 import type { OrderMargin } from './use-order-margin';
 import { getDerivedPrice } from '../utils/get-price';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import { MarginBreakdown } from '../components/margin-levels/margin-levels';
 
 export const useFeeDealTicketDetails = (
   order: OrderSubmissionBody['orderSubmission'],
@@ -148,6 +150,7 @@ export const getFeeDetailsValues = ({
               `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
             )}
           </span>
+
           <FeesBreakdown
             fees={estMargin?.fees}
             feeFactors={market.fees.factors}
@@ -159,16 +162,31 @@ export const getFeeDetailsValues = ({
       symbol: assetSymbol,
     },
     {
-      label: t('Margin'),
+      label: (
+        <div className="flex items-center gap-2">
+          <span>{t('Margin')} </span>
+          <Icon name="chevron-down" size={3} />
+        </div>
+      ),
       value:
         estMargin?.margin && `~${formatValueWithAssetDp(estMargin?.margin)}`,
       symbol: assetSymbol,
-      labelDescription: EST_MARGIN_TOOLTIP_TEXT(assetSymbol),
+      labelDescription: (
+        <>
+          <span>{EST_MARGIN_TOOLTIP_TEXT(assetSymbol)}</span>
+          {/* <span></span>
+          <MarginBreakdown
+            marginLevels={estMargin?.marginLevels}
+            assetDecimalPlaces={assetDecimals}
+            assetSymbol={assetSymbol}
+          /> */}
+        </>
+      ),
     },
     {
       label: t('Liquidation'),
       value: estCloseOut && `~${formatValueWithMarketDp(estCloseOut)}`,
-      symbol: market.tradableInstrument.instrument.product.quoteName,
+      symbol: quoteName,
       labelDescription: EST_CLOSEOUT_TOOLTIP_TEXT(quoteName),
     },
   ];

libs/deal-ticket/src/hooks/use-order-margin.ts

@@ -6,6 +6,7 @@ import { useMarketPositions } from './use-market-positions';
 import { useEstimateOrderQuery } from './__generated__/EstimateOrder';
 import type { Market, MarketData } from '@vegaprotocol/market-list';
 import { getDerivedPrice } from '../utils/get-price';
+import type { MarginLevels } from './use-fee-deal-ticket-details';
 
 export interface Props {
   order: OrderSubmissionBody['orderSubmission'];
@@ -23,6 +24,7 @@ export interface OrderMargin {
     liquidityFee: string;
     infrastructureFee: string;
   };
+  marginLevels: MarginLevels;
 }
 
 export const useOrderMargin = ({
@@ -50,7 +52,12 @@ export const useOrderMargin = ({
   });
   const { makerFee, liquidityFee, infrastructureFee } = data?.estimateOrder
     .fee || { makerFee: '', liquidityFee: '', infrastructureFee: '' };
-  const { initialLevel } = data?.estimateOrder.marginLevels ?? {};
+  const {
+    initialLevel,
+    searchLevel,
+    maintenanceLevel,
+    collateralReleaseLevel,
+  } = data?.estimateOrder.marginLevels ?? {};
   return useMemo(() => {
     if (initialLevel) {
       const margin = BigNumber.maximum(
@@ -63,6 +70,12 @@ export const useOrderMargin = ({
         .toString();
       return {
         margin,
+        marginLevels: {
+          searchLevel,
+          maintenanceLevel,
+          collateralReleaseLevel,
+          initialLevel,
+        },
         totalFees: fees,
         fees: {
           makerFee,
@@ -72,5 +85,14 @@ export const useOrderMargin = ({
       };
     }
     return null;
-  }, [initialLevel, makerFee, liquidityFee, infrastructureFee, balance]);
+  }, [
+    initialLevel,
+    balance,
+    makerFee,
+    liquidityFee,
+    infrastructureFee,
+    searchLevel,
+    maintenanceLevel,
+    collateralReleaseLevel,
+  ]);
 };