feat(deal-ticket): make margin values section expandable (#4664)

apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts

@@ -24,6 +24,9 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
   beforeEach(() => {
     cy.mockTradingPage();
+    cy.getByTestId('deal-ticket-fee-margin-required').within(() => {
+      cy.get('button').click();
+    });
   });
 
   describe('limit order', () => {

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

@@ -12,6 +12,8 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
+import * as Accordion from '@radix-ui/react-accordion';
+
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
   DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
@@ -22,6 +24,7 @@ import {
 } from '../../constants';
 import { useEstimateFees } from '../../hooks';
 import { KeyValue } from './key-value';
+import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit';
 
 const emptyValue = '-';
 
@@ -244,55 +247,72 @@ export const DealTicketMarginDetails = ({
 
   return (
     <>
-      <KeyValue
+      <Accordion.Root type="single" collapsible>
-        label={t('Margin required')}
+        <Accordion.Item value="margin">
-        value={formatRange(
+          <KeyValue
-          marginRequiredBestCase,
+            id="margin-required"
-          marginRequiredWorstCase,
+            label={
-          assetDecimals
+              <Accordion.Trigger className={TOOLTIP_TRIGGER_CLASS_NAME}>
-        )}
+                {t('Margin required')}
-        formattedValue={formatRange(
+              </Accordion.Trigger>
-          marginRequiredBestCase,
+            }
-          marginRequiredWorstCase,
+            value={formatRange(
-          assetDecimals,
+              marginRequiredBestCase,
-          quantum
+              marginRequiredWorstCase,
-        )}
+              assetDecimals
-        labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
+            )}
-        symbol={assetSymbol}
+            formattedValue={formatRange(
-      />
+              marginRequiredBestCase,
-      <KeyValue
+              marginRequiredWorstCase,
-        label={t('Total margin available')}
+              assetDecimals,
-        indent
+              quantum
-        value={formatValue(totalMarginAvailable, assetDecimals)}
+            )}
-        formattedValue={formatValue(
+            labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
-          totalMarginAvailable,
+            symbol={assetSymbol}
-          assetDecimals,
+          />
-          quantum
+          <Accordion.Content>
-        )}
+            <KeyValue
-        symbol={assetSymbol}
+              label={t('Total margin available')}
-        labelDescription={TOTAL_MARGIN_AVAILABLE(
+              indent
-          formatValue(generalAccountBalance, assetDecimals, quantum),
+              value={formatValue(totalMarginAvailable, assetDecimals)}
-          formatValue(marginAccountBalance, assetDecimals, quantum),
+              formattedValue={formatValue(
-          formatValue(currentMargins?.maintenanceLevel, assetDecimals, quantum),
+                totalMarginAvailable,
-          assetSymbol
+                assetDecimals,
-        )}
+                quantum
-      />
+              )}
-      {deductionFromCollateral}
+              symbol={assetSymbol}
-      <KeyValue
+              labelDescription={TOTAL_MARGIN_AVAILABLE(
-        label={t('Current margin allocation')}
+                formatValue(generalAccountBalance, assetDecimals, quantum),
-        indent
+                formatValue(marginAccountBalance, assetDecimals, quantum),
-        onClick={
+                formatValue(
-          generalAccountBalance ? () => setBreakdownDialog(true) : undefined
+                  currentMargins?.maintenanceLevel,
-        }
+                  assetDecimals,
-        value={formatValue(marginAccountBalance, assetDecimals)}
+                  quantum
-        symbol={assetSymbol}
+                ),
-        labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
+                assetSymbol
-        formattedValue={formatValue(
+              )}
-          marginAccountBalance,
+            />
-          assetDecimals,
+            {deductionFromCollateral}
-          quantum
+            <KeyValue
-        )}
+              label={t('Current margin allocation')}
-      />
+              indent
+              onClick={
+                generalAccountBalance
+                  ? () => setBreakdownDialog(true)
+                  : undefined
+              }
+              value={formatValue(marginAccountBalance, assetDecimals)}
+              symbol={assetSymbol}
+              labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
+              formattedValue={formatValue(
+                marginAccountBalance,
+                assetDecimals,
+                quantum
+              )}
+            />
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
       {projectedMargin}
       <KeyValue
         label={t('Liquidation price estimate')}

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

@@ -3,7 +3,8 @@ import classnames from 'classnames';
 import type { ReactNode } from 'react';
 
 export interface KeyValuePros {
-  label: string;
+  id?: string;
+  label: ReactNode;
   value?: string | null | undefined;
   symbol: string;
   indent?: boolean | undefined;
@@ -13,6 +14,7 @@ export interface KeyValuePros {
 }
 
 export const KeyValue = ({
+  id,
   label,
   value,
   labelDescription,
@@ -31,9 +33,11 @@ export const KeyValue = ({
   );
   return (
     <div
-      data-testid={
+      data-testid={`deal-ticket-fee-${
-        'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
+        !id && typeof label === 'string'
-      }
+          ? label.toLocaleLowerCase().replace(/\s/g, '-')
+          : id
+      }`}
       key={typeof label === 'string' ? label : 'value-dropdown'}
       className={classnames(
         'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',

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

@@ -20,6 +20,9 @@ export interface TooltipProps {
   sideOffset?: number;
 }
 
+export const TOOLTIP_TRIGGER_CLASS_NAME =
+  'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed';
+
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
   children,
@@ -32,10 +35,7 @@ export const Tooltip = ({
   description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
-        <Trigger
+        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME}>
-          asChild
-          className="underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed"
-        >
           {children}
         </Trigger>
         {description && (