Convert ui/helpers/constants/common to typescript (#17348)

ui/components/app/currency-input/currency-input.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import UnitInput from '../../ui/unit-input';
 import CurrencyDisplay from '../../ui/currency-display';
-import { ETH } from '../../../helpers/constants/common';
 import { I18nContext } from '../../../contexts/i18n';
 import {
   getConversionRate,
@@ -14,6 +13,7 @@ import {
   getValueFromWeiHex,
   getWeiHexFromDecimalValue,
 } from '../../../../shared/modules/conversion.utils';
+import { EtherDenomination } from '../../../../shared/constants/common';
 
 /**
  * Component that allows user to enter currency values as a number, and props receive a converted
@@ -39,7 +39,7 @@ export default function CurrencyInput({
   const conversionRate = useSelector(getConversionRate);
   const showFiat = useSelector(getShouldShowFiat);
   const hideSecondary = !showFiat;
-  const primarySuffix = preferredCurrency || ETH;
+  const primarySuffix = preferredCurrency || EtherDenomination.ETH;
   const secondarySuffix = secondaryCurrency.toUpperCase();
 
   const [isSwapped, setSwapped] = useState(false);
@@ -57,7 +57,7 @@ export default function CurrencyInput({
         })
       : getValueFromWeiHex({
           value: hexValue,
-          toCurrency: ETH,
+          toCurrency: EtherDenomination.ETH,
           numberOfDecimals: 8,
         });
 
@@ -82,8 +82,8 @@ export default function CurrencyInput({
         })
       : getWeiHexFromDecimalValue({
           value: newDecimalValue,
-          fromCurrency: ETH,
-          fromDenomination: ETH,
+          fromCurrency: EtherDenomination.ETH,
+          fromDenomination: EtherDenomination.ETH,
           conversionRate,
         });
 
@@ -116,7 +116,7 @@ export default function CurrencyInput({
 
     if (shouldUseFiat) {
       // Display ETH
-      currency = preferredCurrency || ETH;
+      currency = preferredCurrency || EtherDenomination.ETH;
       numberOfDecimals = 8;
     } else {
       // Display Fiat

ui/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -4,12 +4,8 @@ import classnames from 'classnames';
 import CurrencyDisplay from '../../ui/currency-display';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
 import HexToDecimal from '../../ui/hex-to-decimal';
-import {
-  GWEI,
-  PRIMARY,
-  SECONDARY,
-  ETH,
-} from '../../../helpers/constants/common';
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
+import { EtherDenomination } from '../../../../shared/constants/common';
 import TransactionBreakdownRow from './transaction-breakdown-row';
 
 export default class TransactionBreakdown extends PureComponent {
@@ -114,7 +110,7 @@ export default class TransactionBreakdown extends PureComponent {
               className="transaction-breakdown__value"
               data-testid="transaction-breakdown__base-fee"
               currency={nativeCurrency}
-              denomination={GWEI}
+              denomination={EtherDenomination.GWEI}
               value={baseFee}
               numberOfDecimals={10}
               hideLabel
@@ -127,7 +123,7 @@ export default class TransactionBreakdown extends PureComponent {
               className="transaction-breakdown__value"
               data-testid="transaction-breakdown__priority-fee"
               currency={nativeCurrency}
-              denomination={GWEI}
+              denomination={EtherDenomination.GWEI}
               value={priorityFee}
               numberOfDecimals={10}
               hideLabel
@@ -149,7 +145,7 @@ export default class TransactionBreakdown extends PureComponent {
                 className="transaction-breakdown__value"
                 data-testid="transaction-breakdown__gas-price"
                 currency={nativeCurrency}
-                denomination={GWEI}
+                denomination={EtherDenomination.GWEI}
                 value={gasPrice}
                 numberOfDecimals={9}
                 hideLabel
@@ -163,7 +159,7 @@ export default class TransactionBreakdown extends PureComponent {
               className="transaction-breakdown__value"
               data-testid="transaction-breakdown__effective-gas-price"
               currency={nativeCurrency}
-              denomination={ETH}
+              denomination={EtherDenomination.ETH}
               numberOfDecimals={6}
               value={hexGasTotal}
               type={PRIMARY}
@@ -185,7 +181,7 @@ export default class TransactionBreakdown extends PureComponent {
             <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
               currency={nativeCurrency}
-              denomination={ETH}
+              denomination={EtherDenomination.ETH}
               numberOfDecimals={9}
               value={maxFeePerGas}
               type={PRIMARY}

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common';
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import CurrencyDisplay from '../../ui/currency-display';
 import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency';
+import { EtherDenomination } from '../../../../shared/constants/common';
 
 export default function UserPreferencedCurrencyDisplay({
   'data-testid': dataTestId,
@@ -24,7 +25,7 @@ export default function UserPreferencedCurrencyDisplay({
   });
   const prefixComponent = useMemo(() => {
     return (
-      currency === ETH &&
+      currency === EtherDenomination.ETH &&
       showEthLogo && (
         <i
           className="fab fa-ethereum"

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common';
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 
+import { EtherDenomination } from '../../../../shared/constants/common';
 import UserPreferencedCurrencyDisplay from '.';
 
 export default {
@@ -52,7 +53,7 @@ export default {
     },
   },
   args: {
-    type: ETH,
+    type: EtherDenomination.ETH,
   },
 };
 

ui/components/ui/currency-display/currency-display.component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { ETH, GWEI } from '../../../helpers/constants/common';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
+import { EtherDenomination } from '../../../../shared/constants/common';
 
 export default function CurrencyDisplay({
   value,
@@ -55,7 +55,10 @@ CurrencyDisplay.propTypes = {
   className: PropTypes.string,
   currency: PropTypes.string,
   'data-testid': PropTypes.string,
-  denomination: PropTypes.oneOf([GWEI, ETH]),
+  denomination: PropTypes.oneOf([
+    EtherDenomination.GWEI,
+    EtherDenomination.ETH,
+  ]),
   displayValue: PropTypes.string,
   hideLabel: PropTypes.bool,
   hideTitle: PropTypes.bool,

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

@@ -5,10 +5,10 @@ import UnitInput from '../unit-input';
 import CurrencyDisplay from '../currency-display';
 import { getWeiHexFromDecimalValue } 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';
+import { EtherDenomination } from '../../../../shared/constants/common';
 
 /**
  * Component that allows user to enter token values as a number, and props receive a converted
@@ -128,15 +128,15 @@ export default class TokenInput extends PureComponent {
       numberOfDecimals = 2;
     } else {
       // Display ETH
-      currency = ETH;
+      currency = EtherDenomination.ETH;
       numberOfDecimals = 6;
     }
 
     const decimalEthValue = decimalValue * tokenExchangeRate || 0;
     const hexWeiValue = getWeiHexFromDecimalValue({
       value: decimalEthValue,
-      fromCurrency: ETH,
-      fromDenomination: ETH,
+      fromCurrency: EtherDenomination.ETH,
+      fromDenomination: EtherDenomination.ETH,
     });
 
     return tokenExchangeRate ? (

ui/ducks/send/send.js

@@ -90,7 +90,6 @@ import {
 import { isSmartContractAddress } from '../../helpers/utils/transactions.util';
 import fetchEstimatedL1Fee from '../../helpers/utils/optimism/fetchEstimatedL1Fee';
 
-import { ETH } from '../../helpers/constants/common';
 import {
   AssetType,
   TokenStandard,
@@ -106,6 +105,7 @@ import {
   calcTokenAmount,
 } from '../../../shared/lib/transactions-controller-utils';
 import { Numeric } from '../../../shared/modules/Numeric';
+import { EtherDenomination } from '../../../shared/constants/common';
 import {
   estimateGasLimitForSend,
   generateTransactionParams,
@@ -1983,10 +1983,12 @@ export function updateSendAmount(amount) {
     } else {
       const ethValue = getValueFromWeiHex({
         value: amount,
-        toCurrency: ETH,
+        toCurrency: EtherDenomination.ETH,
         numberOfDecimals: 8,
       });
-      logAmount = `${ethValue} ${metamask?.provider?.ticker || ETH}`;
+      logAmount = `${ethValue} ${
+        metamask?.provider?.ticker || EtherDenomination.ETH
+      }`;
     }
     await dispatch(
       addHistoryEntry(`sendFlow - user set amount to ${logAmount}`),
@@ -2030,7 +2032,7 @@ export function updateSendAsset(
       await dispatch(
         addHistoryEntry(
           `sendFlow - user set asset of type ${AssetType.native} with symbol ${
-            state.metamask.provider?.ticker ?? ETH
+            state.metamask.provider?.ticker ?? EtherDenomination.ETH
           }`,
         ),
       );

ui/helpers/constants/common.ts

@@ -1,17 +1,6 @@
-export const ETH = 'ETH';
-export const GWEI = 'GWEI';
-export const WEI = 'WEI';
-
 export const PRIMARY = 'PRIMARY';
 export const SECONDARY = 'SECONDARY';
 
-export const GAS_ESTIMATE_TYPES = {
-  SLOW: 'SLOW',
-  AVERAGE: 'AVERAGE',
-  FAST: 'FAST',
-  FASTEST: 'FASTEST',
-};
-
 let _supportRequestLink = 'https://metamask.zendesk.com/hc/en-us';
 const _contractAddressLink =
   'https://metamask.zendesk.com/hc/en-us/articles/360020028092-What-is-the-known-contract-address-warning-';

ui/hooks/gasFeeInput/test-utils.js

@@ -15,7 +15,6 @@ import {
   getCurrentKeyring,
   getTokenExchangeRates,
 } from '../../selectors';
-import { ETH } from '../../helpers/constants/common';
 
 import { useGasFeeEstimates } from '../useGasFeeEstimates';
 import {
@@ -103,7 +102,7 @@ export const generateUseSelectorRouter =
       return MOCK_ETH_USD_CONVERSION_RATE;
     }
     if (selector === getNativeCurrency) {
-      return ETH;
+      return EtherDenomination.ETH;
     }
     if (selector === getPreferences) {
       return {

ui/hooks/useUserPreferencedCurrency.js

@@ -6,7 +6,8 @@ import {
 } from '../selectors';
 import { getNativeCurrency } from '../ducks/metamask/metamask';
 
-import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common';
+import { PRIMARY, SECONDARY } from '../helpers/constants/common';
+import { EtherDenomination } from '../../shared/constants/common';
 
 /**
  * Defines the shape of the options parameter for useUserPreferencedCurrency
@@ -54,7 +55,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
     (type === SECONDARY && !useNativeCurrencyAsPrimaryCurrency)
   ) {
     // Display ETH
-    currency = nativeCurrency || ETH;
+    currency = nativeCurrency || EtherDenomination.ETH;
     numberOfDecimals = opts.numberOfDecimals || opts.ethNumberOfDecimals || 8;
   } else if (
     (type === SECONDARY && useNativeCurrencyAsPrimaryCurrency) ||

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.js

@@ -11,7 +11,7 @@ import {
   addFiat,
   roundExponential,
 } from '../../helpers/utils/confirm-tx.util';
-import { ETH, PRIMARY } from '../../helpers/constants/common';
+import { PRIMARY } from '../../helpers/constants/common';
 import {
   contractExchangeRateSelector,
   getCurrentCurrency,
@@ -25,6 +25,7 @@ import {
   getWeiHexFromDecimalValue,
   hexWEIToDecETH,
 } from '../../../shared/modules/conversion.utils';
+import { EtherDenomination } from '../../../shared/constants/common';
 
 export default function ConfirmTokenTransactionBase({
   image = '',
@@ -74,8 +75,8 @@ export default function ConfirmTokenTransactionBase({
 
     return getWeiHexFromDecimalValue({
       value: decimalEthValue,
-      fromCurrency: ETH,
-      fromDenomination: ETH,
+      fromCurrency: EtherDenomination.ETH,
+      fromDenomination: EtherDenomination.ETH,
     });
   }, [tokenAmount, contractExchangeRate]);