chore(deal-ticket): re-enable margin estimates for perps (#5317)

vegaprotocol · Nov 20, 2023 · d9dc43b · d9dc43b
1 parent 06a6fe6
commit d9dc43b
Showing 1 changed file with 87 additions and 102 deletions.
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
-import { getAsset, getProductType, getQuoteName } from '@vegaprotocol/markets';
+import { getAsset, getQuoteName } from '@vegaprotocol/markets';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
@@ -151,6 +151,7 @@ export const DealTicketMarginDetails = ({
   const { decimals: assetDecimals, quantum } = asset;
   let marginRequiredBestCase: string | undefined = undefined;
   let marginRequiredWorstCase: string | undefined = undefined;
+
   if (marginEstimate) {
     if (currentMargins) {
       marginRequiredBestCase = (
@@ -286,115 +287,99 @@ export const DealTicketMarginDetails = ({
   );
 
   const quoteName = getQuoteName(market);
-  const productType = getProductType(market);
 
   return (
     <div className="flex flex-col w-full gap-2 pt-2">
-      {/*
-      TODO: remove this conditional check once the following PRs are deployed
-      and the estimatePosition query is working for perps
+      <Accordion>
+        <AccordionPanel
+          itemId="margin"
+          trigger={
+            <AccordionPrimitive.Trigger
+              data-testid="accordion-toggle"
+              className={classNames(
+                'w-full',
+                'flex items-center gap-2 text-xs',
+                'group'
+              )}
+            >
+              <div
+                data-testid={`deal-ticket-fee-margin-required`}
+                key={'value-dropdown'}
+                className="flex items-center justify-between w-full gap-2"
+              >
+                <div className="flex items-center text-left gap-1">
+                  <Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
+                    <span className="text-muted">{t('Margin required')}</span>
+                  </Tooltip>
 
-      - https://github.com/vegaprotocol/vega/pull/10119
-      - https://github.com/vegaprotocol/vega/pull/10122
-      */}
-      {productType === 'Future' && (
-        <>
-          <Accordion>
-            <AccordionPanel
-              itemId="margin"
-              trigger={
-                <AccordionPrimitive.Trigger
-                  data-testid="accordion-toggle"
-                  className={classNames(
-                    'w-full',
-                    'flex items-center gap-2 text-xs',
-                    'group'
-                  )}
+                  <AccordionChevron size={10} />
+                </div>
+                <Tooltip
+                  description={
+                    formatRange(
+                      marginRequiredBestCase,
+                      marginRequiredWorstCase,
+                      assetDecimals
+                    ) ?? '-'
+                  }
                 >
-                  <div
-                    data-testid={`deal-ticket-fee-margin-required`}
-                    key={'value-dropdown'}
-                    className="flex items-center justify-between w-full gap-2"
-                  >
-                    <div className="flex items-center text-left gap-1">
-                      <Tooltip
-                        description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
-                      >
-                        <span className="text-muted">
-                          {t('Margin required')}
-                        </span>
-                      </Tooltip>
-
-                      <AccordionChevron size={10} />
-                    </div>
-                    <Tooltip
-                      description={
-                        formatRange(
-                          marginRequiredBestCase,
-                          marginRequiredWorstCase,
-                          assetDecimals
-                        ) ?? '-'
-                      }
-                    >
-                      <div className="font-mono text-right">
-                        {formatValue(
-                          marginRequiredWorstCase,
-                          assetDecimals,
-                          quantum
-                        )}{' '}
-                        {assetSymbol || ''}
-                      </div>
-                    </Tooltip>
-                  </div>
-                </AccordionPrimitive.Trigger>
-              }
-            >
-              <div className="flex flex-col w-full gap-2">
-                <KeyValue
-                  label={t('Total margin available')}
-                  indent
-                  value={formatValue(totalMarginAvailable, assetDecimals)}
-                  formattedValue={formatValue(
-                    totalMarginAvailable,
-                    assetDecimals,
-                    quantum
-                  )}
-                  symbol={assetSymbol}
-                  labelDescription={TOTAL_MARGIN_AVAILABLE(
-                    formatValue(generalAccountBalance, assetDecimals, quantum),
-                    formatValue(marginAccountBalance, assetDecimals, quantum),
-                    formatValue(
-                      currentMargins?.maintenanceLevel,
+                  <div className="font-mono text-right">
+                    {formatValue(
+                      marginRequiredWorstCase,
                       assetDecimals,
                       quantum
-                    ),
-                    assetSymbol
-                  )}
-                />
-                {deductionFromCollateral}
-                <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
-                  )}
-                />
+                    )}{' '}
+                    {assetSymbol || ''}
+                  </div>
+                </Tooltip>
               </div>
-            </AccordionPanel>
-          </Accordion>
-          {projectedMargin}
-        </>
-      )}
+            </AccordionPrimitive.Trigger>
+          }
+        >
+          <div className="flex flex-col w-full gap-2">
+            <KeyValue
+              label={t('Total margin available')}
+              indent
+              value={formatValue(totalMarginAvailable, assetDecimals)}
+              formattedValue={formatValue(
+                totalMarginAvailable,
+                assetDecimals,
+                quantum
+              )}
+              symbol={assetSymbol}
+              labelDescription={TOTAL_MARGIN_AVAILABLE(
+                formatValue(generalAccountBalance, assetDecimals, quantum),
+                formatValue(marginAccountBalance, assetDecimals, quantum),
+                formatValue(
+                  currentMargins?.maintenanceLevel,
+                  assetDecimals,
+                  quantum
+                ),
+                assetSymbol
+              )}
+            />
+            {deductionFromCollateral}
+            <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
+              )}
+            />
+          </div>
+        </AccordionPanel>
+      </Accordion>
+      {projectedMargin}
       <KeyValue
         label={t('Liquidation')}
         value={liquidationPriceEstimateRange}