From b0a54be408bc7933f0f5b249003d953a3388d492 Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Wed, 30 Aug 2023 10:39:49 +0200
Subject: [PATCH] fix(explorer): format iceberg size according to market
 (#4612)

---
 .../txs/details/order/tx-order-iceberg.tsx    | 22 ++++++++++++++++---
 .../app/components/txs/details/tx-order.tsx   |  6 ++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/explorer/src/app/components/txs/details/order/tx-order-iceberg.tsx b/apps/explorer/src/app/components/txs/details/order/tx-order-iceberg.tsx
index d9e3bea69..65738a4ae 100644
--- a/apps/explorer/src/app/components/txs/details/order/tx-order-iceberg.tsx
+++ b/apps/explorer/src/app/components/txs/details/order/tx-order-iceberg.tsx
@@ -1,10 +1,12 @@
 import { t } from '@vegaprotocol/i18n';
 import type { components } from '../../../../../types/explorer';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import SizeInMarket from '../../../size-in-market/size-in-market';
 
 export interface TxDetailsOrderIcebergDetailsProps {
   iceberg: components['schemas']['v1IcebergOpts'];
   size: components['schemas']['v1OrderSubmission']['size'];
+  marketId?: string;
 }
 
 /**
@@ -28,6 +30,7 @@ export interface TxDetailsOrderIcebergDetailsProps {
 export const TxOrderIcebergDetails = ({
   iceberg,
   size,
+  marketId,
 }: TxDetailsOrderIcebergDetailsProps) => {
   return (
     <div
@@ -36,15 +39,28 @@ export const TxOrderIcebergDetails = ({
     >
       <Tooltip description={t('Iceberg: Minimum visible size')}>
         <span className="align-bottom text-vega-orange-650">
-          {iceberg.minimumVisibleSize || '-'}
+          {marketId ? (
+            <SizeInMarket
+              size={iceberg.minimumVisibleSize}
+              marketId={marketId}
+            />
+          ) : (
+            iceberg.minimumVisibleSize
+          )}
         </span>
       </Tooltip>
       <Tooltip description={t('Iceberg: Total size')}>
-        <span className="text-sm text-vega-blue-600 mx-3">{size}</span>
+        <span className="text-sm text-vega-blue-600 mx-3">
+          {marketId ? <SizeInMarket size={size} marketId={marketId} /> : size}
+        </span>
       </Tooltip>
       <Tooltip description={t('Iceberg: Visible peak')}>
         <span className="align-top text-vega-yellow-600">
-          {iceberg.peakSize || '-'}
+          {marketId ? (
+            <SizeInMarket size={iceberg.peakSize} marketId={marketId} />
+          ) : (
+            iceberg.peakSize
+          )}
         </span>
       </Tooltip>
     </div>
diff --git a/apps/explorer/src/app/components/txs/details/tx-order.tsx b/apps/explorer/src/app/components/txs/details/tx-order.tsx
index 9009a55a4..6d48abbd0 100644
--- a/apps/explorer/src/app/components/txs/details/tx-order.tsx
+++ b/apps/explorer/src/app/components/txs/details/tx-order.tsx
@@ -81,7 +81,11 @@ export const TxDetailsOrder = ({
           <TableRow modifier="bordered">
             <TableCell>{t('Iceberg details')}</TableCell>
             <TableCell>
-              <TxOrderIcebergDetails iceberg={iceberg} size={size} />
+              <TxOrderIcebergDetails
+                iceberg={iceberg}
+                size={size}
+                marketId={marketId}
+              />
             </TableCell>
           </TableRow>
         ) : null}