removed i18nValue component (#15179)

* removed i18nValue component

* fixed bracket issue

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js

@@ -7,7 +7,6 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { MAX_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
 import Button from '../../../ui/button';
 import FormField from '../../../ui/form-field';
-import I18nValue from '../../../ui/i18n-value';
 import Typography from '../../../ui/typography';
 
 import { useAdvancedGasFeePopoverContext } from '../context';
@@ -68,9 +67,7 @@ const AdvancedGasFeeGasLimit = () => {
       className="advanced-gas-fee-gas-limit"
       margin={[4, 2, 0, 2]}
     >
-      <strong>
+      <strong>{t('gasLimitV2')}</strong>
-        <I18nValue messageKey="gasLimitV2" />
-      </strong>
       <span>{gasLimit}</span>
       <Button
         data-testid="advanced-gas-fee-edit"
@@ -78,7 +75,7 @@ const AdvancedGasFeeGasLimit = () => {
         onClick={() => setEditing(true)}
         type="link"
       >
-        <I18nValue messageKey="edit" />
+        {t('edit')}
       </Button>
     </Typography>
   );

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js

@@ -5,8 +5,8 @@ import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils'
 import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Button from '../../../ui/button';
-import I18nValue from '../../../ui/i18n-value';
 
 import { useAdvancedGasFeePopoverContext } from '../context';
 
@@ -14,6 +14,7 @@ const AdvancedGasFeeSaveButton = () => {
   const { closeModal } = useTransactionModalContext();
   const { updateTransactionEventFragment } = useTransactionEventFragment();
   const { updateTransaction } = useGasFeeContext();
+  const t = useI18nContext();
   const {
     gasLimit,
     hasErrors,
@@ -38,7 +39,7 @@ const AdvancedGasFeeSaveButton = () => {
 
   return (
     <Button type="primary" disabled={hasErrors} onClick={onSave}>
-      <I18nValue messageKey="save" />
+      {t('save')}
     </Button>
   );
 };

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js

@@ -20,7 +20,6 @@ import EditGasFeeButton from '../edit-gas-fee-button';
 import GasDetailsItem from '../gas-details-item';
 import Box from '../../ui/box';
 import Button from '../../ui/button';
-import I18nValue from '../../ui/i18n-value';
 import InfoTooltip from '../../ui/info-tooltip';
 import Popover from '../../ui/popover';
 import Typography from '../../ui/typography';
@@ -106,14 +105,9 @@ const CancelSpeedupPopover = () => {
           variant={TYPOGRAPHY.H6}
           margin={[0, 0, 2, 0]}
         >
-          <I18nValue
+          {t('cancelSpeedUpLabel', [
-            messageKey="cancelSpeedUpLabel"
+            <strong key="cancelSpeedupReplace">{t('replace')}</strong>,
-            options={[
+          ])}
-              <strong key="cancelSpeedupReplace">
-                <I18nValue messageKey="replace" />
-              </strong>,
-            ]}
-          />
           <InfoTooltip
             position="top"
             contentText={
@@ -151,7 +145,7 @@ const CancelSpeedupPopover = () => {
           </Box>
         </Box>
         <Button type="primary" onClick={submitTransactionChange}>
-          <I18nValue messageKey="submit" />
+          {t('submit')}
         </Button>
       </div>
     </Popover>

ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js

@@ -8,7 +8,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
 import Box from '../../ui/box';
 import ErrorMessage from '../../ui/error-message';
-import I18nValue from '../../ui/i18n-value';
 import Popover from '../../ui/popover';
 import Typography from '../../ui/typography/typography';
 
@@ -60,15 +59,13 @@ const EditGasFeePopover = () => {
               )}
               <div className="edit-gas-fee-popover__content__header">
                 <span className="edit-gas-fee-popover__content__header-option">
-                  <I18nValue messageKey="gasOption" />
+                  {t('gasOption')}
                 </span>
                 <span className="edit-gas-fee-popover__content__header-time">
-                  {editGasMode !== EDIT_GAS_MODES.SWAPS && (
+                  {editGasMode !== EDIT_GAS_MODES.SWAPS && t('time')}
-                    <I18nValue messageKey="time" />
-                  )}
                 </span>
                 <span className="edit-gas-fee-popover__content__header-max-fee">
-                  <I18nValue messageKey="maxFee" />
+                  {t('maxFee')}
                 </span>
               </div>
               {(editGasMode === EDIT_GAS_MODES.CANCEL ||
@@ -97,19 +94,16 @@ const EditGasFeePopover = () => {
                 tag={TYPOGRAPHY.Paragraph}
                 variant={TYPOGRAPHY.H7}
               >
-                <I18nValue
+                {t('learmMoreAboutGas', [
-                  messageKey="learmMoreAboutGas"
-                  options={[
                   <a
                     key="learnMoreLink"
                     target="_blank"
                     rel="noopener noreferrer"
                     href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
                   >
-                      <I18nValue messageKey="learnMore" />
+                    {t('learnMore')}
                   </a>,
-                  ]}
+                ])}
-                />
               </Typography>
             </Box>
           </div>

ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js

@@ -13,7 +13,6 @@ import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
 import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
-import I18nValue from '../../../ui/i18n-value';
 import InfoTooltip from '../../../ui/info-tooltip';
 import LoadingHeartBeat from '../../../ui/loading-heartbeat';
 import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display';
@@ -121,7 +120,7 @@ const EditGasItem = ({ priorityLevel }) => {
             {PRIORITY_LEVEL_ICON_MAP[icon]}
           </span>
         )}
-        <I18nValue messageKey={title} />
+        {t(title)}
       </span>
       <span
         className={`edit-gas-item__time-estimate edit-gas-item__time-estimate-${priorityLevel}`}

ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { NETWORK_CONGESTION_THRESHOLDS } from '../../../../../../shared/constants/gas';
 import { useGasFeeContext } from '../../../../../contexts/gasFee';
-import I18nValue from '../../../../ui/i18n-value';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { NetworkStabilityTooltip } from '../tooltips';
 
 const GRADIENT_COLORS = [
@@ -49,6 +49,7 @@ const determineStatusInfo = (givenNetworkCongestion) => {
 };
 
 const StatusSlider = () => {
+  const t = useI18nContext();
   const { gasFeeEstimates } = useGasFeeContext();
   const statusInfo = determineStatusInfo(gasFeeEstimates.networkCongestion);
 
@@ -81,7 +82,7 @@ const StatusSlider = () => {
           style={{ color: statusInfo.color }}
           data-testid="status-slider-label"
         >
-          <I18nValue messageKey={statusInfo.statusLabel} />
+          {t(statusInfo.statusLabel)}
         </div>
       </div>
     </NetworkStabilityTooltip>

ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js

@@ -5,7 +5,6 @@ import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { getIsMainnet } from '../../../../selectors';
 import Box from '../../../ui/box';
-import I18nValue from '../../../ui/i18n-value';
 import InfoTooltip from '../../../ui/info-tooltip/info-tooltip';
 import Typography from '../../../ui/typography/typography';
 
@@ -15,11 +14,9 @@ const GasDetailsItemTitle = () => {
 
   return (
     <Box display="flex">
-      <Box marginRight={1}>
+      <Box marginRight={1}>{t('gas')}</Box>
-        <I18nValue messageKey="gas" />
-      </Box>
       <span className="gas-details-item-title__estimate">
-        (<I18nValue messageKey="transactionDetailGasInfoV2" />)
+        ({t('transactionDetailGasInfoV2')})
       </span>
       <InfoTooltip
         contentText={

ui/components/app/gas-details-item/gas-details-item.js

@@ -7,9 +7,9 @@ import { COLORS } from '../../../helpers/constants/design-system';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import { getPreferences } from '../../../selectors';
 import { useGasFeeContext } from '../../../contexts/gasFee';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 import Box from '../../ui/box';
-import I18nValue from '../../ui/i18n-value';
 import LoadingHeartBeat from '../../ui/loading-heartbeat';
 import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
@@ -17,6 +17,7 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
 import GasDetailsItemTitle from './gas-details-item-title';
 
 const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
+  const t = useI18nContext();
   const {
     estimateUsed,
     hasSimulationError,
@@ -70,7 +71,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
             <Box marginRight={1}>
               <strong>
                 {estimateUsed === 'high' && '⚠ '}
-                <I18nValue messageKey="editGasSubTextFeeLabel" />
+                {t('editGasSubTextFeeLabel')}
               </strong>
             </Box>
             <div

ui/components/ui/i18n-value/i18n-value.component.js

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { useI18nContext } from '../../../hooks/useI18nContext';
-
-const I18nValue = ({ messageKey, options }) => {
-  const t = useI18nContext();
-  return t(messageKey, options);
-};
-
-I18nValue.propTypes = {
-  messageKey: PropTypes.string.isRequired,
-  options: PropTypes.array,
-};
-
-export default I18nValue;

ui/components/ui/i18n-value/index.js

@@ -1 +0,0 @@
-export { default } from './i18n-value.component';

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

@@ -7,7 +7,6 @@ import { submittedPendingTransactionsSelector } from '../../../selectors/transac
 import { useGasFeeContext } from '../../../contexts/gasFee';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
-import I18nValue from '../../../components/ui/i18n-value';
 import Button from '../../../components/ui/button';
 import Typography from '../../../components/ui/typography';
 import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
@@ -40,7 +39,7 @@ const TransactionAlerts = ({
     <div className="transaction-alerts">
       {hasSimulationError && (
         <ActionableMessage
-          message={<I18nValue messageKey="simulationErrorMessageV2" />}
+          message={t('simulationErrorMessageV2')}
           useIcon
           iconFillColor="var(--color-error-default)"
           type="danger"
@@ -65,29 +64,23 @@ const TransactionAlerts = ({
               variant={TYPOGRAPHY.H7}
             >
               <strong>
-                <I18nValue
+                {pendingTransactions?.length === 1
-                  messageKey={
+                  ? t('pendingTransactionSingle', [pendingTransactions?.length])
-                    pendingTransactions?.length === 1
+                  : t('pendingTransactionMultiple', [
-                      ? 'pendingTransactionSingle'
+                      pendingTransactions?.length,
-                      : 'pendingTransactionMultiple'
+                    ])}
-                  }
-                  options={[pendingTransactions?.length]}
-                />
               </strong>{' '}
-              <I18nValue messageKey="pendingTransactionInfo" />{' '}
+              {t('pendingTransactionInfo')}
-              <I18nValue
+              {t('learnCancelSpeeedup', [
-                messageKey="learnCancelSpeeedup"
-                options={[
                 <a
                   key="cancelSpeedUpInfo"
                   href="https://metamask.zendesk.com/hc/en-us/articles/360015489251-How-to-speed-up-or-cancel-a-pending-transaction"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                    <I18nValue messageKey="cancelSpeedUp" />
+                  {t('cancelSpeedUp')}
                 </a>,
-                ]}
+              ])}
-              />
             </Typography>
           }
           useIcon
@@ -138,7 +131,7 @@ const TransactionAlerts = ({
               tag={TYPOGRAPHY.Paragraph}
               variant={TYPOGRAPHY.H7}
             >
-              <I18nValue messageKey="lowPriorityMessage" />
+              {t('lowPriorityMessage')}
             </Typography>
           }
           useIcon
@@ -155,7 +148,7 @@ const TransactionAlerts = ({
               tag={TYPOGRAPHY.Paragraph}
               variant={TYPOGRAPHY.H7}
             >
-              <I18nValue messageKey="networkIsBusy" />
+              {t('networkIsBusy')}
             </Typography>
           }
           iconFillColor="var(--color-warning-default)"