fix(trading): fix symbol on order estimates (#2827)

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

@@ -452,7 +452,7 @@ describe('limit order validations', { tags: '@smoke' }, () => {
     //7002-SORD-018
     cy.getByTestId(orderPriceField)
       .siblings('label')
-      .should('have.text', 'Price (tBTC)');
+      .should('have.text', 'Price (BTC)');
   });
 
   it('must see warning when placing an order with expiry date in past', () => {

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

@@ -16,7 +16,7 @@ export interface DealTicketFeeDetails {
   label: string;
   value?: string | number | null;
   labelDescription?: string | ReactNode;
-  quoteName?: string;
+  symbol?: string;
 }
 
 export const DealTicketFeeDetails = ({
@@ -27,7 +27,7 @@ export const DealTicketFeeDetails = ({
   const details = getFeeDetailsValues(feeDetails);
   return (
     <div>
-      {details.map(({ label, value, labelDescription, quoteName }) => (
+      {details.map(({ label, value, labelDescription, symbol }) => (
         <div
           key={label}
           className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap"
@@ -39,7 +39,7 @@ export const DealTicketFeeDetails = ({
           </div>
           <div className="text-neutral-500 dark:text-neutral-300">{`${
             value ?? '-'
-          } ${quoteName || ''}`}</div>
+          } ${symbol || ''}`}</div>
         </div>
       ))}
     </div>

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

@@ -15,8 +15,7 @@ export const DealTicketLimitAmount = ({
 }: DealTicketLimitAmountProps) => {
   const priceStep = toDecimal(market?.decimalPlaces);
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const quoteName =
-    market.tradableInstrument.instrument.product.settlementAsset.symbol;
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
 
   const renderError = () => {
     if (sizeError) {

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

@@ -19,8 +19,7 @@ export const DealTicketMarketAmount = ({
   market,
   sizeError,
 }: DealTicketMarketAmountProps) => {
-  const quoteName =
-    market.tradableInstrument.instrument.product.settlementAsset.symbol;
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
   const price = getMarketPrice(market);
 

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

@@ -84,7 +84,7 @@ describe('DealTicket', () => {
     expect(screen.getByTestId('last-price')).toHaveTextContent(
       // eslint-disable-next-line
       `~${addDecimal(market!.data.markPrice, market.decimalPlaces)} ${
-        market.tradableInstrument.instrument.product.settlementAsset.symbol
+        market.tradableInstrument.instrument.product.quoteName
       }`
     );
   });

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

@@ -69,12 +69,13 @@ export const useFeeDealTicketDetails = (
     return null;
   }, [derivedPrice, order.size, market.decimalPlaces]);
 
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
+  const symbol =
+    market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
   return useMemo(() => {
     return {
       market,
-      quoteName,
+      symbol,
       notionalSize,
       estMargin,
       estCloseOut,
@@ -83,7 +84,7 @@ export const useFeeDealTicketDetails = (
     };
   }, [
     market,
-    quoteName,
+    symbol,
     notionalSize,
     estMargin,
     estCloseOut,
@@ -94,7 +95,7 @@ export const useFeeDealTicketDetails = (
 
 export interface FeeDetails {
   market: MarketDealTicket;
-  quoteName: string;
+  symbol: string;
   notionalSize: string | null;
   estMargin: OrderMargin | null;
   estCloseOut: string | null;
@@ -102,7 +103,7 @@ export interface FeeDetails {
 }
 
 export const getFeeDetailsValues = ({
-  quoteName,
+  symbol,
   notionalSize,
   estMargin,
   estCloseOut,
@@ -128,7 +129,7 @@ export const getFeeDetailsValues = ({
     {
       label: t('Notional'),
       value: formatValueWithMarketDp(notionalSize),
-      quoteName,
+      symbol,
       labelDescription: NOTIONAL_SIZE_TOOLTIP_TEXT,
     },
     {
@@ -146,24 +147,24 @@ export const getFeeDetailsValues = ({
           <FeesBreakdown
             fees={estMargin?.fees}
             feeFactors={market.fees.factors}
-            quoteName={quoteName}
+            symbol={symbol}
             decimals={assetDecimals}
           />
         </>
       ),
-      quoteName,
+      symbol,
     },
     {
       label: t('Margin'),
       value:
         estMargin?.margin && `~${formatValueWithAssetDp(estMargin?.margin)}`,
-      quoteName,
+      symbol,
       labelDescription: EST_MARGIN_TOOLTIP_TEXT,
     },
     {
       label: t('Liquidation'),
       value: estCloseOut && `~${formatValueWithMarketDp(estCloseOut)}`,
-      quoteName,
+      symbol: market.tradableInstrument.instrument.product.quoteName,
       labelDescription: EST_CLOSEOUT_TOOLTIP_TEXT,
     },
   ];

libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx

@@ -51,7 +51,7 @@ export const FeesBreakdownPercentage = ({
 export const FeesBreakdown = ({
   fees,
   feeFactors,
-  quoteName,
+  symbol,
   decimals,
 }: {
   fees?: {
@@ -60,7 +60,7 @@ export const FeesBreakdown = ({
     makerFee: string;
   };
   feeFactors?: Market['fees']['factors'];
-  quoteName?: string;
+  symbol?: string;
   decimals: number;
 }) => {
   if (!fees) return null;
@@ -84,7 +84,7 @@ export const FeesBreakdown = ({
         </dd>
       )}
       <dd className="text-right col-span-2">
-        {formatValue(fees.infrastructureFee)} {quoteName || ''}
+        {formatValue(fees.infrastructureFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Liquidity fee')}</dt>
       {feeFactors && (
@@ -95,7 +95,7 @@ export const FeesBreakdown = ({
         </dd>
       )}
       <dd className="text-right col-span-2">
-        {formatValue(fees.liquidityFee)} {quoteName || ''}
+        {formatValue(fees.liquidityFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Maker fee')}</dt>
       {feeFactors && (
@@ -106,7 +106,7 @@ export const FeesBreakdown = ({
         </dd>
       )}
       <dd className="text-right col-span-2">
-        {formatValue(fees.makerFee)} {quoteName || ''}
+        {formatValue(fees.makerFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Total fees')}</dt>
       {feeFactors && (
@@ -115,7 +115,7 @@ export const FeesBreakdown = ({
         </dd>
       )}
       <dd className="text-right col-span-2">
-        {formatValue(totalFees)} {quoteName || ''}
+        {formatValue(totalFees)} {symbol || ''}
       </dd>
     </dl>
   );