fix: Remove multiple overlapping spinners

ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts

@@ -1,12 +1,11 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { isHexString } from '@metamask/utils';
-import { BigNumber } from 'bignumber.js';
 import { isBoolean } from 'lodash';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import { getIntlLocale } from '../../../../../../../ducks/locale/locale';
 import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants';
-import { toNonScientificString } from '../../hooks/use-token-values';
 import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
 import { useIsNFT } from './use-is-nft';
 
@@ -27,7 +26,7 @@ export const useApproveTokenSimulation = (
 
   const decodedSpendingCap = useMemo(() => {
     if (!value) {
-      return 0;
+      return '0';
     }
 
     const paramIndex = value.data[0].params.findIndex(
@@ -38,23 +37,24 @@ export const useApproveTokenSimulation = (
         !isBoolean(param.value),
     );
     if (paramIndex === -1) {
-      return 0;
+      return '0';
     }
 
-    return new BigNumber(value.data[0].params[paramIndex].value.toString())
-      .dividedBy(new BigNumber(10).pow(Number(decimals)))
-      .toNumber();
+    return calcTokenAmount(
+      value.data[0].params[paramIndex].value,
+      Number(decimals),
+    ).toFixed();
   }, [value, decimals]);
 
   const formattedSpendingCap = useMemo(() => {
     // formatting coerces small numbers to 0
-    return isNFT || decodedSpendingCap < 1
-      ? toNonScientificString(decodedSpendingCap)
-      : new Intl.NumberFormat(locale).format(decodedSpendingCap);
+    return isNFT || parseInt(decodedSpendingCap, 10) < 1
+      ? decodedSpendingCap
+      : new Intl.NumberFormat(locale).format(parseInt(decodedSpendingCap, 10));
   }, [decodedSpendingCap, isNFT, locale]);
 
   const spendingCap = useMemo(() => {
-    if (!isNFT && isSpendingCapUnlimited(decodedSpendingCap)) {
+    if (!isNFT && isSpendingCapUnlimited(parseInt(decodedSpendingCap, 10))) {
       return SPENDING_CAP_UNLIMITED_MSG;
     }
     const tokenPrefix = isNFT ? '#' : '';

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts

@@ -5,7 +5,7 @@ import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderHookWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { useAssetDetails } from '../../../../hooks/useAssetDetails';
-import { toNonScientificString, useTokenValues } from './use-token-values';
+import { useTokenValues } from './use-token-values';
 import { useDecodedTransactionData } from './useDecodedTransactionData';
 
 jest.mock('../../../../hooks/useAssetDetails', () => ({
@@ -126,21 +126,3 @@ describe('useTokenValues', () => {
     });
   });
 });
-
-describe('toNonScientificString', () => {
-  const TEST_CASES = [
-    { scientific: 1.23e-5, expanded: '0.0000123' },
-    { scientific: 1e-10, expanded: '0.0000000001' },
-    { scientific: 1.23e-21, expanded: '1.23e-21' },
-  ];
-
-  // @ts-expect-error This is missing from the Mocha type definitions
-  it.each(TEST_CASES)(
-    'Expand $scientific to "$expanded"',
-    ({ scientific, expanded }: { scientific: number; expanded: string }) => {
-      const actual = toNonScientificString(scientific);
-
-      expect(actual).toEqual(expanded);
-    },
-  );
-});

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

@@ -4,6 +4,7 @@ import { BigNumber } from 'bignumber.js';
 import { isBoolean } from 'lodash';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { calcTokenAmount } from '../../../../../../../shared/lib/transactions-controller-utils';
 import { Numeric } from '../../../../../../../shared/modules/Numeric';
 import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { getIntlLocale } from '../../../../../../ducks/locale/locale';
@@ -23,26 +24,45 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
   const decodedResponse = useDecodedTransactionData();
   const { value, pending } = decodedResponse;
 
-  const decodedTransferValue = useMemo(() => {
-    if (!value || !decimals) {
-      return 0;
-    }
+  const { decodedTransferValue, isDecodedTransferValuePending } =
+    useMemo(() => {
+      if (!value) {
+        return {
+          decodedTransferValue: '0',
+          isDecodedTransferValuePending: false,
+        };
+      }
 
-    const paramIndex = value.data[0].params.findIndex(
-      (param) =>
-        param.value !== undefined &&
-        !isHexString(param.value) &&
-        param.value.length === undefined &&
-        !isBoolean(param.value),
-    );
-    if (paramIndex === -1) {
-      return 0;
-    }
+      if (!decimals) {
+        return {
+          decodedTransferValue: '0',
+          isDecodedTransferValuePending: true,
+        };
+      }
 
-    return new BigNumber(value.data[0].params[paramIndex].value.toString())
-      .dividedBy(new BigNumber(10).pow(Number(decimals)))
-      .toNumber();
-  }, [value, decimals]);
+      const paramIndex = value.data[0].params.findIndex(
+        (param) =>
+          param.value !== undefined &&
+          !isHexString(param.value) &&
+          param.value.length === undefined &&
+          !isBoolean(param.value),
+      );
+      if (paramIndex === -1) {
+        return {
+          decodedTransferValue: '0',
+          isDecodedTransferValuePending: false,
+        };
+      }
+
+      return {
+        decodedTransferValue: calcTokenAmount(
+          value.data[0].params[paramIndex].value,
+          decimals,
+        ).toFixed(),
+        isDecodedTransferValuePending: false,
+      };
+      // };
+    }, [value, decimals]);
 
   const [exchangeRate, setExchangeRate] = useState<Numeric | undefined>();
   const fetchExchangeRate = async () => {
@@ -67,18 +87,9 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
   );
 
   return {
-    decodedTransferValue: toNonScientificString(decodedTransferValue),
+    decodedTransferValue,
     displayTransferValue,
     fiatDisplayValue,
-    pending,
+    pending: pending || isDecodedTransferValuePending,
   };
 };
-
-export function toNonScientificString(num: number): string {
-  if (num >= 10e-18) {
-    return num.toFixed(18).replace(/\.?0+$/u, '');
-  }
-
-  // keep in scientific notation
-  return num.toString();
-}

ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap

@@ -16,49 +16,6 @@ exports[`NativeTransferInfo renders correctly 1`] = `
       0 ETH
     </h2>
   </div>
-  <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-  >
-    <svg
-      class="preloader__icon"
-      fill="none"
-      height="20"
-      viewBox="0 0 16 16"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-        fill="var(--color-primary-muted)"
-        fill-rule="evenodd"
-      />
-      <mask
-        height="16"
-        id="mask0"
-        mask-type="alpha"
-        maskUnits="userSpaceOnUse"
-        width="16"
-        x="0"
-        y="0"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-          fill="var(--color-primary-default)"
-          fill-rule="evenodd"
-        />
-      </mask>
-      <g
-        mask="url(#mask0)"
-      >
-        <path
-          d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
-          fill="var(--color-primary-default)"
-        />
-      </g>
-    </svg>
-  </div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >

ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap

@@ -17,49 +17,6 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
       class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
     />
   </div>
-  <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-  >
-    <svg
-      class="preloader__icon"
-      fill="none"
-      height="20"
-      viewBox="0 0 16 16"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-        fill="var(--color-primary-muted)"
-        fill-rule="evenodd"
-      />
-      <mask
-        height="16"
-        id="mask0"
-        mask-type="alpha"
-        maskUnits="userSpaceOnUse"
-        width="16"
-        x="0"
-        y="0"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-          fill="var(--color-primary-default)"
-          fill-rule="evenodd"
-        />
-      </mask>
-      <g
-        mask="url(#mask0)"
-      >
-        <path
-          d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
-          fill="var(--color-primary-default)"
-        />
-      </g>
-    </svg>
-  </div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >

ui/pages/confirmations/components/confirm/info/shared/confirm-loader/__snapshots__/confirm-loader.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ConfirmLoader /> renders component 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+    class="mm-box mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
   >
     <svg
       class="preloader__icon"

ui/pages/confirmations/components/confirm/info/shared/confirm-loader/confirm-loader.tsx

@@ -13,6 +13,8 @@ export const ConfirmLoader = () => {
       display={Display.Flex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
+      paddingTop={4}
+      paddingBottom={4}
     >
       <Preloader size={20} />
     </Box>

ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx

@@ -6,6 +6,7 @@ import {
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
   TEST_CHAINS,
 } from '../../../../../../../../shared/constants/network';
+import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import {
   AvatarToken,
   AvatarTokenSize,
@@ -22,29 +23,25 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../../../../helpers/constants/design-system';
-import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
 import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter';
 import {
   getPreferences,
   selectConversionRateByChainId,
 } from '../../../../../../../selectors';
 import { getMultichainNetwork } from '../../../../../../../selectors/multichain';
 import { useConfirmContext } from '../../../../../context/confirm';
-import {
-  formatAmount,
-  formatAmountMaxPrecision,
-} from '../../../../simulation-details/formatAmount';
-import { toNonScientificString } from '../../hooks/use-token-values';
+import { formatAmount } from '../../../../simulation-details/formatAmount';
 
 const NativeSendHeading = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
   const { chainId } = transactionMeta;
 
-  const nativeAssetTransferValue = new BigNumber(
+  const nativeAssetTransferValue = calcTokenAmount(
     transactionMeta.txParams.value as string,
-  ).dividedBy(new BigNumber(10).pow(18));
+    18,
+  );
 
   const conversionRate = useSelector((state) =>
     selectConversionRateByChainId(state, chainId),
@@ -66,9 +63,7 @@ const NativeSendHeading = () => {
   const locale = useSelector(getIntlLocale);
   const roundedTransferValue = formatAmount(locale, nativeAssetTransferValue);
 
-  const transferValue = toNonScientificString(
-    nativeAssetTransferValue.toNumber(),
-  );
+  const transferValue = nativeAssetTransferValue.toFixed();
 
   type TestNetChainId = (typeof TEST_CHAINS)[number];
   const isTestnet = TEST_CHAINS.includes(
@@ -90,8 +85,15 @@ const NativeSendHeading = () => {
   );
 
   const NativeAssetAmount =
-    roundedTransferValue ===
-    `<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? (
+    roundedTransferValue === transferValue ? (
+      <Text
+        variant={TextVariant.headingLg}
+        color={TextColor.inherit}
+        marginTop={3}
+      >
+        {`${roundedTransferValue} ${ticker}`}
+      </Text>
+    ) : (
       <Tooltip title={transferValue} position="right">
         <Text
           variant={TextVariant.headingLg}
@@ -101,14 +103,6 @@ const NativeSendHeading = () => {
           {`${roundedTransferValue} ${ticker}`}
         </Text>
       </Tooltip>
-    ) : (
-      <Text
-        variant={TextVariant.headingLg}
-        color={TextColor.inherit}
-        marginTop={3}
-      >
-        {`${roundedTransferValue} ${ticker}`}
-      </Text>
     );
 
   const NativeAssetFiatConversion = Boolean(fiatDisplayValue) &&

ui/pages/confirmations/components/confirm/info/shared/send-heading/__snapshots__/send-heading.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<SendHeading /> renders component 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+    class="mm-box mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
   >
     <svg
       class="preloader__icon"