From 320488f5a16b6cabd3153405380bc6b427048612 Mon Sep 17 00:00:00 2001
From: lendihop <mishin.danil2017@gmail.com>
Date: Fri, 20 Dec 2024 17:02:53 +0100
Subject: [PATCH] apply review changes

---
 .../components/DisplayExchangeValue.tsx       | 28 +++++++++++++++++++
 .../components/CompletedStatusInfoBlocks.tsx  | 22 +++------------
 .../components/InProgressStatusInfoBlocks.tsx | 21 ++------------
 .../components/DepositAddressQrCodeModal.tsx  | 14 +++++-----
 .../Deposit/components/ExpiresInBlock.tsx     | 13 ++++-----
 .../crypto-exchange/steps/Deposit/index.tsx   | 21 +++-----------
 .../OrderCreation/components/FormContent.tsx  |  4 +--
 .../OrderCreation/components/InfoCard.tsx     | 14 +++-------
 8 files changed, 58 insertions(+), 79 deletions(-)
 create mode 100644 src/app/pages/Market/crypto-exchange/components/DisplayExchangeValue.tsx

diff --git a/src/app/pages/Market/crypto-exchange/components/DisplayExchangeValue.tsx b/src/app/pages/Market/crypto-exchange/components/DisplayExchangeValue.tsx
new file mode 100644
index 000000000..ccb092711
--- /dev/null
+++ b/src/app/pages/Market/crypto-exchange/components/DisplayExchangeValue.tsx
@@ -0,0 +1,28 @@
+import React, { memo, useMemo } from 'react';
+
+import Money from 'app/atoms/Money';
+
+import { EXOLIX_DECIMALS } from '../config';
+import { getCurrencyDisplayCode } from '../utils';
+
+interface Props {
+  value: string | number;
+  currencyCode: string;
+  showAllDecimals?: boolean;
+}
+
+export const DisplayExchangeValue = memo<Props>(({ value, currencyCode, showAllDecimals = false }) => {
+  const decimals = useMemo(
+    () => (showAllDecimals ? EXOLIX_DECIMALS : String(value).length > 10 ? 2 : EXOLIX_DECIMALS),
+    [value, showAllDecimals]
+  );
+
+  return (
+    <>
+      <Money cryptoDecimals={decimals} smallFractionFont={false} tooltipPlacement="bottom">
+        {value}
+      </Money>{' '}
+      {getCurrencyDisplayCode(currencyCode)}
+    </>
+  );
+});
diff --git a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx
index c2b9cdc2e..8fee4a2ec 100644
--- a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { Anchor, HashShortView, IconBase, Money } from 'app/atoms';
+import { Anchor, HashShortView, IconBase } from 'app/atoms';
 import { HashChip } from 'app/atoms/HashChip';
 import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
 import { ReactComponent as OutLinkIcon } from 'app/icons/base/outLink.svg';
@@ -9,10 +9,10 @@ import { ExchangeHash } from 'lib/apis/exolix/types';
 import { t } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../../components/InfoBlock';
 import { VALUE_PLACEHOLDER } from '../../../config';
 import { useCryptoExchangeDataState } from '../../../context';
