From 4b7338ed943c6f1ad9cfe959aa9040059744992b Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Fri, 17 Nov 2023 10:33:24 -0800
Subject: [PATCH] chore(deal-ticket,markets): dont show margin estimate for
 perps (#5305)

---
 .../deal-ticket/deal-ticket-fee-details.tsx   | 190 ++++++++++--------
 libs/markets/src/lib/market-utils.ts          |  16 ++
 2 files changed, 119 insertions(+), 87 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
index 075d3225f..e7b2cfb10 100644
--- 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, getQuoteName } from '@vegaprotocol/markets';
+import { getAsset, getProductType, getQuoteName } from '@vegaprotocol/markets';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
@@ -286,99 +286,115 @@ export const DealTicketMarginDetails = ({
   );
 
   const quoteName = getQuoteName(market);
+  const productType = getProductType(market);
 
   return (
-    <div className="flex flex-col w-full gap-2">
-      <Accordion>
-        <AccordionPanel
-          itemId="margin"
-          trigger={
-            <AccordionPrimitive.Trigger
-              data-testid="accordion-toggle"
-              className={classNames(
-                'w-full pt-2',
-                '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>
+    <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
 
-                  <AccordionChevron size={10} />
-                </div>
-                <Tooltip
-                  description={
-                    formatRange(
-                      marginRequiredBestCase,
-                      marginRequiredWorstCase,
-                      assetDecimals
-                    ) ?? '-'
-                  }
+      - 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'
+                  )}
                 >
-                  <div className="font-mono text-right">
-                    {formatValue(
-                      marginRequiredWorstCase,
+                  <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,
                       assetDecimals,
                       quantum
-                    )}{' '}
-                    {assetSymbol || ''}
-                  </div>
-                </Tooltip>
+                    ),
+                    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>
-            </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}
+            </AccordionPanel>
+          </Accordion>
+          {projectedMargin}
+        </>
+      )}
       <KeyValue
         label={t('Liquidation')}
         value={liquidationPriceEstimateRange}
diff --git a/libs/markets/src/lib/market-utils.ts b/libs/markets/src/lib/market-utils.ts
index dd21f2027..c83ed0b95 100644
--- a/libs/markets/src/lib/market-utils.ts
+++ b/libs/markets/src/lib/market-utils.ts
@@ -28,6 +28,22 @@ export const getAsset = (market: Partial<Market>) => {
   throw new Error('Failed to retrieve asset. Invalid product type');
 };
 
+export const getProductType = (market: Partial<Market>) => {
+  if (!market.tradableInstrument?.instrument.product) {
+    throw new Error(
+      'Failed to retrieve product type. Invalid tradable instrument'
+    );
+  }
+
+  const type = market.tradableInstrument.instrument.product.__typename;
+
+  if (!type) {
+    throw new Error('Failed to retrieve asset. Invalid product type');
+  }
+
+  return type;
+};
+
 export const getQuoteName = (market: Partial<Market>) => {
   if (!market.tradableInstrument?.instrument.product) {
     throw new Error(