Remove usages of Conversion util in components folder in favor of Numeric (#17333)

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -23,15 +23,12 @@ import {
 import { getCustomTokenAmount } from '../../../selectors';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
-import {
-  conversionGreaterThan,
-  conversionLTE,
-} from '../../../../shared/modules/conversion.utils';
 import {
   MAX_TOKEN_ALLOWANCE_AMOUNT,
   NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX,
   DECIMAL_REGEX,
 } from '../../../../shared/constants/tokens';
+import { Numeric } from '../../../../shared/modules/Numeric';
 import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip';
 
 export default function CustomSpendingCap({
@@ -58,20 +55,16 @@ export default function CustomSpendingCap({
   };
 
   const decConversionGreaterThan = (tokenValue, tokenBalance) => {
-    return conversionGreaterThan(
+    return new Numeric(Number(replaceCommaToDot(tokenValue)), 10).greaterThan(
-      { value: Number(replaceCommaToDot(tokenValue)), fromNumericBase: 'dec' },
+      Number(tokenBalance),
-      { value: Number(tokenBalance), fromNumericBase: 'dec' },
+      10,
     );
   };
 
   const getInputTextLogic = (inputNumber) => {
     if (
-      conversionLTE(
+      new Numeric(Number(replaceCommaToDot(inputNumber)), 10).lessThanOrEqualTo(
-        {
+        new Numeric(Number(currentTokenBalance), 10),
-          value: Number(replaceCommaToDot(inputNumber)),
-          fromNumericBase: 'dec',
-        },
-        { value: Number(currentTokenBalance), fromNumericBase: 'dec' },
       )
     ) {
       return {

ui/components/app/multilayer-fee-message/multi-layer-fee-message.js

@@ -6,11 +6,9 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
 import fetchEstimatedL1Fee from '../../../helpers/utils/optimism/fetchEstimatedL1Fee';
 import { SECONDARY } from '../../../helpers/constants/common';
 import { I18nContext } from '../../../contexts/i18n';
-import {
+import { sumHexes } from '../../../../shared/modules/conversion.utils';
-  sumHexes,
+import { EtherDenomination } from '../../../../shared/constants/common';
-  toBigNumber,
+import { Numeric } from '../../../../shared/modules/Numeric';
-  toNormalizedDenomination,
-} from '../../../../shared/modules/conversion.utils';
 
 export default function MultilayerFeeMessage({
   transaction,
@@ -26,9 +24,9 @@ export default function MultilayerFeeMessage({
   let layer1TotalBN;
 
   if (fetchedLayer1Total !== null) {
-    layer1TotalBN = toBigNumber.hex(fetchedLayer1Total);
+    layer1TotalBN = new Numeric(fetchedLayer1Total, 16, EtherDenomination.WEI);
-    layer1Total = `${toNormalizedDenomination
+    layer1Total = `${layer1TotalBN
-      .WEI(layer1TotalBN)
+      .toDenomination(EtherDenomination.ETH)
       .toFixed(12)} ${nativeCurrency}`;
   }
 
@@ -39,11 +37,10 @@ export default function MultilayerFeeMessage({
     transaction.txParams.value || '0x0',
   );
 
-  const totalBN = toBigNumber.hex(totalInWeiHex);
+  const totalBN = new Numeric(totalInWeiHex, 16, EtherDenomination.WEI);
-  const totalInEth = `${toNormalizedDenomination
+  const totalInEth = `${totalBN
-    .WEI(totalBN)
+    .toDenomination(EtherDenomination.ETH)
     .toFixed(12)} ${nativeCurrency}`;
-
   useEffect(() => {
     const getEstimatedL1Fee = async () => {
       try {

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -6,7 +6,6 @@ import LedgerInstructionField from '../ledger-instruction-field';
 
 import { MESSAGE_TYPE } from '../../../../shared/constants/app';
 import { getURLHostName } from '../../../helpers/utils/util';
-import { conversionUtil } from '../../../../shared/modules/conversion.utils';
 import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils';
 import Button from '../../ui/button';
 import SiteOrigin from '../../ui/site-origin';
@@ -20,6 +19,8 @@ import {
   TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { Numeric } from '../../../../shared/modules/Numeric';
+import { EtherDenomination } from '../../../../shared/constants/common';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -35,7 +36,6 @@ export default class SignatureRequestOriginal extends Component {
     }).isRequired,
     cancel: PropTypes.func.isRequired,
     clearConfirmTransaction: PropTypes.func.isRequired,
-    conversionRate: PropTypes.number,
     history: PropTypes.object.isRequired,
     mostRecentOverviewPage: PropTypes.string.isRequired,
     sign: PropTypes.func.isRequired,
@@ -263,7 +263,6 @@ export default class SignatureRequestOriginal extends Component {
   render = () => {
     const {
       messagesCount,
-      conversionRate,
       nativeCurrency,
       fromAccount: { address, balance, name },
     } = this.props;
@@ -273,13 +272,11 @@ export default class SignatureRequestOriginal extends Component {
     const rejectNText = t('rejectRequestsN', [messagesCount]);
     const currentNetwork = this.getNetworkName();
 
-    const balanceInBaseAsset = conversionUtil(balance, {
+    const balanceInBaseAsset = new Numeric(balance, 16, EtherDenomination.WEI)
-      fromNumericBase: 'hex',
+      .toDenomination(EtherDenomination.ETH)
-      toNumericBase: 'dec',
+      .toBase(10)
-      fromDenomination: 'WEI',
+      .round(6)
-      numberOfDecimals: 6,
+      .toString();
-      conversionRate,
-    });
 
     return (
       <div className="request-signature__container">

ui/components/app/signature-request/signature-request.component.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import LedgerInstructionField from '../ledger-instruction-field';
 import { sanitizeMessage, getURLHostName } from '../../../helpers/utils/util';
 import { EVENT } from '../../../../shared/constants/metametrics';
-import { conversionUtil } from '../../../../shared/modules/conversion.utils';
 import SiteOrigin from '../../ui/site-origin';
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
@@ -17,6 +16,8 @@ import {
 } from '../../../helpers/constants/design-system';
 import NetworkAccountBalanceHeader from '../network-account-balance-header';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { Numeric } from '../../../../shared/modules/Numeric';
+import { EtherDenomination } from '../../../../shared/constants/common';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
 
@@ -141,14 +142,12 @@ export default class SignatureRequest extends PureComponent {
     } = this.memoizedParseMessage(data);
     const currentNetwork = this.getNetworkName();
 
-    const balanceInBaseAsset = conversionUtil(balance, {
+    const balanceInBaseAsset = new Numeric(balance, 16, EtherDenomination.WEI)
-      fromNumericBase: 'hex',
+      .toDenomination(EtherDenomination.ETH)
-      toNumericBase: 'dec',
+      .applyConversionRate(conversionRate)
-      fromDenomination: 'WEI',
+      .round(6)
-      numberOfDecimals: 6,
+      .toBase(10)
-      conversionRate,
+      .toString();
-    });
-
     const onSign = (event) => {
       sign(event);
       trackEvent({

ui/components/ui/account-list/account-list.test.js

@@ -18,7 +18,7 @@ const render = () => {
         address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
         addressLabel: 'Account 1',
         lastConnectedDate: 'Feb-22-2022',
-        balance: '8.7a73149c048545a3fe58',
+        balance: '87a73149c048545a3fe58',
         has: () => {
           /**  nothing to do */
         },
@@ -28,7 +28,7 @@ const render = () => {
       address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
       addressLabel: 'Account 2',
       lastConnectedDate: 'Feb-22-2022',
-      balance: '8.7a73149c048545a3fe58',
+      balance: '87a73149c048545a3fe58',
       has: () => {
         /** nothing to do */
       },

ui/components/ui/review-spending-cap/review-spending-cap.js

@@ -15,7 +15,7 @@ import {
   TEXT_ALIGN,
   SIZES,
 } from '../../../helpers/constants/design-system';
-import { conversionGreaterThan } from '../../../../shared/modules/conversion.utils';
+import { Numeric } from '../../../../shared/modules/Numeric';
 
 export default function ReviewSpendingCap({
   tokenName,
@@ -24,10 +24,10 @@ export default function ReviewSpendingCap({
   onEdit,
 }) {
   const t = useContext(I18nContext);
-  const valueIsGreaterThanBalance = conversionGreaterThan(
+  const valueIsGreaterThanBalance = new Numeric(
-    { value: Number(tokenValue), fromNumericBase: 'dec' },
+    Number(tokenValue),
-    { value: Number(currentTokenBalance), fromNumericBase: 'dec' },
+    10,
-  );
+  ).greaterThan(Number(currentTokenBalance), 10);
 
   return (
     <Box

ui/components/ui/token-input/token-input.component.js

@@ -3,15 +3,12 @@ import PropTypes from 'prop-types';
 import BigNumber from 'bignumber.js';
 import UnitInput from '../unit-input';
 import CurrencyDisplay from '../currency-display';
-import {
+import { getWeiHexFromDecimalValue } from '../../../../shared/modules/conversion.utils';
-  conversionUtil,
-  getWeiHexFromDecimalValue,
-  multiplyCurrencies,
-} from '../../../../shared/modules/conversion.utils';
 
 import { ETH } from '../../../helpers/constants/common';
 import { addHexPrefix } from '../../../../app/scripts/lib/util';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
+import { Numeric } from '../../../../shared/modules/Numeric';
 
 /**
  * Component that allows user to enter token values as a number, and props receive a converted
@@ -69,13 +66,10 @@ export default class TokenInput extends PureComponent {
     const { value: hexValue, token: { decimals, symbol } = {} } = props;
 
     const multiplier = Math.pow(10, Number(decimals || 0));
-    const decimalValueString = conversionUtil(addHexPrefix(hexValue), {
+    const decimalValueString = new Numeric(addHexPrefix(hexValue), 16)
-      fromNumericBase: 'hex',
+      .toBase(10)
-      toNumericBase: 'dec',
+      .applyConversionRate(symbol ? multiplier : 1, true)
-      toCurrency: symbol,
+      .toString();
-      conversionRate: multiplier,
-      invertConversionRate: true,
-    });
 
     return Number(decimalValueString) ? decimalValueString : '';
   }
@@ -89,12 +83,10 @@ export default class TokenInput extends PureComponent {
       newDecimalValue = new BigNumber(decimalValue, 10).toFixed(decimals);
     }
 
-    const multiplier = Math.pow(10, Number(decimals || 0));
+    const hexValue = new Numeric(newDecimalValue || 0, 10)
-    const hexValue = multiplyCurrencies(newDecimalValue || 0, multiplier, {
+      .times(Math.pow(10, Number(decimals || 0)), 10)
-      multiplicandBase: 10,
+      .toBase(16)
-      multiplierBase: 10,
+      .toString();
-      toNumericBase: 'hex',
-    });
 
     this.setState({ hexValue, decimalValue });
     onChange(hexValue);