-import { getCurrencyDisplayCode } from '../../../utils';
 
 export const CompletedStatusInfoBlocks = memo(() => {
   const { exchangeData } = useCryptoExchangeDataState();
@@ -46,14 +46,7 @@ export const CompletedStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youSent">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money
-                cryptoDecimals={exchangeData.amount.length > 12 ? 2 : 6}
-                smallFractionFont={false}
-                tooltipPlacement="bottom"
-              >
-                {exchangeData.amount}
-              </Money>{' '}
-              {getCurrencyDisplayCode(exchangeData.coinFrom.coinCode)}
+              <DisplayExchangeValue value={exchangeData.amount} currencyCode={exchangeData.coinFrom.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
           </div>
@@ -70,14 +63,7 @@ export const CompletedStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youReceived">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money
-                cryptoDecimals={exchangeData.amountTo.length > 12 ? 2 : 6}
-                smallFractionFont={false}
-                tooltipPlacement="bottom"
-              >
-                {exchangeData.amountTo}
-              </Money>{' '}
-              {getCurrencyDisplayCode(exchangeData.coinTo.coinCode)}
+              <DisplayExchangeValue value={exchangeData.amountTo} currencyCode={exchangeData.coinTo.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinTo.icon} code={exchangeData.coinTo.coinCode} size={24} />
           </div>
diff --git a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx
index 2747f6e4c..f0901c6c5 100644
--- a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx
@@ -2,15 +2,14 @@ import React, { memo, useCallback } from 'react';
 
 import { IconBase } from 'app/atoms';
 import { HashChip } from 'app/atoms/HashChip';
-import Money from 'app/atoms/Money';
 import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
 import { toastSuccess } from 'app/toaster';
 import { t } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../../components/InfoBlock';
 import { useCryptoExchangeDataState } from '../../../context';
-import { getCurrencyDisplayCode } from '../../../utils';
 
 export const InProgressStatusInfoBlocks = memo(() => {
   const { exchangeData } = useCryptoExchangeDataState();
@@ -28,14 +27,7 @@ export const InProgressStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youSent">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money
-                cryptoDecimals={exchangeData.amount.length > 12 ? 2 : 6}
-                smallFractionFont={false}
-                tooltipPlacement="bottom"
-              >
-                {exchangeData.amount}
-              </Money>{' '}
-              {getCurrencyDisplayCode(exchangeData.coinFrom.coinCode)}
+              <DisplayExchangeValue value={exchangeData.amount} currencyCode={exchangeData.coinFrom.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
           </div>
@@ -52,14 +44,7 @@ export const InProgressStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youGet">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money
-                cryptoDecimals={exchangeData.amountTo.length > 12 ? 2 : 6}
-                smallFractionFont={false}
-                tooltipPlacement="bottom"
-              >
-                {exchangeData.amountTo}
-              </Money>{' '}
-              {getCurrencyDisplayCode(exchangeData.coinTo.coinCode)}
+              <DisplayExchangeValue value={exchangeData.amountTo} currencyCode={exchangeData.coinTo.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinTo.icon} code={exchangeData.coinTo.coinCode} size={24} />
           </div>
diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressQrCodeModal.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressQrCodeModal.tsx
index 035e2a070..6e8e7dde9 100644
--- a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressQrCodeModal.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressQrCodeModal.tsx
@@ -1,13 +1,12 @@
 import React, { memo } from 'react';
 
-import { Money, QRCode } from 'app/atoms';
+import { QRCode } from 'app/atoms';
 import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
 import { T } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
-import { EXOLIX_DECIMALS } from '../../../config';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { useCryptoExchangeDataState } from '../../../context';
-import { getCurrencyDisplayCode } from '../../../utils';
 
 interface Props {
   onClose: EmptyFn;
@@ -29,10 +28,11 @@ export const DepositAddressQrCodeModal = memo<Props>(({ onClose }) => {
           <div className="flex flex-row items-center gap-x-2">
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
             <span className={exchangeData.amount.length > 12 ? 'text-font-num-bold-14' : 'text-font-num-bold-16'}>
-              <Money cryptoDecimals={EXOLIX_DECIMALS} smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amount}
-              </Money>{' '}
-              {getCurrencyDisplayCode(exchangeData.coinFrom.coinCode)}
+              <DisplayExchangeValue
+                showAllDecimals
+                value={exchangeData.amount}
+                currencyCode={exchangeData.coinFrom.coinCode}
+              />
             </span>
           </div>
           <span className="text-font-description text-grey-1 text-center">
diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx
index ba21ceb96..3e05b34bc 100644
--- a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx
@@ -2,14 +2,12 @@ import React, { memo } from 'react';
 
 import clsx from 'clsx';
 
-import Money from 'app/atoms/Money';
 import { T } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { ExchangeCountdown } from '../../../components/ExchangeCountdown';
-import { EXOLIX_DECIMALS } from '../../../config';
 import { useCryptoExchangeDataState } from '../../../context';
-import { getCurrencyDisplayCode } from '../../../utils';
 
 interface Props {
   className?: string;
@@ -32,10 +30,11 @@ export const ExpiresInBlock = memo<Props>(({ className }) => {
         <div className="flex flex-row items-center gap-x-2">
           <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
           <span className={exchangeData.amount.length > 12 ? 'text-font-num-bold-14' : 'text-font-num-bold-16'}>
-            <Money cryptoDecimals={EXOLIX_DECIMALS} smallFractionFont={false} tooltipPlacement="bottom">
-              {exchangeData.amount}
-            </Money>{' '}
-            {getCurrencyDisplayCode(exchangeData.coinFrom.coinCode)}
+            <DisplayExchangeValue
+              showAllDecimals
+              value={exchangeData.amount}
+              currencyCode={exchangeData.coinFrom.coinCode}
+            />
           </span>
         </div>
         <span className="text-font-description text-grey-1 text-center">
diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx
index 271a5e82d..f6d0b5696 100644
--- a/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { FadeTransition } from 'app/a11y/FadeTransition';
-import { CaptionAlert, IconBase, Money } from 'app/atoms';
+import { CaptionAlert, IconBase } from 'app/atoms';
 import { ActionsButtonsBox } from 'app/atoms/PageModal';
 import { StyledButton } from 'app/atoms/StyledButton';
 import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
@@ -10,6 +10,7 @@ import { OrderStatusEnum } from 'lib/apis/exolix/types';
 import { t, T } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../components/InfoBlock';
 import { StepLabel } from '../../components/StepLabel';
 import { Stepper } from '../../components/Stepper';
@@ -94,14 +95,7 @@ const InfoBlock = memo(() => {
       <InfoRaw bottomSeparator title="youGet">
         <div className="flex flex-row gap-x-0.5">
           <span className="p-1 text-font-description-bold">
-            <Money
-              cryptoDecimals={exchangeData.amountTo.length > 12 ? 2 : 6}
-              smallFractionFont={false}
-              tooltipPlacement="bottom"
-            >
-              {exchangeData.amountTo}
-            </Money>{' '}
-            {getCurrencyDisplayCode(exchangeData.coinTo.coinCode)}
+            <DisplayExchangeValue value={exchangeData.amountTo} currencyCode={exchangeData.coinTo.coinCode} />
           </span>
           <CurrencyIcon src={exchangeData.coinTo.icon} code={exchangeData.coinTo.coinCode} size={24} />
         </div>
@@ -109,14 +103,7 @@ const InfoBlock = memo(() => {
       <InfoRaw bottomSeparator title="exchangeRate">
         <span className="p-1 text-font-description">
           <span>{`1 ${getCurrencyDisplayCode(exchangeData.coinFrom.coinCode)} = `}</span>
-          <Money
-            cryptoDecimals={exchangeData.rate.length > 12 ? 2 : 6}
-            smallFractionFont={false}
-            tooltipPlacement="bottom"
-          >
-            {exchangeData.rate}
-          </Money>{' '}
-          {getCurrencyDisplayCode(exchangeData.coinTo.coinCode)}
+          <DisplayExchangeValue value={exchangeData.rate} currencyCode={exchangeData.coinTo.coinCode} />
         </span>
       </InfoRaw>
       <InfoRaw title="transactionId">
diff --git a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx
index 11c324272..b5d316fe3 100644
--- a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx
@@ -206,7 +206,7 @@ export const FormContent: FC<Props> = ({ setModalHeaderConfig, setModalContent }
               style={{ paddingRight: 158 }}
               underneathComponent={
                 <MinMaxDisplay
-                  currencyCode={getCurrencyDisplayCode(inputCurrency.code)}
+                  currencyCode={inputCurrency.code}
                   min={minMaxData?.finalMinAmount}
                   max={minMaxData?.finalMaxAmount}
                   error={errors.inputValue}
@@ -293,7 +293,7 @@ const MinMaxDisplay = memo<MinMaxDisplayProps>(({ currencyCode, error, min, max
 });
 
 const getMinMaxDisplayValue = (currencyCode: string, value?: number) =>
-  value ? `${value} ${currencyCode}` : VALUE_PLACEHOLDER;
+  value ? `${value} ${getCurrencyDisplayCode(currencyCode)}` : VALUE_PLACEHOLDER;
 
 const getMinMaxTextClassNames = (isError: boolean, value?: number) =>
   value ? (isError ? 'text-error underline' : 'text-secondary') : '';
diff --git a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx
index 050bce5f9..c78c9a3fd 100644
--- a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx
+++ b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx
@@ -1,10 +1,11 @@
 import React, { memo } from 'react';
 
-import Money from 'app/atoms/Money';
 import { T } from 'lib/i18n';
 
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../../components/InfoBlock';
 import { EXOLIX_PRIVICY_LINK, EXOLIX_TERMS_LINK, VALUE_PLACEHOLDER } from '../../../config';
+import { getCurrencyDisplayCode } from '../../../utils';
 
 interface Props {
   rate: number | nullish;
@@ -18,15 +19,8 @@ export const InfoCard = memo<Props>(({ rate, inputCurrencyCode, outputCurrencyCo
       <span className="p-1 text-font-description">
         {rate ? (
           <>
-            <span>{`1 ${inputCurrencyCode} ≈ `}</span>
-            <Money
-              cryptoDecimals={String(rate).length > 12 ? 2 : 6}
-              smallFractionFont={false}
-              tooltipPlacement="bottom"
-            >
-              {rate}
-            </Money>{' '}
-            {outputCurrencyCode}
+            <span>{`1 ${getCurrencyDisplayCode(inputCurrencyCode)} ≈ `}</span>
+            <DisplayExchangeValue value={rate} currencyCode={outputCurrencyCode} />
           </>
         ) : (
           VALUE_PLACEHOLDER